Coding a button in Actionscript 3

Hello everyone, I'm going to start off with some basics in Flash, beginning with adding scripts for buttons in AS3.

It's a fairly big departure from how you COULD use buttons in as2. The biggest change is that you should no longer put code on the button itself, code for buttons goes on the timeline in as 3.

1. So to begin we'll add a button to the stage. I normally just draw a box on the stage and convert to a button symbol. I find it's useful to use invisible buttons (just move the box into only the "Hit" area of the button symbol), it makes things far more flexible. In a later tutorial, I'll show you how to add an invisible button to the stage dynamically at runtime. Make sure you give your button an instance name. Let's call this one "myButton".

2. Now that we have a button on the stage, add a keyframe to your actions layer in the same frame as the button. Normally you would put this code on your timeline in the first frame the button shows up on the stage.

3. Enter the code below:

myButton.addEventListener(MouseEvent.CLICK, myButtonClick);

function myButtonClick(ev:MouseEvent):void
{
trace("myButton has been clicked.");
}

4. Let's go through line-by-line and examine the contents.

myButton.addEventListener(MouseEvent.CLICK, myButtonClick);

This adds an event listener to the button. Notice we use the button's instance name here ("myButton") as opposed to its name in the library. You can see here that we are listening to a CLICK, a simple mouse click. When we hear the CLICK, the function "myButtonClick" is run. "myButtonClick could be the name of any function you'd like to run when the button is clicked.

function myButtonClick(ev:MouseEvent):void

This is just a basic function declaration. First we have the name of the function ("myButtonClick"). Then we have a parameter in parenthesis, "ev:MouseEvent". This just means that this function needs to be passed a MouseEvent, and the function's name for that event will be "ev", which could really be anything you like. The void at the end just means that this function will not return anything, it runs and is finished.

trace("myButton has been clicked.");

This is just a trace statement for sending text to the output window during development. This area is where you would put all of the code you'd like to execute once the button is clicked.

Wrapping Up

That's all there is to it! In the FLA I've included below, I've also added listeners for ROLL_OVER and ROLL_OUT, two commonly used button states. ROLL_OVER is used to run a function when a user rolls over the button, and ROLL_OUT for when they roll back out of the button's hit state. Please refer to the FLA for instructions on how to use them in detail.

And the code here so you can see what I mean:

//http://www.ninjacamp.com
//First, add all of your event listeners
myButton.addEventListener(MouseEvent.CLICK, myButtonClick);
myButton.addEventListener(MouseEvent.ROLL_OVER, myButtonRollover);
myButton.addEventListener(MouseEvent.ROLL_OUT, myButtonRollout);

function myButtonClick(ev:MouseEvent):void
{
//Put code you'd like to execute when the button is clicked below
trace("myButton has been clicked.");
}
function myButtonRollover(ev:MouseEvent):void
{
//Put code you'd like to execute when the button is rolled over below
trace("myButton has been rolled over.");
}
function myButtonRollout(ev:MouseEvent):void
{
//Put code you'd like to execute when the button is rolled out below
trace("myButton has been rolled out.");
}

Sample Code (AS3, CS4)