Creating Buttons
A button is a type of Symbol in Flash. Thus we will go up to the menu bar and choose insert > New Symbol… We will choose the option for button and give it a name. The button will appear in our library but will not be added to the current scene. It will open with its own “timeline” with four keyable button states.
Click thumbnail to view full image.
Up
Now that we have the button open, we should add a keyframe under the state UP. (Right click on the frame and choose insert keyframe). This is the state of our button when it is untouched sitting awaiting an interaction. This button state is a painting that looks like a classic arcade button created using the paintbrush and the paint-bucket for color fill.
Click thumbnail to view full image.
Over
This state is what the button looks like when a user has moused over the button’s clickable or *hit *area. Add a second keyframe underneath the OVER state. For this particular state, another layer was added for a finger that hovers over the button. Another keyframe was added on this layer’s over state as well. It’s nice to have the finger separate from the button because on the next button state we will change the finger to make it look like it is pressing the button.
Click thumbnail to view full image.
Down
When a user clicks on the button within its clickable or hit area this is what they will see. For this state, I’ve adjusted the finger to look as though its knuckle is bending and pushing the button down. Again, add keyframes to both layers underneath the DOWN state, adjust the finger or paint a new one that is pressing the button, change the button to look like it is being pressed down into the button base.
Click thumbnail to view full image.
Hit
The HIT state of the button is the only one that won’t ever be seen by a user. As mentioned above the hit area is the clickable region on a web page designated to a particular button. For this state, I added a keyframe on only the button layer and drew a rectangle slightly larger than the button graphic. This is the area that will interact with the user; as soon as the mouse enters the area of the rectangle, the button will change to its over state. In this area, a user can click to initiate the down state of the button and if an actionscript is added to the button the user will be take to wherever the button’s target destination is. The hit area can of course be exactly the image of your button’s up state but this is a little more fool-proof.
Click thumbnail to view full image.
To view your button’s interactive states, go to Control > Test Movie.
