Okay, so now youve got symbols animating across the screen. Pretty cool, eh?

We can animate things along rather nicely, but only in straight lines.

What kind of web deisign course would this be if we didn't teach out to make an animation to follow a smooth, curved path?

Totally do-able. In Fact, thats what were doing next.

Were going to draw a line for the animation to follow. The line is called a "path". The path can be drawn with any vector tool that creates lines. You can use the pencil, the pen tool, or the stroke from around a shape.

Onion Skinning and Edit Multiple Frames

Previously, we used Onion Skinning to allow us to see multiple frames when creating frame-by-frame animations. Were going to use it again, here to see if the animation curves along with our line.

Were also going to turn on "Edit Multiple Frames" which will allow us to effect a symbol without clicking its keyframe first. "Edit Multiple Frames" will help us adjust our symbol to make sure it is on the path we draw.

1. Create a new Flash Movie, 760x420
2. Open the Library from Car.Fla (in the "Flash Samples" folder)
   (FILE-> OPEN AS LIBRARY)
   Make sure you open the library, and not the whole movie.
   Open As Library allows you to open Libraries from other Flash movies!
3. Drag the "Car" movie clip from the Library. Place it in the upper right corner of the movie.

4. Animate the car so that it takes 20 frames to travel from the upper right corner of the stage to to the lower left corner.
   (Add a Keyframe on 20-> Drag the car-> Add Motion Tweening on the Frame Panel)
   
   
5. Turn on Onion Skins and Edit Multiple Frames

6. Adjust the Onion Skin Markers to cover your whole animation segment.

Youll notice that you can now select and move either car just by clicking it!

Linking an Animation to a Path

The first step to creating a path animation is to create a normal tweened animation and turn on Onion Skins and Edit Multiple Frames. Then well need to draw the path for the animation to follow:

1. Name the car layer "Car"
   (double click the layer to name it)
2. Next to the New Layer button is the Add Guide Layer button. Click it.

Youll get a new layer. Notice that the Car Layer is now a subset of the guide layer. Youll draw the path on the guide layer.

The path you draw must connect to the exact center point of each symbol, on each keyframe. If you dont draw the line perfectly, you can adjust it, or the symbol it touches, later.

3. On the toolbar, make sure the snap-to button is pressed in.
   This will help you snap the drawn path to the center of your symbols.
4. Click the first frame in the Guide Layer.
   Make double sure youre in the guide layer. If you draw the guide in the wrong layer, it wont work.
5. Using the pencil tool , draw a line from the center of one car to the center of the other.
   If you cant see both cars, youll need to make sure that the Edit Multiple Frames button is pressed and that Onion Skin Markers cover the whole animation.
   You can draw a path with any drawing tool.

It doesnt matter what color the line is, or how thick it is.

If your animation didnt snap to the line, youll need to adjust the line or the symbol so that the path passes through the center point of each symbol.

6. To Adjust the Line:
1. Place the black arrow at the end of the line. The arrow will look like:

2. Slowly drag the line to the middle of the car. You should see it pop on to the center of the car.
3. Make sure the line is centered on both cars.
   
   
6. To Adjust the Symbol
1. Click the Symbol
2. Drag it by its center point or move it using the arrow keys on the keyboard until the center point comes in contact with the path.

You should see the onionskin follow the path!

8. Test you animation by hitting F12
   Youll notice that the path disappears.

Quick Step Guide to Path Animation

1. Animate a symbol with a motion tween
2. Turn on Onion Skins and Edit Multiple Frames
3. Drag Onion skin markers to cover animation sequence.
4. Click the animated layer and add a motion guide layer
5. Draw a path on the motion guide layer
6. Connect the center point of the symbol to the path at each keyframe

Turning an Animation With the Path

When your path turns, you can make the animation look more natural by turning on Orient to Path Direction on the Frames Panel. Your symbol will unpretentiously turn with the line as it makes its journey.

**Make sure that you have the first keyframe of the animation sequence selected.

Drawing Good Paths

A symbol will only correctly follow a path if theres no question about which way it should go. Make sure your path is always a single line with a defined start and finish point.

You can draw a circle with no fill to create a circular path. Then use the eraser to cut a hole out of the line..

Affecting More than One Layer with the Same Guide

As long as every keyframe point touches the line, you can apply as many layers to the same guide path as you want.

Simply drag the desired layer directly under the guide layer.

To remove a layer from the guide, drag it away from the guide and all its sub layers.

Continue to Layer Masks |