The Flash Connection Make mine Actionscript 3.0!

Source File: 

streamlining_code_3_combining_listeners.fla

Now, as promised, we're going to see things get a bit better (I told you this was a simple tutorial)!

First, let's drop back a bit, and just deal with the original file, when we were only dealing with the CLICK event alone:

import flash.events.MouseEvent;

square.buttonMode = true;
circle.buttonMode = true;
triangle.buttonMode = true;

square.addEventListener(MouseEvent.CLICK, square_onClick);
circle.addEventListener(MouseEvent.CLICK, circle_onClick);
triangle.addEventListener(MouseEvent.CLICK, triangle_onClick);

function square_onClick(event:MouseEvent):void {
	myText.text = "square was clicked";
}
function circle_onClick(event:MouseEvent):void {
	myText.text = "circle was clicked";
}
function triangle_onClick(event:MouseEvent):void {
	myText.text = "triangle was clicked";
}

You probably know that our event handler function that we write must accept a parameter, which is the event object that it is being passed. It's a rule. It's required to supply this parameter, but it's optional whether we actually use it or not in the body of the function. However, we find that if we do decide to use it, there are a few properties of this event object that we can take advantage of.

Probably one of the most useful ones is the currentTarget property (in this tutorial, I'll ignore the target property. Until you learn the difference though, you should use currentTarget exclusively. See my tutorial on the event flow for a fuller treatment of the difference. In any case, if you use currentTarget you are assured that the object you are addressing is the same one you added the event listener to). This property holds the identity of the object that triggered the event. You might be inclined at first to hang onto instance names. For example, you can understand if the square was clicked, that you should program the square what to do. What I am telling you is that if the square is clicked, the following two things in our event handler will be equal:

1. square
2. event.currentTarget

That is, both of the above are really just pointers that point to the object as it sits in memory, and both are just as valid as names. Let's prove it. Each of our objects on the stage has a name property. The fact that we created them on the stage means that Flash does us a little favor and fills in their "name" property for us (if you had created your objects dynamically, then you would have had to manually assign this name property yourself, but I digress). Anyway, let's change line 12 of the above code to this instead:

myText.text = square.name + " was clicked";

Press CTRL-Enter to test the movie. Now we are grabbing the name property from the "square" object, instead of supplying this text ourselves. Next, change line 12 to this instead and run it:

myText.text = event.currentTarget.name + " was clicked";

You will find that it behaves exactly the same way as before. And obviously, we could go through and change this in the other two event handlers as well. But now that we know that event.currentTarget can point to whichever object got the event, we see that we could actually combine the three listeners into one, and event.currentTarget is a way of saying "whichever object you are." Really cool! So let's change the code so that all three objects are sharing the same event listener function:

import flash.events.MouseEvent;

square.buttonMode = true;
circle.buttonMode = true;
triangle.buttonMode = true;

square.addEventListener(MouseEvent.CLICK, item_onClick);
circle.addEventListener(MouseEvent.CLICK, item_onClick);
triangle.addEventListener(MouseEvent.CLICK, item_onClick);

function item_onClick(event:MouseEvent):void {
	myText.text = event.currentTarget.name + " was clicked";
}

Notice that now the one listener is named item_onClick, and this name reflects the fact that it is now a more generic function that can handle all three objects (not to mention however many more we choose to add later)!

Here is how the swf now behaves, which is exactly how our original example behaved, only now the code that makes it happen is much shorter. Next, we'll see how to use arrays and loops to streamline the other part of the code, where we set the buttonMode property and add all the event listeners!