Creating Animated Buttons
Now it's time to create the animated buttons that you will use to control the visibility of the movie clips. Add another layer to the timeline and name it "Shape tween button." Begin by creating capsule shapes with the rectangle tool, just as you did in the last tutorial. Double-click the Rectangle tool and in the dialog box that appears, enter a value of 20 for the corner radius and click OK (see Figure 8).
|Figure 8: Use the Rectangle tool Option Dialog box to create a rectangle with rounded corners.|
Select the new capsule shape with the Arrow tool, and then, from the Insert menu, convert it to a Graphic Symbol named "Button Shape." Deselect all the items on the stage. Go back to the Insert menu and create a new Movie Symbol clip called "Button Over animation." This new movie clip will function as the "Over" state for the buttons. After you click OK and Flash opens the Movie Symbol timeline, insert the "Button Shape" graphic from the Library and place keyframes at frames 12 and 24. Using the Properties panel, adjust the brightness of the "Button Shape" symbol by 60 percent at keyframe 12 then create Motion Tweens at keyframes 1 and 12 (see Figure 9).
|Figure 9: Use the Properties panel to adjust the brightness of the button shape and to insert Motion Tweens on the timeline.|
Select keyframe 24 in the timeline. Go to the Actions panel and click on the Actions index in the left subpanel to open the ActionScript directory. Then click on the Movie Control option to see the available script commands for keyframe 24. Double-click the "gotoAndPlay" command to assign it to the selected keyframe. The gotoAndPlay
command tells the movie clip to play to the end and then loop back to the beginning, replaying continuously (see Figure 10). Press the Enter key to preview the animation.
|Figure 10: Assigning the gotoAndPlay script to keyframe 24.|
Return to the main timeline. From the Insert menu, create a new movie clip symbol called "Button Down animation." This movie clip will function as the "Down" state for the buttons. Click OK to open the movie clip timeline. As before, insert the "Button Shape" graphic from the Library. Place a keyframe at frame 3. Using the Properties panel, adjust the brightness of the "Button Shape" symbol by minus sixty (-60) percent at keyframe 3 and create a Motion Tween at frame 1. Select keyframe 3 in the Timeline and go to the Actions panel. This time, you want to assign the "Stop" command to the keyframe. Note that the animation for the "Down" state is quick and runs only once. That's because the user will have only a short time span to view an animation that occurs on a mouse down event. Save your file and return to the main timeline.
Delete the "Button Shape graphic symbol that's on the stage of the Main timeline. Create a new layer and name it "Shape Tween button." From the Insert menu, create a new button symbol and name it "Toggle Shape." After you're in the Button symbol timeline, rename Layer 1 to "Button." Place the "Button shape" graphic symbol on the center of the stage by dragging it from the Library. Select the Magnifying Glass tool and zoom in on the button shape graphic. Place guides at the edges of the bounding box of the symbol. You will use these guides to ensure that the movie clips in consecutive frames line up with the graphic. Refer to the first Flash MX tutorial if you don't remember how to create a guide (see Figure 11).
|Figure 11: Drag guides from the Rulers to the bounding box of the graphic symbol to ensure that movie clips in consecutive frames line up properly with a graphic.|
Add a keyframe in the Over frame of the Button timeline. Delete the "Button Shape" graphic symbol and drag the "Button Over animation" movie clip on to the stage from the Library, aligning it with the guides to ensure placement. Add a keyframe in the Down frame. Delete the "Button Over animation" movie clip and place the "Button Down animation" movie clip in the frame, being careful to align it to the guides. Finally, add a keyframe in the Hit frame, but leave the Movie clip in place, since the Hit state of a button is not visible.
Add another layer to the Button timeline and name it "Text." Take the Text tool and in 18 point Bold Arial, type the word "Shape." Use the Arrow tool to position the copy in the center of the button as best you can. Break Apart the type twice from the Modify menu, turning the type into letterforms, and return to the main timeline.
Drag the "Toggle Shape button" onto the stage from the Library, placing it in the lower left quadrant of the stage. Create a new layer and name it "Motion Tween button." Instead of building another button, you're going to take advantage of Flash's Duplicate function to clone the button you just created. Then you'll tweak the cloned button to create a Motion button. In the Library window, right-click on the "Toggle Shape" button symbol and from the pop-up menu, select Duplicate. In the dialog box that appears, rename the duplicate Symbol "Toggle Motion" (see Figure 12). The new button appears in the Library. Double-click the new "Toggle Motion" button in the Library to open its timeline.
|Figure 12: Duplicating a button symbol can save you time and effort.|
On the Text layer, select and delete the word "Shape," and then use the Type tool to replace it with the word "Motion." As before, use the Break Apart function to break the text apart twice, and then return to the main timeline. Drag the "Toggle Motion" button onto the stage in the lower right quadrant. Save your file.