Requirements

Prerequisite knowledge

A basic knowledge of the Flash Professional workspace.

User level

Beginning

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 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).

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).

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).

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).

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).

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

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

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.

Note: If you use classic tweens, or see them in a document, they appear different from the frames in Figure 9. (For legacy information on working with classic tweens, including what they look like, see the Animation Learning Guide for Macromedia Flash 8.)

There are various different ways to view frames in the Timeline. For information, see the Timeline section of the Flash product documentation.

For more information on tween layers and spans, see Animation Learning Guide for Flash: Motion tween manipulations.

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:

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).

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

If you use an animation on a guide layer, the icon changes too (see Figure 12).

There are other layer types, like inverse kinematics (IK) pose layers. See Figure 13 to compare the types.

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."