How to Create Button Symbols in Adobe Flash CS6 - dummies

By Jennifer Smith, Christopher Smith, Fred Gerantabee

In Adobe Flash CS6, buttons are special symbol types built to respond to mouse or keyboard interaction such as clicks, rollovers, and specific key presses. When paired with ActionScript, buttons can be used for just about any navigation or control task. Buttons are created in the same way as other symbol types, and you can easily drag instances to the stage from your library to create more buttons.

Buttons truly come to life after ActionScript is added, but you must understand how to create proper buttons before wiring them up.

How to create a new button in Adobe Flash CS6

As with graphical symbols, you can create buttons from existing content on the stage or as new empty symbols to which you can add content later.

Follow these steps to create a new button symbol from existing content:

  1. On a new layer in your document, create a new, solid shape on the stage that you want to use as a button and select the shape with the Selection tool.

  2. Choose Modify→Convert to Symbol.

    The Convert to Symbol dialog box appears.

  3. Enter a name for your new button in the Name text box and select Button from the Type drop-down list.

  4. Click OK to create the button.

Choose Window→Library to launch the Library panel, and you see the new symbol with the special button icon next to it.

How to add content to button states in Adobe Flash CS6

You can add content to each frame of your button to make it complete:

  1. If it’s not already open, edit your new button by double-clicking it on the stage or in the Library panel.

    You should have some content on the Up state from when you created the button. Now you can define content for remaining states as well.

  2. Select the Over frame on the button’s timeline and add a new keyframe with the F6 shortcut key.

  3. Use the Selection tool or Property inspector or another drawing tool to modify the artwork on the Over frame.


  4. Select the Down frame and insert a new keyframe by using the F6 shortcut key.

  5. Modify or add content to the Down frame.

    This step determines how the button appears when the user clicks and holds down the mouse button.

  6. Select the Hit frame and create a new keyframe by pressing the F6 shortcut key.

  7. Use existing artwork that’s copied to this keyframe or one of the shape tools to fill this frame with a large, filled Hit area.

  8. Exit the button by clicking Scene 1 above the stage.

  9. Choose Control→Test Movie to preview your movie.

    Rollover and click your new button to see the different states in action.

How to modify button instances in Adobe Flash CS6

Individual button instances can have unique transformations and color effects applied, just like graphic symbol instances. In addition, each button can have a unique ActionScript applied to it, so you can use several instances of a single button symbol to create an entire menu or control bar.

Here’s how to add and modify additional instances of your button on the stage:

  1. Choose Window→Library to make sure that the Library panel is visible.

  2. Drag two more instances of your button symbol to the same layer as your existing button instance.

    If necessary, position the buttons so that they’re spread apart from each other.

  3. Select one of the button instances and choose Window→Properties.

    The Property inspector opens.

  4. Choose Tint from the Style drop-down list in the Color Effect section.

  5. Select a color and set the tint percentage to 100 percent.

    The button becomes tinted with the chosen color.

  6. Select a different button instance, choose the Transform tool from the Tools panel, and use the Transform tool to resize or rotate the selected button.

Preview buttons by choosing Control→Test Movie or Control→Enable Simple Buttons.