PreviousNext

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:

You can also create buttons using the ActionScript MovieClip object. See MovieClip class. You can add buttons to your document using button components. For more information on the PushButton and RadioButton components, see Button component.

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