Flash Shockwave Animation

Homepage Construction | Flash

Flash Shockwave

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 5 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 at present), and presently you can download a free 30-day trial version from http://www.macromedia.com.
Note that the plug in to play Flash is free (it can be downloaded from the Macromedia site given above). The program Flash 5 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. We will assume that you have both Flash 5 and the Flash 5 plug in 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 online help (under "Help" in the main menu) for a more extensive discussion of the many features that we will not discuss in this short introduction.

Creating a Symbol to Animate

Open a new file by selecting "File" > "New" from the upper left corner of 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.
To set the stage size and background color by choosing "Modify" > "Movie". In the resulting dialogue box, select 550 for the width, 400 for the height, and select 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 box on the stage and if it is not filled use the paint bucket tool to fill it with a color. Select the outline of the box with the arrow tool and delete it, leaving just the filled interior.
One of the main uses of flash is to animate images whether they are letters, numbers or objects. In order to be able to do that, we must be able reuse images. The way we do this is by creating and identifying defining these images as symbols.
Convert the circle that you drew to a symbol by selecting it with the arrow tool, 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 graphic 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).


			Homepage Construction \| Flash
		Flash Shockwave 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 5 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 at present), and presently you can download a free 30-day trial version from http://www.macromedia.com. Note that the plug in to play Flash is free (it can be downloaded from the Macromedia site given above). The program Flash 5 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. We will assume that you have both Flash 5 and the Flash 5 plug in 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 online help (under "Help" in the main menu) for a more extensive discussion of the many features that we will not discuss in this short introduction. Creating a Symbol to Animate Open a new file by selecting "File" > "New" from the upper left corner of 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. To set the stage size and background color by choosing "Modify" > "Movie". In the resulting dialogue box, select 550 for the width, 400 for the height, and select 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 box on the stage and if it is not filled use the paint bucket tool to fill it with a color. Select the outline of the box with the arrow tool and delete it, leaving just the filled interior. One of the main uses of flash is to animate images whether they are letters, numbers or objects. In order to be able to do that, we must be able reuse images. The way we do this is by creating and identifying defining these images as symbols. Convert the circle that you drew to a symbol by selecting it with the arrow tool, 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 graphic 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).