Everyday Computing Advanced Computing The Internet At Home Health, Mind & Body Making & Managing Money Sports & Leisure Travel Beyond The Classroom
Building Web Sites
Doing Business Online
Graphics & Animation
Using the Internet
Win a Trip to New York City to see Monty Python's SPAMALOT!
Macromedia Flash MX For Dummies

Animating with Flash Keyframes


Adapted From: Macromedia Flash MX For Dummies

Keyframes are the frames that are key to your animation. In frame-by-frame animation, every frame is a keyframe. In tweened animation, only the first and last frames of a tween are keyframes. By creating keyframes, you specify the duration and therefore the speed of an animated sequence.

To create a keyframe, select a frame on the Timeline and choose Insert --> Keyframe. For faster service, right-click (Windows) or Control+click (Mac) a frame on the Timeline and choose Insert Keyframe from the shortcut menu. You can also press F6.

You can change the display of the appearance of frames on the Timeline by clicking the Frame View button in the upper-right corner of the Timeline. This action brings up the Frame View pop-up menu. With this menu, you can

  • Set the width of frame cells to Tiny, Small, Normal, Medium, or Large.
  • Decrease the height of frame cells by choosing Short.
  • Turn on or off the tinting of frame sequences.
  • Choose to display a thumbnail of the contents of each frame. If you choose Preview, the thumbnail is scaled to fit the Timeline frame; if you choose Preview in Context, the thumbnail also includes any empty space in the frame.

Frame after frame after frame

If your animation isn't a simple motion in an easily definable direction or a change of shape (or color), you probably need to use frame-by-frame animation.

If you must, you must. Some complex animations just have to be created frame by frame. The basic procedure is simple.

To create an animation by using the frame-by-frame technique, follow these steps:

1. Select a frame in the row of the layer you want to use.

The animation starts in that frame.

2. Right-click (Windows) or Control+click (Mac) the frame and choose Insert Keyframe from the menu.

The first frame on a movie's Timeline is automatically a keyframe, so you don't have to create it.

3. Create the graphic for the first frame.

You can import a graphic, paste a graphic from the Clipboard, or use the Flash drawing tools.

4. Right-click (Windows) or Control+click (Mac) the next frame and choose Insert Keyframe again.

The next frame on the Timeline now has the same graphic as the preceding one.

5. Modify the graphic to create the second frame of the animation.

6. Repeat Steps 4 and 5 until you've created all the frames you need for your animation.

7. As you work, you can continually check your cool animation by pressing Enter to play it back.

Stillness in the night

Regular frames cannot contain changes. Therefore, if you insert a graphic in the first keyframe, the graphic remains throughout the Timeline until it reaches another keyframe with a new graphic.

For several reasons, you may need to copy objects over a number of frames. Sometimes, you want a still image to sit unmoving for a while on a layer of your animation — as a background image, for example — while your animation moves in front. A background gives context to your animated objects. Even animated objects often need to remain on the Stage after they've finished moving about.

To make this happen, add a new layer for your background or other object. With that layer active, create or paste your object (or objects) at the starting frame you choose. Then click your chosen ending frame and choose Insert --> Frame. Flash duplicates your image throughout all intermediate frames.

As a shortcut, after you have your object or objects in the starting frame, Alt+drag (Windows) or Option+drag (Mac) the frame along the Timeline until you reach the last frame that you want to contain the object. Flash copies the contents of the first keyframe through all the frames.

If you copy the objects to a keyframe, they remain on the Stage until the next keyframe.

Related Articles
Getting Acquainted with Flash 5
Creating Animation in Flash
Dealing with Imported Graphics
Drawing Precisely in Flash
Macromedia Flash: Symbol Types
Related Titles
Adobe Creative Suite 3 Design Premium All-in-One Desk Reference For Dummies
Creating Web Graphics For Dummies
Macromedia Flash MX 2004 For Dummies 
Macromedia Studio MX 2004 All-in-One Desk Reference For Dummies
Macromedia Flash 8 For Dummies