Question

I am attempting to load multiple images in AS3 and I’m exploring different options on how this can be done.

I would like to have to only use one Load() instance and handle the various image assignments in the onComplete handler…

here is my first attempt:

var buttonLdr:Loader = new Loader();
buttonLdr.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, onLoadError);
buttonLdr.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadComplete);

whichButton = 0;
buttonLdr.load(new URLRequest("images/test.png"));

whichButton = 1;
buttonLdr.load(new URLRequest("images/testDown.png"));

whichButton = 2;
buttonLdr.load(new URLRequest("images/testHover.png"));

private function onLoadComplete(e:Event):void
{
    switch(whichButton)
    {
        case 0:
            buttonBgUp = e.target.loader.content;
            break;
        case 1:
            buttonBgDown = e.target.loader.content;
            break;
        case 2:
            buttonBgHover = e.target.loader.content;
            break;
    }
    create();
}

A pretty straightforward approach… although it only calls the function on the last call, setting the buttonBgHover, but nothing else.

Any guidance to what might be going on here would be greatly appreciated.

-thanks

Answer 1

You need to call next load only when previous load completes.

whichButton = 0;
buttonLdr.load(new URLRequest("images/test.png"));
private function onLoadComplete(e:Event):void
{
switch(whichButton)
{
    case 0:
         buttonBgUp = e.target.loader.content;
        whichButton = 1;
        buttonLdr.load(new URLRequest("images/testDown.png"));
        break;
    case 1:
         buttonBgDown = e.target.loader.content;
        whichButton = 2;
        buttonLdr.load(new URLRequest("images/testHover.png"));
        break;
    case 2:
        buttonBgHover = e.target.loader.content;             
        break;
}
create();

}