Load an image using Flash and preserve aspect ratio and centralize

Question

I have two problems to solve.

first, I have this function who add the image (based on url) into a movieclip, and I try to preserve the aspect ratio inside the movie clip. But I need centralize and I find no way to change the loader x and y to a good value.

function addImg(movieclip,url):void {
    var urlRequest:URLRequest = new URLRequest(url);
    var loader:Loader = new Loader();
    var loaderContext:LoaderContext = new LoaderContext();
    loaderContext.checkPolicyFile = true;

    loader.load( urlRequest, loaderContext );

    var W:Number = movieclip.width;
    var H:Number = movieclip.height;
    var A:Number = W/H;

    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, function(e:Event){
        var tempImage:Bitmap = new Bitmap(e.target.content.bitmapData);

        var image:Object = {};
        image.width = 267;
        image.height = 223;

        var a:Number = image.width / image.height;

        if( A >= a ){
            loader.width =H*a;
            loader.height =H;
        }else{
            loader.width = W;
            loader.height =W / a;
        }

        movieclip.alpha =1;     
        loader.alpha = 1;

        movieclip.addChild( loader );
    }); 
}

Second, I'm using the width and height hard coded. How I can identify the original dimension of the image? I try to peek the new Bitmap(e.target.content.bitmapData) but the width and height are wrong (show the w and h of the Stage).

Any ideias?

Answer 1

Not sure if I fully understand your question, but the answer seems as simple as the following example:

package 
{
    import flash.display.Bitmap;
    import flash.display.Loader;
    import flash.display.LoaderInfo;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.net.URLRequest;

    public class Main extends Sprite 
    {

        public function Main():void 
        {
            if (stage) init();
            else addEventListener(Event.ADDED_TO_STAGE, init);

        }// end function

        private function init(e:Event = null):void 
        {
            removeEventListener(Event.ADDED_TO_STAGE, init);

            var loader:Loader = new Loader();
            loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
            loader.load(new URLRequest("images/koala.jpg"));

        }// end function

        private function onComplete(e:Event):void {

            var bitmap:Bitmap = ((e.target as LoaderInfo).content as Bitmap);

            var sprite:Sprite = new Sprite();

            sprite.addChild(bitmap);

            bitmap.x = -(bitmap.width / 2);
            bitmap.y = -(bitmap.height / 2);

            addChild(sprite);

            sprite.x = stage.stageWidth / 2;
            sprite.y = stage.stageHeight / 2;

        }// end function

    }// end class

}// end package

You load the image with a Loader object and add an Event.COMPLETE event listener to the Loader.contentLoaderInfo property.

var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
loader.load(new URLRequest("images/koala.jpg"));

Then when the event handler is called you get the bitmap from the LoaderInfo object

var bitmap:Bitmap = ((e.target as LoaderInfo).content as Bitmap);

You then create a display object container that you add your bitmap to. Then to center the bitmap within your display object container, you set the x property of the bitmap to minus half its width and the y property of the bitmap to minus half its height.

var sprite:Sprite = new Sprite();

sprite.addChild(bitmap);

bitmap.x = -(bitmap.width / 2);
bitmap.y = -(bitmap.height / 2);

Answer 2

You need to pull this data from the contentLoaderInfo property.

In your case:

var originalHeight:int( e.currentTarget as LoaderInfo ).height;
var originalWidth:Number = ( e.currentTarget as LoaderInfo ).width;

As discussed in the documentation for LoaderInfo#height:

This value might differ from the actual height at which the content is displayed, since the loaded content or its parent display objects might be scaled

---

As an aside, you shouldn't declare functions in that matter. It's poor for memory management and code organization. Each time you load an image, that function has to be recreated in memory rather than just referenced. So the CPU has to recreate that function before it can load it, each time you want it and each instance is stored within memory until GarbageCollection is run next.

If you declare it in global space (never nest functions within other functions either), the function is loaded into memory immediately when it is within scope (generally when the class is loaded). So there is a bit of overhead on load, but once it is loaded, it's there and ready to be used. There will also only be the one instance of that function.

This may not seem like a big deal if you are only doing the 1 image, but it can lead to perceived memory leaks when doing things like a thumb wall for a gallery with a few hundred thumbs in it.