Loading Images with Real Screen Resolution (Flash AS3)

Question

I am loading JPEGs into a Flash presentation using load with a flash.display.Loader and it's working great. The JPEGs are sizing to their native resolution (which is perfect). However, if I maximize the Flash presentation (in the Flash Player), the JPGs do NOT take advantage of the bigger screen.

For example, the presentation is 1024x768, and the image is 1280x400. Normally the image shows with a part offscreen in the Flash presentation. However, if I expand the Flash presentation to 1680x1200, the freshly loaded image still goes offscreen. Is there any way to load the jpg (or png, or whatever) to take advantage of the displayed resolution of the Flash presentation?

Edit: I realize this question is hard to read, so any help would be appreciated.

Answer 1

Make sure your content isn't scaled:

stage.scaleMode = StageScaleMode.NO_SCALE;

This will make Flash treat its display area as an absolute size, so that when you expand its container it will have more pixels to play with. Read about scalemodes here.

---

Addendum: based on your comments, a quick refresher on scaling is in order. There are (only!) three things that affect how your Flash content scales:

1. Container size (i.e. the size of your embed tag if you're using a browser, or the size of the Flash Player window if you're testing the SWF locally)
2. Stage size (i.e. the size of your stage at publish time - the size you see in the authoring tool's Property Inspector when you don't have anything selected)
3. Scale mode (which as you noticed, is a global property - there's only one Stage, each movie clips just has a reference to it)

What happens is this: if the scale mode is set to "no scale", then Flash completely ignores the Stage size, and simply displays your content unscaled. If your scale mode is anything other than "no scale", then Flash scales your content so that the Stage size matches up to the Container size. (The different scale mode settings just control whether Flash changes the aspect ratio, and whether it matches the inner or outer dimensions when the stage and container have different aspects.)

Now here's the tricky bit. If you want your content to behave differently when the container changes size (and that's what happens when you go fullscreen), you need to use "no scale". The reason is, when Flash is handling the scaling, your content always "thinks" that the Container size is equal to the Stage size. That is, if your stage size was 800x600, and your container size enlarges to 1024x768, Flash tells your content that the container is still 800x600, and scales up whatever your content shows. If you use "no scale", then Flash tells your content the real container size and assumes you're going to do your own scaling.

Those are the basics. Now moving on to solving your problem, here's what you probably need to do.

1. Make sure you have the scale mode set to no scale.
2. When you load in your content, scale it yourself to however large you'd like it to be. You can query stage.stageHeight and stage.stageWidth to find out the current container size.
3. Register to receive events when the stage size changes, and when that happens, re-scale your images to however you'd like them to display.

Here's sample code to get you started for the third point:

stage.addEventListener( Event.RESIZE, onStageResize );
// ...
function onStageResize( e:Event ) {
    myImg.width = stage.stageWidth;
    myImg.height = stage.stageHeight;
    // or whatever
}

Hope that helps!

Answer 2

Fenomas' answer is wonderful and really covers everything on scaling. However, the answer for me was to leave scaling alone (I had no choice anyway, no time to redo an entire presentation to not be pixel-oriented):

1. Do NOT use images that are the right resolution. Use really big images.
2. When you load them, in the Event.COMPLETE handler, scale them to a size you need (I'm just considering width, but you should consider a bounding box, of course):

So the code looks like this:

if (contentLoader.content.width > MAX_WIDTH) {
    var bitmap:Bitmap = Bitmap(contentLoader.content);
    bitmap.smoothing = true;  // the whole point of the exercise, really
    var oldW = bitmap.width;
    bitmap.width = MAX_WIDTH;
    bitmap.height = MAX_WIDTH / oldW * bitmap.height;
}