Buttons in Flash - Page 3
       by kirupa  |  17 August 2009

In the previous page, you finished the visual side of making a button. You got the normal, over, and down states working. In this page, you will add some code that actually makes your button do more than just look pretty.

The Button and ActionScript
To have your button do different things beyond changing its look when you hover over it or click on it, you need to write some code. First, you will need to give your button an instance name so that you can refer to it from your code. Make sure your button is selected, and from the your Properties panel, you'll see a text field at the very top that says "Instance Name":

[ find the Instance Name text field ]

Replace the text with the name myButton:

[ give your button the instance name myButton ]

Once you have given your button an instance name, you can easily refer to it using code. Let's look at the code itself next. All code in Flash is entered primarily via the Actions window. To display the window, select the first frame on your timeline and hit F9 or right click and select Actions from the menu that appears.

Your Actions window will appear:

[ your Actions window will contain your code ]

It is here where you will write some code that will make your button work. What I am going to is provide you the code to do basic handling of mouse over and click events, and then I'll explain in detail how it all works.

Into your Actions window, copy and paste the following code:

function setupEvents() {

// associate events with event handlers

myButton.addEventListener(MouseEvent.CLICK, clickButtonHandler);

myButton.addEventListener(MouseEvent.MOUSE_OVER, hoverButtonHandler);

}

setupEvents();

 

function clickButtonHandler(e:MouseEvent) {

trace("Clicked Button!");

}

 

function hoverButtonHandler(e:MouseEvent) {

trace("Hovered Over Button!");

}

Once you have pasted your code, test your application again and press Ctrl + Enter or go to Control | Test Movie. Your application will appear in the Flash Player window. Go ahead and hover over and click on your button. The Output panel will appear, and you will see some text such as "Clicked Button" or "Hovered Over Button" appear:

[ look at the Output panel ]

The output you see is an indication that you have written some code that intercepts your mouse events on your button and does something based on it. Let's look at what the code does...starting with setupEvents:

function setupEvents() {

// associate events with event handlers

myButton.addEventListener(MouseEvent.CLICK, clickButtonHandler);

myButton.addEventListener(MouseEvent.MOUSE_OVER, hoverButtonHandler);

}

setupEvents();

The setupEvents functions gets called first, and it just associates each mouse event with the appropriate function that needs to be called when that event is found. That is handled by the following two lines:

myButton.addEventListener(MouseEvent.CLICK, clickButtonHandler);

myButton.addEventListener(MouseEvent.MOUSE_OVER, hoverButtonHandler);

To take a few steps back, here is what you are trying to accomplish. When you click on the button or when you move your mouse over the button, you want some code to be executed. To determine when you click or when you mouse over something, you need something in the background that periodically checks where your mouse is and whether it is over your button or clicking on the button.

That something in ActionScript is known as a listener. A listener is something you attach, much like a parasite, to a host. The host is the element that you want to intercept and process the events on. When an event you are listening for is overheard, your listener is responsible for calling the appropriate function to handle this event. This function is commonly known as an event handler.

In our code, the host is myButton:

myButton.addEventListener(MouseEvent.CLICK, clickButtonHandler);

myButton.addEventListener(MouseEvent.MOUSE_OVER, hoverButtonHandler);

On the myButton instance, we call the addEventListener function to associate an event with an event handler it needs to call.

In the first line...

myButton.addEventListener(MouseEvent.CLICK, clickButtonHandler);

...we tell our listener to listen for the MouseEvent.CLICK event, and when the click event is heard, call the clickButtonHandler function.

In the second line, we do something very similar:

myButton.addEventListener(MouseEvent.MOUSE_OVER, hoverButtonHandler);

Our listener associates the MouseEvent.MOUSE_OVER event with the hoverButtonHandler that gets called when the mouse over event is overheard.

The only missing piece right now is our event handler. Let's look at our two event handlers next:

function clickButtonHandler(e:MouseEvent) {

trace("Clicked Button!");

}

 

function hoverButtonHandler(e:MouseEvent) {

trace("Hovered Over Button!");

}

Your event handler is nothing more than a regular function with the exception of one thing - it must have an argument of type that is Event or based on Event. In our code, our argument is of type MouseEvent because both of the listeners are actually listening to something found in the MouseEvent class.

Be careful to note that not all events will be mouse events, so be prepared to change the argument to your event handler to the appropriate event type as needed.

Conclusion
Well, this wraps up or overview of buttons - both the visuals as well as the code needed to make them useful. If you are curious to see how my example looks, feel free to download the source files below:

Download Source (Flash CS3 and CS4)

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy my books, became a paid subscriber, watch my videos, and/or interact with me on the forums.

Your support keeps this site going! 😇

1 | 2 | 3