he last article in this series showed you how to use Graphic Symbols and Movie Clips to create lightweight and more complex Flash movies. This lesson shows you how to create buttons, the third and most powerful kind of symbol in the Flash Library. You’ll see how to associate the buttons with ActionScript commands to let end users interact with your Flash movies. ActionScript is Macromedia’s proprietary JavaScript-like programming language for Flash MX, and you need to know it if you are going to author Flash files that interact with other Movie Clips, Web sites and even databases.

If you don’t have Flash MX, you can download a free 30-day trial version that you can use to explore Flash’s capabilities.

Setting Up the Flash MX Work Area and a New Document
After opening Flash MX, click the Window menu and then click on the Panel Sets item. From the options available in Panel Sets, select Designer [1024 X 768]. The Color Mixer, Tools, Timeline, and Properties panels remain the dominant palettes, but you need two other panels for this lesson as well. From the Window menu, choose the Library panel so that you can create and store Symbols. Then go back to the Window menu one last time and open the Actions panel. The Actions panel is the method by which you create scripts for Flash objects and timeline frames.

After putting the Panel Set in Designer Mode, go to the Properties panel and click on the Size button. In the dialog box that appears, enter a width of 300 pixels and a height of 200 pixels. For this lesson, leave the background color of the movie set to white. Ensure that the frame rate is set to 12 frames per second (fps) and then click OK.

You will create a Flash file that demonstrates how buttons can control Movie Clips to create the interactive movie shown below

Creating Graphic Symbols for the Movie
Begin by renaming Layer 1 “Background Rectangle.” This layer will hold a rectangle object that will act as the dynamic background in the finished movie. Choose the Rectangle tool from the Tools panel and draw a rectangle with a solid fill and no stroke that covers the entire stage.

Convert the rectangle to a Graphic Symbol exactly as you learned in the last lesson. Select the rectangle with the Arrow tool then click on the Insert menu and choose the “Convert to Symbol” option. In the dialog box that appears, label this new symbol “Background Rectangle” and click on the Graphic option. After setting these properties, click OK. Figure 2 shows how the Convert to Symbol dialog box should appear after you set all the options). Save your file before you continue.

Figure 2: The Convert to Symbol dialog should look like this after you set all the options.

Create a new layer and name it “COLORS” type. On this layer, use the Type tool from the Tools panel to set type that reads “COLORS” in 55 pt. Bold Arial. As described in the previous lesson, you must convert this type into art objects to store it in the Library as a Graphic Symbol. Go to the Modify menu and choose the Break Apart command, breaking the type into individual letters (see Figure 3). Use the Break Apart command again to turn the individual letters into editable vector art. While the letter forms are still selected, convert them into a Graphic Symbol in the same fashion you converted the background rectangle. Name the new Symbol “Colors type” and click OK to return to the stage.

Figure 3: Convert the letterforms into a Graphic Symbol for the Library.

Creating Movie Clips with Frame Actions
You will use the two Graphic Symbols you created in the previous section to create the color-shifting Movie Clips to be controlled by buttons and ActionScript. As you create these Movie Clips, you will also place simple ActionScripts in each frame.

Deselect all the objects that are present on the stage. Choose the Create New Symbol option from the Insert menu. In the dialog box that appears, name the new symbol “Background color shift” and choose the Movie Clip option. Click OK. Flash will take you to the stage and timeline for the “Background color shift” Movie Clip. Remember that the stage and timeline for a clip is independent of the timeline and stage for the main movie.

Drag the “Background Rectangle” symbol from the library to the center of the stage. Insert a keyframe at frames 2, 3, 4, 5, and 6 in the timeline. Select frame 2 in the timeline, and then use the Arrow tool to select the rectangle symbol on the stage. Go to the Properties panel and change the Tint of the symbol instance in this frame to a different color. Repeat this process of tinting the rectangle Symbol for frames 3, 4, and 5, choosing a different color for the tint in each frame. When you get to frame 6 however, choose the same tint you chose for frame 5. Use Figure 4 as a reference if you need a reminder of how to alter the tint of an instance.

Figure 4: Use the Properties panel to alter the tint of a graphic instance in the IDE.

After setting the colors for each keyframe of the background rectangle Movie Clip, click on keyframe 1 in the timeline. Go to the Actions panel and click on the Actions index in the left sub-panel to open the ActionScript directory. Then click on the Movie Control option to see the available script commands for keyframe one in the timeline. Double-click the “stop” command to assign it to the frame. This command tells the Movie Clip to stop playing when frame 1 is loaded. Repeat this process for frames 2 through 5, assigning the stop script in each one. Issuing the stop command at each frame prevents the Movie Clip from cycling through all the colors when you place it on the main stage. Figure 5 shows the Actions panel as it should appear when applying the ActionScript.

Figure 5: The Actions panel looks like this when you assign ActionScript commands to frames 1-5.

Select keyframe 6 in the timeline. Keyframe 6 will issue the ActionScript command gotoAndPlay. Double click on the Movie Control command goto and make sure the other options in the Actions panel appear as they do in Figure 6. The gotoAndPlay command tells the Movie Clip to return to frame 1, where it will then receive the command to “Stop.” The end result is that clicking the “Background” button cycles the colors of the rectangle in the final movie.

Figure 6: Assign the “goto” command to frame 6.

Now that the colors and script commands are in place for the dynamic background, you need to return to Scene 1, or the Main timeline. Click the button labeled “Scene 1” directly under the Timeline panel (see Figure 7.)

Figure 7: The Main timeline should look like this when you return from the Background Rectangle Movie Clip.

Now that you are back in the Primary timeline, you need to create the Movie Clip that features the “COLORS” type. The process is identical to the one you just went through to create the color-changing background, so you should have no problem following these condensed steps.

Deselect all the objects on the stage and from the Insert menu choose the Create New Symbol option. In the dialog box that appears, name the new symbol “Type color shift” and choose the Movie Clip option. Click OK. When you’re in the new Movie Clip’s timeline, drag the “COLORS type” symbol from the library to the center of the stage. Insert keyframes at frames 2, 3, 4, 5, and 6 in the timeline. Change the tint of the symbol at each keyframe to a different color except for frame 6, which you should set so it’s identical to the tint in frame 5. After that, assign the stop ActionScript to keyframes 1 through 5 and the gotoAndPlay ActionScript to frame 6. Return to Scene 1 and save your file.

Creating Buttons
You still need to create the Buttons that let you control the Movie Clips you have created. In the Main timeline, add another layer and name it “Buttons.” Double-click the Rectangle tool and in the dialog box that appears, enter a value of 15 for the corner radius and click OK (see Figure 8.) This alteration to the Rectangle tool lets you create a capsule-like shape for the buttons.

Figure 8: Changing the corner radius in the Option Dialog box lets you create rounded corners with the Rectangle tool.

Using the Rectangle tool, draw a capsule shape on the stage and insert it as a Graphic Symbol in the Library named “Button shape.” Deselect all the objects present on the stage and then choose the Create New Symbol option from the Insert menu. In the dialog box that appears, name the new symbol “Background button” and choose the Button option (see Figure 9.) Note that Buttons are Symbols, and they must be stored in the Library labeled as such. It is important that you tell Flash this new Symbol will be a Button, because Buttons have unique timelines that are unlike timelines for Movie Clips. Click OK.

Figure 9: Create a new Symbol labeled as a Button.

Flash has now shifted the stage to the timeline for the new Button. When you look at the Layers in the timeline, you can see that this timeline has only four frames. Each frame is labeled with names, not numbers. The names correspond to different “states” for the button. The Up frame is the normal state; it’s visible when the button is on the stage, but the user is not interacting with it. The Over frame becomes visible when user’s cursor passes over the button in the final Flash movie. The Down becomes visible when the user clicks the button with a mouse. Finally, the Hit frame is never visible, but any symbols or art objects that you place in this frame indicate the button’s active (or “hit”) area.

Rename Layer 1 in the Button timeline “Button Shape” and add a second layer labeled “Type.” In the “Up” frame of the “Button Shape” layer, drag the “Button Shape” Graphic Symbol on to the center of the stage. In bold Arial font, type the word “background” on the “Type” layer and break it apart (see Figure 10.)

Figure 10: The Button Symbol’s unique timeline in the IDE.

Add a keyframe to the Over frame on both layers. In the “Button shape” layer, using the Arrow tool, select the “Button Shape” symbol and then use the Properties panel to change the brightness of the selected instance to 25%. Figure 11 shows how to change the Brightness of a Symbol instance. Note the overall effect of the four states (frames) of the button; “Up” is a simple red graphic. “Over” is a lighter shade that appears when the user moves the mouse over the button. “Down” is a darker shade of red that users see when they click the mouse or press the button using the keyboard. And “Hit” contains the “Button shape” Graphic Symbol in the exact place where it lies in the previous three frames, ensuring an accurate mouseover synch. Return to Scene 1 and delete the Button Shape Graphic symbol that is on the stage. Replace it with the “Background button” Button Symbol from the Library.

Figure 11: Use the Properties panel to alter the brightness of a symbol instance.

Repeat the process described above to create the button that will change the color of the “COLOR” type in the final movie. Here are the steps without all the explanation.

• Deselect all objects in the main timeline.
• Using the Insert menu, create a new Button symbol named “Type button” and click OK to place it in the Library.
• In the Button timeline that appears, rename Layer 1 to “Button shape” and add another layer named “type.”
• In the “Up” frame of the “Button Shape” layer, drag the Button Shape graphic symbol to the stage. Then on the “Type” layer, set the word “type” in bold Arial font and break it apart.
• Add a keyframe to the “Over” frame on both layers.
• In the “Button shape” layer, change the brightness of the instance to 25%.
• Add a keyframe to the “Down” frame on both layers.
• In the “Button shape” layer, change the brightness of this instance to 25%.
• Add a keyframe to the “Hit” frame on both layers but leave the art elements untouched.
• Return to Scene 1 and drag the “Type button” Button symbol to the Stage from the Library.

Remember to save your file.

Assigning ActionScripts to the Buttons
The final step is to assign ActionScript commands to the buttons in the main timeline to make the Flash movie interactive. Select the Background rectangle in the “Background” layer and delete it from the stage. Replace it with the “Background color shift” Movie Clip from the library. Select the “Background color shift” Movie Clip on the stage and name the instance “Background” in the Properties panel (see Figure 12.)

Figure 12: Give the Background color symbol instance a unique name on the stage.

When using ActionScript with a Symbol, you must give each instance of that symbol a unique name, because you can assign different ActionScript commands to multiple instances of the same symbol. Flash must be able to determine the instance to which the script commands belong.

Select the “Background” button on the stage. In the Actions panel assign the ‘with’ variable to the button. In the ‘Object’ field, type in ‘background’, which refers to the Movie Clip instance on the stage (see Figure 13.)

Figure 13: Naming an instance of a Symbol on the stage.

In the Scripting window of the Actions panel, click on the line that reads

       with (background) { 

Go to the Actions menu within the Actions panel and assign the ‘goto’ Movie control to the ‘with’ variable. From the “Type” pull-down menu, select the “next frame” option. Your ActionScript code should resemble the code in Figure 14. Save the file.

Figure 14: Here’s the completed ActionScript for the “background” button.

The ActionScript breaks down as follows: on (release) tells the Flash movie to take the following actions when the mouse is released after clicking the button. With (background) tells the Flash movie to find the instance named “background” and nextFrame(); tells the “background” instance to go to the next frame of the Movie Clip.

Repeat the steps shown above to assign the same ActionScript command to the “type” button.

Select the “COLORS” type graphic symbol in the “COLORS” type layer and delete it from the stage. Replace it with the “Type color shift” Movie Clip from the library. Select the “Type color shift” Movie Clip on the stage and name the instance “type” in the Properties panel. Select the “type” button on the stage and in the Actions panel assign the ‘with’ variable to the button. In the ‘Object’ field, input ‘type’, referring to the Movie Clip instance on the stage. In the Actions panel assign the ‘goto’ Movie control to the ‘with’ variable. From the “Type” pull-down menu, select the next frame option. See Figure 15 for an image showing how the Actions panel should appear after you have properly assigned the ActionScript for the “type” button.

Figure 15: Here’s the completed ActionScript for the “type” button.

Publish
If you wish to preview your movie as it will appear in a standalone Flash file, click the Control menu and then select the Test Movie option. When you are finished previewing the movie, simply close the window. To create a final Flash file and embed it in an HTML page, click on the Arrow tool, go to the Properties panel, and click on the button labeled Flash Player 6

In the dialog box that appears, simply click the “Publish” button. Clicking the Publish button creates an HTML file with your animated movie embedded in it, located in the directory where you saved your .fla file. To see the completed image, load that HTML file into your browser.

After completing this tutorial, you should begin to see the power of Flash’s animation and interactive functions. The movie you just created uses only a handful of letters and a single circle which Flash refers to multiple times, keeping the final file size under 2KB. Try creating a movie using many different Movie Clips that contain the same graphic symbol to see how far you can push and test the Library’s capabilities.