This is the last part in this short serie of two where we use real world examples to show you how you can create and use your own custom event classes to write customizable and reusable code that you can use in your ActionScript 3.0 projects from time to time.

In this second part we’ll take part one a step further and write classes to load images using the XML-file we loaded in part one.

If you don’t remember anything about part one or never read it, you can find it here.

So what we’re going to do is to take the contents of the XML-file we loaded in part one and extract each of the image-url:s in that file and use them to load the corresponding images. To do this we just need to create two classes and update our document class a bit. The first class that we’ll create will be called ImageLoader and the other will be called ImageLoaderEvent. The ImageLoader-class will be used to actually load the images and the ImageLoaderEvent-class will be used to handle the events thats used when loading the images.

Create the ImageLoader-class

In Adobe Flash, choose File->New->ActionScript file and add the following code to the file that you save as ImageLoader.as in the com-folder.
package com
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.IOErrorEvent;
import flash.events.ProgressEvent;
import flash.display.Loader;
import flash.net.URLRequest;
import flash.display.Bitmap;
public class ImageLoader extends Sprite
{
private var index:int;
public function ImageLoader(url:String, index:int)
{
// This value will be used to know which image
// in the xml-file that's actually been loaded.
this.index = index;
// Load the image
var loader:Loader = new Loader();
loader.load(new URLRequest(url));
// Complete listener
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,
onComplete);
}
public function onComplete(e:Event):void
{
// Dispatch the complete event when the image
// has been loaded
this.dispatchEvent(new ImageLoaderEvent(
ImageLoaderEvent.COMPLETE, false,
false, e.target.content, this.index));
}
}
}

Create the ImageLoaderEvent-class

Now we need to create our custom event class that we’ll use to handle the events that we use when we load the images.

In Adobe Flash, choose File->New->ActionScript file and add the following code to the file that you save as ImageLoaderEvent.as in the com-folder.
package com
{
import flash.events.Event;
import flash.display.Bitmap;
public class ImageLoaderEvent extends Event
{
public static const COMPLETE:String = "complete";
public var image:Bitmap;
public var index:int;
public function ImageLoaderEvent(type:String,
bubbles:Boolean = false, cancelable:Boolean = false,
image:Bitmap = null, index:int = -1)
{
super(type, bubbles, cancelable);
this.image = image;
this.index = index;
}
}
}

Last step is to update our document class

So now we have the classes we need to be able to load the images. As you can see we’ve added an index-value that the ImageLoader-class takes as an argument and that it’s passed to the event-class when the image has been loaded. We’ll explain what this value will be used for in just a moment. First off we need to update our document class (Main.as) so it looks like this.
package
{
import flash.display.MovieClip;
import com.XMLLoader;
import com.XMLLoaderEvent;
import com.ImageLoader;
import com.ImageLoaderEvent;
public class Main extends MovieClip
{
public function Main()
{
var url:String = "xml/images.xml";
var xl:XMLLoader = new XMLLoader(url);
xl.addEventListener(XMLLoaderEvent.COMPLETE,
onXMLLoaded);
}
public function onXMLLoaded(e:XMLLoaderEvent):void
{
var imageXML:XML = e.xml;
// Get a list of all the image-nodes
var images:XMLList = imageXML..image;
var numImages:int = images.length();
var imageLoader:ImageLoader;
// Loop through each image and load it
for(var i:int = 0; i < numImages; i++)
{
// Get the url from the current image-node
// in our XMLList
var urlStr:String = images[i].url;
imageLoader = new ImageLoader(urlStr, i);
imageLoader.addEventListener(ImageLoaderEvent.COMPLETE,
onImageLoaded);
}
}
public function onImageLoaded(e:ImageLoaderEvent):void
{
// The image
trace(e.image);
// With this value we know which image
// in the XML-list that's actually been loaded
trace(e.index);
}
}
}
As we've said we've added the index-value. This index-value is just there so we can know which one of the images in the XML-file that's been loaded. It's just a nice feature that can come in handy if you need to know this. You might have some information to your image that's listed in the image-node and if you have this index-value you can easily extract that information from the XML-file and present it along with the correct image.

Before you run your code you need to create a folder in your project folder (CustomEvents) that you call images. In this folder you need to add three jpg-images called image1.jpg, image2.jpg and image3.jpg.

The output from executing the code should look something like this:
The output from the code

So what's just happened? What we now do in our document class is that we load the XML. When the XML has been loaded we load each image that's listed in that file and when each image has been loaded we just trace the contents of what's been loaded. We could just as easily have added theese images to be displayed on the stage but for the simplicity of this article we've just traced the contents.

When you get the hang of using your own custom event classes you can get more in control of your code and write larger and more powerful applications. You'll also get a collection of classes that you can reuse in many projects and this will most probably save you precious development-time.

That's it, if you have any ideas about how you could improve this code please write a comment!