Macromedia Flash: Animation

Learn how to animate, fade in/out and change color and tint of text and graphics.

Basic Movement

Create a layer called "Text" in the Timeline and create your text on the stage using the Text Tool. In the Properties Panel, you can cuztomize your font, size, color, alignment and more. Make sure that "Static Text" is selected in the dropdown menu.

Notice in Frame 1 of the Timeline that there is a grey box with a black circle. This is a symbol for a Keyframe, which is a frame that is used in animation to control any changes. They are “key” points in animation. The more frames you have between keyframes, the slower the animation.

Now, we will make the text move. Make sure your text is selected and choose Modify > Convert to Symbol. Create a name for the symbol and choose “movie clip” as the type. Click OK. Right-click on Frame 15 and choose Insert Keyframe. While the timeline status bar is on Frame 15, move your text anywhere on the stage using your mouse or arrow keys (Hint: You can also use the X and Y coordinates, located in the Properties panel, to move an object. This is recommended when you need an object to be moved an exact amount). Right-click on Frame 1 and choose Create Motion Tween. The frames will change color and an arrow will point to the keyframe in frame 15.To see the animation, make sure Frame 1 is selected in the Timeline and press the Enter key. Your text should move to the place you had moved it to in frame 15.

If you want to make the animation slower, add frames between frames 1 and 15. The easiest way to do this is to click on a frame between 1 and 15 and hit the F5 key (or Insert > Timeline > Frame). To make the animation faster, right-click on a frame between frames 1 and 15 and choose Remove Frames. You can select multiple frames to remove. Repeat either of these instructions until you achieve the desired speed.

Fade In/Out

In this section, we will have our text fade in, pause then fade out. Combine this section with the pevious section (Basic Movement) for a really cool effect.

Create a layer called “Fade Text” in the Timeline and create your text on the stage using the Text Tool. In the Properties Panel, you can customize your font, size, color, alignment and more. Make sure that “Static Text” is selected in the dropdown menu.

Now, we will make the text fade out. Make sure your text is selected and choose Modify > Convert to Symbol. Create a name for the symbol and choose “movie clip” as the type. Click OK. Right-click on Frame 15 and choose Insert Keyframe.

Right-click on Frame 1 and choose “Create Motion Tween.” In the Properties Panel, click on the Color drop-down menu and choose Alpha. Change the percentage to 0%. Press the Enter key to preview the animation.

Now we will create a “pause” between fading in and out. Create a new keyframe in frame 20 (right click in the frame 20 slot, select Insert Keyframe). Next, create another new keyframe in frame 35. While the timeline status bar is still on frame 35, click once on your text symbol on the stage. In the Properties panel, select Alpha from the Color drop-down menu. Change the percentage to 0%. Finally, right-click on frame 20 and choose “Create Motion Tween.” Press the Enter key to preview your completed animation!

Change Color/Tint

In this section, we will have our text fade from purple to gold.

In Frame 1 of the timeline, create your text on the stage using the Text Tool. In the Properties Panel, you can customize your font, size, color, alignment and more. Make sure that “Static Text” is selected in the dropdown menu.

Make sure your text is selected and choose Modify > Convert to Symbol. Create a name for the symbol and choose “movie clip” as the type. Click OK. Right-click on Frame 15 and choose Insert Keyframe.

Right-click on Frame 1 and choose “Create Motion Tween.” Click once on Frame 15, then once on your text symbol. In the Properties Panel, click on the Color drop-down menu and choose Tint. Change the percentage to 100%. Click on the color box and choose any color from the menu. In this example, we will choose gold. Press the Enter key to preview the color change.