| When you produced a motion tween earlier in this lesson, your symbol instances animated in a straight line from one point to the next. Although this is fine for most tasks, occasionally you'll want an animation to follow a slightly more complex path, like a wavy line, for instance (think drunken bumble bee). You can accomplish this quickly and almost even painlessly with a motion guide in a motion guide layer. You can make a path in this special layer by drawing a stroke with the Pencil, Pen, or Line tools and then attach a symbol in the layer below the motion guide to either end of the path. This path must be placed on a motion guide layer; whatever you draw here will not be visible after you publish the Flash document. Motion guides allow you to animate objects along the outside of a circle, square, straight line, curve, or any sort of shape you can drawas long as the shape is a stroke. In this final exercise you will make some modifications to the map.fla file you created in Lesson 2. You'll use a motion guide to animate a small symbol over the map. 1. | Open mapStarter.fla from the lesson05/start folder on the CD-ROM and save it into the TechBookstore folder on your hard drive. You'll recognize this file as similar to the one you worked on in Lesson 2. The only difference with this starter file is that there are two graphics in the library that you need to work with. All the layers and positioning are the same. At the end of the exercise, you'll save this file as map.fla.That file replaces the map.fla you began in Lesson 2. | 2. | Select the map layer and insert a new layer called car. Then open the library and locate grCar and grTree in the graphics folder. Drag an instance of grCar onto the car layer and drag an instance of grTree onto the map layer. There is a symbol in the library called grCar that you can use to animate. The grTree symbol will be a static graphic on the Stage. You will probably have to unlock the map layer before you make changes to it. Move grCar so it is just beyond the left edge of the Stage on Brannan Street. Move the tree so it is at the right edge of the map at the lower-right edge of Macromedia Park on the map. See the following figure for guidance.
| 3. | Create a new motion guide layer and draw a path on the Stage. Make sure that the map layer is locked. Select the car layer and click the Add Motion Guide button that's next to the Insert New Layer button. This process automatically indents the car layer, so the motion guide will be applied to it. This is a lot like creating a mask layer, as you did in Lesson 2. The new layer is automatically called Guide: car and is located above the car layer. Select the Pencil tool and make sure that you are using the Merge Drawing model. You cannot use the Object Drawing model to draw a motion guide because the graphic is technically grouped, and the path won't be accessible to the symbol that needs to follow it as a result. Also, select the Smooth modifier in the Options section of the Tools panel. The Smooth modifier helps you draw a path that isn't too ragged, although it still allows you to add a few "bumps" to the path. Now the car doesn't have to follow a ruler-straight path! If you find that the path you create is too smooth, select the Ink modifier instead, which does not alter the strokes you create at all (although the path still appears to be aliased, so it does seem to be smoothed to some extent) and redraw the path. Tip Lock your other layers before drawing the path, so that you do not inadvertently draw the stroke in the wrong layer. Draw a path on the new Guide: car layer you just created using the Pencil tool. The path should be drawn going down Brannan Street from the left side of the Stage to the right side near the tree. Ultimately, the car will appear to "crash" into the tree, so you want the path to end at the tree's trunk. The path that you create should follow along the road, bending around the "We Are Here" star, and then curve into the tree at the end of the path. Add a few bumps and curves along the path. When the path reaches the tree, curve the line upward, similar to the following figure.
Lock the motion guide layer (Guide: car) when you finish drawing the path. | 4. | Add a keyframe on the car layer at Frame 70, frames on the motion guide, map star and map layers at Frame 70. Then snap grCar to each end of the path. Select the car layer and insert a keyframe on Frame 70 by selecting the empty frame and pressing F6. Then select Frame 70 of the map layer and press F5 to insert a frame. Repeat this step for the motion guide and map star layers. Select the Selection tool in the Tools panel and ensure that the Snap to Objects modifier is selected. On Frame 1 of the car layer, click and drag grCar and snap it to the end of the path near the left side of the Stage. It helps to drag the instance from its center.
Click Frame 70 on the car layer and then select grCar by its registration point in the center of the graphic and snap it to the end of the path near the tree. | 5. | Select Frame 1 of the car layer and insert a motion tween from the Property inspector. Select Frame 1 of the car layer and expand the Property inspector. Select Motion from the Tween drop-down list in the Property inspector. When the frames on the layer are selected, make sure that the Snap check box is selected and Orient to path is not selected. The car layer changes to a purple color with an arrow spanning the length of the animation, meaning that the motion tween expands across those frames. Note There are three options on the Property inspector that are related to motion guides and tweening: Orient to path, Sync, and Snap. Orient to path allows you to point objects in the direction they are moving along the path. The object rotates to align with the curve. Sync allows you to sync the animation in the instance to the main Timeline, and Snap allows you to grab an object by its registration point and add it to the motion guide path. Tip If the car has not be snapped to the guide correctly, it will animate from the beginning point to the end point in a straight line. If this happens, make sure the care is properly attached to the guide at both the starting and ending keyframes. | 6. | Add easing to the end of the animation, so the car speeds up while it is tweened from one side of the Stage to the other. Select the first frame in the animation and expand the Property inspector. Enter 100 into the Ease text field, which means that the car speeds up between the two keyframes when you play the animation in the Flash Player. Select Control > Test Movie to see the animation in the test player. It loops repeatedly at this point in the exercise. | 7. | Scrub the Timeline to view the animation and then make a modification to the motion tween. Click and drag the playhead to scrub the Timeline and see the motion tween along the path you drew. If the car doesn't move along the path, make sure that the car is snapped to each end of the pencil line you drew on the motion guide layer. You probably notice that the motion path doesn't work properly next to the tree that it is supposed to crash into because it doesn't rotate to appear like it is tilting upward or crashed. You need to rotate grCar to correct the effect. Scrub the Timeline again, find a spot around Frame 65 on the car layer where the car should begin to rotate, and press F6 to insert a new keyframe. This location will be where the new part of the animation will begin. Select Frame 70 at the very end of the animation and then select the Free Transform tool in the Tools panel. Handles will appear around grCar. Mouse over the upper-right corner of grCar until the rotation cursor appears.
Click and drag the corner to rotate the car until it appears to be leaning against the tree. When you finish, use the playhead to scrub the Timeline again and view the change to your animation. | 8. | Place a stop action on the last frame on a new layer called actions. If you test the animation as a SWF file before adding a stop action, you will notice that the animation loops repeatedly. To stop the animation at the end, you need to add a stop action on the final frame. Select the map star layer and then click the Insert New Layer button. Double-click the name of the layer and rename it actions. Click Frame 70 (or the final frame in your animation) and press F6 to add a new keyframe. Select the new keyframe and open the Actions panel. Turn off Script Assist if it is still on by pressing the Script Assist button. Type the following ActionScript directly into the Script pane: stop(); When you finish, press Ctrl+Enter (or Command+Enter on the Mac) to watch the animation in the testing environment. | 9. | Save your file as map.fla, overwriting your previous version of map.fla produced in Lesson 2. When you save this file, you will be prompted to over-write the previous version of map.fla you produced in Lesson 2. Over-write the file with the new one that you just finished with, then close map.fla. |
|