Animation Learning Guide for Flash: Frame-by-frame animation

In Adobe Flash Professional CS5 a frame-by-frame animation changes the contents of the Stage in every frame and is best suited to a complex animation in which an image changes in every frame instead of simply moving across the Stage. This type of animation increases the file size more rapidly than tweened animation because Flash stores the values for each keyframe.

To create a frame-by-frame animation, you define each frame as a keyframe and create a different (typically modified) image for each frame. Each new keyframe on a layer typically contains the same contents as the keyframe preceding it because the contents of a frame are copied to the next keyframe when you select a frame and press F6. By selecting a frame and pressing F6, you can modify each new keyframe in the animation incrementally. In Figure 14, you can see that a frame-by-frame animation was used to move a pirate's head very slightly on sequential frames.

Often, you use the onion skin feature, enabled in Figure 14, to view incremental changes between each keyframe. The onion skin tool enables you to view multiple frames of the animation at once. For detailed information on using the onion skin feature, see "Onion skinning and editing multiple frames."

To create a frame-by-frame animation:

1. Create a new file and call it framebyframe.fla.
2. Select Frame 1 of Layer 1. This is where the animation will start.
3. Create a graphic using the drawing tools, such as the Rectangle, shape, or Brush tools. You can also paste a bitmap from the Clipboard or import a file (such as an Adobe Illustrator illustration).
4. Select the next frame on Layer 1 and create a second keyframe (F6). The contents of Frame 2 are the same as Frame 1 at this time.
5. Alter the contents of this frame on the Stage to develop the next increment of the animation. You might select the graphic and move it a couple pixels to the right, add some new lines to your drawing, or bend a line on a shape.
6. To complete your frame-by-frame animation sequence, repeat Steps 4 and 5 until you've built the motion you want.
7. To test the animation sequence, select Control > Play or Control > Test Movie. Or just scrub the timeline using the playhead (this means drag the red toggle above the frames back and forth).

In Flash Professional you can use various tools to edit your animations, such as commands to insert frames, modify keyframes, onion-skinning tools, and the ability to move your animations around timelines. After you create a keyframe or a frame, you can move it elsewhere in the active layer or to another layer, remove it, and make other changes. Only keyframes are editable. You can drag items from the Library panel onto the Stage to add the items to the currently selected keyframe.

Tip: To display and edit more than one frame at a time, use onion skinning and/or Edit Multiple Keyframes, covered next in "Onion skinning and editing multiple frames."

To insert frames in the Timeline, do one of the following:

• To insert a new frame, select Insert > Timeline > Frame.
• To create a new keyframe, select Insert > Timeline > Keyframe, or right-click (Windows) or Control-click (Macintosh) the frame where you want to place a keyframe, and select Insert Keyframe from the context menu.
• To create a new blank keyframe, select Insert > Timeline > Blank Keyframe, or right-click (Windows) or Control-click (Macintosh) the frame where you want to place the keyframe, and select Insert Blank Keyframe from the context menu.

To delete or modify a frame or keyframe, do one of the following:

• To delete a frame, keyframe, or frame sequence, select the frame, keyframe, or sequence and right-click (Windows) or Control-click (Macintosh) the frame, keyframe, or sequence and select Remove Frames from the context menu. Surrounding frames remain unchanged.
• To move a keyframe or frame sequence and its contents, select the keyframe or sequence, then drag to the desired location.
• To extend the duration of a keyframe, Alt-drag (Windows) or Option-drag (Macintosh) the keyframe to the final frame of the new sequence.
• To copy a keyframe or frame sequence by dragging, select the keyframe or sequence, then Alt-drag (Windows) or Option-drag (Macintosh) to the new location.
• To copy and paste a frame or frame sequence, select the frame or sequence and select Edit > Timeline > Copy Frames. Select a frame or sequence that you want to replace, and select Edit > Timeline > Paste Frames.
• To convert a keyframe to a frame, select the keyframe and select Modify > Timeline > Clear Keyframe, or right-click (Windows) or Control-click (Macintosh) the keyframe and select Clear Keyframe from the context menu. The cleared keyframe and all frames up to the subsequent keyframe are replaced with the contents of the frame preceding the cleared keyframe.
• To change the length of a tweened sequence, drag the beginning or ending keyframe left or right. To change the length of a frame-by-frame sequence, see the previous section, "Creating frame-by-frame animations."
• To add a library item to the current keyframe, drag the item from the Library panel onto the Stage.
• To reverse an animation sequence, select the appropriate frames in one or more layers and select Modify > Timeline > Reverse Frames. There must be keyframes at the beginning and end of the sequence.

Often, you use the onion skin feature, enabled in Figure 14, to view incremental changes between each keyframe (as shown in the Figure 15). This can be useful when creating frame-by-frame animations, described in previous sections of this article, or when working with static frames and motion tweens (described in Animation Learning Guide for Flash: Motion tweens).

Normally, Flash displays one frame of the animation sequence at a time on the Stage: you see the frame where the playhead currently is. To help you position and edit a frame-by-frame animation, you can view two or more frames on the Stage at once. When you turn on onion skinning, the frame under the playhead appears in full color, while surrounding selected frames (between two markers) are dimmed, making it appear as if each frame were drawn on a sheet of translucent onion-skin paper and the sheets were stacked on top of each other. Dimmed frames cannot be edited. Like onion skinning, when you turn on Edit Multiple Frames (see Figure 16), you see the keyframes within the selected span of frames. You can then edit all of the keyframes between these two markers at once.

To turn on onion skinning, click the Onion Skin or Onion Skin Outlines button near the bottom of the Timeline (see Figure 17). Drag the markers above the Timeline to view multiple frames at once (see Figure 18). Both onion skin and onion skin outlines are enabled for an animation on the Stage in Figure 15.

To simultaneously see several frames of an animation on the Stage, click the Onion Skin button. All frames between the Start Onion Skin and End Onion Skin markers (in the Timeline header) are superimposed as one frame in the Document window as shown earlier.

To control onion skinning display, do any of the following:

• To display onion-skinned frames as outlines, click the Onion Skin Outlines button.
• To change the position of either onion skin marker, drag its pointer to a new location. (Normally, the onion skin markers move in conjunction with the playhead.)
• To enable editing of all frames between onion skin markers, click the Edit Multiple Frames button. Usually onion skinning lets you edit only the current frame. However, you can display the contents of each frame between the onion skin markers normally, and make each available for editing, regardless of which is the current frame.

Note: Locked layers (those with a padlock icon active next to the layer name) aren't displayed when onion skinning is turned on. To avoid a multitude of confusing images, you can lock or hide the layers you don't want onion-skinned.

To change the display of onion skin markers, click the Modify Onion Markers button and select an item from the menu:

• Always Show Markers displays the onion skin markers in the Timeline header whether or not onion skinning is on.
• Anchor Onion locks the onion skin markers to their current position in the Timeline header. Normally, the Onion Skin range is relative to the current frame pointer and the Onion Skin markers. By anchoring the Onion Skin markers, you prevent them from moving with the current frame pointer.
• Onion 2/5/All (three separate options) displays two, five, or all frames on either side of the current frame.

You can use Edit Multiple Frames to make modifications to all instances within a selected number of frames. For example, if you have instances on frames 1, 5, and 10 and you want to move them all to the top of the Stage, and scale them larger, you can use Edit Multiple Frames to see and select all of the instances and make the change all at once.

Note: Edit Multiple Frames works with instances, and because a tween span has one instance and hence one keyframe, you cannot edit property keyframes using this feature. The instance at frame 1 of a tween span can, however, be selected and modified using Edit Multiple Frames. For more information on this, see "Working with the target object of a tween."

Read Timelines and animation in the Flash Professional online help to learn more about animation basics. Also watch the video Aligning objects with onion skinning and the grid (8:34) from Peachpit.