Flash started out as FutureSplash Animator, an early animation and vector graphics program for the Web, one of the first to exploit plug-ins to extend the function of browsers. Macromedia acquired the program, made some improvements, and re-released it as Flash 2 in 1996. A further upgrade to Flash 3 took place this fall.

Supported by the Shockwave plug-in that also handles Director movies, Flash has become enormously popular as a basis for animation and simple interactivity in banners and navigation elements. It not only provides vector-based treatment of fonts and graphics, but also includes powerful compression and streaming facilities for sound as well as graphics and text. With the arrival of fifth-series Web browsers in early 1999, Flash support via Shockwave should become part of the default capabilities of Navigator and Explorer. Thus Flash could replace animated GIF -- and possibly even GIF and JPEG themselves -- as a standard image format. As you'll see, though, Flash can be used for many other things besides images. Some have suggested it might ultimately replace HTML itself.

The production environment for HTML is chiefly verbal -- lines of markup -- but Flash is decidedly graphical, based on a relatively simple WYSIWYG interface:

Instead of just describing Flash concepts, this handout invites you to learn by doing. What follows is a step-by-step guide to the construction of a simple first Flash movie. Go to the Graphics Lab, launch Flash, and build it yourself.

Step 1: Launch the Flash 3 program. Go to the Modify menu and select the Movie option. Set width to 480px and height to 75px. The visible content window or Stage should assume these dimensions.

Step 2: Select the Text Tool (the large letter "A") on the Flash tools palette (shown at right). When you do this a color swatch will open up below the font and size indicators. It will come up black at first, but if you click and hold down the mouse button while over it, you will see the 216 Web-safe colors. Select a color. Also select a font and a fairly large size (for instance, 24 point). Move into the Stage and type the phrase "Flash!"

Step 3: Re-select the Arrow Tool (to the left of the Text Tool). Move back into the stage and click on the phrase you just typed. A marquee or border should appear around it to indicate that it is selected. Move the selection to the righthand side of the stage. Now go to the Insert menu and select Create Symbol... (or press the F8 key instead). In the dialog window that opens subsequently, leave the selection at Graphic. Click OK. You have just turned the text you typed into a symbol, which is a graphical object that can be manipulated in various ways. It's necessary to convert any text or graphic to a symbol if you want to transform it in successive frames.

Step 4: As shown in the image below, move your cursor into the frames display area of the timeline and click once below the number 10. Move up to the Insert menu and select the Keyframe option (or press the F6 key). This action does several things: it adds 9 new frames to your Flash movie and makes the last of those frames a keyframe (marked in the display by a blue dot). Keyframes indicate points of reference or state in animations and visual effects. The frames in between keyframes are inserted automatically, and as you'll see, they can be filled with content automatically as well.

Step 5: Be sure the "Flash!" symbol is still selected (surrounded by a border). If it isn't, then click on it once more with the Arrow tool. Hold down the Shift key and click the Right Arrow key on your keyboard to move the symbol to the right. Continue until the symbol is at the righthand edge of the stage.

Step 6: Move your cursor to frame 1, the first frame marked with a blue dot, and double-click. The Frame Properties dialog box should appear. Select the Tweening option and the Motion sub-option. Click OK. You should now see a red arrow running from frame 1 to frame 10. This indicates that all the intermediate states or positions between the two keyframes have been filled in. Press the Enter key to see what this means. You should see your symbol glide across the stage. This would be a good time to select Save from the File menu. Save as Flash movie (the default) under any name you like.

Step 7: Be sure the triangular frame selector (shown in position 1 in the preceding picture) is at 10. You can drag it to the correct position if it's wrong. Also be sure that your symbol is currently selected. Move to the Modify menu. Select Transform, and below that, Scale and Rotate. In the resulting dialog box, set scale to 50% and then click OK. Your symbol should now be half its original size. Press the Enter key to play your movie again. This time the symbol text "Flash!" should shrink as it slides across the stage.

Step 8: On the lefthand side of the Timeline portion of the interface you should see a small icon that loOKs like a pencil. It sits to the right of a rectangle marked Layer 1. Immediately below this pencil icon is a blank rectangle. Click once there. A menu will appear. From this menu select Insert Layer. You should now see a line in the layers display for Layer 2.

Step 9: Select the Text Tool from the tools palette once again. Switch to a different color than you used for the "Flash!" symbol. Move to the frames area of the timeline, find the frame selector (it should still be at frame 10) and drag it to frame 1. Now move down into the stage, click once to make the text tool active, and type a new phrase. E.g., "We only have two hours to save the world!" Step 10: Go to the Insert menu and select Create Symbol again, just as you did in Step 3 (or just press the F8 key). Voila, a second symbol.

Step 11: Go to the tools palette and re-select the Arrow tool. Select your new text symbol and drag it until the leftmost edge of the text is just at the right margin of the screen, as in the picture below. Don't worry about pushing most of your text "offstage" -- Flash is perfectly happy with that situation.

Step 12: Move your cursor into the frames display of the timeline. Position it in the Layer 2 strip immediately below frame 10 of Layer 1. Click once to select this space, then go to the Insert menu and select the Keyframe option as you did in Step 4. This should give you a new keyframe in the 10th position of Layer 2.

Step 13: As in Step 7, go to the Modify menu and select Scale and Rotate. Change the scale of your second symbol to 50%. Hold down the Shift key and use the left-arrow key to move your second symbol to the left until its leftmost edge reaches the left margin of the stage.

Step 14: As in Step 6, double click on frame 1 (this time of Layer 2) and set Tweening to Motion. Press the Enter key to play your movie. You should see your two symbols slide toward and over each other, shrinking as they go.

Step 15: Since the action is a bit fast in a 10-frame movie, let's slow things down a bit. Click on the frame selector (the upper part of the Timeline that looks like a ruler) somewhere between mark 1 and mark 10. Press the F5 key ten times. This adds 10 new frames to both layers of your movie. Since you're adding automatic or non-key frames, the extension stretches out the tweening between initial and final states; and since you're adding equally to both layers, movement remains synchronized. Play back your movie to see the result. This would be another good time to save.

Step 16: As in Step 8, click in the blank rectangle below the pencil icon in the Layer 2 strip. Insert a new layer (Layer 3).

Step 17: Set the frame indicator back to 1. Go to the Libraries menu and select Graphics. The first item in this library is Asterisk. Drag the image out of the library window and over the stage. Release the mouse button. Close down the Library. You've just introduced a third symbol into your movie. Position the asterisk symbol in the middle of the stage.

Step 18: Find the empty space in the Layer 3 strip that corresponds to frame 20. Click there and insert a keyframe (F6).

Step 19: Double-click the asterisk symbol on the stage. A dialog window will appear called Instance Properties. In this window select Color Effect, and from the resulting menu select Alpha. The alpha channel of a graphics file indicates the transparency of the image. Move the slider to 0% and click OK.

Step 20: Click on frame 1 of Layer 3 and set Tweening for this layer to Motion. Replay your movie. As the two text symbols do their thing, the asterisk should fade out. This is another good moment to save.

Step 21: Go to the File menu and select Export Movie. Flash will automatically add the ".swf" extension. Make the full name of your shockwave file "exFlash.swf". Click OK in the dialog box. This exports a highly compressed version of your movie that can be played in a Web browser by the Shockwave plug-in. Since you'll probably want to use the same name for your source movie file and your Shockwave file, be careful to keep the two separate. Do NOT use the ".swf" extension for your initial Flash movie.

Step 22: Create a simple Web page with all the basic tags. Set body background color to white. Give this page some name you will recognize. Within the <BODY> container of your page, enter the following code:

<embed src="exFlash.swf" width="480" height="75" play="true" loop="true" 
quality="autohigh" 
pluginspage="http://www.macromedia.com/shockwave/
download/index.cgi?P1_Prod_Version=Shockwave Flash">
</embed>

Open this page in some browser that has the Shockwave plug-in, and you should see your movie, running over and over endlessly (provided you saved your Web page in the same directory as your ".swf" Shockwave file). If you want to suppress repetition, change the value of the loop attribute to "false." The pluginspage attribute is optional, though it provides an automatic reference for users who do not have Shockwave and thus should be included. The quality attribute as optional as well, but if you don't set it to "high" or "autohigh," your movie will lose data in compression.

Both Netscape and Microsoft support the <EMBED> tag. However, Microsoft also supports a more powerful <OBJECT> tag which implements Microsoft's proprietary ActiveX technology. This tag allows an Explorer browser to install automatically the required Shockwave plugin by downloading it from Macromedia. You may use both <EMBED> and <OBJECT> together to provide for both browsers, as in the following code. Note that the <EMBED> container is inserted into the <OBJECT> container. Failure to observe this hierarchy will keep your code from working.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
width="480" height="75" 
codebase="http://active.macromedia.com/flash3/cabs/swflash.cab#version=3,0,0,0">
<param name="MOVIE" value="exFlash.swf">
<param name="PLAY" value="true">
<param name="LOOP" value="true">
<param name="QUALITY" value="autohigh">

<embed src="exFlash.swf" width="480" height="75" play="true" loop="true" 
quality="autohigh" pluginspage="http://www.macromedia.com/shockwave/download/
index.cgi?P1_Prod_Version=Shockwave Flash">
</embed>

</object>