Using the Loader display object to load X jpegs, then resize each of the images differently while they're on the stage

Question

Hey there, I was wondering if this is possible to do

I am able to load the image in and have it displayed easily enough by using addChild(myLoader); where myLoader is in the classWide private scope. The problem is, whenever I call my function inside that class which adds the loader to the stage, it clears the old one and puts this new one in even if I add a bit where I change myLoader.name to something related to how many images it has completed. This is a serious hinderance as I can't do anything besides KNOW how many images I will need to load and write the code X times. The problem being is that the urls are read from an XML file.

My main desire was to have a classWide private Array which contained my loaders and I would assign them using myArray.push(myLoader) each time the load had completed. There is a problem which is that it compiles but they never get displayed

it would work as this is written

public class Images extends Sprite
{
    private var imagesLoaded = 0;
    private var myLoader:Loader;

    ...

    public function Images():Void
    {
        myLoader = new Loader;
        //loop calling a myLoader.load(imageURL) for a bunch of urls
        myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
    }

    public function imageLoaded
    {
        myArray[imagesLoaded] = myLoader;
        trace("does\'nt get to here!!");
        addChild(myArray[imagesLoaded]);
        imagesLoaded++;
    }
}

Answer 1

You could create multiple Loaders to load your multiple files:

public class Images extends Sprite
{
    private var imagesLoaded = 0;
    private var myArray:Array;

    ...

    public function Images():Void
    {
        myArray = [];

        for each (var url:String in myBunchOfURLS)
            loadURL(url);
    }

    private function loadURL(url:String):void
    {
        var loader:Loader = new Loader();
        loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
        loader.load(new URLRequest(url));

        // you'll need to add the loader to the display list to see anything!
        addChild(loader);
    }

    private function imageLoaded(event:Event):void
    {
        var info:LoaderInfo = LoaderInfo(event.currentTarget);
        info.removeEventListener(Event.COMPLETE, imageLoaded);

        var loader:Loader = info.loader;
        myArray[imagesLoaded++] = loader;

        // or you could add the loader to the display list here instead?
    }
}

If you have to have one loader, then you'll need to wait for each load to complete, get the bitmap data out of the loaded bitmap, add it to a new bitmap, then start loading the next image. That's a bit more of a pain - I'd stick to this approach if I were you.