Showcase and discover digital art at yex

Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

Creating Keyframes for Animations

Creating Keyframes for Animations

A keyframe is a frame in which you define changes in the animation. When you create a frame-by-frame animation, most frames are keyframes. In a tweened animation, you define keyframes at significant points in the animation and let Flash create the contents of the frames in between. Flash displays the interpolated frames of a tweened animation as light blue or light green and with an arrow drawn between keyframes. Because Flash documents save the shapes in each keyframe, you should create keyframes only at those points in the artwork where something changes.

Keyframes are indicated in the Timeline: A keyframe with content on it is represented by a solid circle; an empty keyframe is represented by an empty circle within the frame. Subsequent frames that you add to the same layer have the same content as the keyframe.

To create a keyframe, do one of the following:

  • Select a frame in the Timeline and select Insert > Timeline > Keyframe.
  • Right-click (Windows) or Control-click (Macintosh) a frame in the Timeline and select Insert Keyframe.

Tweens are placed on the Timeline. You can also place code that animates instances on the Timeline. The appearance of your animation can differ, depending on the techniques you use to create your animation.

Motion tweens are indicated by a black dot at the beginning keyframe; intermediate tweened frames have a black arrow with a light blue background (see Figure 3).

Motion tween

Figure 3. Motion tween

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

Shape tween

Figure 4. Shape tween

A dashed line indicates that the tween is broken or incomplete, such as when the final keyframe is missing (see Figure 5).

Broken shape tween

Figure 5. Broken 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 show a black line with a hollow rectangle at the last frame of the span (see Figure 6).

Keyframe that contains unchanging content and spans numerous frames

Figure 6. Keyframe that contains unchanging content and spans numerous frames

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

Frame that contains associated scripts

Figure 7. Frame that contains associated scripts

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

Several successive keyframes representing a frame-by-frame animation

Figure 8. Several successive keyframes representing a frame-by-frame animation

A hollow circle represents a blank keyframe, and white frames represent frames with no content. 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.

Blank keyframe with numerous successive blank frames, all containing no content

Figure 9. Blank keyframe with numerous successive blank frames, all containing no content

Comments