The first thing you'll notice is that the timeline for a Button symbol is different from any other timeline we've seen before; it has four primary stages, rather than frames. Those stages are:
- Up: the "resting" state of the button; how it looks when it's not being clicked or moused over. This is the default state.
- Over: the "mouseover" state; this stage defines how the button will look any time the mouse cursor moves over it, and creates the commonly-known "rollover" effect.
- Down: the state that the button shifts to during the active moment when the mouse cursor is held over it and clicked. Just moving this button a couple of pixels to the side and down on this one stage can make the button appear to be "depressed" when clicked on.
- Hit: the stage that defines the active area of the button. This stage isn't visible in your scene; it just defines what areas can be clicked on to perform actions for this button. In most cases you can just copy your Up state over to the Hit stage so that the entire button is defined as a clickable area, though if you wanted to you could put in a purple-polka-dotted orange block the same size and shape as your button; it wouldn't matter, as it would still define the clickable area without being visible.
By default your original button will be placed on the "Up" state as a keyframe.
