liquid layout + tweener + proportional scaling

[bigimaginations]

I have a client that wants their site to scale like this one: http://samples.bigfolio.com/burnside/.

It's a liquid layout and see how the middle box scales, but keeps it's proportions. The site I am doing is a basic rectangle like in the site in the link. Here's what I have, that's not working.

//set stage position
stage.align = StageAlign.TOP_LEFT;
//do not let any of the stage scale
stage.scaleMode = StageScaleMode.NO_SCALE;

this.stage.addEventListener(Event.RESIZE, resizeHandler); 

//create trigger that is fired when resize is triggered
function resizeHandler(event:Event):void {     
	position();
}

//call resize function at start of movie
//this way everything starts in the right place
position();

function position(){	
	//keeps it 100px inside of the stage.
	var bh_scale_x:uint = stage.stageWidth - 100;
	var bh_scale_y:uint = stage.stageHeight - 100;
	
	if( bh_scale_x > bh_scale_y && (bh_scale_y < stage.stageHeight - 100)) {
		bh_scale_y = bh_scale_x - 330 ;
	} else {
		bh_scale_x = bh_scale_y + 330;
	}	
		
	Tweener.addTween(bg_holder, {width:bh_scale_x, height:bh_scale_y, time:.4, transition:"EaseOutExpo" });	
	
	//can't get this line to alight it correctly so that it is centered
	Tweener.addTween(bg_holder, {x:stage.stageWidth/2 - bg_holder/2, y:50, time:.4, transition:"EaseOutExpo" });
}

This code scales it based off of the height of the screen only, but I can't figure out how to make it be based off of both the height and width like in the example.

Also, I can't get it to be centered correctly. It works correctly if I drag the edge of the browser, but if I just hit maximizes, the position gets calculated incorrectly.

[neznein9]

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

stage.addEventListener(Event.RESIZE, onStageResize);

private function onStageResize():void{
    const targetRatio:Number = target.width / target.height;    // stage ratio
    const destRatio:Number = box.wid / box.ht;    // body ratio

    if(targetRatio > destRatio){
        box.height = stage.stageHeight;
        box.scaleX = box.scaleY;
    } else {
        box.width = stage.stageWidth;
        box.scaleY = box.scaleX;
    }
    
    //  assuming your box is positioned with (0,0) at the top left
    box.x = (stage.stageWidth / 2) - (box.width / 2);
    box.y = (stage.stageHeight / 2) - (box.height / 2);
} 

Disclaimer: I'm 2 gin+tonics into the evening so this will very likely need some debugging...

[bigimaginations]

Gin is good, gin is good!!!

Thanks for your reply, it's great. I took it and modified it. It works great when I scale the screen by dragging the edge of it, but if I hit refresh it scales bigger. Any ideas? Here's the code:

    var box:* = bg_holder;

    const targetRatio:Number = stage.stageWidth / stage.stageHeight;    // stage ratio
    const destRatio:Number = box.width / box.height;    // body ratio

    if(targetRatio > destRatio){
        box.height = stage.stageHeight - 175;
        box.scaleX = box.scaleY;
    } else {
        box.width = stage.stageWidth - 250;
        box.scaleY = box.scaleX;
    }
    
    box.x = (stage.stageWidth / 2) - (box.width / 2);
    box.y = ((stage.stageHeight / 2) - (box.height / 2)) + 25; 

[neznein9]

The function never gets called until you resize the window for the first time so on load, everything should be scaled to 100%...in your init, just call the resize handler directly (you can use null as the parameter so it doesn't freak out about the event).

[bigimaginations]

I already do that, I just didn't paste in that code to save room.