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 thoughts on “Aspect Ratio”

  1. 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.

  2. 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

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

    great post….

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>