Recipe 3.7. Changing Contents on Stage

Problem

You want to cause an element to undergo a change; for example, appearing, disappearing, or moving.

Solution

Create a new keyframe and modify the element in the new keyframe.

Discussion

Flash has two types of frames: keyframes and frames. Keyframes are special frames in which you can specify a change. The first frame of every layer in a timeline is always a keyframe. Frames merely extend the duration of keyframes. That is, frames are dependent on and inherit from keyframes; they cannot contain any information beyond that found in the preceding keyframe.

Keyframes and frames are represented differently as well. A keyframe is depicted in the timeline with a circle. A solid circle appears if there is stage content (such as graphics or text, but not ActionScript) in the keyframe. A hollow circle appears if the keyframe lacks stage content; these kinds of keyframes are called blank keyframes. Frames with contentboth keyframes and regular framesare shaded gray, while blank keyframes and frames are white. Because frames are dependent on the keyframe that precedes them, the pairing of a keyframe and all successive frames can be thought of as a unit; this unit is called a frame span. A frame span ranges from the keyframe to the last regular frame before the next keyframe or until no more frames exist in the timeline. The last frame in a frame span has an empty rectangle in it.

Keyframes are obviously more powerful than frames, but they also add (negligibly) to file size, because users have to download whatever information they contain, such as text, graphics, sounds, animation information, element coordinate positions, and so on. Use keyframes only when you want to change the contents of a given layer. For example, to make an element in frame 1 disappear after five seconds, you would insert 58 regular frames after the keyframe in frame 1, all of which would display the same element. In frame 60, you would insert a blank keyframe. When the playhead reached frame 60, Flash would remove the element from the stage, creating the change.

Creating a keyframe is similar to adding a regular frame. The menu command is Insert Keyframe, and the keyboard shortcut is F6. Unlike inserting new frames, when you insert a keyframe, the keyframe is added to the active frame, and not the next one. That is, if frame 60 is selected, and you add a frame, the new frame will appear in frame 61. But if you add a keyframe, frame 60 is converted to a keyframe. You should be aware of several other behaviors when inserting keyframes:

• When you insert a keyframe into a frame placeholder, all frames between the original last frame and the new keyframe are converted to regular frames.

• A newly inserted keyframe initially inherits the contents of the preceding keyframe-frame span. Because it is a keyframe, you can change or remove these contents by selecting them on the stage and moving them with the Arrow tool or by deleting them. Alternatively, if appropriate, you can insert a blank keyframe by choosing Insert Blank Keyframe.

• You can insert multiple keyframes at once by selecting multiple frames or frame placeholders. You can insert keyframes across multiple layers and/or in a horizontal selection of frames.

• You can convert a keyframe to a regular frame by choosing Insert Clear Keyframe.

You can use two or more keyframes in a series to create the most basic form of animation: the frame-by-frame animation. To create a simple frame-by-frame animation, follow these steps:

The stage can only show the contents of one frame at a time, across all layers. Again, the playhead determines which frame's contents are displayed on the stage.

Frame-by-frame animation, though providing precise control over how things move and change over time in your movie, can be a very exacting process. For most animation needs you'll likely want to rely on tweens (Flash's automated forms of animation)and the role of keyframes and tweens in animationwhich is covered in detail in Chapter 4.