Frame-by-Frame Animation | Macromedia Studio MX Bible

< Day Day Up >

Frame-by-frame animation is the traditional way of making animations such as cartoons. Every frame has a slightly different image on it to produce the appearance of movement. This is a long and tedious process but at times the only way to achieve the desired results. For a frame-by-frame animation, every frame is a keyframe and the image changes slightly in each frame. To get a better feel for a frame-by-frame animation, follow these steps:

Open a new document.
Choose File ® Import and from the Chapter 27 folder select HighHeron.swf. Click the stage to place it. This is an animation that was created in FreeHand.
Click Frame 1 and notice the content (Figure 27-3). Move the playhead to Frame 2, Frame 3, and so on. The position of the bird and wings changes in every frame, thus the need for a keyframe. You'll also notice that every frame has a solid black dot indicating that it is a keyframe.

Figure 27-3: A frame-by-frame animation showing the Timeline with keyframes for each movement change

Frame-by-frame animations produce larger file sizes because each frame contains different content. In the following sections, you learn about tweening. Tweening reduces the file size because it uses symbols that are altered to achieve movement. Because of the use of symbols there are fewer actual objects for the browser to download. It's this reusable content that makes Flash so powerful.

Onion skinning

The onion skin feature is a great way to see the "pages" of your animation. It's used to assist you in placement of objects in your keyframes. You can see a faint image or just the outline of the other frames.

To turn the onion skin option on, click the icon at the bottom of the Timeline. In Figure 27-4 you can see the onion skin option is turned on, but for this bird it would be difficult to use it for placement. If you use the Outline option, click the Onion Skin Outlines icon as seen in Figure 27-5. The position of the bird is much easier to see in this case. If you want to see the frames after the selected keyframe, click and drag the little hollow circle near the selected frame.

click to expand
Figure 27-4: Frame 10 is selected and the onion skin option is turned on.

Frames per second

The frames-per-second setting determines how many frames play in a second's time. If you make it too low, the animation is choppy when it plays. If you make it too fast, it may begin to drop frames on slower machines, producing a choppy movie. For the Web, it's a good idea not to go over 15 FPS. The default in Flash is 12 FPS, which is compatible with older computers with low processing speeds.

click to expand
Figure 27-5: Frame 10 is selected and the onion skin Outline option is turned on.

If you want to slow down an animation you would add more frames. To speed it up, use fewer frames. You can change the FPS settings using one of these options:

In the Timeline, double-click the FPS box to open the Document Properties dialog box. Change the FPS setting and click OK.
Choose Modify ® Document to open the Document Properties dialog box. Change the FPS setting and click OK.
Press Control/Command+J to open the Document Properties dialog box. Change the FPS setting and click OK.

Adding frames

If you need to add more frames, choose one of the following methods:

Insert your cursor where you want to add a frame and choose Insert ® Frames.
Insert your cursor where you want to add a frame, right (Control)+click, and choose Insert Frames.
Insert your cursor where you want to add a frame, and press F5.
To add multiple frames shift+select and press F5 (or one of the other methods for inserting frames).

Deleting frames

If you want to speed up a portion of your animation or delete unnecessary frames for optimization purposes, choose one of the following methods:

Select a frame or shift+select multiple frames, and choose Insert ® Remove Frames.
Select a frame or shift+select multiple frames, right/Control+click, and choose Remove Frames.
Select a frame or shift+select multiple frames, and press Shift+F5.

Reversing frames

Reversing frames comes in handy if you want to change the direction of an animation. To accomplish this, follow these steps:

Select the frames (Shift+select) you want to reverse.
Choose Edit ® Copy Frames.
Select the frame you want to put the reverse animation into and choose Edit ® Paste Frames.
To reverse the order, shift+select the pasted frames and choose Modify ® Frames ® Reverse.

Labeling a keyframe

When you want to add ActionScript you'll need to reference your keyframe. You could just use the frame number but it's much more difficult to remember. You can name only keyframes not frames. To label a keyframe, follow these steps:

Select the keyframe you want to label.
In the Property Inspector, enter the name in the Frame field on the left.
Look in the Timeline and notice a little red flag over the keyframe you added a label to.

Note

Flash enables you to label a frame in the Property inspector, but it's deceiving. If you do this and check the Timeline, the label is applied to the previous keyframe, not the selected frame.

Table 27-1 shows some frame and keyframe shortcuts.

Table 27-1: Frame and Keyframe Shortcuts
Command	Shortcut
F5	Add static frames
F6	Add a keyframe
Shift+F5	Delete frames
Shift_F6	Delete keyframes
F7	Add a blank keyframe

Changing the pivot point

If you want to give your animation an anchor point other than the center, you need to change the pivot point. To do this, follow these steps:

Open the head.fla from the Chapter 27 folder. This object has already been converted into a symbol.
Select Frame 2 and add a keyframe (F6).
Select the symbol on the stage (head object); then select the Free Transform tool. Notice the hollow circle in the center. This is the pivot point. To see how the object would rotate as it is now, place your cursor outside the object until you see the curved line with two arrows and then drag to rotate. Notice in Figure 27-6 that the object rotates from the center point.

Figure 27-6: The pivot point in the center and rotated to the right
Choose Edit ® Undo.
To move anchor or pivot point, simply drag the hollow circle to a new location. For this exercise, drag it to the bottom center. Now rotate toward the left and notice the difference (Figure 27-7).

Figure 27-7: The pivot point moved to the bottom center and rotated to the left
Select Frame 3 and add a keyframe. Select the Free Transform tool and rotate to the right. Press Enter/Return to play the simple animation. Figure 27-8 shows the animation with onion skin option turned on.

Figure 27-8: The object rotated to the right with the onion skin option turned on to show the rotated movement

< Day Day Up >