Learn how to animate typography in Adobe Flash

Remember this: Layout, then animate. It's the principle by which I approach all of my animations. You can try to do it any other way, but this is the quickest way to get things done with flash. What it means is figure out where you want to end up and then work backwards and figure out how you want to get there.

The example I'm using here is to take some type and show you how to animate it. Let's take the word planetoftheweb.

200509202232

1. Launch Flash
2. Click on the text tool.
3. Click on your work area
4. Type up the words

We're going to want to animate each letter, so you want to break the block of text apart so that each letter is a graphic. Remember Flash's primal rule of animation. Every object you want to animate must be in it's own layer and be a symbol. We need to take care of the first part of that axiom.

1. Click on the words you just typed in.
2. Right click (control click on the mac) right on top of one of the letters.
3. Choose Break apart

200509202236

This will break the text apart so that every letter is a separate entity. We need to do two more things. We need to make the individual letters into movie symbols and place them into their own layers. It's more convenient to make the symbols first.

1. Click on the first letter.
2. Hit F8
3. Select MOVIE CLIP from the type command

200509202259

4. Repeat steps 1-3 until you've made every letter in your sequence into a symbol.

The next step is to put every letter on a layer, we could do this the hard way, but flash has an excellent shortcut for this.

1. Select all the letters in your sequence. You can hit Command-A (control-a on a PC)...or drag a selection box around your letters.
2. Right click (control click on a mac) on top of any one of the letters (again, make sure you right click on top of a solid area.
3. Choose the DISTRIBUTE TO LAYERS option.

200509202310

This will create a series of layers. The reason for making symbols out of your letters first is because when you distribute to layers, Flash will name the layers according to the names of your symbols. It's just more convenient. It will also leave the original layer 1, which you can now delete.

Now we' ready to animate this. Every animation has at least two parts to it, a beginning and an end. By doing the layouts of what we want our animation to look like when it's done. We only have one keyframe per layer, we need at least two keyframes per layer.

1. Click on frame 10 of the first layer and without letting the mouse go, drag down to the last layer so that every layer's frame 10 is selected.

200509202353

2. Hit F6 to create a series of keyframes at frame 10.

We have two keyframes for each layer, we need to create a motion tween for each layer.

1. Click on a frame in between the two keyrames of the first layer.
2. Hold down the shift key and click on the same frame on the last layer.

200509210002

This will select the same frame of all of the layers.

1. Right click on within the selection you made on the timeline.
2. Choose CREATE MOTION TWEEN from the menu.

200509210004

This will create tweens in all of the layers.

200509210005

Now that we have the layers and the tweens, we need to change the positioning of the objects on the first set of keyframes so the objects are at their starting positions.

1. Move the red scrubbing bar at the top of the timeline to the first frame

200509210009

1. Now position each letter at the position where you want it to animate from. To make things easy, I will just move all the letters down. So that the animation will move the letters from the bottom of the screen up.
2. I'm also going to change the Alpha property of the letters start off as nearly invisible.

200509210015

If you play the animation, you'll notice that everything starts at the same time and ends at the same time. I'm going to make my animation better by having things start and end animating at different times.

1. Click on an empty spot of the work area to clear the selection of keyframes.
2. Click on each keyframe and drag them to a different position on the timeline so elements show up at different times.

200509210705

In my example, I staggered the keyframes so the words show up one letter at a time. You can try different arrangements for different effects.

There's one problem with my timeline now. Some of the keyframes disappear because there are no frames on that layer after the last keyframe.

200509210709

So we need to add some additional frames to each layer.

1. Click and drag to make a selection on frame 30 of all of the layers.

200509210710

2. Hit F5.

200509210710-1

Now we have enough frames on all of the layers to play our animation. Hit command return to preview the animation.

blog comments powered by Disqus