Background centering algorithm

Question

Hi there,

I'm having some trouble writing a correct algorithm for centering a background image. Here's a link to the effect I'm getting right now: http://www.pilotinteractive.ca/dev/.

Here's a sample of what I'm aiming for: http://flashden.net/item/easy-xml-background-image-rotator/full_screen_preview/22015

Here's the not-so-great function I devised:

public function calculateSize():Array {
    var width = stage.stageWidth;
    var height = stage.stageWidth / aspectRate;
    while (1) {
        if (height > stage.stageHeight) {
            break;
        }
       width += 25;
        height = width / aspectRate;
    }
    return new Array(width, height);
}

I believe the mistake I've made is in adjusting to height? Pointers would be great :-) if you resize the window and play around with it you can likely see what I mean.

Best!

Answer 1

Basically what you're trying to do is to scale an image in such a way that it never falls inside the screen. You want to scale it to the minimum size that is guaranteed to cover the entire area of the window.

Though I don't know actionscript, the code looks straightforward.

Try this:

var width = stage.stageWidth;
var height = stage.stageWidth / aspectRate;

if (height < stage.stageHeight)
{
    var factor = stage.stageHeight / height;
    height = stage.stageHeight;
    width = width * factor;
}

This will first calculate how big the image should be to cover the window, right-to-left.

Then it looks at the height of the scaled image, and if that is not big enough to also cover the window top-to-bottom, it calculates how much bigger it must make the image in order to covert that part, then scales the width up by that amount, and sets the height to the window height.

This should do the trick, no looping involved.

The final function would look like this:

public function calculateSize():Array {
    var width = stage.stageWidth;
    var height = stage.stageWidth / aspectRate;

    if (height < stage.stageHeight)
    {
        var factor = stage.stageHeight / height;
        height = stage.stageHeight;
        width = width * factor;
    }
    return new Array(width, height);
}

Answer 2

I've used this code for some time:

var W:uint = stage.stageWidth;
var H:uint = stage.stageHeight;
var stageRatio:Number = W / H;
var imageRatio:Number = image.width / image.height;
if (stageRatio > imageRatio) {
 image.width = W;
 image.scaleY = image.scaleX;
} else {
 image.height = H;
 image.scaleX = image.scaleY;
}
var cx:Number=1/2;
var cy:Number=1/3;
image.x = -(image.width - W) * cx;
image.y = -(image.height - H) * cy;

This will resize any given image so it will always fill the stage with the maximum amount of image possible without losing the ratio...

Notice the last two lines... they will center the picture according to the center cx,cy (0-1)... Its quite common that pictures, specially of people, will have the focus center in the upper part of the picture (usually between 1/3 and 1/5) instead of the exact middle (for instance, in a closeup you never want to crop the eyes).