Skip to content

## Aspect Ratio

I’ve been working on a little something and wanted to maintain a 16:9 aspect ratio no matter what size the browser window was.

Essentially, the calculation is this;
multiplier = 16/9 = 1.7777778

In my test, I used the multiplier on the stageHeight and stageWidth to find out

private function maintainAspectRatio(event:Event):void
{
width16x9 = stage.stageHeight*multiplier16x9
height16x9 = stage.stageWidth/multiplier16x9
if(width16x9 < stage.stageWidth){
height16x9 = width16x9/multiplier16x9;
}else{
width16x9 = height16x9*multiplier16x9;
}
}

So using an EventListener on the stage I can monitor the current stage size.

stage.addEventListener(Event.RESIZE, maintainAspectRatio);

And there you go.

Here’s the test.

### 4 Comments

1. terraform

sorry if this is a n00b question but I have been trying to figure out how to do what you have nicely demonstrated in this quick tutorial
but
I would like the mc to have “padding” around it.
for example
if I had the 16×9 mc and there would always be 50 pixels separating it from the top, left and right sides.

is that possible with this equation?

thanks for the post.

Posted on 16-Jan-09 at 2:34 pm | Permalink
2. hugh

terraform, i’ve adjusted the function for your 50 pixels of padding. example here.

mind you, it does the exact same thing. all the needed to happen was subtract 50 from the stage.stageHeight and stage.stageWidth and then move the clip to 25,25.

here’s the source, if you like

Posted on 16-Jan-09 at 7:12 pm | Permalink
3. terraform

Great thanks for that Hugh for some reason proper positioning alludes me but that makes sense now that I see it.

great post….

Posted on 17-Jan-09 at 10:49 am | Permalink
4. hugh

no problem at all.

Posted on 17-Jan-09 at 1:25 pm | Permalink
Your email is never published nor shared. Required fields are marked *
*
*