How to Use Flash 8 to Make Button Templates
Many Flash designs call for a uniform button scheme---several buttons that look alike but have different labels and perform different tasks. You could create each button separately, but that's too much work. It's much easier to create one button template and use it to make the rest of your buttons. All you'll need to change is the label on each button.
- Difficulty:
- Moderately Easy
Instructions
-
-
1
Open an existing Flash FLA movie or create a new one in Flash. Select either the "Oval" or "Rectangle" tool from the Tools panel and draw your button shape on the stage. (You can also create your button shapes in Photoshop, iPhoto, or some other image editor and import them into your movie. These programs are much more able to create special effects, such as bevels and drop shadows, than Flash 8.)
-
2
Go to the Properties panel and change the width, height, stroke weight, and fill and stroke colors to your taste (or to match the overall design your movie).
-
3
Select the "Text Tool" from the Tools panel, and then draw a text box inside the button shape. Type the label for your first button. Format the text (font, color, etc.) as desired with the options in the Properties panel.
-
4
Select both the text and the shape, and then right-click them and choose "Convert to Symbol" from the fly-out menu. This opens the Convert to Symbol dialog. Select the text in the "Name:" field and type a meaningful name. (You could, for example, name your Home button "Home.") Click the "Button" radio button to select it, and then click "OK."
-
5
Double-click the new button symbol to place it in Edit mode. Each symbol has its own timeline. Button symbol timelines have four frames: "Up," "Over," "Down," and "Hit." Each frame represents a mouse state. "Up" is the normal mouse state. The other three represent interactions with the mouse cursor. "Over" is a hover state, when the user moves the mouse cursor over the button. "Down" represents a depressed-mouse-button state, when the user begins to click the mouse. "Hit" is a released-mouse-state, the second half of a mouse click.
-
6
Right-click the "Over" frame, and then choose "Insert Keyframe" from the fly-out menu. Insert keyframes in the "Over" and "Up" frames. Now you can modify each mouse state. Say, for example, you want the button to appear slightly darker when the user hovers the cursor over it. Simply select the button shape and modify it in the Properties panel. (If you used an imported shape, you can create and import a different shape for each state. Just replace the existing shapes with the ones you want to display for each state.) You can also add sound effects to each mouse state. Just select a frame, and then drag the sound effect from the library to the stage
-
7
Exit Edit mode (click the scene name in the upper-right corner of the document window). To reuse the template, right click the symbol in the Library, and then choose "Duplicate" from the fly-out menu. Name the symbol and click "OK." Drag the new symbol to the stage.
-
8
Double-click the symbol to place it in Edit mode. Double-click the text field and change the label. Replace the label for each mouse state. Exit Edit mode.
-
1
Tips & Warnings
You can duplicate the symbol as many times as you want.
You can copy and paste this template from one FLA Library to another to use it in other movies.
