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.