How to create buttons with Animate

Decide what button type best suits your needs.

Most people choose button symbols for their flexibility. Button symbols contain a specialized internal timeline for button states. You can easily create visually different Up, Down, and Over states. Button symbols also change their state automatically as they react to user actions.

You can use a movie clip symbol to create sophisticated button effects. Movie clip symbols can contain almost any type of content, including animation. However, movie clip symbols do not have built-in Up, Down, and Over states. You create those states yourself, using ActionScript. A disadvantage is that movie clip files are larger than button files. 

Use a button component if you require only a standard button or a toggle, and you don’t want to customize it extensively. Both ActionScript 2.0 and 3.0 button components come with built-in code that enables state changes. So, you don’t have to define the look and behavior of button states. Simply drag the component onto the Stage.

• ActionScript 3.0 button components allow for some customization. You can bind the button to other components, and share and display application data. They have built-in features, such as accessibility support. Button, RadioButton, and CheckBox components are available. 

• ActionScript 2.0 button components are not customizable. The component enables state changes. 

Define your button states.

The appearance of the button when the user is not interacting with it.

The appearance of the button as the user is about to select it.

The appearance of the button as the user selects it.

The area that is responsive to clicks by the user. Defining this Hit frame is optional. If your button is small, or if its graphic area is not contiguous, defining this frame can be useful.

• The contents of the Hit frame are not visible on the Stage during playback.

• The graphic for the Hit frame is a solid area large enough to encompass all graphic elements of the Up, Down, and Over frames.

• If you don’t specify a Hit frame, the image for the Up state is used.

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

Associate an action with the button.

To make something happen when the user selects a button, you add ActionScript code to the Timeline. Place the ActionScript code in the same frames as the buttons. The Code Snippets panel has pre-written ActionScript 3.0 code for many common button uses. See Add interactivity with code snippets.

 ActionScript 2.0 is not compatible with ActionScript 3.0. If your version of Animate uses ActionScript 3.0, you can’t paste ActionScript 2.0 code into your button (and vice versa). Before you paste ActionScript from another source into your buttons, verify that the version is compatible.

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

Choose Insert > New Symbol.

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

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

To create the Up state button image, select the Up frame in the Timeline. 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.

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

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

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.

Repeat steps 5 and 6 for the Down frame and the optional Hit frame.

To assign a sound to a state of the button, select that state’s frame in the Timeline and choose Window > Properties. Then select a sound from the Sound menu in the Property inspector. Only sounds you have already imported appear in the Sound menu.

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

To test a button’s functionality, use the Control > Test  command. You can also preview the states of a button symbol on the Stage by choosing Control > Enable Simple Buttons. This command allows you to see the up, over, and down states of a button symbol without using Control > Test.