lang="en-US"> Flash AS3 Tutorial: Callbacks or passing multiple parameters to event listeners –  Design1online.com, LLC

 Design1online.com, LLC

online games for girls

Flash AS3 Tutorial: Callbacks or passing multiple parameters to event listeners

by · Published · Updated

So one of the things I’ve found in developing my MMO is that there are numerous times when I need to pass back more information than just the event data when I’m using event listeners. One scenario that I run into a lot is when I want to use the same event handler on multiple objects or movie clips but some variations in event target changes how the event handler should respond making it  impossible to use a single event handler on multiple objects.

Callback Functions

So just like in Javascript you can create a callback function in AS3 which will put additional variables into scope for the event handler. This is an example of how you can pass width, height and color parameters  to an event handler using a callback function:

//the objects you want to use an event listeners on
var myObject1:Object = new MyObjectType();
var myObject2:Object = new MyObjectType();

var myColor:uint = 0xFF0000; //red
var myHeight:int = 100;
var myWidth:int = 100;

//it doesn't matter what type of event you put on this but your callback's event handler must
//take the same event parameter type. So for instance if you send MouseEvent.CLICK then your
//event handler nested inside your callback must use a MouseEvent parameter
myObject1.addEventListener(MouseEvent.CLICK, onObjectClickedHandler(myColor, myHeight, myWidth));
myObject2.addEventListener(MouseEvent.CLICK, onObjectClickedHandler(myColor, myHeight, myWidth));

//this is the callback function that takes multiple parameters and puts our
//parameters into scope for the event handler function
function onObjectClickedHandler(color:uint, height:int, width:int):Function { 

  //now let's change the color for some fun
  //the next time you click on an object with this event listener it will change to blue
  myColor = 0x0000FF; //blue

  //this is the nested event handler. Color, height and width variables are now in scope
  return function(e:MouseEvent):void {
     e.target.width = width;
     e.target.height = height;
     var myNewColor = new ColorTransform();
     myNewColor.color = color;
     e.target.transform.colorTransform = myNewColor;
   }
}

Tags:

You may also like...

3 Responses

  1. Robert Evola says:
    March 28, 2013 at 4:12 am

    I want to dispatch an event when a certain event happens to change my game state. Would i call the handler method and then dispatch the event? I’m just not sure where you are passing back the color, width, and height

    Reply
    • Jade says:
      March 28, 2013 at 2:59 pm

      Hey Robert,

      Essentially what you’re doing is creating an event listener that returns the type of event you want on the object. So if you want an onClick event then your onObjectHandler accepts your parameters and then has a nested return of an onClick event inside of it. This way you have the parameters you need available to your onClick event. Color, width and height are in a global scope so when you change them in the nested onClick the new values will be available to any function that’s using them.

      If you give me a specific example of what game state/variables you’re trying to effect I can post some sample code for you.

      Reply
  2. João Cabral says:
    November 9, 2013 at 2:04 pm

    Nice approach. Actually, I consider it the best one.

    But I’d just like to add a note: adding that function like this won’t allow you to free it from memory later in the same fashion (you’d have to use arguments.callee, but only from inside the function itself). You should store that function in a variable to be able to apply a “removeEventListener” when you don’t need it.

    var f:Function = onObjectClickedHandler(myColor, myHeight, myWidth);

    myObject1.addEventListener(MouseEvent.CLICK, f);
    myObject2.addEventListener(MouseEvent.CLICK, f);
    /* … */
    myObject1.removeEventListener(MouseEvent.CLICK, f);
    myObject2.removeEventListener(MouseEvent.CLICK, f);

    In large apps, this is a must!

    Reply

Leave a Reply to João Cabral Cancel reply