As I venture into the depths of AS3 – I find myself pulling my hair out yet again (and those of you who know me know I have no hair left, so that’s not a good thing). Loading multiple images in Flash is (in my opinion) one of the most basic tasks you should be able to perform – and yet I have struggled with this for the past several hours in AS3. This will be basic knowledge to many of you, but bare with me.

So I need to load a series of JPGs to my movie. Easy right? Right. Back in the days of AS2, all you needed was a simple MovieClipLoader to get all the information you needed, and then some. And what was great about that, is you could re-use it for anything you needed. For example:

var mcl:MovieClipLoader = new MovieClipLoader();
var mcl_listener:Object = new Object();
mcl.addListener(mcl_listener);

mcl_listener.onLoadInit = function(mc:MovieClip) {
	// mc has been initialized and is ready to go
}

Now, anytime you need to load a series of images, you simply use a loop:

for (var i:Number = 0; i < 5; i++) {
	mcl.loadClip(yourImgArray[i]);
}

Not bad right? Well, there is one problem with this method. The problem was that if Flash failed to find an image or the URL was incorrect, it would stop completely unless you specified a way to handle the errors (which most developers don’t bother doing).

Now to AS3
AS3 handles loading of assets quite differently. It now uses the Loader class which holds all the same information as the MovieClipLoader in AS2, and much more. What I found completely mind-boggling, however, is the fact that in AS3, instead of using one loader class for all images, you need a loader class for each item – which to me feels redundant, but after some thought, I realize this will probably eliminate the error problem I told you about in AS2. See, since each asset requires its own Loader, then if it fails, it only affects that one asset. Instead of the whole script crapping out.

Now…I have no clue if this is all accurate…this is simply my own conclusion – which makes sense in my mind – even though it took me several hours to figure it out. So, without further ado:

var imgPath:Array = ["pic1.jpg",
         "pic2.jpg",
         "pic3.jpg",
         "pic4.jpg",
         "pic5.jpg"];
var img_arr:Array = new Array();

for (var n:int = 0; n < imgPath.length; n++) {
     var imgLoader:Loader = new Loader();
     imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);
     imgLoader.load(new URLRequest(imgPath[n]));
}

function loadComplete(e:Event):void {
     img_arr.push(e.target.content);

     if (imgPath.length == img_arr.length) {
	for (var i:int = 0; i < img_arr.length; i++) {
		addChild(img_arr[i]);
	}
     }
}

Is it possible to reuse one Loader class for all images? As far as I can tell…no. But I may be mistaken – so far though, all evidence points to the need of using individual loaders. Having said that, many folks rave about this bulk loader class written by Arthur Debert (which I haven’t tried yet, but looks very solid).

So there you have it folks. I’m positive many of you will have already figured this out eons ago, but for those of you in the same boat as I (resisting change until the very last possible moment), I hope you find it useful.

[update:] The hair-pulling continues. Even though the above method does work, there is one detail that I did not count on. Because each loader acts independently from the others, they also complete the load at different times. So…if you’re trying to load images in a specific sequence, you will need to rethink how you go about doing this. I had to rewrite the entire loading process just to get them to load in sequence and got it to work - but it feels kludgy. Anyone have good tips for this?