ADOBE ANIMATE CC

GETTING STARTED WITH ANIMATE

(formerly FLASH CC)

Adobe Animate CC is a part of the Adobe Creative Cloud. It is a time-based authoring

environment that lets you create vector animations, advertisements, multimedia content,
immersive experiences, applications, games, and more for the Web, mobile phones and other
embedded devices. It consists of the following:
 Animate authoring program – an integrated development environment (IDE) that
contains all the information required to develop, design and test Animate
document
 Flash player – a virtual machine that contains only the information needed to
display the Animate document

ADOBE ANIMATE CC USER INTERFACE

 PARTS OF ANIMATE UI

A Tabbed Document windows B Application bar C Workspace switcher D Panel title bar
E Control panel F Tools panel G Collapse To Icons button H Four panel groups in vertical
dock

IT Instructor: Genalyn D. Villafuerte 1

ADOBE ANIMATE CC

1. Stage – the rectangular area where you place graphic content when creating Animate
documents
2. Tools panel (Ctrl+F2) – contains tools that let you draw, paint, select, and modify artwork,
as well as change the view of the Stage
3. Timeline (Ctrl+Alt+T) – organizes and controls a document’s content over time in layers
and frames
Frame - the foundation of Animate document; Animate document divides lengths
of time into frames
4. Properties panel/Property Inspector (PI) (Ctrl+F3) – provides easy access to the most
commonly used attributes of the current selection, either on the Stage or in the Timeline
5. Library panel (Ctrl+L) – where you store and organize symbols created in Animate, as
well as imported files, including bitmap graphics, sound files, and video clips
6. Color panel (Ctrl + Shift + F9) – to create and edit colors and gradient fills
7. Swatches (Ctrl + F9) – to pick colors; organizes colors and color palettes

To zoom in/out the Stage view Ctrl + or Ctrl -

To navigate the Stage Spacebar + drag
To rotate the Stage use Rotation tool
To switch to other workspace Window > Workspaces > select the workspace
name

WORKING WITH ANIMATE DOCUMENT

 CREATING NEW DOCUMENT

To create new Animate document File > New (Ctrl + N) > select Type: ActionScript 3.0
To modify Animate document Modify > Document (Ctrl + J)
-or- click an empty space on the Stage > modify
from the Properties panel

Document Properties:
1. Frame rate - the speed at which the movie will be played
24 fps – default frame rate in Animate
2. Stage Size - dimension or stage’s width and height in pixels
3. Stage Background Color

 PUBLISHING ANIMATE DOCUMENT

Publish command creates an Animate SWF file and an HTML document that inserts
your Animate content in a browser window. You can publish the FLA file in alternative file
formats like GIF, JPEG, etc. —with the HTML needed to display them in the browser window.

To view animation Control > Play (Enter key)

IT Instructor: Genalyn D. Villafuerte 2

 ADOBE ANIMATE CC

To test movie (creates SWF) Control > Test (Ctrl + Enter)

To view or edit publish settings File > Publish Settings (Ctrl + Shift + F12)
-or- in the Property Panel, click the Publish
Settings… button
To publish movie File > Publish (Shift + Alt + F12)

DRAWING AND PAINTING

 PARTS OF A SHAPE
1. Stroke – the path outline of the shape
A stroke can have weight (thickness), color, and dash pattern
2. Fill – the color or gradient interior area of the shape
A fill can be a solid, gradient (linear and radial), or bitmap.
You can also create an outlined shape with no fill by using No Color button as a fill, or you can
create a filled shape with no outline by using No Color button as a stroke.

Concepts:
 A shape consists of a stroke and a fill, which are treated separately.
When a shape has both a stroke and a fill, they are considered
separate graphic elements that can be selected and moved
independently.

 Animate connects two shapes and segments the lower shape.

When you draw shapes that overlap each other in the same layer, the top-most shape cuts
away the part of the shape underneath it that it overlaps.
Ways not to overlap objects:
1. Use layers
2. Group objects
3. click Object Drawing mode in Tools panel

Merge Drawing Mode – default drawing mode Object Drawing Mode – lets you overlap shapes
that automatically merges shapes that you draw without altering their appearance if you move
when you overlap them them apart, or rearrange their appearance

IT Instructor: Genalyn D. Villafuerte 3

 ADOBE ANIMATE CC

 A fill color bisected by the stroke represents a discrete segment that can edit individually.
When you draw a line across another line or painted shape, the overlapping lines are divided
into segments at the intersection points.

 THE TOOLS PANEL

Selection tools:
1. Selection (V) – to select and move the entire object; you can
use the options to snap, smoothen or straighten the object
2. Subselection (A) - to reshape an object
3. Free Transform (Q), Gradient Transform (F) – to rotate,
move, skew, and distort an object; and to scale, rotate, and
change the direction of the gradient fill in an object
4. Lasso (L), Polygon (L), Magic Wand (L) – to select objects by
drawing either a freehand, a straight-edged, or color
similarity
Drawing tools:
5. Text (T) – to create text as a vector
6. Line (N) – to draw a straight line segment
7. Rectangle (R), Rectangle Primitive (R) – to draw a
rectangular shape, and to change its corner radius
8. Oval (O), Oval Primitive (O) – to draw an oval shape, and to
change its start angle, end angle, and inner radius
9. PolyStar – to draw polygons and star shaped objects
Editing tools:
10. Paint Bucket (K) – to fill shape with solid colors, gradient, and
bitmap fills
11. Ink Bottle (S) – to change stroke color, width, and style
12. Eyedropper (I) – to create sample color; to copy fill and
stroke attributes from one object and apply them to another
object; to sample the image in a bitmap to use as fill
13. Eraser (E) – to erase a section of the artwork in the Stage
View tools:
14. Hand (H), Rotation (H) – to move the Stage in all the
directions without affecting the magnification
15. Zoom (Z) – to magnify (zoom in) and demagnify (zoom out)
Snap to Objects the Stage
Object Drawing Mode (J) Color tools:
16. Stroke Color
17. Fill Color

I.T. Instructor: Genalyn D. Villafuerte 4

ADOBE ANIMATE CC

To toggle between the Merge and Object select the Object Drawing button from the
Drawing modes Options category of the Tools panel (press J)
To change the stroke and fill colors select the shape you want to select, then choose a
fill or stroke color using the Tools or Properties
panels
-or- choose a fill or stroke color, then select Paint
Bucket or Ink Bottle and click on the object
To transform object Modify > Transform (Q)
-or- use the Transform panel (Ctrl + T) to edit Scale,
Rotation, and Skew
To duplicate object Edit > Duplicate (Ctrl + D)
To group shapes Modify > Group (Ctrl + G)
To ungroup shapes Shift + Ctrl + G
To create and edit gradient fill (a use the Color panel, select gradient type: Linear or
multicolor fill in which one color gradually Radial
changes into another color)
To copy object or text Alt + drag the object or text on the Stage

IMPORTING BITMAPS

To import bitmap image
To use the bitmap image
To break apart a bitmap (to convert a
bitmap instance to a shape)
File > Import > Import to Stage (Ctrl + R)
-or- File > Import > Import to Library
-or- paste the bitmap onto the Stage
drag the bitmap icon from the Library panel onto the
Stage
Modify > Break Apart (Ctrl + B)
 for text block or symbol: break apart twice (Ctrl +
B + B)

I.T. Instructor: Genalyn D. Villafuerte 5

ADOBE ANIMATE CC

LAYERS, FRAMES, AND THE TIMELINE

Layers – transparent sheets that help you organize the artwork in Stage
Frames – the length of time; used to organize and control the contents of Animate document
Frame numbers – identify the frames
Playhead – (red indicator line) to indicate the current frame displayed on the Stage

To create new layer/folder click New Layer button / New Folder button
To rename layer double click the layer/folder name
To delete layer/folder click Delete button
-or- drag the layer to the Delete button
Lock/unlock the layer/folder click Lock column to the right of the layer name
Show/hide the layer/folder click Eye column to the right of the layer name
To rearrange layer drag the layer
To distribute objects to individual Modify >Timeline > Distribute to Keyframe (Shift +
keyframes Ctrl + K)
-or- right click the object on the Stage > Distribute to
Keyframes
To distribute objects to layers Modify >Timeline > Distribute to Layers (Shift + Ctrl +
D)
-or- right click the object on the Stage > Distribute to
Layers
To insert frame(s) in the Timeline, right click the frame > Insert Frame
(F5)
To remove frame(s) in the Timeline, right click the frame > Remove Frame
(Shift + F5)
To select multiple frames click the first frame and Shift+click (for contiguous
frames) or Ctrl+click (for non-contiguous frames)
additional frames
To move frame(s) drag the frame(s) to the other frame or layer
To copy frame(s) Alt+drag the frame(s) to the other frame or layer
Change the layer’s properties Double click the layer icon

I.T. Instructor: Genalyn D. Villafuerte 6

ADOBE ANIMATE CC

CREATING FRAME-BY-FRAME ANIMATION

Keyframe is a frame defining a change in animation.

To convert a frame to keyframe (create
new keyframe)
To insert a blank keyframe
To extend the duration of a keyframe
To change the length of a tweened
sequence
To move a keyframe or frames in the
animation
To convert a keyframe to frame
To reverse an animation sequence
in the Timeline, right click the frame > Insert
Keyframe (F6)
in the Timeline, right click the frame > Insert Blank
Keyframe (F7)
Alt + drag the keyframe to the final frame of the
animation
drag the starting or ending keyframe left or right
select it and drag to the desired location
right click the keyframe > Clear Keyframe
select all frames in the animation, right click >
Reverse Frames

 Frame-by-frame animation – changes the contents of the Stage in every frame and is best suited
to complex animation
increases file size more rapidly because it; every frame is a keyframe
To create frame-by-frame animation 1. Convert a frame to keyframe where the
animation is to start
2. Create the artwork for the first frame of the
sequence (Use drawing tools, paste graphics
from the Clipboard, or import a file)
3. Click the next frame and convert it to
keyframe (F6 or F7)
4. Alter the frame’s content on the Stage to
develop the next increment of the animation
5. Repeat steps 1-4 to complete the animation

Onion Skinning
Onion Skin – simultaneously view several frames of an animation on the Stage.
To apply onion skin 1. In the Timeline, click the Onion Skin button
2. Drag the Start Onion Skin and End Onion Skin
markers in the Timeline header to
superimposed as one frame in the Stage.

I.T. Instructor: Genalyn D. Villafuerte 7

ADOBE ANIMATE CC

CREATING TWEEN ANIMATION

Tween animation – defines starting and ending keyframes and let Animate interpolates the contents
of frames in between

Types of Tween Animation:

 Shape Tween – creating the effect of one shape transforming or morphing into another shape.
You can also tween the shape’s position, color, size, rotation, skew, and ease.
To shape tween 1. Convert a frame to keyframe where the
animation is to start
2. Draw the shape or convert the object to
shape (Ctrl + B) for the first frame of the
(light green with an arrow)
sequence
3. Click the last frame and convert it to
keyframe (F6 or F7)
4. Draw another shape or change shape’s
properties to develop the last stage of the
animation
5. In the Timeline, right click any frame
between the first and last keyframes >
Create Shape Tween

Shape Hint
Shape hints tell Animate which points on the beginning shape should correspond to specific
points on the end shape.
- Shape hints is used to control more complex or improbable shape changes
- Shape hints contain letters (a through z) for identifying which points correspond in the
starting and ending shapes. You can use up to 26 shape hints.
- Shape hints are yellow in a starting keyframe, green in an ending keyframe, and red
when not on a curve.
- Shape hints work best if you place them in counterclockwise order beginning at the top-
left corner of the shape.
To add shape hints 1. Select the first keyframe in a shape tween
animation
2. Modify > Shape > Add Shape Hint (Ctrl + Shift
+ H)
3. Drag the beginning shape hint (red circle with
the letter a) somewhere on the shape.
4. Select the last keyframe.
5. Drag the ending shape hint (green circle with
the letter a).

I.T. Instructor: Genalyn D. Villafuerte 8

ADOBE ANIMATE CC

6. Repeat steps 1-5 to add additional shape

hints.
To view all shape hints View > Show Shape Hints
To remove shape hints Drag the shape hint off the Stage or
Modify > Shape > Remove All Hints

 Classic [Motion] Tween – an older way of creating tweened animation in Animate

- similar to the newer motion tween
- cannot tween 3D properties
- defining keyframes at significant points in the animation and Animate creates the
contents of frames in between
To convert selected object to symbol
To classic tween
(lilac with an arrow)
Modify > Convert to Symbol (F8)
1. Convert a frame to keyframe where the
animation is to start
2. Create a graphic symbol, group, or text
block (or convert a shape to symbol)
3. Click the last frame where you want the
animation to end and convert it to
keyframe (F6 or F7)
4. Change the object’s properties (position,
size, rotation, skew, color/tint, alpha, or
ease) to develop the last stage of the
animation
5. In the Timeline, right click any frame in-
between > Create Classic Tween

Ease In Ease Out

Easing creates a more natural appearance of acceleration or deceleration by gradually
adjusting the rate of change.
To produce a more realistic sense of motion, apply easing to the classic tween.
To control the speed of the classic tween
To apply easing to tween animation 1. Click any frame between the first and last
keyframes
2. In Property Panel, drag or enter a value in Ease
field
1 to 100 value – begin the tween rapidly and
decelerate the tween toward the end of the
animation
-1 to -100 value – begin the tween slowly and
accelerate the tween toward the end of the animation

I.T. Instructor: Genalyn D. Villafuerte 9