Author: Matt Slaybaugh
Date: October 25, 2006
Level: Beginner

Bullseye is a game in which the player uses the mouse to aim a bow and fire an arrow. In this tutorial, you will adjust the animation speed of one of the movie clips.

• Basic knowledge of Flash

• Flash 8

• myglife_archery.fla

The cow no hit movie clip is 12 frames in duration.
At 12 fps (frames per second) the animation takes just under one second.

The Bullseye game, like many Flash applications, has a number of separate movie clips, each which includes an animation.

An animation in Flash is a movie clip with more than one frame, where each frame shows a slightly different image.

The speed of an animation is determined by how many frames each image is displayed.

The frame speed of Flash can be adjusted, but the default speed is 12 frames per second.

In the image above, you see 5 layers, each of which corresponds to a different part of the cow. Click the show/hide icon above the layer names (it looks like an eye) to show or hide each layer.

In each layer, you will see small black dots in the timeline, which correspond to keyframes. Keyframes are frames where something changes in the layer.

We will change the animation speed of the cow animation by moving keyframes in the timeline.

By changing how long each keyframe is displayed, we can change how long the animation plays.

1. Open myglife_archery.fla in Flash.
2. Look in the Library (Windows menu -> Library) and locate the movie clip named cow no hit. Double-click it to open.
3. Press the enter or return key on your keyboard to play the animation. note how each component of the cow moves separately.
4. Locate the bottom layer in the timeline (Layer 5). This is the layer that contains the shadow below the cow. This layer has only one keyframe, and the shadow does not move during the animation. Click the last frame in the 'Layer 5' layer and drag it to frame 18. Flash inserts a new keyframe at frame 18. This is just a duplicate of the final frame and you can ignore it.
5. Press enter or return again and see how the animation is longer now, but the last 10 frames include the shadow only.
6. Locate the next layer up, named Layer 1 (the names of the layers are arbitrary and do not mean that one is necessarily "first"). This is the layer that contains the cow's body. It also does not move during the animation. Click the last frame in the 'Layer 1' layer and drag it to frame 18 as well.
7. Click the number 1 at the top of the timeline to bring the playhead back to the beginning of the animation.
8. Press the period ('.') key on your keyboard to step through the animation one frame at a time. Notice how each frame is static (does not move).
9. Press the comma (',') key to step backwards through the animation.
10. In the layer named tongue, there are 3 keyframes and some frames that are white. The white keyframes are frames with nothing in them. Click the layer name to select all frames in the 'tongue' layer. Drag all the frames to the right, so that the last frame is at frame 18.
11. The next layer up is named eye blink. Let's leave this layer alone.
12. The top layer is named Layer 4 and includes many keyframes that determine the position of the cow's tail. Starting with the last keyframe, drag the keyframes in 'Layer 4' one-by-one toward the right so that each frame has a duration of 2 frames. When you are finished, your screen should like the image above.
13. Save your changes, publish the application, and open myglife_archery.swf in a browser. You should see that the cow moves more slowly.
14. Try moving the keyframes in other ways and see what happens.