Button Frames: Up - Over - Down - Hit

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

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 will respond to the mouse click. This area is invisible in the movie.

Follow the steps below to create a button that changes size when the mouse is over it, and changes color when the mouse clicks on it.

Step 1

Create a new button symbol following the steps in the Button Symbols section.

Step 2

Select the first frame of the button's timeline. Select Insert | Keyframe

Drag a copy of the Button-up graphic from the library to the center of the stage

Step 3

Select the second frame of the button's timeline. Select Insert | Blank Keyframe from the menu.

Drag a copy of the Button-over graphic from the library to the stage. Try to position it exactly where the button graphic in the first keyframe (you can turn on onion skin option to check your work). This will prevent the button from looking like it's moving around when "activated".

Step 4

Select the third frame of the button's timeline. Select Insert | Blank Keyframe from the menu.

Drag a copy of the Button-down graphic from the library to the stage. Again, try to position it exactly in the same place as the previous graphics.

Step 5

Select the fourth frame and select Insert | Keyframe

Use either the Rectangle or Oval tool to draw an area around the button. This is the "active" area where the mouse will respond to the button's presence.

Step 6

Click on Scene 1 in the movie navigation to return to your movie.

Your Library now contains a button symbol (select Window | Library from the menu if you don't see your Library). Drag a copy of it to the stage and click to see how it looks.