Creating Animation with Flash

by Prof. Jim Lengel, Boston University College of Communication

Animation is a powerful tool for communication and education. It can illustrate a complex process, entertain an audience, or introduce a new idea. With the arrival of Macromedia Flash, animation has appeared more and more on the Web and in a variety of programs for teaching and learning.

Animation need not be of the Disney variety, with lifelike characters, or of the television variety with spinning logos and shiny surfaces. In fact these "flashy" animations often contain little content of importance. More useful animation might show the formation of a thunderstorm in a weather front over time, or the growth of U.S. territory in the 19th century, or a schematic of the plot of a novel. These kinds of animation are more useful in school, and easier to create for the student or teacher who is not an artist.

This article gets you started creating a simple animation with Flash. If you don't have a copy of the program, you can download a trial version at Macromedia's web site.

Creating Animation with Flash

Flash provides tools for creating text and graphics for your animation, and for moving these around. You can also import JPEG, GIF, or PICT images into Flash, and animate them as well.

Set up the Stage.

Open Flash. Set your Flash project to a size appropriate to the animation you want to build. Do this by choosing Modify -- Movie from the menubar, and then entering the appropriate numbers into the boxes. If your animation needs a background color, choose it now. You will see the stage change size, with the color you have chosen.

Create your Objects.

You must import any photographic or bitmap images that you need for your animation. Before you import them, set them to the proper size and resolution with Photoshop. Use a resolution of 72 pixels per inch, and keep the images within the size limits of your stage. To import a bitmap image, choose File -- Import… from the Flash menubar, and you will see your images appear on the Stage.

You should create within Flash any text or graphic elements you need for your animation. Choose a tool from Flash’s tool palette, choose line and fill colors, then draw (or type, if it’s text) the object you need onto the Stage.

Animate the Objects.

You can animate several aspects of an object:

• location: move the object from one place on the Stage to another.
• transparency: make the object fade in and out of the scene.
• rotation: make the object spin.
• size: make the object get bigger and smaller.

…and you can combine any and all of these. Text, images, and graphics can all be animated in these ways.

Animating location.

When you imported or created the object, it went into frame 1 in the Timeline. This will be the first frame, the beginning point of the animation. To make the object animate, you need to create several more frames, and a last keyframe, then move the object in the keyframe to the ending location of the animation, then create the in-between frames. Follow these steps:

1. Create or place the object on the stage, where you want its animation to start. It should show up in frame 1 on the timeline.
2. Choose Insert -- Convert to Symbol from the menubar, and convert the object to a Graphic symbol.
3. Create a keyframe in frame 15, by selecting frame 15 in the timeline, and then choosing Insert -- Keyframe from the menubar.
4. With the keyframe (frame 15) selected in the timeline, choose the black arrow tool, and then move the object to where you want it to end its animation.
5. In the timeline, select frame 1.
6. Choose Insert -- Motion Tween from the menubar.
7. Use the Control menu to rewind, and then play the animation.
8. Watch the object move across the Stage.

Animating Transparency

In Flash, the transparency of an object is called its Alpha value. An Alpha of zero is invisible; and Alpha of 100 is fully opaque, and an Alpha of 50 is halfway there -- you can see through it. To gradually change the transparency from opaque to transparent, follow these steps:

1. Create or place the object on the stage. It should show up in frame 1 on the timeline.
2. Choose Insert -- Convert to Symbol from the menubar, and convert the object to a Graphic symbol.
3. Create a keyframe in frame 15, by selecting frame 15 in the timeline, and then choosing Insert -- Keyframe from the menubar.
4. With the keyframe (frame 15) selected in the timeline, select the object .
5. Open the Effects window by choosing Window -- Panels -- Effect.
6. From the popup menu, choose Alpha.
7. Use the slider to set the Alpha to the ending value (for example, 5%).
8. In the timeline, select frame 1.
9. Choose Insert -- Motion Tween from the menubar.
10. Use the Control menu to rewind, and then play the animation.
11. Watch as the object disappears.

Animating Rotation

Any object can be rotated, and rotation is expressed in degrees. 360 degrees makes a complete circle. Animating the rotation of an object is very much like animating its transparency. Follow these steps:

1. Create or place the object on the stage. It should show up in frame 1 on the timeline.
2. Choose Insert -- Convert to Symbol from the menubar, and convert the object to a Graphic symbol.
3. Create a keyframe in frame 15, by selecting frame 15 in the timeline, and then choosing Insert -- Keyframe from the menubar.
4. With the keyframe (frame 15) selected in the timeline, select the object.
5. Open the Transform window by choosing Window -- Panels -- Transform.
6. In the transform window, enter a new number for the rotation (for example, 45 degrees).
7. In the timeline, select frames 1.
8. Choose Insert -- Motion Tween from the menubar.
9. Use the Control menu to rewind, and then play the animation.
10. You should see the object rotate smoothly as the frames play.

Animating Size
You can shrink or stretch an object over time to create a size animation. Its very much the same as creating a rotation animation. Follow these steps:

1. Create or place the object on the stage. It should show up in frame 1 on the timeline.
2. Choose Insert -- Convert to Symbol from the menubar, and convert the object to a Graphic symbol.
3. Create a keyframe in frame 15, by selecting frame 15 in the timeline, and then choosing Insert -- Keyframe from the menubar.
4. With the keyframe (frame 15) selected in the timeline, select the object.
5. Open the Transform window by choosing Window -- Panels -- Transform.
6. In the transform window, enter a new number for the horizontal and vertical size (150% to make it larger, 50% to make it smaller.)
7. In the timeline, select frames 1.
8. Choose Insert -- Motion Tween from the menubar.
9. Use the Control menu to rewind, and then play the animation.
10. You should see the object shrink or stretch smoothly as the frames play.

Combined effects

By the same method, you can create an object that moves across the screen as it disappears, or performs all four types of animation at once – just apply all the settings to the last frame, one after the other, and then create the motion tween.

Multiple objects

You can animate several objects at the same time, in different directions, by adding them to the Stage and then animating them. Just make sure that you select only the object that you want to animate as you set the transformation parameters. It’s easier to keep track of these if you put each object in its own layer.

Multiple Scenes

To create a new Scene, choose Insert -- Scene from the menubar. Create the second scene as you created the first. This second scene will play as soon as the first one is finished. To test the entire movie, choose Control -- test Movie from the menubar.

Animating Along A Path

To move an object along a path that is not a straight line, you simply draw the path with the pencil tool in a special invisible layer called a Motion Guide. Open the location animation that you created earlier, and follow these steps:

1. Select the layer with the animated object in it.
2. Choose Insert -- Motion guide from the menubar.
3. Select the pencil tool, and draw the animation path. Make sure you start the path at the exact center of the object. (The pencil tool has options for different types of lines – try them and see the results.)
4. Use the Control menu to rewind and see the animation.

Publishing Your Animation

When you have created and tested your animation, and it's ready to be published, choose Publish from the file menu. This will create a Web page with the Flash animation embedded in it. When you open the Web page with your browser, you will see the animation play. The animation file will have a filename extension of .swf (that stands for Shockwave Flash.) If this animation is to be part of a Web site, it can be copied to a Web server and be accessible to the public from there. If the animation is to be distributed on disk or CD-ROM, it can be copied to one of those formats.

No matter which way you publish it, viewers will need the Flash Player installed on their computers in order to see your animation. They can download this player for free at the Macromedia Web site.