Easy ActionScript Chain Events

Fri Feb 5 15:19:45 2010

Ok, so this week I have been playing around with events and building all kinds of useless applications... and all while trying to further my education in the Flex Framework and Papervision 3D, which is all going ever so slowly. However, something interesting came from all my futility when I created a class that would pass multiple EventListeners together in a single sentence, giving you something that resembles the functionality of jQuery, albeit a lot less advanced. Allow me to explain...

FIrst of all, this class requires instantiation. Therefore, you will need the following import statement and the call for instantiation.

import Bind;
private var bind:Bind = new Bind();

Ok, so now that we have our Bind class ready, next we need something to test it on. Let's make a quick button.

var btn:MovieClip = new MovieClip();
btn.graphics.lineStyle(2, 0xffffff, .5);
btn.graphics.beginFill(0xCCCCCC);
btn.graphics.drawRoundRect(0,0,100,30, 10);
btn.graphics..endFill();
addChild(btn);
btn.mouseChildren = false;

var btnTxt:TextField = new TextField();
btnTxt.text = "Button";
var format:TextFormat = new TextFormat("Courier", 16, 0x333333);
btnTxt.autoSize = TextFieldAutoSize.LEFT;
btnTxt.setTextFormat(format);
btn.addChild(btnTxt);
btnTxt.x = btn.width/2-btnTxt.width/2;
btnTxt.y = btn.height/2-btnTxt.height/2;
btn.x = btn.y = 10;

Nothing special so far. Basically, all this code does is makes a slightly rounded rectangle and puts some text in it with the label 'Button'. We also set a TextFormat to set the style of the text and move the entire button 10px from top and left of the screen, just so we can see it properly.

Now, if we call the following code, the button will come to life.

bind.bind(btn,{over:overHandler, out:outHandler, click:clickHanlder});

private function overHandler(event:MouseEvent):void{
   //do something
}

private function outHandler(event:MouseEvent):void{
   //do something
}

private function clickHandler(event:MouseEvent):void{
   // do something
}

btn.addEventListener(MouseEvent.CLICK, clickHandler);
btn.addEventListener(MouseEvent.MOUSE_OVER, overHandler);
btn.addEventListener(MouseEvent.MOUSE_OUT, outHandler);

bind.bind(btn,{over:overHandler, out:outHandler, click:clickHanlder});

Quick example

The following example simply shows that in one line of code, you can add a remove multiple listeners from an object.

As you may see, the bind method allows you to string together Events and MouseEvents in one single sentence in the form of an object. Other parameters include "down" (MOUSE_DOWN"), "up" (MOUSE_UP), "move" (MOUSE_MOVE), "doubleClick (DOUBLE_CLICK), added (ADDED_TO_STAGE), enterFrame (ENTER_FRAME).

In addition to the bind method. there is an unbind method. If bind works the same as addEventListener, then unbind would be it's removeEventListener. In fact, not too surprising is the fact that both methods call add/removeEventListener.

I will try to update this class if I feel it is worth continuing, in which I case will write the version alongside the download below. It is currently version 1.0. If that is a different number to the one shown on the download link, then you will know I have updated it. On the other hand, I may never update it. In either case, I hope you enjoy it. I really don't expect you to use it in the place of addEventListener, but it should be good educational material.

Anyway, that's all for now, so get downloading it and see what you think.