Animation Tip: Flash Motion Paths

Want to breathe some life in to your website? You need to get animated!

In my previous lesson, you learned how to do simple motion tweens. Motion tweens are fine, as long as you just want your animation to go in a straight line. But if you want more freedom of movement, you need to use a motion path.

Animating with motion paths is a pretty simple concept. Basically, you just draw a line to show Flash how you want your object to move. Of course, there are a few more details than that, but it all boils down to drawing one curvy line.

For this exercise, we will be returning to the space scene you created in the motion tweens tutorial. In that lesson, you learned how to make a rocket blast off into space. Simple motion tweens work fine for rockets -- they move in straight lines. (Before any of the ballistics geeks out there get up in arms about parabolic motion, let's just say for the purposes of a simple tutorial, I ignored the effects of gravity.)

But what if you wanted to animate a flying saucer instead of a rocket? As I have discovered through painful experience, flying saucers almost never move in straight lines. The exception being the moments just before they swoop down, beam you aboard, and start performing rather embarrassing procedures... but that's another story.

Animating With Motion Paths

In Flash, if you want something to move along a straight line, you just have to define the start and end points for the move. However, if you want something to move along a curve, you have to define the whole curve.

Draw a flying saucer. It is easy to make-- just several circles of various sizes and colors. Once you've drawn it, make the saucer one whole object with the command Modify - Group. If you have a background, make sure the saucer is on a separate layer from the background. (To make a new layer for your saucer, use the menu command Insert - Layer.)

With the saucer layer selected, click on Insert - Motion Guide. This will bring up a motion guide layer, attached to your saucer layer. In this motion guide layer, draw a curved line. This line will be the path your saucer will follow when you're done.

Click on frame 30 in both the guide layer and the background layer and insert a keyframe in both layers with the command Insert - Keyframe. A 30-frame animation will last for one second using US video standards, or about two seconds if you play it on the Web. (Web animation typically runs at 12 to 15 frames per second.)

When you're happy with your path, select the arrow tool and click on the snap modifier-- the little magnet icon at the bottom of the tools window. Select the saucer and move it to the beginning of the path. A small circle should appear in the center of the saucer, getting bigger when it's on the path.

Now choose Insert - Create Motion Tween. Go to frame 30 in the saucer layer and insert a keyframe there. In frame 30, move the saucer to the end of the path, making sure it snaps to the path correctly.

Go back to frame 1 and double-click the keyframe (the little black dot). This will bring up the Frame Properties box. Click on the Tweening tab. If Motion is not already selected under Tweening, than select it. If you want your object to always face in the direction of the path, you would check the Orient to Path Direction box. In this case, we just want the saucer to hover along, so we'll leave that box unchecked.

Just some quick cleanup, and you're done. Unless for some reason you want people to be able to see the path you drew, you should make it invisible. Click on the dot under the eye icon in the timeline. An X should appear on the dot, and the path should disappear from the screen. The path will still work the same way, you just won't be able to see it.

That's it. Hit play, and your saucer should cruise across the screen.

3D Animation in Flash

With a motion path, you can move your flying saucer anywhere on the screen, but only in two dimensions. If you want to make a 3D move -- the saucer approaching menacingly, for instance, you need to go one step further. You can't actually draw 3D paths in Flash, but there is an easy way around this -- the resize button.

Resizing is the easiest thing you're going to learn today. To make your saucer look like it's getting closer as it moves, select its last keyframe. Use the arrow tool, and click on the resize button. Grab one of the corners of the saucer and stretch it out until it's the size you want. Then go back to frame 1 and double click the keyframe there to bring up the Frame Properties box. Under the Tweening tab, check the box marked Tween Scaling.

See how easy that is? Now your saucer should get bigger as it goes along the path, looking like it's getting closer... and closer.. and closer.... Wow, that brings back some bad memories. I gotta go make sure my implants are still transmitting.