#32 Animating Frame by Frame
As you'll see in #36 and #38, Flash can automate mechanical kinds of motion through a process called tweening. But animation is most interesting when its motion isn't mechanical—when characters express their personality through the way they move (Figure 32a). To achieve that sort of expressive movement, you have to animate your characters one frame at a time. The basic procedure for frame-by-frame animation is short and simple:
- In the Timeline, select the cell in which you want the animation to begin.
- Press F7 to insert a blank keyframe.
- Draw the first frame of animation on the Stage.
- Press F6. Flash inserts a new keyframe immediately after the first one and copies the contents of the first into the new keyframe.
- Modify the drawing on the Stage to represent the next incremental movement.
- Repeat steps 4 and 5 as many times as necessary.
Figure 32a A character's idiosyncratic way of moving can be captured only by drawing it frame by frame.
Naturally, elements that stay the same from one frame to the next don't have to be redrawn in each new keyframe. Instead, put them on a separate layer in the Timeline (Figure 32b).
Figure 32b Because the drawing in each frame is slightly different from the previous one, frame-by-frame animation appears in the Timeline as a series of keyframes. Static background images should be put on a separate layer.
Each time you draw a new frame of animation, you'll want to make sure it flows smoothly from the frames that precede it. To do this, you can grab the pink rectangle at the top of the playhead and drag it back and forth through the Timeline at varying rates of speed—a procedure called scrubbing. As you scrub, the corresponding frames of animation play back on the Stage. Scrubbing often reveals slight glitches in the animation that you can then fix.
Once you have enough keyframes placed, you'll want to preview the animation at its proper frame rate, in any of these ways:
- Press Enter (Windows) or Return (Mac) to start the playhead moving through the Timeline. Press the same key to stop it. To move the playhead back to the beginning of the Timeline, press Control-Alt-R (Windows) or Command-Option-R (Mac).
- Make the Controller panel visible by choosing Window > Toolbars > Controller. The Controller offers a standard set of buttons for playing, stopping, and rewinding the movie.
- Use the menu commands Control > Play, Control > Rewind, and Control > Go to End.
In none of these cases do you have to stop the playhead manually. As soon as the playhead passes through all the frames and encounters empty cells, it knows it's at the end of the movie, and it stops on its own.
You can also generate a sample SWF file to test your movie (see #35).