adobe.com-Animation Learning Guide for Flash Timelines and keyframes

Animation Learning Guide for Flash: Timelines and keyframes

adobe.com/devnet/flash/learning_guide/animation/part03.html

Timelines in Adobe Flash Professional CS5 contain static and tweened content, which both look and behave
differently on a timeline. Static content is represented by gray frames, or gray frames with a dot in them. Motion-
tweened content is represented by a blue tween span, which is a section of frames that you can select
individually, move around, or manipulate as a single selection. Flash displays shape tweens as a series of light-
green frames, with an arrow drawn between keyframes. Shape tweens and motion tweens are created and
manipulated in different ways, which you will learn in the sections that follow.

Tween spans and static content are selected in different ways. Static content and shape tweens are selected as
a single frame if you are in the default frame-based selection mode. New motion tweens use a span-based style
of selection (even if you have frame-based selection active), which will be familiar to you if you've tried the span-
based selection model in previous versions of Flash.

Note: Span-based and frame-based selection models are controlled by Flash Preferences. This learning guide
assumes you have frame-based selection mode active in its exercise steps.

When you work with a Tween layer (any layer that contains a motion tween span), you will have a special
context menu that appears when you right-click a frame on that layer. For information on editing spans and the
options in the tween layer's context menu, see "Using the tween layer context menu."

Keyframes and property keyframes

Keyframes and property keyframes are locations on a timeline where you either define a new copy of an object
or changes to the properties of a motion-tweened object. A keyframe represents a new instance or copy of an
object, such as a new instance of a movie clip symbol. A keyframe is represented by a solid dot. When you
create a frame-by-frame animation, most frames are keyframes because you're creating new content in each
frame to create the illusion of movement.

When you create a motion tween, every tween span has a single target object for the entire duration of the tween
span. Therefore, the keyframe is always (and only) at the first frame of a tween span. Further changes on that
tween span are called property keyframes, since they are not copies of an object, but instead represent changes
to individual properties (x, y, scale, skew, rotation, or other properties) of the same object.

Note: Shape tweens do not share the concept of property keyframes or a single object per tween. A shape tween
creates an animation by interpolating between two shapes or objects, as it did in previous versions of Flash. For
more information on keyframing for shape tweens, see "Creating shape tweens."

The property keyframe concept was introduced in Flash CS4 Professional. In motion-tweened animation, you
define property keyframes at significant points on a tween span and let Flash create the animation between
those property keyframes (on the in-between or tweened frames). Therefore, a property keyframe is where you
want the animation to change. For example, you may want the blur to animate between frame 5 and frame 10.
You make the initial blur setting at a property keyframe at frame 5, and a different setting on another property
keyframe at frame 10. The blur then animates between those two settings between frames 5 and 10.

One way to think of the difference between property keyframes and traditional keyframes is to think about how
they relate to the properties of an object. In Flash, an object has properties like x position, y position, width,
height, and rotation. A traditional keyframe is actually a full copy of an object. That copy has an x,y value as well
as a width and height, so the keyframe contains a value for all of the object's properties. In the property keyframe
tweening model, Flash treats each property as a completely separate entity—instead of tweening between
multiple copies of an object—so each property has its own keyframes that define a value for the property at a
specific time. For example, Rotation can have a keyframe at frame 1 and frame 20, and Width can have
keyframes at frames 2, 5, 10, and 15. The use of property keyframes is consistent with other animation tools

1/4

such as Adobe After Effects. This model is much more flexible and powerful than traditional keyframes, as you
will learn elsewhere in the Animation Learning Guide for Flash.

Keyframes and property keyframes are indicated in the Timeline, and (for a tween span) in a timeline and also in
the Motion Editor. In the Timeline, a keyframe with content (a new object) on it is represented by a solid circle,
and a blank keyframe is represented by an empty circle within the frame. Property keyframes (changes in a
property for a tweened object but not a change of the object itself) are represented by a small diamond.
Subsequent frames that you add to the same layer (that don't have a solid circle) have the same content as the
keyframe.

Frames in the Timeline

Motion tweens are indicated by a black dot at the beginning of the tween span; intermediate tweened frames
have a light blue background (see Figure 2).

Figure 2. A motion tween.

Motion tweens can have property keyframes, which are represented
as small diamonds along the tween span (see Figure 3). These can be visible or hidden based on property type,
or completely visible or hidden. This functionality is accessed through the tween span context menu (View
Keyframes > keyframe type or all).

Figure 3. A motion tween with property keyframes. These blue frames are
commonly referred to as "tween frames."

Note: To select one of the tween frames, first Control-click (Windows) or Command-click (Mac) the frame. Then
you can modify it further—drag the frame to a new location on the span, right-click to copy its properties, and so
on.

A motion tween is always on a tween layer, which is represented in the Timeline with a special icon (see Figure
4).

Figure 4. A motion tween is on a tween layer. No exceptions.

Shape tweens are indicated by a black dot at the beginning
keyframe; intermediate frames have a black arrow with a light green background (see Figure 5).

Figure 5. A shape tween.

A single keyframe is indicated by a black dot. Light gray
frames after a single keyframe contain the same content
with no changes and have a black line with a hollow
rectangle at the last frame of the span (see Figure 6).

Figure 6. A keyframe that contains unchanging content and
spans numerous frames. These gray frames are commonly
called "static frames."

A small a indicates that the frame has frame scripts
assigned to it with the Actions panel (see Figure 7).

Figure 7. A frame that contains associated scripts.

A series of keyframes with a light grey background might
indicate a frame-by-frame animation (see Figure 8).

2/4

Figure 8. Several successive keyframes might represent a
frame-by-frame animation.

A hollow circle represents a blank (or empty) keyframe, and
white frames represent frames with no content (see Figure
9). This frame begins a section with no content on the layer. For example, if you have an instance that blinks on
a layer, you might insert blank keyframes where you do not want the instance to appear.

Figure 9. A blank keyframe with numerous successive blank
frames, which all contain no content.

Adding and removing keyframes

To add a keyframe on a normal (non-tween) layer, do one of the following:

Select a frame in the Timeline and select Insert > Timeline > Keyframe.
Right-click (Windows) or Control-click (Mac) a frame in the Timeline and select Insert Keyframe.
Select a frame and press F6 (if the frame already has a keyframe, it inserts a new keyframe after the
current one).

To remove keyframes from normal non-tween layers, do one of the following:

Select a keyframe in the Timeline and select Modify > Timeline > Keyframe.
Right-click (Windows) or Control-click (Mac) a frame in the Timeline and select Clear Keyframe.
Select a keyframe and press Shift + F6.

Tween layers already have a keyframe at the first frame, so you already have the keyframe in creating a tween
span. What you add on the tween span are property keyframes, which we will cover later. And to remove a
keyframe on a tween layer, it essentially means that you remove the target object of that tween layer (the
instance that you're tweening).

To add and remove property keyframes, see the following sections of the Animation Learning Guide for Flash:
Motion Editor:

"Modifying keyframes (control points) in graphs "
"Why use the Motion Editor?"

Layers in the Timeline

When you create a motion tween, the layer state changes to a tween layer. Any layer that has a tween span on it
changes to a tween layer. A tween layer can hold tween frames (in a tween span), static frames (for example, a
frame with a non-animated movie clip), and blank or empty frames (such as a blank keyframe).

To differentiate tween layers from other layer types, a new icon appears to the left of the layer name (see Figure
10).

Figure 10. A tween layer, next to a normal layer that doesn't
have a tween on it.

If you have an animated mask, the layer icon changes again
(see Figure 11).

Figure 11. An animated mask layer looks like this.

If you use an animation on a guide layer, the icon

3/4

changes too (see Figure 12).
Figure 12. If a tween span lives on a guide layer, the
icon changes to this.
There are other layer types, like inverse kinematics (IK) pose layers. See Figure 13 to compare the types.
Figure 13. The various layer states in
Flash. Refer to the name of the layer to
know what state it's in.

Where to go from here

Read Working with timelines in the
Flash Professional online help for more
information about frames, keyframes,
organizing layers, guide layers, multiple
timelines, and more. To learn more
about keyframing for shape tweens, see
"Creating shape tweens."
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

4/4