Flash CS3  |  Go to CS4 Help

Create a button

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

Create a button using a movie clip symbol or a button component. Using each type of button has advantages. Creating a button using a movie clip lets you 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 Button, RadioButton, and CheckBox. For more information, see Button component in ActionScript 2.0 Components Language Reference or Using the Button in Using ActionScript 3.0 Components.

For a text tutorial about buttons, see Add Button Navigation and Animation on the Flash Tutorials page at www.adobe.com/go/learn_fl_tutorials.

  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 Type 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, select the Up frame in the Timeline and then 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 to animate the button.

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

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

  6. Change or edit the button image for the Over state.
  7. Repeat steps 5 and 6 for the Down frame and the Hit frames.

    The Hit frame is not visible on the Stage, but it defines the area of the button that responds when clicked. The graphic for the Hit frame must be 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.

    To create a disjoint rollover, in which moving the pointer over a button causes another graphic on the Stage to change, 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 > Properties, and then select a sound from the Sound menu in the Property inspector.
  9. When you finish, select Edit > Edit Document. To create an instance of the button in the document, drag the button symbol from the Library panel.


Comments

Comments are no longer accepted for Flash CS3. Flash CS4 is the current version. To discuss Flash CS3, please use the Adobe forum.

 

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

Current page: http://livedocs.adobe.com/flash/9.0/UsingFlash/WSd60f23110762d6b883b18f10cb1fe1af6-7dbf.html