Creating buttons

Buttons are actually four-frame interactive movie clips. When you select the button behaviour for a symbol, Flash creates a Timeline with four frames. The first three frames display the button's three possible states; the fourth frame defines the active area of the button. The Timeline doesn't actually play; it simply reacts to pointer movement and actions by jumping to the appropriate frame.

To make a button interactive in a movie, you place an instance of the button symbol on the Stage and assign actions to the instance. The actions must be assigned to the instance of the button in the movie, not to frames in the button's Timeline.

Each frame in the Timeline of a button symbol has a specific function:

• The first frame is the Up state, representing the button whenever the pointer is not over the button.
• The second frame is the Over state, representing the button's appearance when the pointer is over it.
• The third frame is the Down state, representing the button's appearance as it is clicked.
• The fourth frame is the Hit state, defining the area that will respond to the mouse click. This area is invisible in the movie.

To create a button:

Choose Insert > New Symbol, or press Control+F8 (Windows) or Command+F8 (Macintosh). To create the button, you convert the button frames to keyframes.

1. In the Create New Symbol dialog box, enter a name for the new button symbol, and for Behaviour choose Button. Flash switches to symbol-editing mode. The Timeline header changes to display four consecutive frames labeled Up, Over, Down, and Hit.

To create the Up state button image, use the drawing tools, import a graphic, or place an instance of another symbol on the Stage.

2. You can use a graphic or movie clip symbol in a button, but you cannot use another button in a button. Use a movie clip symbol if you want the button to be animated.

3. Click the second frame, labeled Over, and choose Insert > Keyframe. Flash inserts a Keyframe that duplicates the contents of the Up frame.

4. Change the button image for the Over state.

5. Do the same for the Down frame and the Hit frame. The Hit frame is not visible on the Stage, 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 image for the Up state is used as the Hit frame.

6. You can create a disjoint rollover, in which rolling over a button changes another graphic on the Stage. To do this, you place the Hit frame in a different location than the other button frames.

7. To assign a sound to a state of the button, select that state's frame in the Timeline, choose Window > Properties, and then select a sound from the Sound menu in the Property inspector.

8. When you've finished, choose Edit > Edit Document. Drag the button symbol out of the Library panel to create an instance of it in the movie.