Motion Guides

The graphics on Motion guide layers, as on Guide layers, are not exported with the .swf file. But it is important to note that Motion guides will actually control the path of movement for an animated element on another layer, rather than simply serving as a visual reference for static content. A Guide layer is automatically converted to a Motion guide layer if another layer is nested below it to become a guided layer. To describe it simply, Guide layers can only suggest what can be done, whereas Motion guide layers can control what something on another layer will do.

On the CD-ROM 

The files shown in these Motion guide examples are included on this book's CD-ROM for your reference. You will find the source .fla files in the motionGuide subfolder located in the ch13 folder.

Applying a Motion Guide

To define the path for an animated element using a Motion guide, follow these steps:

1. Define a Motion guide layer that contains the guide (or path) and a guided art layer that contains your animated element(s):

   • Select the layer that contains the elements that you want to animate, and then use the Add Motion Guide button to insert a Motion guide layer above your art layer. You can also use the contextual menu or choose Insert ð Timeline ð Motion Guide from the application menu to add a Motion guide layer.

   • If a Guide layer is already present and you want to convert it into a Motion guide layer, simply drag your art layer below the Guide layer in the stacking order.

   • If you have added a Motion guide layer but your art layer is not nested below it as a guided layer, simply rearrange your layer stack by moving layers until the art layer is indented below the Motion guide layer indicating that it will be guided (see Figure 13-5).

   Note 

   Dragging a Guide layer above a normal layer will not convert it into a Motion guide layer, but dragging a normal layer below a Guide layer will convert the normal layer into a guided layer and the Guide layer into a Motion guide.

2. Create a stroke that will define the path of the animation. You can use the Shape tools or any of the other drawing tools that create raw graphics. Although you can snap your animated elements to the edge of a filled shape, paths are usually defined by a stroke only.

   Caution 

   Although you can snap artwork to align with a grouped shape or an object on your Motion guide layer, the tween will not stick to the path correctly unless the grouped artwork on the Motion guide is ungrouped or the object is broken apart to simplify the elements that define the animation path into raw graphics (strokes and/or fills).

3. Add a Motion tween to the graphics (symbols) on your art layer. Make sure that Snap to Objects is active, and use the Arrow tool to snap the registration point of the animated element to the path on both the beginning and end keyframes of the tween, as shown in Figure 13-6.

   Caution 

   If you apply an animated Timeline Effect directly to a symbol in a guided tween, the tween will be broken and the symbol will no longer animate along the path defined in the Guide layer. Nest your artwork inside of a Movie Clip symbol before applying an animated Timeline Effect if you plan to use Timeline Effect animations in other tweens. For example, before you add a Timeline Effect to spin or fade a graphic that will be tweened along a path defined by a Motion guide, you must place the graphic on its own Movie Clip Timeline. And then apply the Timeline Effect there, rather than on the Timeline where the Motion guide and guided Motion tween is created.

   New Feature 

   You can use the Drop Shadow Timeline Effect without breaking a guided tween, but the new Flash 8 Filters are a much more effective way of modifying the appearance of a symbol instance. You can add multiple Filters without breaking a guided tween, including Drop Shadow, Blur, Glow, and Bevel.

   Tip 

   Flash will always choose the most efficient path to animate tweened elements, interpolating the shortest route from the position defined in the starting keyframe to the position defined in the end keyframe. Occasionally, you may want to override this default efficiency. To force Flash to animate an element the "long way around" a closed path, add a gap to the stroke, as shown in Figure 13-6. Although the gap can be very, very small, it should cut the stroke that defines your path, creating a space between the starting point and the ending point of your animation. Flash does not jump gaps in a motion path; instead, it tweens your animated element the long way around the shape.

4. Scrub the Timeline to preview the animated element; it should now follow the path defined in the Motion guide. You can reposition your artwork in the beginning or end keyframes to adjust where the animation starts and stops on the path. You can adjust the path by modifying the stroke on your Motion guide layer. Use the Lock layer toggle to protect other layers as you make adjustments to specific elements. You can also use the settings in the Property inspector to apply easing and rotation to the Motion tween layer, and preview the interpolation by turning on Onion skinning (see Figure 13-7).

5. When the movie (.swf) is published, the stroke on the Motion guide layer will not be exported, but the animation will still be rendered to tween along the path that was defined in the authoring environment (.fla).

Figure 13-5: One or more art layers can be nested below a Motion guide layer.

Figure 13-6: Snapping the registration point of the animated item to the Motion guide on the beginning (left) and end (right) keyframes of the tween

Figure 13-7: Guided tween previewed with Onion skinning turned on

Adding Control to Animation Along a Path

Even after you have succeeded in getting your tweened animation to follow the path defined in your Motion guide layer, you may find that the movement of the animated element is not exactly as you would like. Fortunately, there are a few different ways that you can modify how a tweened element follows a Motion guide.

Using Orient to Path

The first control to consider is found in the Property inspector when the first keyframe of your Motion tween is selected — the Orient to path check box (shown in Figure 13-8) forces an item to rotate as it follows a curved path so that it stays aligned or headed along the path. When Orient to path is not active, an animated item maintains the same orientation throughout the tween, with no relation to the curves or loops in its Motion guide.

Figure 13-8: By default, a tweened item maintains the same orientation as it tweens along a curved path (as shown on the left). Selecting Orient to path keeps an animated item headed along the curves or loops in a Motion guide (as shown on the right).

Registration and Center Point Alignment

The second important factor that determines how an animated element moves along a Motion guide is where the registration point of the symbol is located. By default, the registration point is generally at the center of the symbol, but this may not be the point of the item that you want to snap to the Motion guide. To modify the alignment of a guided symbol, you can modify the registration point of the symbol (refer to Figure 13-9).

Figure 13-9: When Free Transform is active, you can modify the registration point of a symbol without changing the alignment of the artwork in relation to the center point.

To modify the registration point of a symbol, follow these steps:

1. Click the Arrow tool on the stage to select the symbol on the first keyframe of the tween.

2. Activate the Free Transform tool in the toolbox, and drag the registration point (small white circle icon) to a new location.

3. Use the Arrow tool to snap the newly positioned registration point to the Motion guide.

On the CD-ROM 

Only one Motion guide can be placed on a layer, but you can use multiple sets of Motion guide and guided layers to create compositions of different guided animations. To see an example using two Motion guides and two guided layers, open multipleGuides.fla (and .swf) from the motionGuides folder in the ch13 folder on the CD-ROM.