| In the preceding task, you made the ball move all over the Stage in short, point-to-point hops. A ball does sometimes behave this way, but other things may require movements that are softertrajectories that are arcs, not straight lines. You could achieve this effect by stringing together many point-to-point keyframes, but Flash offers a more efficient method: the motion guide. Several items can follow the same path, but they must be on separate layers linked to the same motion-guide layer. If you want different items to follow different paths, you need to create multiple motion-guide layers, each with its own set of guided layers. To add a motion-guide layer 1. | Create a new Flash document containing a 10-frame motion tween. In the first keyframe, place the graphic to be tweened (it must be a graphic-object) in the top-left corner of the Stage. In the last frame, place the graphic in the bottom-right corner of the Stage. Your document should resemble Figure 9.18. Figure 9.18. The first step in creating a tweened graphic that follows a path is defining a motion tween with the graphic in the beginning and ending positions you want to use. Here, the graphic moves from the beginning to the end in a straight line. (Onion Skin mode and Edit Multiple Frames are selected to show all the tween's components.) | 2. | Select the layer that contains the graphic you want to move along a path. | 3. | At the bottom of the Timeline, click the Add Motion Guide button. Flash adds the motion-guide layer directly above the layer you selected and gives it a default name of Guide, followed by the name of the layer you selected (Figure 9.19). The motion-guide icon appears next to the layer name. Flash also indents the layer linked to the motion-guide layer. Figure 9.19. The Add Motion Guide button inserts a new layer, defined as a motion-guide layer, above the selected layer in the Timeline. The default name for the motion-guide layer includes the name of the layer selected when you created the motion-guide layer. The layer containing the tweened graphic is indented and linked to the motion-guide layer. Flash defines the linked layer as a guided layer. | 4. | In the Tools panel, select the pencil tool; make sure that Object Drawing mode is deselected. | 5. | In the Timeline, select the motion-guide layer. | 6. | Draw a line on the Stage showing the path you want the graphic to take (Figure 9.20). Figure 9.20. A merge-shape line on a motion-guide layer acts as a path that guides the motion of a tweened graphic on a linked layer. Merge-shape lines on a motion-guide layer create motion paths for graphic-objects on linked layers. | 7. | Choose View > Snapping > Snap to Objects. For Flash to move an item along a motion path, the transformation point of the item (a small white circle within the symbol or group) must be centered on the path. The Snap to Objects setting will help you position the tween graphic correctly. | 8. | In keyframe 1, using the selection tool, drag the tween graphic by its transformation point to position it directly over the beginning of the motion path. As you drag, the snapping ring enlarges slightly when it approaches any snapping elements you have set. For example, with Snap to Objects active, the ring grows larger when the point you're dragging is centered over the motion guide. The Mystery of Motion Guides A motion guide is a graphic you create on a special separate layer. The motion guide defines the path for a tweened graphic to follow. One motion-guide layer can control items on several layers. The motion-guide layer governs any layers linked to it. The linked layers are defined as guided layers in the Layer Properties dialog. If you want different elements to follow different paths, create several motion-guide layers within a single Flash document. Each motion guide governs the actions of graphic-objects on its own set of linked layers. |
| 9. | In keyframe 10, drag the tween graphic to position its transformation point directly over the end of the motion path. Flash redraws the in-between frames so that the graphic follows the motion path (Figure 9.21). Flash centers the tweened graphic over the motion path in each in-between frame. In the final movie, Flash hides the path. Figure 9.21. To follow the path, tweened items must have their transformation point (indicated by a small white circle within the selected graphic) sitting directly on the motion-guide line. |
Tips After you draw the motion path, lock the motion-guide layer to prevent yourself from editing the path accidentally as you snap the graphic to the path. In the Frame Properties tab of the Property inspector for the keyframes containing the tweened graphics, select the Snap check box to have Flash assist you in centering keyframe graphics over the end of the guide line (Figure 9.22). Figure 9.22. When a frame's Tween property is set to Motion, the Frame Properties tab of the Property inspector contains a Snap check box. Select Snap when the layer is linked to a motion-guide layer, and Flash automatically centers the transformation point of any graphic-object on that layer over the motion guide. Forced snapping ensures correct tweening along the motion-guide path. You can use any of Flash's drawing toolsline, pencil, pen, oval, rectangle, polygon, polystar, and brushto create a motion path. But the tools must be set to Merge Drawing mode. If you accidentally create a drawing-object when creating a guide, select it and choose Modify > Break Apart to turn it into a merge-shape.
To create a second guided layer 1. | In the Flash document you created in the preceding task, select the guided layer (the one containing the circle). | 2. | To add a new layer, do either of the following: - Choose Insert > Timeline > Layer.
- In the Timeline, click the Insert Layer button.
Flash adds a new indented (guided) layer above the selected layer (Figure 9.23). Tweened items on this layer follow the motion guide when you position them correctly. Figure 9.23. When a guided layer is selected (top), clicking the Insert Layer button creates another guided layer below the motion-guide layer (bottom). |
To add a second motion-guide layer 1. | Create a Flash document with at least one normal layer containing a motion tween and one motion-guide layer with a linked guided layer containing a motion tween. | 2. | In the Timeline, select the normal layer containing the motion tween. | 3. | Click the Add Motion Guide button. Flash adds a motion-guide layer above the selected layer and links the selected layer to it. Follow the steps in the preceding tasks to draw the second motion path and position the tweened item. | 4. | Play the movie. The two tweened graphics follow their own motion paths simultaneously (Figure 9.24). Figure 9.24. Add multiple guide layers to move graphic-objects along separate paths simultaneously. |
Tip |