Push Flash Interactivity with ActionScript Buttons
If you're going to make interactive applications you have to give users clickable apparatus. Learn how to create buttons in Flash MX and then assign complex events to those buttons using ActionScript.
by John Lee
Apr 15, 2003
Page 1 of 4
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 PanelSets, 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
Figure 1: Clicking on the buttons of the completed Flash movie changes the colors of the elements.
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.
Author's Note: If you do not wish to choose your own colors, see the sidebar Colors Used in the Sample Movie to view the hex codes for the colors used in the sample movie.
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.