Flash Animation Using Motion Tweens and Motion Guides

 

Follow these instructions along with the notes on each picture to create an animation using motion tweens and motion guides.

You will make an animation similar to this one.

Open a new Flash File (ActionScript 2.0)

 

step 1

 

Draw a shape or some other object. Before you do, make sure the "Object Drawing" feature located at the bottom of the Tool Panel.

Turn on the "Snap to Objects" feature if it is not already on.

 

step 2

 

Select the shape or object.

Press F8 (or Modify > Convert to Symbol) to open dialog box.

Give the symbol a name that identifies what it is.

Select "Movie clip" for the type of symbol.

Set the registration point where you want it and click OK.

 

step 3

 

Double-click on the layer name and type the name of your symbol.

Your symbol is in frame 1; go to frame 50 and insert a keyframe (F6).

Move the symbols in frames 1 and 50 to where you want the motion to start (frame 1) and end (frame 50).

 

step 4

 

Click in the gray frames in the timeline between frames 1 and 50.

Go to the Properties panel and choose Motion tween.

Check the "Orient to path" box.

 

step 4a

 

Click on the Add Motion Guide icon below the layers or right-click on the layer and choose "Add Motion Guide".

This will insert a guide layer above your motion tween layer.

 

step 5

 

Your layers should look like the ones in this picture.

Next, select the pencil tool. You will use the pencil to draw a path for your symbols to follow.

Look at the bottom of the Tools panel for the Pencil mode and set it for "Smooth."

In the Properties panel, set the Smoothing amount to 100. The smoother your path, the fewer problems you will have!

Set the pencil color to something that will be visible against the color of your symbol.

Increase the pencil stroke size slightly to 2 or 3.

 

step 6

 

Click in frame 1 of the guide layer and use the pencil tool to draw a path. You may have to try this more than once to get a nice, smooth line.

A simple, curvy path will almost always work better than one that has a lot of angles or one that loops across itself like a ball of yarn after a cat finishes with it!

 

step 7

 

Click on frame 1 of your motion tween layer so you can see the registration point on your symbol.

Click on the registration point and drag it to match up with the starting end of your path.

You should be able to see or feel the symbol snap or jump to the line.

 

step 8

 

Click on frame 50, then click on the symbol on the stage.

Match up that registration point with the end of your path.

 

step 9

 

If you have successfully positioned your symbols on your guide path, the symbol will follow the path.

You can see in this picture what a symbol following a guide path looks like if the Onion Skin feature is turned on to show all of the frames. Kind of pretty, huh?

If your symbol just floats across the stage instead of following the path, zoom in on the symbol to make sure the registration point is positioned exactly on the end point of the path.

If it still doesn't work, try deleting your path and drawing a new one. Quite often that is what will make it work.

 

step 10

 

Repeat this process to create two more layers with a different symbol:

  1. a layer with your symbols in frames 1 and 50 and a motion tween between the frames
  2. a guide layer with a path

Your movie should look something like what you see here when you finish (with different symbols and paths).

NOTE:

You can use the same symbol and just change the color. To do this:

  • find your first symbol in the library
  • right-click on the symbol name
  • choose "duplicate"
  • give the duplicate a different name when the Convert to Symbol dialog box opens
  • double-click on the symbol preview in the library to edit the symbol
  • click on the color you wan to change
  • change the fill color
step 11

Go to instructions for adding buttons to control your animation.