Frame-By-Frame Animation

The most basic form of animation is frame-by-frame animation. Because frame-by-frame animation employs unique drawings in each frame, it's ideal for complex animations that require subtle changes — for example, facial expressions. However, frame-by-frame animation also has its drawbacks. It can be very tedious and time-consuming to draw unique art for each frame of the animation. Moreover, all those unique drawings contribute to a large file size. In Flash, a frame with unique art is called a keyframe. As shown in Figure 11-1, frame-by-frame animation requires a unique drawing for every movement or change, which makes nearly every frame a keyframe.

Figure 11-1: When you use keyframes to gradually add to the artwork, the text appears to be written out letter by letter in the final animation.

The example shown in Figure 11-1 (keyframeText.swf) was created by inserting keyframes (F6) with the same text repeated in every frame and then working backwards to erase the letters in sequential keyframes. In the final effect, the text appears letter by letter until the whole word is written out in keyframe 10. This process of modifying your original artwork to create a sequence is one use of frame-by-frame animation. Another approach is to create completely unique artwork in a series of blank keyframes (F7).

As shown in Figure 11-2, the changes in the lines from frame to frame can add a lot more motion to the final animation. If you are a skilled illustrator, you will be able to keep enough consistency from keyframe to keyframe that it will seem to be the same shape or figure moving to a new position. If you are an aspiring illustrator, you will end up with a lot more variation among your drawings. As long as you are not trying to get a very precise sequence, this variation can actually be a lot of fun to watch — every line will dance and move in your final animation. Keep in mind that you are not restricted to just one series of frames; you can keep adding elements with their own keyframe sequences on separate layers.

Figure 11-2: A loosely sketched sequence can be paced by adding more "repeater" frames between the unique keyframe images.

On the CD-ROM 

The source files for the examples in this section are included on the CD-ROM — they're in the Keyframe folder of the ch11 folder.

The images shown in Figure 11-2 are from the file faceFramebyFrame.fla. This sequence of drawings was originally done on top of a short video clip of a real person. If you're learning to draw motion, video can be a good starting point — place it in a guide layer so it won't add to the file size of your final movie. If you work in a loose style, the roughness of the individual traced drawings can add more life to the final animation.

Cross-Reference 

Felix Stumpf creates very engaging animation by using video as a reference for lifelike motion. His fluid drawing style adds a unique flair to his finished Flash portfolio presentation at www.felixstumpf.de. Learn more about Felix's techniques in his tutorial for Chapter 14, "Character Animation Techniques."

Adding Keyframes

To add a keyframe to the Timeline, select the frame that you would like to convert into a keyframe. Then do one of the following:

• Convert a frame into a keyframe:

  • Right-click (or Control+click on Mac) the frame and select Insert Keyframe from the contextual menu.

  • Choose Insert ð Timeline ð Keyframe from the application menu.

  • Press F6 on the keyboard.

• Convert a frame into a blank keyframe:

  • Right-click (or Control+click on Mac) the frame and select Insert Blank Keyframe from the contextual menu.

  • Choose Insert ð Timeline ð Blank Keyframe from the application menu.

  • Press F7 on the keyboard.

Note 

If you select a frame in a span, the selected frame will be converted to a keyframe without adding to the length of the span. If you insert a keyframe at the end of a span, the keyframe will add to the length of the sequence. If you convert a frame in a span to a blank keyframe, all content will be cleared from the keyframe and the following frames of the span.

Tip 

If you need to make a sequence of keyframes, but you would rather not have to press F6 or F7 repeatedly to create individual keyframes, you can select a range of frames and use the Modify ð Timeline ð Convert to Keyframes (F6) or Modify ð Timeline ð Convert to Blank Keyframes (F7) command to quickly convert all selected frames to keyframes or blank keyframes.

Creating Frame-By-Frame Animation

The basic steps for creating a frame-by-frame animation are as follows:

1. Start by selecting the frame in which you'd like your frame-by-frame animation to begin.

2. If it's not already a keyframe, use Insert ð Timeline ð Keyframe (F6) to convert it.

3. Then either draw or import the first image for your sequence into this keyframe. Wherever possible, use symbols and flip, rotate, or otherwise manipulate them for reuse to economize on file size.

4. Select the next frame and either carry the artwork from the previous keyframe forward for modification by adding a keyframe (F6), or, if you want to create a completely new image from scratch or place an imported image, make the next keyframe a blank keyframe (F7).

5. Continue to add keyframes and change the contents of each keyframe until you've completed the animation. Finally, play back your animation by returning to the first keyframe and then selecting Control ð Play from the application menu (Enter or Return key), or preview the animation in the test movie environment by choosing Control ð Test Movie (Ctrl+Enter or z+Return).