DCIT 26 -Application

Development and Emerging

Technologies
Learning the Animate CC Interface
What we’ll cover in this chapter:
• Exploring the Animate CC interface
• Using the Animate CC stage
• Working with panels
• Understanding the difference between a frame and a keyframe
• Using frames to arrange the content on the stage
• Using layers to manage content on the stage
• Adding objects to the Library
• Testing your movie
We are going to take a walk through the authoring environment—called the Animate CC
interface—and point out the sights to give you an opportunity to play with some of the stuff we
will be pointing out. By the end of the stroll, you should be fairly comfortable with this tool called
Animate CC and have a fairly good idea of what tools you can use and how to use them as you
start creating Animate CC movies.

Getting Started
A couple of seconds after you double-click the Application icon to launch Animate CC, the Start
page, shown in Figure 1-1, opens. This page, which is common to all of the CC applications, is
divided into six discrete areas.

Figure 1-1.
The Start page
 • Open Recent Item: The documents listed are the ones opened recently. Provided you
haven’t moved them to another location or deleted them, clicking one will open it.
Clicking Open will let you browse for files not contained in the list.
• Create New: The middle area is where you can open a variety of new documents. It is
broken into three distinct sections to choose default templates and adjust the
corresponding stage size and frame rates suited for your project.

Creating a New Animate CC document

Let’s continue our stroll through Animate CC by creating a new Animate CC document. To do
this, simply click the HTML5 Canvas button in the Create New area of the Start page. This opens
the interface shown in Figure 1-2.

Animate CC Stage Panels

Tools
Animate CC Time Line

Figure 1-2. The Animate CC authoring environment

This interface is the feature-rich authoring environment that is the heart and soul of Animate CC.
Let’s now step into that big white area on the screen and take a moment to look around. The stage,
that large white area in the center of the screen, is where the action happens.

On the far-right edge of the screen is a set of tools that allow you to draw, color, and otherwise
manipulate objects on the stage.

To the right of the stage are the panels. Panels are used to modify and manipulate whatever object
you selected on the stage or to even add an object to the stage. These objects can be text,
photographs, line art, short animations, video, or even interface elements called components. You
can use the panels and the menus to change not only the characteristics of the objects but also how
the objects behave on the stage. Panels can be connected to each other (docked), or they can float
freely in the interface (floating) and can be placed anywhere you like. To move a panel simply,
click the Panel tab and drag it to a new location.

From our perspective, one of the more indispensable panels is the Properties panel. As you
become more comfortable with the application, this panel will become a very important place for
you. In fact, we can’t think of any chapter in this book where we don’t refer to this panel.

At the bottom of the interface is the Timeline panel, which long-time Animate CC users simply
refer to as the timeline. This is the place where the action occurs. As you can see, the timeline is
broken into a series of boxes called frames. The best way of regarding frames is as individual
frames of a film. When you put something on the stage, it will appear in a frame. If you want it to
move from here to there, it will start in one frame and move to another position on the stage in
another frame a little farther along the timeline. The box with the vertical red stem draped over the
timeline is called the playhead. Its purpose is to show you the current frame being displayed.
When an Animate CC movie is playing through a browser or being tested, the playhead is in
motion, and the user is seeing the frame where the playhead is located. This is how things appear
to move in Animate CC. Another thing you can do with the playhead is drag it across the timeline
while you are creating the Animate CC movie. This technique is known as scrubbing the timeline
and has its roots in film editing.

Managing Your Workspace

As you may have surmised, the Animate CC authoring environment is one busy place, and if you
talk to any Animate CC developer or designer, he or she will also tell you it can become one
crowded place as well. As you start creating Animate CC projects, you will discover that screen
real estate becomes a valuable commodity because it fills up with floating panels and other
elements. Thus you need to know how to manage the panels. Here’s how:
• Collapse panels: At the top of Panels area on the right side of the screen is an icon that
looks like a double arrow (see Figure 1-3). Click it, and the panels will collapse and
become icons. If you click the arrow above the panel, the Tools panel changes from a
series of Tool icons to a single icon. The process is called panel collapse, and it is
designed to free up screen space in Animate CC. There are three views for panels: fully
expanded, partially collapsed showing the icon and panel name, completely collapsed to
just the icon.
 Figure 1-3. Panels can be
collapsed to give you more screen
space

• Show collapsed panels as icons only: Sometimes you need the extra interface room
taken up by the panel’s name. Roll the mouse pointer to the left or right edge of the panel
strip. When the mouse pointer changes to a double-sided arrow, click and drag to expand
and show the panel’s name, or shrink to the width of the icons in the strip.
• Open and close drawers: Click an icon, and the contents of that panel will fly out, as
shown in Figure 1-4. Click it again, and it will slide back. These panels that fly out and
slide back are called drawers.

Figure 1-4. Click a panel icon, and the contents slide out. Click the icon again, and they slide in
 • Minimize panels: Another method of buying screen real estate is to minimize panels
you aren’t using. Double-click the tab with the panel’s name, and the panel collapses
upward. Double-click it again, and it expands to its original dimensions.
• Close panels: Right-click (Windows) or Control+click (Mac) a panel, and select Close
from the context menu. This not only closes the panel but also removes it from your
workspace. To get it back, simply open the Window menu and click the name of the
panel you closed to restore it.
• Add panels to sets: A collection of panel icons, as shown in Figure 1-5, is called a panel
set. To create a customized panel set, drag one panel icon onto another panel.

When you release the mouse, the panel will expand to include the new panel added.
To remove a panel from a set, just drag the panel icon to the bottom of the stack.

Figure 1-5. A typical panel set

Setting Document Preferences and Properties

Managing the workspace is a fundamental skill, but the most important decision you will make
concerns the size of the Animate CC stage and the space it will take up in the browser. That
decision is based on a number of factors, including the type of content to be displayed and the
items that will appear in the HTML document beside the Animate CC movie. These decisions all
affect the stage size and, in many respects, the way the document is handled by Animate CC. These
two factors are managed by the Preferences dialog box and the Document Properties panel.
Document Preferences
To access preferences, select Edit ➤Preferences (Windows) or Animate CC ➤Preferences (Mac).
This will open the Animate CC Preferences dialog box. We are concerned with the general
preferences in the Category area of the window. Click General, and the window will change to
show you the general preferences for Animate CC, as shown in Figure 1-6.
Figure 1-6. The General preferences can be used to manage not only the workspace but also items
on the stage (Ctrl+U)

If you examine the selections, you will realize they are fairly intuitive. You can change the interface
from dark to light, how many Undo levels are available to you and even the colors that will be used
to tell you what type of object has been selected on the stage.

Click the Cancel button to close the Preferences dialog box. When it closes, let’s wander back to
the stage and explore how a document’s properties are determined.

Document Settings
To access the Document Settings dialog box, use one of the following techniques:
• In the Properties panel, click the Advanced Settings button in the Properties area—not
the Publish area. This will open the Document Settings dialog box shown in Figure 1-7.
Figure 1-7. Set the stage size through the Document Settings dialog box

• Select Modify ➤Document.

• Press Ctrl+J (Windows) or Cmd+J (Mac).
• Right-click (Windows) or Control+click (Mac) the stage and select Document
Properties from the context menu.

Now that the Document Settings dialog box is open, let’s look around. The Dimensions input area
is where you can change the size of the stage. Enter the new dimensions and press the Enter
(Return) key. If you enter a value, you may need to press the Enter or Return key twice. Once to
accept the new entry and a second time to close the dialog box, or click the OK button, and the
stage will change. The Match Contents button is commonly used to shrink the stage to the size of
the content on the stage.

The Anchor area is not what you may think. Each selection determines how the stage will scale
when the dimensions of the stage are changed, not the content.

For example, if you change the Dimensions setting to a width of 400 pixels and height of 300
pixels, set the Background color option to #0033CC, select the Center anchor, and click OK, the
stage will shrink to those dimensions and change color to the blue chosen. The changes, as shown
in Figure 1-8, are also reflected in the Properties panel.
Figure 1-8. Changes made to the document properties are shown in the Properties panel

Zooming the Stage

There will be occasions when you discover that the stage is a pretty crowded place. In these
situations, you’ll want to be sure that each item on the stage is in its correct position and is properly
sized. Depending on the size of the stage, this could be difficult because the stage may fill the
screen area. Fortunately, Animate CC allows you to reduce or increase the magnification of the
stage through a technique called zooming. (Note that zooming the stage has no effect on the actual
stage size that you set in the Document Settings dialog box.)

To zoom the stage, click the Magnification drop-down menu near the upper-right corner of the
stage. The drop-down menu shown in Figure 1-9 contains a variety of sizes ranging from Fit in
Window to 800% magnification

Figure 1-9. Select a zoom level

using the Magnification drop-down
menu

Exploring the Panels in the Animate CC Interface

At this point in our stroll through the Animate CC interface, you have had the chance to play with
a few of the panels. We also suspect that by this point you have discovered that the Animate CC
interface is modular. By that we mean that it’s an interface composed of a series of panels that
contain the tools and features you will use on a regular basis, rather than an interface that’s locked
in place and fills the screen. You have also discovered that these panels can be moved around and
opened or closed depending on your workflow needs. In this section, we are going to take a closer
look at the more important panels that you will use every day. They include the following:
• The timeline • The Motion Editor
• The Library panel • The Tools panel
• The Properties panel • The Help panel

The Timeline
Here’s the secret behind how one becomes a proficient Animate CC designer: master the timeline,
and you will master Animate CC.

When somebody visits your site and an animation plays, Animate CC treats that animation as a
series of still images. In many respects, those images are comparable to the images in a roll of film
or one of those flip books you may have played with when you were younger. The order of those
images on the film or in the book is determined by their placement on the film or in the book. In
Animate CC, the order of images in an animation is determined by the timeline.

The timeline, therefore, controls what the users see and, more importantly, when they see it. To
understand this concept, let’s go for a walk in our favorite tambayan “The Batibot” while the leaves
are falling from the mango trees.

At its most basic, all animation is movement over time, and all animation has a start point and an
end point. The length of your timeline will determine when animations start and end, and the
number of frames between those two points will determine the duration of the animation. As the
author, you control those factors.

For example, Figure 1-10 shows you a simple animation. It is a leaf that falls from the top of the
stage to the bottom. From this, you can gather that the leaf will move downward when the sequence
starts and will continue to its final position at the bottom of the stage once it has twisted in the
middle of the sequence.

Figure 1-10. A simple animation

sequence
So, where does time come into play? Time is the number of frames between the start and middle
or middle and end points in the animation. The default timing in an Animate CC movie—called
frame rate— is 24 frames per second (fps). In the animation shown in Figure 1-11, the duration
of the animation is 48 frames, which means it will play for 2 seconds. You can assume from this
that the leaf’s middle location, where it twists, is the 24th frame of the timeline. If, for example,
you wanted to speed up the animation, you would reduce the length of the timeline to 12 frames;
if you wanted to slow it down, you would increase the number of frames to 72 or decrease the
frame rate.

Figure 1-11. Animation is a series

of frames on the timeline

So much for a walk in Batibot, di mo naman nakita si CRUSH! Let’s wonder over to the timeline
and look at a frame.

Frames
If you unroll a spool of movie film, you will see that it is composed of a series of individual still
images. Each image is called a frame, and this analogy applies to Animate CC.

When you open Animate CC, your timeline will be empty, but you will see a series of rectangles—
these are the frames. You may also notice that these frames are divided into groups. Most frames
are gray, and every fifth frame is numbered (see Figure 1-12), just to help you keep your place.
Animate CC movies can range in length from 1 to 16,000 frames, although an Animate CC movie
that is 16,000 frames in length is highly unusual.

Figure 1-12. The timeline is

nothing more than a series of
frames
A frame shows you the content that is on the stage at any point in time. The content in a frame can
range from one object to hundreds of objects, and a frame can include audio, video, code, images,
text, and drawings either singly or in combination with each other.

When you first open a new Animate CC document, you will notice that frame 1 contains a hollow
circle. This visual clue tells you that frame 1 is waiting for you to add something to it. Let’s look
at a movie that actually has something in the frames and examine some of the features of frames:
1. There is a text box, in frame 1, sitting at the bottom of the stage and a logo at the top. You
should also note the solid dot in the background, TextBox, and Logo layers. This indicates that
there is content in Frame 1 of each of those layers The empty layer above them has a hollow
dot, which indicates there is no content in that frame.
2. Place the mouse pointer on any frame of the timeline and right-click (Windows) or
Control+click (Mac) to open the context menu that applies to frames (Figure 1-13).

Figure 1-13. The context menu that applies to frames on the timeline
3. Place the mouse pointer at frame 30 of the TextBox layer, open the context menu, and select
Insert Keyframe. Repeat this step at frame 60 as well. What you will notice is that the timeline
changes to the series of gray frames and three black dots, as shown in Figure 1-14. These gray
frames represent a span of frames separated by keyframes.

An obvious question at this point is, “So, guys, what’s a keyframe?” Remember when we
talked earlier about animations and how they had a start point and an end point? In Animate
 CC, those two points are called keyframes; any movement or changes can only occur between
keyframes. In Animate CC, there are two types of keyframes: those with stuff in them
(indicated by the solid dot shown in frame 1 of Figure 1-14) and those with nothing in them.
The latter are called blank keyframes, and they are shown as frames with a hollow dot. The
first frame in any layer, until you add something to that frame, is always indicated by a blank
keyframe.

Figure 1-14. The timeline contains three keyframes

The Properties Panel

We have been mentioning the Properties panel quite a bit to this point, so now would be a good
time to stroll over to it and take a closer look. Before we do that, let’s go sit down on the bench
over there and discuss a fundamental concept in Animate CC: everything has properties.

What are properties? These are the things objects have in common with each other. Our class is
composed of male and female. We both have a common language property, English and Tagalog,
but we also have properties we don’t share. For example, “Ang girlfriend ko ay maganda, kaya
akin lang ang girlfriend ko!”

The panel, as shown in Figure 1-15, is positioned, by default, to the right of the screen. You can
move it elsewhere on the screen by simply dragging it into position and releasing the mouse. There
are locations on the screen where you will see a shadow or darkening of the location when the
panel is over it. This color change indicates that the panel can be docked into that location.
Otherwise, the panel will “float” above the screen.
Figure 1-15. The Properties panel
When an object is placed on the stage and selected, the Properties panel will change to reflect the
properties of the selected object that can be manipulated. For example, in Figure 1-16, a box has
been drawn on the stage. The Properties panel shows you the type of object that has been selected
and tells you that the stroke and fill colors of the object can also be changed. In addition, you can
change how scaling will be applied to the object and the treatment of the red stroke around the
box.

Figure 1-16. The Properties panel changes to show you the properties of a selected object that
can be manipulated (in this case, the size, location, and stroke and fill properties of the box on
the stage)
 Let’s experiment with some of the settings in the Properties panel,

1. In the Tools panel, click the Selection tool, which is the solid black arrow at the top of the
Tools panel (Figure 1-17).

Figure 1-17. Click a tool or use the keyboard to select it

2. Using the Selection tool, click once in the white area of the stage. The Properties panel will
change to show you that you have selected the stage and can change its color.

3. In the Properties panel, click the Background Color chip to open the Color Picker, as shown
in Figure 1-18. Click the medium gray on the left (#999999), and the stage will turn gray.
You have just changed the color property of the stage.

Figure 1-18. Color and stage dimensions are properties of the stage
 4. Click the text. The Properties panel will change to show you the text properties, as shown
in Figure 1-19, that can be changed. Click the color chip to open the Color Picker. When
it opens, click the white chip once. The text turns white.

Figure 1-19. Color is just one of many text properties that can be manipulated

5. Click the black box surrounding the image. The Properties panel will change to tell you
that you have selected a shape and that the fill color for this shape is black. It also lets
you know that there is no stroke around the shape. In the Position and Size areas are four
numbers that tell you the width, height, and X and Y coordinates of the shape on the stage.
Select the Width value and change it from 500 to 525. Change the Height number from
380 to 400. Finally, change the X and Y values for the selection to 5 and 23, as shown in
Figure 1-20. Each time you make a change, the selected object will get wider or higher.

Figure 1-20. The size and

the location of selections
can also be changed in the
Properties panel
The Tools Panel
The Tools panel, as shown in Figure 1-21, is divided into four major areas:
• Tools: These allow you to create, select, and manipulate text and graphics placed on the
stage.
• View: These allow you to pan across the stage or to zoom in on specific areas of the
stage.
• Colors: These tools allow you to select and change fill, stroke, and gradient colors.
• Options: This is a context-sensitive area of the panel. In many ways, it is not unlike the
Properties panel. It will change depending on which tool you have selected.

Figure 1-21. The Tools panel

If there is a small down arrow in the bottom-right corner of a tool, this indicates additional tool
options. Click and hold that arrow, and related tools will appear in a drop-down menu, as shown
in Figure 1-22.

Figure 1-22. Some tools contain extra tools, which are shown in a drop-down list
The Library Panel

The Library panel is one of those features of the application that is so indispensable to Animate
CC developers and designers that we simply can’t think of anybody who doesn’t use it . . .
religiously.

In very simple terms, it is the place where content, including video and audio, that is used in the
movie is stored for reuse later in the movie. It is also the place where symbols and copies of
components that you may use are automatically placed when the symbols are created or the
components are added to the stage.

Let’s wander over to the Library and take a look. Click the Library icon on the right side of the
screen, or click the Library tab if the panel isn’t collapsed. The Library will fly out, as shown in
Figure 1-23. For example if there is a Summer Palace image inside the Library, you will see that
the image is actually a library asset. Drag a copy of the image from the Library to the stage. Leave
it selected and press the Delete key. Notice that the image on the stage disappears, but the Library
item is retained. This is an important concept. Items placed on the stage are, more often than not,
instances of the item and point directly to the original in the Library.

Figure 1-23. The Library panel

Creative Cloud Library

If you are using Adobe Animate CC then you also have a Creative Cloud account. Your Creative
Cloud account lets you create a Library of assets from many of the Creative Cloud Desktop and
Mobile apps. For example, you can create personal and shared libraries to keep track of logos,
icons for web layouts, video clips, or your go-to brushes and color themes for illustrations. Your
Library items are automatically synced to your Creative Cloud account, so you can work with
them wherever you are, even if you're offline.

Your Creative Cloud library is available to you in Animate CC. To access it and use the items in
your personal or team’s Creative Cloud Library, click the Creative Cloud panel icon in the panels.
As shown in Figure 1-26, your panel opens and you can drag items from it to the Animate CC
stage. Items that can’t be used in Animate CC are grayed out and items that can be used in Animate
CC are lit up.

Figure 1-26. The Creative

Cloud Library panel