actionscript3 event handling

Advertisement

2.2 The event object

Let's recall that when an event happens, Flash will create an object that will be sent to the registered function. This object contains at least the following information:

type - a string indicating the type of event

target - the instance that sent the event (i.e. a reference to it).

Since target refers to an object you then can also extract information about the target, e.g. its label (if it has one).

2.2.1 The Event handler function

The event handler function (also called a callback function) will be called by Flash as soon as the event happens. Think a function as a kind of recipe that will do something with a given event. This function that you have to define yourself will receive the following information:

• A single event object (just described before) that will contain information about the event type and the instance (e.g. the hello_button in our case).
• In other words, the function will know "what" happened and "where".

Now you must write some code that deals with it, e.g. moves to playhead in the timeline to another frame.

Note: about multiple events and multiple listeners:

• You can register multiple listeners to one instance.
• You can register the same listener to multiple instances.

After you registered an event handling function like

hello_button.addEventListener(MouseEvent.CLICK, click_handler);

you then have to define this function. E.g. if we called our function click_handler we get the following template:

function click_handler(event_object:MouseEvent) {

 /* Do something with this event */

}

event_object is a parameter name (we came up with) and that will contain a representation of the event and that includes a reference to the instance on which the user clicked, e.g. the 'hello_button in our case.

A simple example

From the Flash button tutorial. When a user clicks on the "launch_button", then the launchRocket function is called. It will move the animation to Frame 2 and let it play.

launch_button.addEventListener(MouseEvent.CLICK,launchRocket);

function launchRocket(event:MouseEvent) { gotoAndPlay(2); }

An example

This is the copy/pasted example from the Flash components tutorial.

We first register an event handling function with five different buttons.

btn_rainbow.addEventListener(MouseEvent.CLICK, clickHandler);
btn_tecfa.addEventListener(MouseEvent.CLICK, clickHandler);
btn_bosses.addEventListener(MouseEvent.CLICK, clickHandler);
btn_my_computers.addEventListener(MouseEvent.CLICK, clickHandler);
btn_credits.addEventListener(MouseEvent.CLICK, clickHandler);

The function itself looked like this:

function clickHandler(event:MouseEvent):void {
 switch (event.currentTarget.label)
 {
  case "Rainbow" :
   gotoAndStop(2);
   break;
  case "TECFA" :
   gotoAndStop(3);
   break;
  case "Bosses" :
   gotoAndStop(4);
   break;
  case "My computers" :
   gotoAndStop(5);
   break;
  case "Credits" :
   gotoAndStop(6);
   break;
 }
}

The function will receive an object that contains information about the event.

Let's now look at the first line. What does it mean ?

function clickHandler(event:MouseEvent):void {

• The function is called clickHandler (we can give it any name we like)
• The event object it will receive for processing when something happens is associated with event. In more technical terms event is a parameter that you can use as a variable in subsequent code.
• MouseEvent is the type of the event variable and we should declare this.
• :void means that the function will not return any information.

Non-programmers: Just insert these last two elements the same way and don't worry.

Note: Flash also allows Flash designers who typically just insert little bits of code to ignore typing, e.g. you just could write:

function clickHandler(event)

but this is considered bad practice, it makes your program less secure.

switch is a programming statement that is use to organize program flow. In other words, we need to take different action for different user input. Its syntax is the following:

switch (value) {
  case value_1 :
    /* do something */
    break;
  case value_2 :
    /* do something */
    break;
  ....
  }

So event.currentTarget.label means that we ask the event object event its current target (i.e. the button on which the user clicked) and from this its label (i.e. what the user sees). This will allow us to figure out which button was clicked.

Share This