Parallel image loading in a single class instance with AS3

Question

My problem occurs when I try to load multiple images in one class in AS3.

My code looks something like this:

// Load image 1
var ldr1:Loader = new Loader();
ldr1.contentLoaderInfo.addEventListener(Event.COMPLETE, complete1);
ldr1.load(new URLRequest("img1.jpg"));

// Load image 2
var ldr2:Loader = new Loader();
ldr2.contentLoaderInfo.addEventListener(Event.COMPLETE, complete2);
ldr2.load(new URLRequest("img2.jpg"));

// Load image 3
var ldr3:Loader = new Loader();
ldr3.contentLoaderInfo.addEventListener(Event.COMPLETE, complete3);
ldr3.load(new URLRequest("img3.jpg"))

My problem with this is, that every complete-method receives the same image. Sometimes they all get img1.jpg, sometimes they all get img3.jpg….

I don't have any clue why this is happening.

I'm thankful for any help you can give me.

This is the exact code that I used:

Class CuboidBookView

public function addBackMaterial(url:String):void {
    var loader:Loader = new Loader();
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onBMComplete);
    loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, function (e:IOErrorEvent):void {});

    loader.load(new URLRequest(url));
}
private function onBMComplete(e:Event):void {
    var bmp:Bitmap = Bitmap(LoaderInfo(e.target).content);
    backMaterial = new BitmapMaterial(bmp.bitmapData);
    hidden = false;
}

public function addFrontCoverMaterial(url:String):void {
    var loader:Loader = new Loader();
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onFCMComplete);
    loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, function (e:IOErrorEvent):void {});

    loader.load(new URLRequest(url));
}
private function onFCMComplete(e:Event):void {
    var bmp:Bitmap = Bitmap(LoaderInfo(e.target).content);
    frontCoverMaterial = new BitmapMaterial(bmp.bitmapData);
}

public function addRearCoverMaterial(url:String):void {
    var loader:Loader = new Loader();
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onRCMComplete);
    loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, function (e:IOErrorEvent):void {});

    loader.load(new URLRequest(url));
}
private function onRCMComplete(e:Event):void {
    var bmp:Bitmap = Bitmap(LoaderInfo(e.target).content);
    rearCoverMaterial = new BitmapMaterial(bmp.bitmapData);
}

These methods are called in another class:

CuboidBookView(book.view).addBackMaterial("../res/books/" + b.file + "_back.jpg");
CuboidBookView(book.view).addFrontCoverMaterial("../res/books/" + b.file + "_front.jpg");
CuboidBookView(book.view).addRearCoverMaterial("../res/books/" + b.file + "_rear.jpg");

Edit: I thought, this would help, but it had the same result:

public function addMaterials(name:String):void {
    // Load background image
    var ldr1:Loader = new Loader();
    ldr1.contentLoaderInfo.addEventListener(Event.COMPLETE, function (e:Event):void {               
        var bm:Bitmap = e.currentTarget.content as Bitmap;
        backMaterial = new BitmapMaterial(bm.bitmapData);
        hidden = false;
    });
    ldr1.load(new URLRequest("../res/books/" + name + "_back.jpg"));

    // Load front cover
    var ldr2:Loader = new Loader();
    ldr2.contentLoaderInfo.addEventListener(Event.COMPLETE, function (e:Event):void {
        var fcm:Bitmap = e.currentTarget.content as Bitmap;
        frontCoverMaterial = new BitmapMaterial(fcm.bitmapData);
    });
    ldr2.load(new URLRequest("../res/books/" + name + "_front.jpg"));

    // Load rear cover
    var ldr3:Loader = new Loader();
    ldr3.contentLoaderInfo.addEventListener(Event.COMPLETE, function (e:Event):void {
        var rcm:Bitmap = e.currentTarget.content as Bitmap;
        rearCoverMaterial = new BitmapMaterial(rcm.bitmapData);
    });
    ldr3.load(new URLRequest("../res/books/" + name + "_rear.jpg"))
}

Now the different Bitmaps and Loaders have distinct names and are called within the same method call. The event handlers now are inline.

I cannot figure out where the mistake is.

Answer 1

There really was a problem with the implementation of the Cube in Away3d. Some callbacks were not save.

I found a solution in reimplementing the whole class.

Answer 2

What do your complete1(), complete2() and complete3() methods look like?

What I'd do is save the bitmap from the loader in the following way.

private function complete1(e:Event):void
{
    var image:Bitmap = e.currentTarget.content as Bitmap;
}

Then use this bitmap to render your image.

Obviously using a different variable for each bitmap. I normally have a Dictionary of BitmapData that I save to once loaded.

If the code you posted is exactly what you have in your program then this should work fine.