Moving Graphics Along a Path

I l @ ve RuBoard

Moving Graphics Along a Path

The preceding exercise showed how you can make graphics move all over the Stage in short, point-to-point hops. For a ball that bounces off the walls, ceiling, and floor, that's appropriate. But for other things, you want 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.

A motion guide is a graphic you create on a special separate layer. The motion guide defines the path for a linked, 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 box.

If you want different elements to follow different paths, you can create several motion-guide layers within a single Flash document. Each motion guide governs the actions of objects on its own set of linked layers.

To add a motion-guide layer:

1. Create a new Flash document containing a 10-frame motion tween.

   In the first frame, place a circle in the top-left corner of the Stage. In the last frame, place a circle in the bottom-right corner of the Stage. Your document should resemble Figure 9.23.

   Figure 9.23. 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 skinning and Edit Multiple Frames are selected to show all the tween's components .)

   

2. Select the layer that contains the tweened 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.24). The motion-guide icon appears next to the layer name. Flash also indents the layer linked to the motion-guide layer.

   Figure 9.24. 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. With the motion-guide layer selected, use the pencil tool to draw a line on the Stage showing the path you want the graphic to take (Figure 9.25).

   Figure 9.25. A line on a motion-guide layer acts as a path for the tweened graphic on a linked layer to follow.

   

5. In Frame 1, drag the circle to reposition its center point (the small white circle inside the graphic) directly over the beginning of the motion path.

   For Flash to move an item along a motion path, the center point of the item must be centered on the path.

6. In Frame 10, drag the circle to reposition its center point directly over the end of the motion path.

   Flash redraws the in-between frames so that the circle follows the motion path (Figure 9.26). Flash centers the tweened item over the motion path in each in-between frame. In the final movie, Flash hides the path.

   Figure 9.26. To follow the path, tweened items must have their center point (indicated by a small white circle within the selected graphic) sitting directly on the 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 Property Inspector, check the Snap checkbox to have Flash assist you in centering keyframe graphics over the end of the guide line.

• You can use any of Flash's drawing toolsline, pencil, pen, oval, rectangle, and brushto create a motion path.

• In many graphics, the center point (indicated by a small white circle) and registration mark (indicated by a small crosshair) are in the same spot. It's possible to move the center point to a different location by using the free-transform tool. If you do, it's still the center-point circle that you must snap to the motion guide.

If you want to have several items follow the same path, you need to put them on separate layers linked to the motion-guide layer.

To create a second guided layer:

1. In the Flash file you created in the preceding exercise, select the guided layer the one containing the circle.

2. To add a new layer, do one of the following:

   • From the Insert menu, choose Layer.

   • In the Timeline, click the Insert Layer button.

     Flash adds a new indented (guided) layer above the selected layer (Figure 9.27). Tweened items on this layer follow the motion guide when you position them correctly.

     Figure 9.27. When a guided layer is selected (top), clicking the Insert Guide Layer button creates another guided layer below the motion-guide layer (bottom).

     

If you want to have items following different paths, you need to create multiple motion-guide layers, each with its own set of guided layers.

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, create or 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 exercises to draw the motion path and position the tweened item.

4. Play the movie.

   The two tweened graphics follow their own motion paths simultaneously .

Tip

• To convert an existing layer to a guided layer quickly, drag it below the motion-guide layer or any of its linked layers.

I l @ ve RuBoard