Scale images proportionally

[ttmt]

Scale images proportionally

Hi all

I have a simple test site to test scaling images proportionally.

http://www.ttmt.org.uk/imgScale/




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

var hh:Number=80;
var fh:Number=160;
var hfh:Number=240;

stage.addEventListener(Event.RESIZE, stage_resizeHandler);

function stage_resizeHandler(evt:Event):void {
var sw:Number=stage.stageWidth;
var sh:Number=stage.stageHeight;
header_mc.width=body_mc.width=footer_mc.width=sw;
body_mc.height=sh-hfh;
footer_mc.y=sh-fh;
//
var w:Number=body_mc.img_mc.width;
var h:Number=body_mc.img_mc.height;
var r:Number=Math.round(w/h);
//
body_mc.img_mc.width = h*r
}


The site is full browser with 3 MovieClips - header_mc, body_mc and footer_mc.

header_mc is the strip across the top. body_mc is the middle section, which contains a image that is a MC, img_mc. footer_mc is the bottom strip.

When the browser resizes, header_mc and footer_mc stay the same height, but the height of body_mc will change and footer_mc sticks to it's bottom.

When the window resizes I want the image to resize proportionally - that's where I'm stuck

How can I resize the image to keep it's proportion.

[theCodeBot]

I, personally, would just make header, footer, and body separate SWF's and do it the 'right way' with HTML - thus, making header and footer SWF's a set height and the body SWF to a variable height - 100% - in the HTML. That also gives the advantage of being able to compile the parts of the code separately, so you don't have to waste the extra time recompiling the header whenever you make a change to the body.

HOWEVER, if that is not an option to you, IE there needs to be some overlap or something, you're going to want to set the stage scale mode to NO_SCALE, and add an event listener to the stage (Event.RESIZE, to be specific) to move the footer all the way to the bottom, header to the top, and set the height property of the body mc to whatever is left (calculated mathematically)

[ttmt]

theCodeBot

thanks for your reply - I have set the stage scale mode to NO_SCALE and I have a Event Listener, the header, body and footer are all scaling correctly, it's the image that I can't work out.



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

var hh:Number=80;
var fh:Number=160;
var hfh:Number=240;

stage.addEventListener(Event.RESIZE, stage_resizeHandler);

function stage_resizeHandler(evt:Event):void {
var sw:Number=stage.stageWidth;
var sh:Number=stage.stageHeight;
header_mc.width=body_mc.width=footer_mc.width=sw;
body_mc.height=sh-hfh;
footer_mc.y=sh-fh;
//
var w:Number=body_mc.img_mc.width;
var h:Number=body_mc.img_mc.height;
var r:Number=Math.round(w/h);
//
body_mc.img_mc.width = h*r
}

[tofuisonmyside]

read your formula carefully
body_mc.img_mc.width = body_mc.img_mc.height * body_mc.img_mc.width/ body_mc.img_mc.height
that means body_mc.img_mc.width = body_mc.img_mc.width

so nothing changes! that's what thou ask

probably body_mc.img_mc width should depend on body_mc.height
so i'll try to change the h line
var h:Number=body_mc.height;