Actionscript 3 (Event Listeners Primer)

The goal of this small article is to give an understanding of Events in Actionscript, by creating a small app that will demonstrate the clicking of button and the events that follow.

First we create 4 layers so we can organize what is going on, call them what you wish, if any anyone wants the flas. I will set up a zip for the blog, but the rest of us here is the example.

First layer "Buttons"

Drag 2 instances of the button onto the layer, put them anywhere you want.

Give them unique names "Button_One" and "Button_Two"

We use this names in our small function to give the text box some info.

Second layer for the dynamic text box, you create this using the text tool, and give it the unique name of "buttonName".

Third Layer static text box, you can name whatever, we are this only as a label.

Fourth layer is the script or actionscript layer where all the magic happens:

Here is what is on this layer:

//listeners for the two buttons
Button_One.addEventListener(MouseEvent.CLICK,showText);
Button_Two.addEventListener(MouseEvent.CLICK,showText);

function showText(e:Event):void{
var txt:String = e.target.name;
//trace(txt);
//buttonName.text = txt;
switch(txt){
case "Button_One":
txt = "Button One";
break;

case "Button_Two":
txt = "Button Two";
break;
}
buttonName.text = txt;
}

All we doing here is assigning the listener to our buttons, so when we click it; it sends the Event Object a parameter.

If you uncomment trace you will notice the names that we gave the buttons, outputted to the output screen.

All we are doing is using a switch on the name of the button to output the text to the dynamic text box, simple (but we can go over that another time), for now you can see how to use simple events in AS 3.

Now the buttons can be drawn and then used, so total customization is at your disposal.

I know this is quick and dirty, but you can apply this to alot of flash projects and you can see it in another tutorial for a weather app.

Comments are welcome.

Thanks.