When starting to work with buttons, it is important to understand the following fundamentals of Flash:

• There are many different ways of creating buttons in Flash.

• There are two parts of button behavior. The first is how the button itself behaves visually when rolled over or clicked. The second is what happens in the Flash file when the button is clicked.

• Most buttons are designed with different Up, Down, and Over states. These states allow the button to look different when the cursor is over the button and when the button is clicked.

• Buttons in Flash always require ActionScript to make things happen.

• There are 2 versions of ActionScript, 2.0 and 3.0. These versions are not compatible with each other. You must choose only one version to use with all of the buttons in any single Flash file. Be sure to note which version of ActionScript is being used by any tutorials you read.

• In order to test a button’s functionality, you must use the Control > Test Movie command. You can preview the states of a button symbol by choosing Control > Enable Simple Buttons.

In Flash, there are several different ways of creating buttons, each with advantages and disadvantages in different situations. These are some of the most common methods:

• Use a Button symbol

  Button symbols contain a specialized internal timeline that lets you easily create visually different Up, Down and Over states for the button. Button symbols also change their state automatically in response to the mouse cursor. If you use another type of symbol, you must use ActionScript create different button states.

• Use a Movie Clip symbol

  Using a movie clip symbol allows additional flexibility in the appearance of the button because movie clips can contain almost any type of content, including animation. Movie clips do not provide automatic Up, Down, and Over states.

• Use an ActionScript 3.0 Button component

  This component contains pre-written ActionScript 3.0 that enables state changes and allows it to be used as a standard button or a toggle button. For details about working with this component see Use the Button component in Using Adobe ActionScript 3.0 Components. For examples of common Button component tasks, see the AS3 Button Component Quick Start.

  Using a button component allows you to bind the button to other components and 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.

• Use an ActionScript 2.0 Button component

  This component contains pre-written ActionScript 2.0 that enables state changes and allows it to be used as a standard button or a toggle button. For details about working with this component see Button component.

Button symbols are actually a special type of four-frame interactive movie clip. When you select the button type when creating a symbol, Flash creates a Timeline with four frames. The first three frames display the button’s three possible states, Up, Over, and Down; the fourth frame defines the active area of the button. The button symbol timeline doesn’t actually play linearly like a normal timeline; it reacts to mouse 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 assign the actions to the root timeline of the of the Flash file. If the button is inside a movie clip, you can add the actions to the movie clip timeline. Do not add actions to the timeline of the button symbol.

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 physical area that responds to the mouse click. This area is invisible whenever a SWF file plays in Flash Player.

To create a button symbol:

1. Choose Edit > Deselect All, or click on an empty area of the Stage to ensure that nothing is selected on the Stage.

2. Choose Insert > New Symbol, or press Control+F8 (Windows) or Command+F8 (Macintosh).

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

   Flash switches to symbol-editing mode. The Timeline 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 graphic symbols or movie clip symbols inside a button, but you cannot use another button symbol.

5. In the Timeline, click the Over frame, and then choose Insert > Timeline > Keyframe.

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

6. With the Over frame still selected, change or edit the button image on the Stage to create the appearance you want for the Over state.

7. Repeat steps 5 and 6 for the Down frame and the Hit frames.

   Editing the Hit frame is optional. The contents of the Hit frame are not visible on the Stage during playback, but the graphics you add to it define the physical area of the button that responds when clicked. This is useful when the graphic elements of the button are discontunious, which can make the button harder for a user to click.

   The graphic for the Hit frame must be a solid area at least 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 make a button that responds when a different area of the stage is clicked or rolled over (also called a disjoint rollover), place the Hit frame graphic in a different location than the other button frame graphics.

8. 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. Only sounds you have already imported appear in the Sound menu.

9. When you finish, choose Edit > Edit Document. This returns you to the main timeline of your Flash file. To create an instance of the button you created on the Stage, drag the button symbol from the Library panel to the Stage.

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.

These resources provide step-by-step instructions for creating buttons with movie clip symbols:

• Tutorial: Movie Clip Buttons (ActionScript 3.0, Schoolofflash.com)

• Video: Creating a Movie Clip Button (ActionScript 2.0, Kirupa.com)

• Article: Create a Movie Clip button with Up, Over , and Down frames similar to a button symbol (ActionScript 3.0, Flashthusiast.com)

These resources will help you troubleshoot common problems with buttons:

• TechNote: Flash Button Resources (Adobe.com)

• Video: Troubleshooting ActionScript 2.0 button symbols (Kirupa.com)