Basic buttons

This flash tutorial will teach you how to create basic buttons. A button contains four states: up, over, down and hit. These states are how the buttons behaves when the mouse is moved over or is clicked on.

Creating a basic button

Step 1

Open a new flash document.
Select the rectangle tool (r) and drag a rectangle shape on the stage. You could use the oval tool if you wish.



Using the selection tool select your rectangle and convert your rectangle into a symbol by selecting F8. Select an appropriate name, check button and click ok.


Step 2

Double click on your button and you should notice the timeline changes. There are now 4 frames:



Up -The appearance of the button when the movie loads up.
Over - The appearance of the button when the mouse is over.
Down – The appearance of the button when it is clicked.
Hit – This state determines where the hotspot of the button will be active. This state is important for buttons which just contain text.


Step 3

Select the over state and insert a new key frame by pressing F6. You can now change the colour of your button, if you wish. This will be the colour when your mouse passes over the button.



Now repeat this for the down and hit state, inserting a new key frame and adjusting the colour of the rectangle.


Step 4

Double click anywhere on the stage and to return to the main timeline.
Test your movie clip Ctrl + enter. Move your mouse over and click you button and you should notice the colours changing.



You should now have a basic button.