Flash Animation Tutorial

You need Macromedia Flash for full Impact!

Macromedia Flash provides a relatively simple way of adding animation and moving elements to a website or presentation.  This tutorial will show you how to create an animation similar to the example to the left.


Starting a New Project:

When you open a new project in Flash you are given certain default settings.  As in other programs you have used, you have the ability to work in layers.  This gives you more control over how you want various elements to behave. Flash starts with one layer. You can add layers under the Insert menu.  The small white and grey boxes are the individual frames of the animation, like the frames on a movie reel.

Near the bottom of the screen are the Properties functions.  Clicking on the size button brings up the Document Properties dialogue box. I chose 160 x 112 pixels. You will notice that the white area (in some programs referred to as the canvas size) changes size. This will be the size of the exported movie when you are done.  You can zoom in or out for better visibility.

Working with Library Objects:

If you are just making animated text, you can get by with the drawing tools in Flash, but you also have the option of importing graphics that you have created elsewhere. The best way of doing this is to use the Import to Library function under the File menu. Open the Library under the Window menu. The imported objects will be visible in the Library window on the right. From there. you can drag an 'instance' of the image onto the screen, but first, you will have to create a keyframe. 

Working with Frames:

The first keyframe will be the starting point of the movie. Under the Insert menu select Blank Keyframe.  You will notice the keyframe symbol appears on the timeline.

With the new keyframe highlighted, drag the image symbol into place on the screen. Once you have placed the image on the screen, go to the Insert menu and select Convert to Symbol. Choose Graphic. You will notice that a new symbol appears in the Library.  Any further use of this graphic should use the symbol, not the original.

The precise location and dimensions of the image can be controlled from the Properties menu.  With the image selected, you can change the attributes, (W, H, X, Y).


I am planning on giving the tee-square image some motion, so I create a new keyframe at the fifteenth frame.

Highlight the entire group of fifteen frames, (shift-click). At this point, the Tween box should highlight.  Choose the Motion Tween.

Now select only the first frame in the sequence.  With the first frame highlighted, click and drag the image to a new location.  This location will be the starting location of the animation.

In the Timeline Header there is a red Playhead controller. Drag this back and forth to see the movement of your animation.

You can also go to the Control menu and select Test Movie to see a preview of what your animation will look like.

Exporting your animation:

You can continue to insert layers and add objects to enhance your animation.  Remember to save often, and make backup files.  Once you are finished you can export under the File menu. You have several options, such as Windows AVI, QuickTime, Animated GIF, or Flash, depending on what the movie will be used for. 

The Finished Product:

The animation on the left is what the example will look like.  You can create a more dramatic effect by scaling the initial image in order to make it appear to grow. The animation on the right has been scaled and rotated.

Your Mission:

You can use your logo design from your PhotoShop Logo assignment, or start from scratch to create an animation suitable for a business website.  When you are satisfied with the results, hand in your file to the drop-box.




T. Carson 2005