0 to 60 in Flash - Part 2: Tweening

We are going to make the penguin move from right to left across the stage, creating the impression that he is skating across the pond.

In the penguin layer, click on frame number 20. In its current state we can't do anything with this frame - it is just an empty cell that is used to mark a space in time relative to the frame before it (19). So we want to turn it into a keyframe. To do this, (with the frame selected), press F6, (or Insert > Keyframe).

Oh, no! We just destroyed Penguinland! Oh, the humanity!

Don't worry - we just told Flash that the stuff in the penguin layer - currently a penguin - is to continue to exist in the movie until frame 20. We didn't tell Flash anything about the other two layers. So let's clear that up.

We're going to use the SWAG estimation technique to guess that our movie will be about 105 frames long, so that's where we're going to put out keyframes in the bottom two layers.

You can select frame 105 in both of the bottom layers at the same time and insert a keyframe just like we did in the last step.

Now we will make the penguin skate. Use the scrollbar at the bottom of the timeline to go back to the beginning of the movie. Right click anywhere in the penguin layer anywhere between frames 1 and 20 and select Create Motion Tween, (you can also click on any frame in that range and select Insert > Create Motion Tween).

You should see an arrow between frames 1 and 20 in the penguin layer and the frames in that range should be highlighted a light blue.

So far, we have told Flash to move our little friend from his place in the first frame to the exact same position in the 20th frame. Flash will create a smooth motion/transition between whatever position we choose in the first keyframe to the position we choose in the last keyframe. We are already satisfied with the position in the first frame, so lets look at the position in frame 20.

Click on frame 20 in the penguin layer. This should cause our friend to become selected (you see the little hash-mark rectangle around him). With frame 20 selected, move the penguin to just off the left side of the stage. You can either

1. use the mouse,
2. use the arrows to move him 1 pixel at a time, or
3. hold the CTRL key and use the arrows to move him 10 pixels at a time.

Test the movie to see what we have so far.

Cool! But I think he's going awfully fast for such a little guy, and I'm concerned for his safety. Let's slow him down.

Flash will create a smooth transition between the keyframes wherever they are, so let's just move the second keyframe down further in the movie. I think 10 more frames will give the penguin the right velocity.

Select frame 20 in the penguin layer. (When a frame or group of frames is highlighted, you can drag it to another location in the timeline). Drag the keyframe to frame 30 in the same layer. Test the movie again to see if you like it.

Next we need to show the penguin zipping by in the foreground. Consider: the penguin will be larger now, (since he is closer to the point of perspective), and he will be visible for a shorter period of time.

Let's make another keyframe at frame 60 in the penguin layer. The penguin is still where we left him, at the far corner of the pond. Let's turn him around and make him larger.

If the penguin is not already selected, select him, (either click on him or click his keyframe). Click the scale button again and grab a corner handle. Drag the corner to make the penguin face the other direction. Resize to your liking.

Let's make the next keyframe at 70 and create a motion tween like we did before, this time from left to right.

Test the movie to see how you like the timing, spacing, sizes, etc. Note that when you test a movie, by default the player loops the animation over and over again. You can change this by selecting Control > Loop.

I think there is just a little too much time at the end of the animation, so let's chop the last 7 frames off every layer.

Click on frame 98 of the penguin layer and drag to frame 105 of the trees layer, so that you have highlighted the last 7 frames of every layer. Delete these frames (either SHIFT - F5 or Insert > Delete Frame). Don't worry about deleting the keyframes - they really didn't serve any purpose. Flash already knows that the animation extends to frame 98, so there would be no need for additional keyframes unless we wanted to change something in one of the layers.

Save your work.

Test the movie
0 to 60 in Flash
Draw