ActionScript.org Flash, Flex and ActionScript Resources - http://www.actionscript.org/resources
Create your own Events
http://www.actionscript.org/resources/articles/1096/1/Create-your-own-Events/Page1.html
sachin patil
Hi, This is Sachin Patil, ActionScript developer. I am a Flash, Flex developer/designer toooo but coding is my passion.
I am using this community since i am playing with Flash.
I have completed my Bachelor Degree and Master Degree in Computer Science and Computer Application resp.
I loved JAVA but coincidentally i meet to Flash and I got crush on Flash.
Now i love Flash Coding.
I am satisfied with my life and Flash....
Happy living.........
 
By sachin patil
Published on June 15, 2011
 

The focus of this article is to know about power of your own events. Considering you are familiar with events, still we will see some brief introduction about events as it is basic of your own events.


CustomEvents page1

Event means action, as Mouse Clicks, Mouse Moves, Error occurs , File loads. Whatever happens means event occurs. Flash have its own events like MouseEvent, KeyboardEvent, IOErrorEvent etc.

   While migrating AS 2.0 to AS 3.0 you can see you have lot of control on events. Then why to create your own event? I had that question. I always think, if I write little bit complex logic I will get output. But I got my answer. Custom event gives you power to control your own actions.

I am not theoretical guy so not able to explain you. Let’s see it in my practical way… with example….. 

I created an example for loading bulk of images serially.

For that,

1) I created my own event (BulkImageLoaderEvent) who tells me that all images are loaded or one image loaded and also it passes me that loaded data.

2) I created an object for loading all images where I wrote my business logic for loading bulk images one by one. Also assigns my BulkImageLoaderEvent to this object. Means my custom event controls actions in my custom class.

3) I have some code on timeline to pass raw data.


 BulkImageLoaderEvent Class

 This is my custom event. Which helps in loading bulk of  images.

It will tell me that all images are loaded also single image is loaded.

BulkImageLoaderEvent.as

[as] package

{

      import flash.events.Event;

      import flash.display.Bitmap

     

      public class BulkImageLoaderEvent extends Event

      {

 

                  public static const ALL_LOAD_COMPLETE:String="AllLoadComplete";

                                        

                  public static const SINGLE_LOAD_COMPLETE:String="SingleLoadComplete";

                  public var paramBit;

                  public var paramArr;

                

                  public function BulkImageLoaderEvent($type:String,$paramArr:Array,$paramBit:Bitmap,$bubbles:Boolean = false, $cancelable:Boolean = false)

                  {

                              super($type,$bubbles,$cancelable)

                              this.paramBit=$paramBit

                              this.paramArr=$paramArr;

                  }

                  public override function clone():Event

                  {

                              return new BulkImageLoaderEvent(type,paramArr,paramBit,bubbles,cancelable);

                  }

                  public override function toString():String

                  {

            return formatToString("BulkImageLoaderEvent", "paramArr", "bitmap","type", "bubbles", "cancelable");

        }

      }

}[/as]


CustomEvents page2

I imported Event Class. BulkImageLoaderEvent  Class extends Event Class so that it can inherits  all properties and methods from Event Class.

I import Bitmap Class because in used Bitmap data type in BulkImageLoaderEvent  Class as I am working on images, I think I need to use bitmap data type.

public static const ALL_LOAD_COMPLETE:String="AllLoadComplete";

public static const SINGLE_LOAD_COMPLETE:String="SingleLoadComplete";

This defines your custom event string constant. ie It defines type of your event.

Constructor function have some parameters, out of which $type, $bubbles, $cancelable are standard parameters of Event Class. Using  super keyword we passed parameters to superclass ie Event Class.

      Remaining two $paramArr ,$paramBit, we are going to use as per our use.

I put paramArr and paramBit as public so that I can access them out side this class with its instance.

clone() and toString() functions are belong to Event class and we override them with our two new variables. That’s it. Now lets attach it to our custom class to control its actions.

 

BulkImageLoader Class

Here we put our business logic to load all images.

[as] BulkImageLoader.as

package

{

            import flash.display.*;

            import flash.events.*;

            import flash.net.*

            import BulkImageLoaderEvent

           

            public class BulkImageLoader extends MovieClip

            {

                        private var ImgArr:Array=new Array();

                        private var noOfImgLoaded=0;

                        private var currImgLoaded=0;

                        private var imgReq:URLRequest

                        private var imgurl:Loader

                        private var imgLoadedArray:Array=new Array();

 

                        public function BulkImageLoader(_ImgArr:Array)

                        {

                                    ImgArr=_ImgArr

                                    noOfImgLoaded=ImgArr.length-1

                                    loadImage();

                        }

                        private function loadImage()

                        {

                                    imgReq=new URLRequest(ImgArr[currImgLoaded])

                                    imgurl=new Loader();

                                    imgurl.load(imgReq);

                                    imgurl.contentLoaderInfo.addEventListener(Event.COMPLETE,imgLoaded);

                                    imgurl.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,imgLoadedError);

                        }

                        private function imgLoadedError(e:IOErrorEvent)

                        {

                                    trace("Error")

                                    imgLoadedArray.push(null);

                                    dispatchEvent(new BulkImageLoaderEvent(BulkImageLoaderEvent.SINGLE_LOAD_COMPLETE,imgLoadedArray,null,true,false))

                                    if(noOfImgLoaded==currImgLoaded)

                                    {

                                    dispatchEvent(new BulkImageLoaderEvent(BulkImageLoaderEvent.ALL_LOAD_COMPLETE,imgLoadedArray,null,true,false))

                                    }

                                    else

                                    {

                                                currImgLoaded++;

                                                loadImage();

                                    }

                        }

                        private function imgLoaded(e:Event)

                        {

                                    imgLoadedArray.push(e.target.loader.content);

                                    dispatchEvent(new BulkImageLoaderEvent(BulkImageLoaderEvent.SINGLE_LOAD_COMPLETE,imgLoadedArray,e.target.loader.content,true,false))

                                     if(noOfImgLoaded==currImgLoaded)

                                    {

                                    dispatchEvent(new BulkImageLoaderEvent(BulkImageLoaderEvent.ALL_LOAD_COMPLETE,imgLoadedArray,e.target.loader.content,true,false))

                                    }

                                    else

                                    {

                                                currImgLoaded++;

                                                loadImage();

                                    }

                        }

 

            }
}[/as] 

CustomEvents page3

I import all necessary classes. Also I import BulkImageLoaderEvent Class so that I can use this event. I declared all required variables. In constructor function I got Array which contain list of images path. loadImage() function loads images having path in ImgArr Array with index currImgLoaded. Imgurl Loader have EventListener to  tell that image is loaded or there is file error.

On imgLoaded function I check with counter whether all images are loaded or not if not loaded I call loadImage() function again. So that I can load next image.

Now use of our custom event,

dispatchEvent(new BulkImageLoaderEvent(BulkImageLoaderEvent.SINGLE_LOAD_COMPLETE,imgLoadedArray,e.target.loader.content,true,false))

and

dispatchEvent(new BulkImageLoaderEvent(BulkImageLoaderEvent.ALL_LOAD_COMPLETE,imgLoadedArray,e.target.loader.content,true,false))

 here I dispatched BulkImageLoaderEvent of type SINGLE_LOAD_COMPLETE. Where single image is loaded and passes e.target.loader.content as its paramBit variable’s data. If error occurs I passed null value.

 And when all files loaded I dispatched BulkImageLoaderEvent of type ALL_LOAD_COMPLETE and passes Array of all loaded bitmaps as its paramArr variable’s data.

 

Timeline Code

 mainTimeLine in fla file:

[as]  import BulkImageLoader;

 var xmlReq:URLRequest=new URLRequest("gal.xml")

var xmlurl:URLLoader=new URLLoader();

var imgReqArr:Array=new Array();

var imgLabelArr:Array=new Array();

var startX=0;

var bulkImageLoader:BulkImageLoader;

var GalXML:XML

xmlurl.load(xmlReq);

xmlurl.addEventListener(Event.COMPLETE,xmlLoaded);

function xmlLoaded(e:Event)

{

            GalXML=new XML(e.target.data);

            trace(GalXML)

            for(var i=0;i<GalXML.img.length();i++)

            {

            imgReqArr.push(GalXML.img[i].@src)

            imgLabelArr.push(GalXML.img[i].@label)

            }

            bulkImageLoader=new BulkImageLoader(imgReqArr)

            bulkImageLoader.addEventListener(BulkImageLoaderEvent.ALL_LOAD_COMPLETE,AllImgLoaded);

            bulkImageLoader.addEventListener(BulkImageLoaderEvent.SINGLE_LOAD_COMPLETE,SingleImgLoaded);

}

function AllImgLoaded(e:BulkImageLoaderEvent)

{

            addChild(e.paramArr[1])

}

function SingleImgLoaded(e:BulkImageLoaderEvent)

{

            if(e.paramBit==null)

            {

                        trace("bitmap data not present")

                        return;

            }

            addChild(e.paramBit)

}[/as]


Here I imported BulkImageLoader class so that I can use it.

Here I put my business logic. I loaded XML file , parse it and while creating instance of BulkImageLoader Class I sent an Array which contain path of all files.

And finally I assign BulkImageLoaderEvent of types ALL_LOAD_COMPLETE and SINGLE_LOAD_COMPLETE.  

When ALL_LOAD_COMPLETE event occurs I got all bitmaps which are loaded through e.paramArr

And current loaded bitmap through e.paramBit in SINGLE_LOAD_COMPLETE event type.

That is the power of custom event. Now I can reuse this code whenever I want.

-Regards

http://www.sachinpatilaction.blogspot.com/