Creating buttons

Buttons are actually four-frame interactive movie clips. When you select the button behavior 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, you place an instance of the button symbol on the Stage and assign actions to the instance. You must assign the actions to the instance of the button in the document, 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 the button.
• 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 responds to the mouse click. This area is invisible in the SWF file.

You can also create a button using a movie clip symbol or a button component. There are advantages to using each type of button, depending on your needs. Creating a button using a movie clip enables you to add more frames to the button or add more complex animation. However, movie clip buttons have a larger file size than button symbols. Using a button component allows you to bind the button to other components, to share and display data in an application. Button components also include prebuilt features, such as accessibility support, and can be customized. Button components include the PushButton and RadioButton. For more information, see "Button component" in Using Components.

For a lesson on creating buttons with ActionScript, select Help > How Do I > Quick Tasks > Write Scripts with ActionScript.

To create a button:

1. Select Edit > Deselect All to ensure that nothing is selected on the Stage.
2. Select Insert > New Symbol, or press Control+F8 (Windows) or Command+F8 (Macintosh).

   To create the button, you convert the button frames to keyframes.

3. In the Create New Symbol dialog box, enter a name for the new button symbol, and for Behavior select Button.

   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.

4. 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 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.

5. Click the second frame, labeled Over, and select Timeline > Keyframe.

   Flash inserts a keyframe that duplicates the contents of the Up frame.

6. Change the button image for the Over state.
7. Repeat steps 5 and 6 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.

   You can create a disjoint rollover, in which moving the pointer over a button causes another graphic on the Stage to change. To do this, you place the Hit frame in a different location than the other button frames.

8. To assign a sound to a state of the button, select that state's frame in the Timeline, select Window > Properties, and then select a sound from the Sound menu in the Property inspector. For more information, see Adding sounds to buttons.
9. When you finish, select Edit > Edit Document. Drag the button symbol from the Library panel to create an instance of it in the document.

Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/flash/mx2004/main_7_2/00000179.html

Add Comment