AS3 Event Basics

Part of the goal of my blog is to explain features and techniques using flash/flex and Actionscript 3 (as well as Dreamweaver/HTML/CSS).

I think advanced programmers have plenty of places to turn to for information about Actionscript 3.0, so I plan at this stage to just cover the basics (well slightly beyond that). As a designer who worked a bit with Actionscript 2, I plan to also point out how AS3 differs from AS2.

That being said; let's get started with Actionscript 3.0 Events.

It took me a little while to understand events handling in AS3. My main hangup was the Event object. I was used to thinking of events as verbs not as nouns. I think I get it for the most part at this point. There are a few things I've seen that got a little weird, but that's a topic for a later post.

Event basics...

For those of you who worked with AS2, you were probably accustomed to writing...

myMovieClip_mc.onRelease = function()
{
//do some stuff
}

While this was relatively easy to write, it did not encourage reusable coding and it was just one of many ways to handle events. For example, you had to use a completely different system if you wanted to work with components.

Here's how the same idea would play out in AS3.

myClip_mc.addEventListener(MouseEvent.CLICK, doOnClick);

function doOnClick(e:MouseEvent):void
{
//do something
}

The first line says add an event listener to the myClip_mc MovieClip; which means we are telling it to wait for something to happen and then telling it (the listener) what to do when it does happen. In this case we have told the new listener to wait until the user clicks the myClip_mc MovieClip and in response run the doOnClick function (which we create later).

The next bit of code creates the doOnClick function. Here's the part that used to mess me up. After naming the function we send it (or pass to it) a value/object of the type MouseEvent? What the hell is a MouseEvent! An event is something you wait for or do. It is not an Object that can be handed over, like a baseball or a cat (or all the other examples of objects given in introductory programming classes).

Think of the Event object as a note that is passed along when the event occurs.

The MouseEvent object sends information like what object triggered the event (target or currentTarget), whether a modifier key was held down during the event (ctrlKey or altKey), or where the mouse was on the stage when the event was triggered(stageX and stageY).

While you might not think of uses for all the features of the MouseEvent object, it certainly gives us options to work with.

Imagine you had three buttons that would use basically the same code. Each would use the same function and just test to see what object triggered the event to decide what to do next.

If you want to know which object triggered the event, try adding a trace statement to the function.

trace(e.currentTarget.name);

This will tell you what was clicked that triggered the function.

There will be more about what you can do after events and more about events themselves in future posts.

--Rich