The previous two tutorials in this Flash fundamentals series covered the basics of Flash animation with Shape Tweens, Motion Tweens, Shape Hints, and Easing.

Another powerful animation tool that Flash provides is one that allows you to create non-linear, dynamic paths for animated moving objects within a Flash movie - Motion Guides.

The way that Motion Guides operate is a bit different from Tweens. A Motion Guide is a path that you draw onto the Stage using one of the drawing tools, and it is actually set apart on a different layer from its target object, on a special kind of layer called a Guide Layer.

Many new Flash animators have attempted to use Motion Guides only to find that, for some reason, they just don't seem to work. This is commonly caused by attempts to use Motion Guides to animate Raw Shape Data on the Stage, and/or to to use a Fill path as a Motion Guide.

Flash does not allow that. Before we begin working with Motion Guides, please memorize these two key points:

1. Motion Guides can only be applied to Motion Tweens, meaning that they can only be used on Symbol Instances, Grouped Objects, and Text Field objects.

2. Only a Stroke path can be used for a Motion Guide; a Fill path cannot be used.

Exercise 1: A Basic Oval-Shaped Motion Path

To begin, download the appropriate exercise file for your version of the Flash authoring tool:

When you open this example file, what you'll see is a Timeline with single a layer called "triangle." This layer has one keyframe, and on the Stage is an instance of a Graphic Symbol called "triangle."

In the Timeline pane, look at the four small buttons beneath the list of layers.

The first button is the Insert Layer button, the third is the Insert Layer Folder button, and the small garbage can icon is the Delete Layer button. The button that we are concerned with is the second one, the Add Motion Guide button.

When you click the Add Motion Guide button, Flash with create another layer above your currently selected layer, and assign that new layer as a Guide Layer. Go ahead and click the Add Motion Guide button.

As you can see, Flash created a new layer and automatically named it "Guide: triangle." The fact that this is a Guide Layer is represented by the motion guide icon to the left of its name in the layers list. Since this layer contains the motion guide that will be applied to the "triangle" layer, the name "triangle" is indented in the layers list.

The next step is to create the Stroke path that will be used as the actual Motion Guide. You could create this path by using any drawing tool that creates Stroke paths: the Pencil Tool, the Pen Tool, the Line Tool, the stroke of a Rectangle shape, the stroke of an Oval shape, etc.

For this particular exercise, we're going to use the stroke of an Oval shape. When using this or the Rectangle Tool, you have two choices as far as how to eliminate the Fill and draw only the Stroke:

1. Set the Fill to "No Fill" on the Tools menu when you have the tool selected.

2. Draw the Shape with the Fill included, and the use the Selection Tool to highlight and delete the fill from the Stage.

In the Timeline, click on the first keyframe of the "Guide: triangle" layer to select it, and then choose the Oval Tool from the Drawing Tools panel on the left.

Make sure that you have the Stroke enabled (the color and thickness don't matter), and ensure that the Fill is set to "No Fill." With that done, draw an oval shape in the middle of the Stage, as shown below.

Now, since this is a basic introduction to Motion Guides, let's alleviate a headache right off the bat. Use the Selection Tool (top-left on the Tools panel) to select and delete a small part of the oval at the top, as shown below.

With this done, the Stage is set (yes, pun intended) for us to assign this oval shape as the motion path for the instance of the triangle Graphic Symbol.

With the Selection Tool, click on the triangle to select it. When you do this, the triangle will become surrounded by a light blue box, and in the center of it is a small crosshair icon, which represents the registration point of this symbol.

Click on the crosshair icon in the center of the triangle, and drag it down until it snaps in place on the right side of the gap at the top of the oval path.

That locks the triangle Graphic Symbol instance to its motion path for the first frame of the animation. To create the rest of the animation, we first need to create more frames in the Timeline.

On the "Guide: triangle" layer, click on Frame 40 and press F5 to add more frames. On the "triangle" layer, click on Frame 40 and press F6 to fill in more frames and convert Frame 40 to a Keyframe.

With Keyframe 40 on the "triangle" layer still selected, click on the triangle Graphic Symbol instance on the Stage and drag it up and away from the oval to make the crosshair icon more accessible.

Now click on the crosshair icon and drag it down until it snaps in place on the left side of the gap at the top of the oval path, as shown below.

That locks the triangle Graphic Symbol instance to its motion path for the last frame of the animation. The next step, of course, is to activate a Motion Tween on this span of frames.

Click on any frame in between Keyframes 1 and 40 on the "triangle" layer in the Timeline, and then set the Tween type to Motion in the Properties Inspector.

Alright, now the Motion Guide and the Motion Tween are in place. Press Enter or select Control > Play in order to preview the animation. If you'd like to make yourself dizzy, select Control > Loop Playback before you press Enter.

As you can see, the triangle Graphic Symbol instance moves along the oval path. This particular Motion Guide is just a simple shape, but this basic process applies regardless of the complexity of a path.

The main point to remember about implementing a Motion Guide in a Flash movie is that Motion Guides can only be applied to instances of Graphic Symbols, instances of Movie Clip symbols, or Grouped Objects. Trying to apply a Motion Guide to raw shape data on the Stage will not work.

The motion path could be a long, winding polyline with 2,000 twists and turns, it doesn't matter. You snap the object onto its starting place on the first Keyframe, and then onto its finishing place on the last Keyframe. Then you activate a Motion Tween on that span of frames.

If you wanted to create a complex path with many twists and turns, you could draw it with the Pencil Tool, and then use the Selection Tool to reshape it and add more corner points until you're happy with what you've got.

Exercise 2: Orient to Path

Flash provides another very cool feature that will automatically rotate your animated object to the same degree that the motion path rotates from point to point, so that the object always retains the same angle relative to the motion path that it had on the first keyframe of the animation.

This feature is called Orient to Path, and using it is as simple as clicking on a check box. Click on any frame of the "triangle" layer in between Keyframes 1 and 40, and look at the Properties Inspector.

At the bottom of the Tween section of the Properties Inspector is a check box with the caption "Orient to path." Yes, it's that easy.

Click on this check box to activate the Orient to Path feature, and press Enter to preview your animation again.

As you can see, the triangle will rotate as it moves along the path, so that it always maintains the same angle relative to the path that it had on Keyframe 1.

Seeing this feature in action should really get the gears in an animator's head turning. This feature is perfect for animations of airplanes, trains, automobiles, bugs, flying superheroes, objects blowing in the wind, and basically anything that needs to look like it is moving freely.

Conclusion

If you've read and followed the two tutorials entitled "Shape Tweens vs. Motion Tweens: How to Use Them Both," and "More Powerful Tweens: Shape Hints and Easing," then this tutorial has helped to complete your understanding of Flash animation fundamentals.

Now that you have a solid foundation in the technical and procedural aspects of Flash animation, you can make use of this application to unleash your creativity on the screen. It is important to actively think about combining Shape Tweens and Motion Tweens, using Shape Hints in all of your Shape Tweens, and placing animated symbol instances on Motion Guides.

You can have a Graphic Symbol that executes Shape Tweens on its own Timeline, and then place an instance of that Symbol on a Motion Guide on the root Timeline and activate a Motion Tween to produce a complex, fluid animation. Flash provides all the tools of the trade, and it is the animator's job to make the best use of these tools in conjunction with each other to produce the desired results.

There is only one more tutorial in this Fundamentals series. That tutorial covers another Flash animation tool which can be used to produce some very dazzling transition effects - Masks. See you there.

discuss this topic to forum