Please help! How do I resize external images loaded into uiLoader?

Question

Please help I've been researching this topic for like 2 days straight and it is driving me insane because I can't seem to find a specific answer for what I'm trying to achieve and I know it can be done because I've seen end results on the web. Here is what I'm doing:

1. I created a simple museum gallery with 3 portraits hanging on the wall

2. Inside the museum portraits I created 3 different uiLoaders with a black background

3. I gave all 3 uiLoaders their own unique movieClip names

3. Inside each uiLoader will be a loaded external image via a URL

4. I DO NOT want to resize the uiLoaders - I want to scale the external images proportionately to fit inside the entire contents of the uiLoaders and still remain centered

Here is a sample screenshot of what is currently happening - http://jaegerandroar.com/gallery/flashExample.png

Here is a screenshot of what I want to happen - http://jaegerandroar.com/gallery/desiredResult.png

Here is a screenshot in Flash before the code is executed - http://jaegerandroar.com/gallery/screenshot.png

As you can see currently the 3 random external images are loaded perfectly inside the uiLoaders but you see black background and I want the photos to fit the entire contents of the uiLoaders yet still remain proportionate.

Here is the complete code I have so far:

var myImage:String = "http://a6.sphotos.ak.fbcdn.net/hphotos-ak-snc6/206793_10150223778295255_528440254_8997851_1941858_n.jpg";
var request:URLRequest = new URLRequest(myImage);
uiLoader.scaleContent = true;
uiLoader.load(request);

var myImageOne:String = "http://jaegerandroar.com/roses/ChryslerImperial_051711.jpg";
var request1:URLRequest = new URLRequest(myImageOne);
uiLoaderOne.scaleContent = true;
uiLoaderOne.load(request1);

var myImageTwo:String = "http://jaegerandroar.com/fullsail/tank_03.jpg";
var request2:URLRequest = new URLRequest(myImageTwo);
uiLoaderTwo.scaleContent = true;
uiLoaderTwo.load(request2);

Any suggestions to make this code work would be most appreciated. Thanks

Ned Murphy · Answer

You need to wait until the image is loaded before you can attempt to adjust its size. Also, you need to set the scaleContent to false if you want to gain control of setting the loaded content size. Here's and example that changes the size of the image to match the size of the loader, though you might want something else based on what you explained...

var myImageOne:String = "http://jaegerandroar.com/roses/ChryslerImperial_051711.jpg";
var request1:URLRequest = new URLRequest(myImageOne);
uiLoaderOne.scaleContent = false;
uiLoaderOne.addEventListener(Event.COMPLETE, resizeIt);
uiLoaderOne.load(request1);

function resizeIt(evt:Event):void {
var ldr:UILoader = UILoader(evt.target);
var image:Bitmap = Bitmap(ldr.content);
image.width = ldr.width;
image.height = ldr.height;
}

The resizeIt function can be shared by all three UILoaders since it handles the objects generically.

Note: I tried looking at the first example you linked and my browser brought up a warning regarding trying to access a hostile site. It was not the site named in the link, but in any case, I had no desire to test the rest.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded