Exercise 7
X
Flash (Buttons)
Basics
Buttons
Symbols & Interactivity
Animations

How to create a simple button

Buttons are a special type of symbol that contain 4 frames. Each frame of a button symbol represents a different "state" for the button: Up, Over, Down, and Hit. How a button visually behaves when the mouse is rolled over it or when the user clicks on the button is determined by these four states. This document explains how to create a basic button.

To create a new button, do the following:
1 Select Insert > New Symbol, or press Control+F8 (Windows) or Command+F8 (Macintosh).

Note: In Flash 3 and earlier, deselect everything on the stage and choose Insert > Create Symbol.

2 In the Symbol Properties dialog box, enter a name for the new button symbol and choose Button as the Behavior option. Click Ok.

Flash switches to symbol-editing mode. The Timeline header changes to display four consecutive frames labeled Up, Over, Down, and Hit. The first frame, Up, is a blank keyframe.

3 To create the Up state button image, use the drawing tools, import a graphic, or place an instance of another symbol on the Stage. You can use either a movie clip or graphic symbol in a button, but you cannot use another button in a button. Use movie clip symbols if you want to create an animated button.
4 Select the second frame, labeled Over, and choose Insert > Keyframe. The button image from the first frame appears on the Stage.
5 Change the button image for the Over state; repeat steps 4 and 5 for the Down frame and the Hit frame.

Note: The Hit frame is not visible on the Stage on playback, but it defines the area of the button that responds when clicked. Make sure that the graphic for the Hit frame is a solid area large enough to encompass all the graphic elements of the Up, Down, and Over frames. It can also be larger than the visible button. If you do not specify a hit frame, the objects in the Up state are used as the hit frame.

6 After defining the images of the four button states, choose Edit > Edit Movie to exit Symbol Edit mode.
7 Open the Library window by choosing Window > Library. Locate the button in the Library window and then drag the button symbol out of the Library onto the Stage. This creates an instance of the button in the movie.

For information on assigning actions to the button instance refer to the documentation that applies the the version of Flash that you are using. The documentation follows below:

To assign a simple action to a button:
1 In Edit Movie mode, select the button instance created in Step 7 above.
2 Make sure that Enable Buttons from the Control menu is unchecked.
3 Double-click the button to get the Instance Properties dialog box.

Note: In Flash 2 this was the Link Properties: Button dialog box

4 Assign the action by selecting the Action tab in the Instance Properties dialog box. Then, click the plus (+) button and double-click on the appropriate action.

Note: In Flash 2 assign the action using the Action pop-up menu in the Link Properties: Button dialog box. Only one action may be assigned to the button.

5 Make sure that Enable Buttons in the Control menu is checked, so that option is toggled back on.
6 If the selected action has any associated parameters, those parameters will appear in the Parameter panel on the right side of the Actions panel. Choose or type the parameters appropriate for that action.