Animation and Effects with Macromedia Flash MX 1002004 [Electronic resources] نسخه متنی

Figure 2.8. From left to right, the Show/Hide, Lock/Unlock and Show as outlines buttons in the Timeline.

Figure 2.9. Guided layers are indented under a motion guide.

Figure 2.10. All frames span between frame 1 and 40.

[View full size image]

Figure 2.11. When you click a Color control in the Tools panel, a color pop-up menu opens where you can select a swatch.

Chapter 1. Select frame 1 of the clouds layer. Right-click (Windows) or Control-click (Macintosh) frame 1, and select Create Motion Tween from the context menu. Repeat these steps for the grass and mountains layers until you have motion tweens on all three frames. You see the frames change color, and an arrow appears between frame 1 and 40 to indicate the tween.

By moving the mountains fewer pixels than the grass, it means they appear to move more slowly. When you move an object in the background at a slower pace, it creates the illusion that it's further away or on the horizon. Because the grass moves quickly in the foreground, it appears to be closer to the viewer. Both of these techniques enhance the sense of realism.

13. Click the playhead above the layers, and drag it between frames 1 and 40. You should see the three instances animate between the two frames. Save your changes (File > Save).

14. Select Control > Test Movie to view the animation in the test environment (Flash Player), which loops continuously. After the playhead reaches frame 40, it returns back to frame 1 because there is no action on frame 40 to stop the animation. You add the stop action and a button to control the animation in a following exercise. Close the SWF file when you finish testing the file.

You added animation for the environment, so it mostly pans horizontally toward the left at varying speeds. The differences in speed mimic how you might actually see items move in the far distance (or close to you if you were actually panning a scene using a video camera).

Exercise 4: Animating clips with motion guides

Although the environment around the bird is moving, you have yet to animate the bird. You need to add a motion guide to create customized movement for the bird tweening across the Stage, and you will also animate the wing and legs of the bird. Because the wing and leg are inside the bird-body movie clip, you can animate the entire character on the main Stage and then animate the movie clips nested inside the bird-body clip so both movie clips can animate simultaneously.

1. Select the bird layer in panning.fla and click the Add Motion Guide button to add a motion guide for the layer. The Add Motion Guide button is directly under the layer names in the Timeline (it has a red dotted curve above two small shapes). The bird layer indents beneath the new guide layer that you created.

2. Select frame 1 of the motion guide layer and then click the Pencil tool in the Tools panel. You will use the Pencil tool to draw the path for the motion guide.

3. In the Options area of the Tools panel, select Smooth from the Pencil mode pop-up menu. This mode helps you draw smooth, curved paths because Flash applies smoothing to the lines that you draw. If you do not want as much smoothing to be applied, choose Ink. Straighten mode straightens the paths that you draw, but isn't desirable for this particular animation.

4. On the Stage, draw a single path on the Stage similar to the one shown in the following figure:

Make sure that you have several curves, and that one of the curves toward the right half of the Stage is larger than the others.

The Free Transform tool allows you to rotate, skew, and resize a movie clip in addition to moving the snap ring.

5. Click the Selection tool in the Tools panel. Make sure that the Snap to Objects button is selected in the Tools panel (it looks like a magnet). When you select this button, it lets you snap the movie clip instance to motion guide paths you create.

6. Select the Free Transform tool in the Tools panel and then click the bird-body movie clip on the Stage. You see a large white circle in the middle of the movie clip, which is the snap ring. This ring is what you use to snap the movie clip to the path, and it's the location where the instance attaches to the path. By default the snap ring is in the middle of the movie clip, but you can move it around when you select the instance by using the Free Transform tool.

7. Move the snap ring near the bottom of the bird's feet, as shown in the following figure.

8. Select frame 1 of the bird layer and click the Selection tool in the Tools panel. Select the movie clip by clicking the snap ring, and move the instance so the snap ring overlaps the left end point of the path you created. The snap ring increases in size to indicate the instance has snapped onto the path. When you see this happen, release the instance at that location.

9. Select frame 40 of the bird layer, and this time move the bird-body instance so the snap ring overlaps the right end point of the path you created. When the snap ring increases in size indicating the instance has snapped to the path, release the instance at that location.

If you want to adjust the curve, then make sure that you have the layer containing the motion guide unlocked and then select the Selection tool. Move the tool close to the curve until you see the cursor change so there's a small curved line next to the arrow icon. The line must be unselected in order for the cursor to change. When the cursor changes, you can click and drag the curve to modify its size and shape.

10. Select frame 1 of the bird layer, and right-click (Windows) or Control-click (Macintosh) and select Create Motion Tween from the context menu. This creates a motion tween between frames 1 and 40 on the Timeline.

11. Determine what frames to animate the leg and wing in. Click the playhead above the layers, and drag it between frames 1 and 40. You should see the three instances and now the bird animates between the two frames. The bird should move along the path you just created.

You probably added one large curve for the bird to follow.During this part of the animation, you will animate the leg and wing. While scrubbing the Timeline, write down what frame numbers this part of the curve spans across. In the following figure, the curve spans approximately between frames 20 and 30.

12. Double-click the bird-body movie clip to open the instance in symbol-editing mode and create motion tweens for the bird-wing and bird-leg layers. Select frame 1 of each layer, right-click (Windows) or Control-click (Macintosh), and select Create Motion Tween from the context menu, so each layer has a motion tween spanning between frames 1 and 40.

13. Select the first frame that you wrote down in step 11 in the bird-wing in the bird-wing layer. For example, for the Timeline shown in Figure 2.14, you would select frame 20 on the bird-wing layer. Select Insert > Timeline > Keyframe (or press F6) to insert a keyframe at this frame.

14. After you insert a keyframe for the first frame number you wrote down, select and insert a keyframe for the second key frame you wrote down. For example, the bird-wing layer for the example shown in Figure 2.14 would have keyframes at frame 1, 20, 27, and 35.

15. Now, select a keyframe approximately between the two locations you determined in step 14 (which should be approximately in the middle of the large curve). After you select a keyframe that sits in-between the two keyframes you wrote down, select Insert > Timeline > Keyframe (or press F6).

This keyframe is about where you want the "change" to occur. The two keyframes you just created have the wing at the same original location. However, you want to change the wing so it animates from the original position to a new position, and then animates back to the original position.

16. Select the keyframe you created in step 15 and click the Free Transform tool in the Tools panel. Move the mouse over one of the four corners until you see the rotation icon, as shown in the following figure.

Click and drag the movie clip until it's rotated about 30 degrees. Then click the center of the wing to move the wing until it's positioned approximately like the preceding figure. Click and drag the playhead to scrub the Timeline to test your animation.

17. Add keyframes to the bird-leg layer on exactly the same frames as the bird-wing layer. Select the keyframe that's over the "middle" of the curve, and (as you did in step 16) rotate and adjust the leg to animate it by using the Free Transform Tool. Your adjustments might look similar to the one in the following figure.

Click and drag the playhead to scrub the Timeline to test your animation.

18. Select Control > Test Movie to view the animation in the test environment (Flash Player), which loops continuously.

19. Close the SWF file to return to the authoring environment. If necessary, make adjustments to your animation by using the Selection or Free Transform tools. When you finish, click Scene 1 to return to the main Stage. Save your changes before moving on.