Inhereted properties of an image in the loader.

Question

Hey, I'm kinda new to AS3, but I've been trying to learn and read the LiveDocumentation as much as possible, and yet I can't get past this problem:

There's a Loader that I'm filling with different images depending on the button clicked. Now to keep it tidy I'm using the exact same loader. The problem is that no matter what I do to the image, the next image loaded always get's the properties of the previous one. I've used unload and the Loader returns 0 in width and height, and still the next image get's the previous image's w/h. Othe attempts have been separating it from the parent container and taking it out of the display list, and also using an Event.UNLOAD to make sure the previous image is out before the loading of the new image.

Script is gonne kinda long, but the basics would be these,

BrowserLoad.unload();
BrowserReq = new URLRequest("ImageB.jpg"); 
BrowserLoad.load(BrowserReq); 

BrowserLoad.contentLoaderInfo.addEventListener(Event.COMPLETE, Resize);

function Resize (event:Event):void {
/*
And here a big bunch of resizing and scaling of the image loaded that i need to do, is this what's provokin' the later unwanted resizeings!?
*/
}

I guess it's general question: how can i be sure the image previously loaded in a Loader will not affect the next one coming? (its width and height being 0 has not been enough...)

Answer 1

Hi Leonardo,

I've always felt the existence of the Loader object (as it is) in AS3 is an unfortunate design decision, the fact that the loader is also a display object leads to a lot of confusion. Here is a low down on whats going on.

The Loader object is not the asset you loaded, in this case a bitmap image, but rather a container that has your loaded asset as a child DisplayObject. So when you apply transformations to the loader, eg: height or width, you are not modifying the transformation of the loaded asset, but its parent container, the Loader instance. As a result, if you change the loaded asset, ie: unload and load a new one, those transformations are still in place.

As a rule in my own code, I never use Loader objects as DisplayObjects, and use them strictly for loading external content. Once an asset is loaded you can get reference to it directly through the loaders 'content' property like so:

myLoader.content

And then use it wherever you want, and add it to the display list directly.

If you want to use the Loader for display, you can reset all transformations like so:

myLoader.transform.matrix = new Matrix();

Hopefully that helps,

Answer 2

If you need to make this a static class, in the BrowserLoad class , do this instead

public static function loadImage(url:String):void
    {
        var loader:Loader = new Loader();
        var info:LoaderInfo = loader.contentLoaderInfo;

        //add your event listeners here, just adding one for now...
        info.addEventListener(Event.COMPLETE , completeHandler );

        var request:URLRequest = new URLRequest( url  );
        loader.load( request , new LoaderContext(true) );

    }

As Tyler Egeto suggests , apply your transformation to the content:

 public function completeHandler(event:Event):void
 {
     var content:DisplayObject = event.currentTarget.content;
  }

I think this solution would keep it tidier actually, the loader instances are strictly used to load your content , nothing else , if you then need to manipulate your content outside your completeHandler , you still have a few solutions available , for instance store your images in an Array or a Vector of Bitmaps or DisplayObjects. This way you avoid the potential confusion between the properties of the Loader and the properties of the loaded content.