AS3 Custom Events

I’ve looked at references and surfed for a simple way to create custom events then finally came up with the following:

Example files: [download]


First create a new fla and add the following code on the first frame’s actionscript:

import customEvent;
var ce:customEvent = new customEvent('manifest.xml');
ce.addEventListener(ce.LOADED, test);
 
function test(event:Event) { trace(event.type); }

 

Now create a new as file and add the following code:

package { 
	import flash.events.EventDispatcher;
	import flash.events.Event;
	import flash.display.Sprite;
	import flash.net.URLRequest;
	import flash.net.URLLoader;
 
 
	public class customEvent extends Sprite { 
		private var _xmlFile:String;
 
		// testXMLLoaded Event declaration
		public function set LOADED(val:String) { }
		public function get LOADED():String { return 'testXMLLoaded'; }
 
 
		public function customEvent(file:String = null) { 
			if (file) { 
				_xmlFile = file;
				loadXML(); 
			}
		}
 
		// load the xml file
		public function loadXML():void {
 
			var images:Array = new Array();
			var url = new URLRequest(_xmlFile);
			var loader:URLLoader = new URLLoader(url);
			var _data:Array;
 
			loader.addEventListener(Event.COMPLETE, xmlLoadComplete);
 
			function xmlLoadComplete(event:Event):void { 
				_data = new Array();
				var xml:XML = XML(loader.data);
				xml.ignoreWhitespace = true;
 
				var xmlList:XMLList = new XMLList(xml.image);
 
				for (var i:uint = 0; i < xmlList.length(); i++) {
					var temp:Object = new Object();
					temp['id'] = i;
					for (var a = 0; a < xmlList[i].attributes().length(); a++) { 
						var prop:String = xmlList[i].attributes()[a].name();
						var val = xmlList[i].attributes()[a];
						temp[prop] = val;
					}
					temp['text'] = xmlList[i];
					_data.push(temp);
				}
 
				// By tracing here, we see that the xml has 
				// loaded at the same time of event dispatch
				trace(_data.length);
 
				// DISPATCH THE testXMLLoaded event
				dispatchEvent(new Event('testXMLLoaded'));
 
			}// end xmlLoadComplete()				
 
		}// end loadXML()
	}//end class
}

 

Lastly, create an xml file named “manifest.xml” with the following structure

<?xml version="1.0" encoding="utf-8"?>
<images>
	<image src="images/gallery2/00.jpg"></image>
	<image src="images/gallery2/01.jpg"></image>
	<image src="images/gallery2/02.jpg"></image>
	<image src="images/gallery2/03.jpg"></image>
	<image src="images/gallery2/04.jpg"></image>
</images>

A Closer Look

As you can see, the following lines tell the class to return the ‘testXMLLoaded’ event when invoked. This also serves as an alias for the event and acts as a constant outside of the class.

public function set LOADED(val:String) { }
public function get LOADED():String { return 'testXMLLoaded'; }

The following line announces the event outside of the class

dispatchEvent(new Event('testXMLLoaded'));

Outside of the class we’re listening for the testXMLLoaded event which is aliased to LOADED (similar to how flash sets event listeners)

ce.addEventListener(ce.LOADED, test);


You must be logged in to post a comment.