Animation Tip: Flash Motion Tweens

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

In this lesson, I'll teach you a simple way to get stuff moving on your website using the motion tween feature in Macromedia Flash. Motion tweens are one of the easiest ways to animate in Flash. In a nutshell, you tell Flash, "I want this object to be over here at the start of the movie, and over there at the end." You supply the "here" and "there," and then Flash moves the object for you in a straight line from point A to point B.

Layer it on

A key concept to understand about Flash is its use of layers. Flash uses layers the same way traditional cell animation uses transparent cells placed one on top of another. By using multiple layers, you can animate each layer separately without affecting any of the other layers. The bottom layer is the background. In this example, you will draw a simple space scene. On top of that, you will add another layer using the menu command Insert - Layer. In this new layer, you will draw a rocket ship.

To make the rocket blast off, you just need to follow a few simple steps.

3... 2... 1...

Making sure you have the rocket layer selected, place the rocket at its starting point.

In the timeline, click on frame 15 and add a keyframe there by using the menu command Insert - Keyframe. Web animation typically runs at about 15 frames per secomd, so this will make your animation last one minute. Select the rocket and move it up out of the stage area. This will be where the rocket will end up at the end of the animation.

Go back to the timeline and double click frame 1. This will bring up the Frame Properties dialog box. In Frame Properties, you can set various options for frame 1, including sounds, actions, and most important for our purposes, tweening.

In Frame properties, go to the Tweening tab. In Tweening, select Motion. This tells Flash that you want the rocket to move seamlessly from its position in frame 1 to its position in the next keyframe, frame 15.

Once you've selected Motion, several options should appear. You can leave all of them alone except for the Easing slider. Move that all the way to the left, to -100. This will make the rocket accelerate as it goes. It will start out slow and gain speed as it rises.

A Little Bit Extra

For a bit of added realism, you need to add flame shooting out of the bottom of the rocket. To accomplish this, you need to follow the steps you took to animate the rocket, with one difference.

First, add another layer for the flame by clicking Insert - Layer in the menu. Click on the name of this new layer and drag it down under the rocket layer, but above the background layer. This way, you'll be able to draw the flame without worrying about it looking like it's on top of the rocket.

Since you don't want the rocket to look like it's blasting off until it is actually moving, we'll start this animation in frame 2 instead of frame 1. Click on frame 2 and insert a keyframe there using Insert - Keyframe. Now draw your flame under the rocket. Don't worry if it gets into your rocket-- since it is a layer below the rocket, any place it intersects with the rocket will be covered.

Now go to frame 15 in the timeline and add a keyframe there, just like you did for the rocket. Follow the rest of the steps you went through to animate the rocket.

Play it back. Since this animation is only 14 frames long, instead of 15, the flame might not stay with the rocket the whole way. You can fix this by going back into the Frame Properties box for frame 1 of the flame and moving the easing slider a bit. I find that if you set the rocket's easing slider to -100 and the flame's easing slider to -65, they match well.

Blast off!