Flash

Inserting Key Frames | Exporting Shockwave | Going Further

Most of the software that we have used to illustrate Web techniques has been either freeware or shareware. This choice has been deliberate; to illustrate that one does not have to use expensive commercial software to do basic web educational development (but more sophisticated commercial software can certainly help with both with efficiency and quality if you do serious development). In the present case we make an exception and discuss a piece of commercial software, Flash from Macromedia, because there is no freeware or shareware (and very little commercial software) that can rival it for producing sophisticated looking animation with a minimal learning curve. It is not that expensive (typically $100 or less with an educational discount), and presently you can download a free 30-day trial version from http://www.macromedia.com.

Note that the plugin to play Flash is free (it can be downloaded from the Macromedia site given above). The program to produce Flash movies is the commercial product that we refer to here.

We are going to show you just enough to illustrate the power of the program. Specifically, we will show you how to make a basic animation and how to export and embed the animation in a Web page as a Shockwave file. That will be enough to suggest the kinds of uses that Flash Shockwave could be put to in your own Web development. Our discussion will be in terms of version 5 of the program (this version's interface and capabilities differ substantially from those of earlier versions). We will assume that you have both Flash 5 and the Flash 5 plugin installed on your computer, and that you are familiar with the usual simple drawing tools found in many computer programs (arrow selection tool, rectangle drawing tool, . . .).

The Flash 5 Interface

The main interface for the program is illustrated in the following image. We have labeled a few features that will be used in the examples discussed later. Refer to the program's help files (available under "Help" in the main menu) for a more extensive discussion of the many features that we will not discuss in this short introduction. (The menu also provides access to a number of tutorials that can help you learn to use many features of Flash.)

Creating a Symbol to Animate

Open a new file by selecting "File > New" from the upper left corner of the main tool bar. The opening screen reveals a large white area called the stage. The stage is a work area where you can create and then manipulate images.

Set the stage size and background color by choosing "Modify > Movie" (i.e., "Movie" under the main "Modify" menu). In the resulting dialogue box, select 550 for the width, 400 for the height, and a color other than white (say a gray) for the background color.

Use the circle drawing tool (see the tool palette in the above image) to draw a small circle on the stage; if it is not filled, use the paint bucket tool to fill it with a color. (In the figure above the circle has been filled with what is known as a radial gradient fill. But you may choose a simple solid color if you wish. The choice of fill will not affect the rest of this example.) Select the outline of the circle with the arrow tool and delete it (simply press the backspace key while the outline is selected), leaving just the filled interior.

One of the main uses of Flash is to animate images, whether they are letters, numbers, or graphic shapes. In order to be able to do that, we must be able reuse images. The way we do this is by defining images as symbols.

Convert the circle that you drew to a symbol by selecting it with the arrow tool and choosing "Insert > Convert to a Symbol" from the menu. In the resulting dialogue box, choose "Graphic" for the symbol type, and give it a name (whatever you would like). A small "+" now appears in the center of the circle, indicating that it is a symbol.

You should save any computer work on a regular basis, so this is a good time to save what you have done so far. Choose "File > Save" and in the resulting dialogue box choose a directory and a file name (the Flash movie is saved with an extension .fla by default).