Introduction to Flash and Actionscript

S4 - Buttons, Keyboard Commands, and HitTest

T1 - Basic Buttons


Step 1

Open a new Flash document.
Draw a rectangle and add text to it.

Convert your rectangle to a button symbol. Name the button and the instance of the button

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

Step 5

To test when the button has been clicked we use an EventListener.

EventListeners wait until something happens and then run the code that is associated with the action.

Add the following code to the actions layer.


Create a Text Box to display a Welcome Message.

Add this code after your eventlisteners

Now create another text box to keep track of the number of times the button is clicked.
At the top of your program (under your imports) add a variable declaration.


In the myClickFunction add 1 to the variable intClick and write it in your new textbox

Create a second Scene with a Button

You will need to add a stop() to the //Main Program Section of Scene 1

The Button on Scene 2 will take you back to Scene 1

Note: You will need different function names