Listen Up: About Event Listeners

The so-called “event listener model” is an essential component of programming in both JavaScript and ActionScript, but can be a really difficult concept to get your head around. Essentially, when you set up an “event listener” you’re telling a particular object in your program how to react when a particular event takes place.

Probably the most common (and sensical) type of “event” that an interactive graphic or page will capture is a user’s mouse click. Let’s say you’re working in Flash, and you’ve got a button on the stage that you’ve named (on the stage, not in the Library) Button1.

Obviously, when a user clicks on this button, we want something to happen. But what? And how do we tell the button what to do?

First, select the frame that your button is on by clicking on the empty canvas, then click on the Actions panel. The code you’ll put into the Actions panel will look like this:

Button1.addEventListener(MouseEvent.CLICK, jumpToPanel2);

And here’s a bit of translation:

Great, except what’s that bit at the end about “jumpToPanel2″? Where is that? What does it mean?

The answer is: “jumpToPanel2″ doesn’t exist yet, because you haven’t written it. What “jumpToPanel2″ will be is the name of a code container that holds the set of instructions for what should happen when somebody clicks Button1. A named code container like this is called a function.

This sort of “refer to the instructions before you’ve written the instructions” is part of what makes event listeners so confusing. It feels like you’re telling the program to do something before you’ve told it what to do. Don’t worry. Flash doesn’t try to “read” any of those instructions until you publish (Ctrl+Enter or Apple+Enter) your movie.  So you’ve got plenty of time to create that “jumpToPanel2″ code container before Flash starts yelling at you. Usually the hard part is not letting yourself get caught up in this seemingly paradoxical logic. Forge on before you think too much about it.

So quick, let’s make that code container and put some instructions in it:

function jumpToPanel2(e){

And here’s another bit of translation:

Now the code makes a little more sense, and reads something like this:

“Hey symbol on the stage named “Button1″ – when you get clicked, follow the instructions in the code container named “jumpToPanel2″, which says to go to the frame named “Panel2″ and stop there.”

Of course, it will be hard to tell if you’ve made it to the frame called “Panel2″ if there’s nothing on there, so you’ll want to put something visual there first to make sure you can tell if your button click is working. You’ll also want to put a stop(); action on each of your content panels so that Flash doesn’t just run through them all when you publish your movie. If you’ve done all of that though, you should now have a button that jumps you from frame “Panel1″ to frame “Panel2″, and you’ve written your own event listener!


One thought on “Listen Up: About Event Listeners

  1. Pingback: Sound Advice: Embedded audio in Flash

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>