Flash Tutorial 5: Simple Buttons

In this tutorial, I will be talking about simple buttons:

1. Open up a new flash document.
2. Draw a black rectangle on the stage using the rectangle tool.
3. Select the rectangle if it isn't already selected using the selection tool and press F8.
4. For the name, enter "button" and for the symbol type, select "Button":
5. Press OK.
6. Now you have your very own button! Test your movie.
7. As you place your mouse over the button, the mouse icon will change into a pointing hand. This is all it can do so far, now it's time to add some more stuff to it.
8. Exit out of the testing screen and back to the stage.
9. Double click on the button to edit it.
10. Unlike the movie clip, the time line will be displayed like this in a button:
11. You will see "Up", "Down", "Over" and "Hit". I will go over each one.
12. Now, "Up" is self explanatory, when the button is idle it will display the "Up" state.
13. Now, add a keyframe underneath the "over" state:
14. Now, at the "Over" state key frame, change the rectangle's colour to yellow
15. Now, go back to scene 1 and test your movie
16. Put your mouse over your button. You will see that it will turn yellow. That is because of the "Over" state, once your mouse goes over the button, the button will display the "Over" state.
17. Go back inside the button. (Double click on the button in the library for the forgetful ones)
18. Now put a key frame under the "Down" state:
19. In the down state key frame, change the rectangle color to red.
20. Go back to scene 1 and test your movie.
21. Move your mouse over to the button, the button will turn yellow as expected. Now click the mouse. Clicking the mouse on the button will activate the "Down" state key frame if it has one, in this case the button will turn red.
22. Once more, go back into the button.
23. Add a key frame under "Hit" state.
24. Now, draw 4 rectangles, housing the original rectangle, like this:
25. Now, you won't actually get to see the hit state when testing your movie, but the "hit" state acts like a "remote" trigger, the content in the "hit" key frame is where the button can be pushed.
26. Test your movie, start from the outside and move your mouse in towards the rectangle. But before you reach it, the rectangle should turn yellow. That is because of the "hit" stage, that border you placed around the button means you can push and view the button from there. (In this picture, the "X" represents my mouse):

Congratulations, you have made a simple button. Although it looks like junk we will improve on this later on.