This week we'll round out the rest of the basic concepts you need in order to use Flash productively.

1: Importing Graphics

1.1 First prepare or select some small graphic (about 60x60) to use in a Flash project. You may use either a raster graphics program like Photoshop, a vector program like Illustrator, or a combination program like Macromedia's Fireworks. Flash imports a large variety of file types, but you're probably best off using the traditional GIF or JPEG for bitmapped images.

1.2 Open a Flash project. Select Import from the File menu. Navigate to the location of your image file within the dialog box provided. Click on the filename and then click the Add button to select the file for importing. Click Import to complete the process.

1.2 Your graphic will appear in the Stage of your Flash project. At this point the graphic is simply a bitmap file. To do anything interesting with it, we must convert it to a symbol. With your graphic selected (highlighted with a marquee), press the F8 key to create a new symbol.

2: Animation with Motion Guides

2.1 Reposition the image you imported previously in the upper left corner of the Stage.

2.2 Add a new keyframe at frame 30 of the present layer (click in the f30 position and then press the F6 key). With this frame selected, drag the image to the lower right corner of the Stage.

2.3 Double-click on frame 1 to bring up the Frame Properties dialog. Select the Tweening tab and the Motion option from its menu. Test your movie by pressing the Return key. Your graphic should slide diagonally across the Stage. This is a good time to save.

2.4 On the left of your screen, in the layer controls, find the pencil icon that indicates Layer 1 is current. Hold down your mouse button while over this icon. From the resulting menu, select Add Motion Guide. A new layer will appear with a special icon, an ellipse with red dot inside. This should be the current layer.

2.5 Select the Pencil Tool from the Tool Palette. Draw a curved or looping line from somewhere near the upper left corner of the Stage to somewhere near the final position of your image in frame 30.

2.6 Select the Arrow Tool from the Tool Palette. Reset the frame selector to 1.

2.7 Click on your image and drag it slightly across the Stage. As you drag, notice the circle that appears in the middle of your image. Position the image so that this circle connects with the beginning of the line you drew in 2.5. Your image should "snap" to the line once it gets close.

2.8 Reset the frame indicator to 30 and repeat this procedure for the end of your guide line.

2.9 Double-click on frame 1 of your Motion Guide layer. Set tweening for this layer also to Motion. Play your movie to test. Your image should follow the guide line as it moves across the stage.

2.10 Go back to the Frame Properties dialog for the Motion Guide layer. Find the check box labeled "Orient to Path Direction." Select this box. Test your movie again: this time the image should rotate to follow turns in your guide line. This is another good time to save.

2.11 Click on the pencil icon that marks the Motion Guide layer. In the resulting menu, select Hidden. The guide line should disappear.

3: Adding a Button

3.1 Go to the Layers area of the screen and insert a new layer underneath the Motion Guide layer. Generally speaking, every new object in a Flash movie requires its own layer. This is certainly true for buttons.

3.2 From the Libraries menu, select Buttons and choose a likely candidate.

3.3 Drag the button image from the Button Library window onto your Stage. Close the Library window. You may resize the button if you like, using the Scale command on the Modify menu. Position your new button in the lower left corner of your Stage.

3.4 Double-click the new button. The Instance Properties dialog box will appear. Select the Actions tab. Find the button on the left side marked by a + (a plus sign). Mouse down on this button and select Go to from the resulting menu.

3.5 On the right side of the Instance Properties dialog, find the option labeled Frame: and change the frame number from to 15. Find the Control: option and select the button labeled Go to and Play. Click OK to close the dialog window.

3.6 Go to the Control menu at the top of your screen and select Enable Buttons. Mouse over your button and note how its appearance changes. This is because buttons are actually little multi-frame interactive movies. If you open your button in the Symbol Editor you can change its appearance and behavior for various states, including mouse over, mouse out, and click. Click on your button. Your movie should jump immediately to frame. Save your work.

4: Adding Sound

4.1 Reset Layer 1 to the current layer and make sure the frame selector is at frame 1.

4.2 Go to the Libraries menu and select Sounds. Select the first sound available, Beam Scan. You'll see a waveform for the sound in the display area of the Library window. Drag this waveform until it is directly over frame 1 of Layer 1 in the Timeline. If you do this correctly, you'll see a reduced image of the waveform appear in blue over the first 20 or so frames of Layer 1.

4.3 Test your movie. You should hear a rather faint electronic hum that comes and goes twice. Use the button we built in the previous part to "bounce" the movie back to frame 15. You won't hear the sound when you do this.

4.4 Double-click on frame 1 to bring up the Frame Properties dialog. Find the option labeled Sync: and select the menu item Stream. Click OK to close the dialog window. Re-test your button. You should hear the sound this time, because it has been synchronized to the specific frames of your movie. This is another good time to save.

5: Frame Action

5.1 Select the frame position immediately after the last frame of your most recent layer (i.e., frame 31 of Layer 2). Insert a keyframe here.

5.2 Double-click on the new keyframe to bring up the Frame Properties dialog again. Select the Action tab and mouse down on the + button. Select Go to. At the Control: option to the right, select Go to and Play.

5.3 Test your movie. It should repeat endlessly now, since its last frame always tells it to return to frame 1 and play again.

This isn't the best way to make a Flash movie repeat (the LOOP attribute of the <EMBED> or <OBJECT> tag is the proper way to do it), but you can use this technique to make your movies more complex. Suppose for instance frame 31 contained a Go to and Play command leading to frame 50. We could then place some interesting content in frames 36-49 and set up some other condition, perhaps a button, that would go to and play this segment.

The procedure just described is a crude way of building Scenes in Flash movies -- segments that can be accessed non-linearly. As you'll see in the Actions dialog window, there is an option for buttons and frames to access other scenes as well as sections of a current scene. There is also an action for loading a new Flash movie into the current window.

6: Combining Flash with JavaScript

Button and frame actions allow you to construct highly complex Flash movies. But with one crucial exception, the actions within a Flash movie are constrained to the window defined by the <EMBED> or <OBJECT> tag. Flash can't interact directly with the HTML or DHTML elements of your Web page.

However, Flash can talk to JavaScript, and through this loophole you may drive many truckloads of cleverness. I suggest using the same technique we learned back in the beginning of the course when we wanted QuicktimeVR to trigger a frame update (remember that?) -- use the Get URL action to call not a Web page but a JavaScript function.

I've built a "Flash Jukebox" as a demonstration of this technique (find the link on the class site). It features a main page with two frames, one of which contains a page with an embedded Flash movie. At the end of this movie is a frame whose Action is set to Get URL. The URL it gets is:

javascript: jukebox()

The jukebox() function picks a random number between 1 and a certain value corresponding to the number of Flash movies ready to display. Each movie is embedded in a Web page whose name contains the index number. The JavaScript function loads the appropriate page into the display frame. Since each page re-invokes the random selector, the system recycles endlessly. This might be a useful mechanism for placing random Flash content in a Web site -- banner ads, for instance.

The jukebox function does not take any parameters, but can in fact pass parameters from Flash actions to JavaScript: you might have one button that gets the URL "javascript: doIt(1)", which another gets the URL "javascript: doIt(2)", and so forth. This way you can use Flash buttons and frames to increase the interactive potential of your Web site.