Actionscript, Fullscreen and You

When I first saw Flash go to full screen mode on youtube, my understanding of computers evolved a bit, possibilities for web-based apps began to swarm in my head.

I began to think of the big picture, this whole web platform vs traditional desktops as a developers medium, I threw Flash into the mix and realized that there are very few applications that one can’t deliver from a browser. Google apps proves that office tools don’t need to reside on a client. A myriad of other data driven web apps and RIA’s prove that everything from contact information to maps and directions to shopping, social communications, audio and video downloading and games is all readily available online.

So who needs a desktop? Well… we aren’t there yet, any seriously processor intensive app such as 3d games and video encoders are best left to the desktop to utilize the efficiency of lower level languages. But that leaves a lot of room, especially now that you can command the entire full screen of a clients computer.

Bootcamp

The basics of full screen in Flash are well documented, on a Mouse or Key event handler, just set the display mode:

stage.displayState = "fullScreen";
// or
stage.displayState = "normal";

This will trigger the full screen event that you set in your main class’s constructor:

stage.addEventListener( FullScreenEvent.FULL_SCREEN, onFullScreen );

Stretching and Distortion – The Explaination

When Flash goes to full screen mode, by default, it will stretch your swf to the dimensions of your desktop. Often, I find this to be gay and annoying as the stretching will distort your content.

Lets say you have a 320×260 swf that has a video in it. The video controls dimension is 320×240, leaving you with 20 pixels on the bottom for your playback controls. That video should have an aspect ratio of 4:3.

Lets say a clients desktop is just like mine and has a resolution of 1280×800, thats an aspect ratio of 8:5 which is obviously not 4:3. If you have your swf go to full screen, by default the video will be stretched a little bit wider and if your audience cares about such things, they will likely think your site is gay and find something else.

Stretching and Distorting – The No-Stretch

To prevent any stretching from happening, Flash comes with some handy dandy flags you can set in your stage to control this kind of malarky. For my game, Daphne, I don’t want any stretching at all. I do not want my units to suddenly gain 100 pounds when the user switches to full screen, instead, I want Flash to simply expand the width and height of my swf without stretching my swf. I have a massive 3200×3200 tilemap in my game that’s always there even though the player can only see 800×600 pixels of it at a time in normal screen mode and <screenwidth>x<screenheight> pixels at a time in full screen mode.

To set these properties, throw the following lines into your applications main constructor:

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

As you may have guessed, I’m instructing the Flash runtime to not do any vector scaling at all and to put the top left of my game in the top left of the screen (Flash tends to seemingly randomly place swf’s in full screen if you don’t provide it with some instructions).

Stretching and Distorting – The Math

If you want to scale your content’s dimensions up or down without distorting the content, consider the slope of your screen. By that I mean the rise over run. If you divide the height (rise) of your screen by the run (width) of your screen, you will get the slope. To illustrate, consider:

The standard wide screen aspect ratio of 16:9 = 9/16 = 0.5625

My 1280×800 screen = 8:5 = 5/8 = 0.625

Your standard TV dimensions 4:3 = 3/4 = 0.75

And a perfect square will have a slope of 1.

The pattern here is this: the wider the screen, the smaller the slope.

Armed with this knowledge, you are now able to manually scale your content without distorting it. The very latest update for the Flash runtime (at the time of this writing it’s 9.0.124.0) has two properties in the stage that specify the full screen width and height of your swf (even if you are in normal screen mode). They are stage.fullScreenWidth and stage.fullScreenHeight.

You now have your contents width and height as well as your screens width and height. In order to go full screen on any monitor, you need to use the awesome power of slope to determine if your contents aspect ratio is wider than the aspect ratio of your screen. If the monitor your opus is running on has a slope that is greater than your content, that means the screen has a taller aspect ratio than your content and you will need to have filler along the top and/or bottom of the screen. Conversely, if the slope of the screen is less than that of your content, your content will span the height of the screen and have filler along both sides.

Stretching and Distorting – The Magic

To figure out how to scale your content, try this:

//span vertically, will have filler on the sides
if ( objSlope > screenSlope ) {
  objHeight = screenHeight;
  objWidth /= objHeight / screenHeight;

// span horizontally, filler on top and/or bottom
} else if ( objSlope < screenSlope ) {
  objHeight /= objWidth / screenWidth;
  objWidth = screenWidth;

// same aspect ratio
} else {
  objWidth = screenWidth;
  objHeight = screenHeight;
}

With that, you can rest assured that your game or video or whatever visual object will scale and keep its aspect ratio and not be distorted. This code is best written while listening to Billy Idol’s “Rebel Yell”.

Though this is all swell, there are still some things your average, mortal Actionscript programmer can’t fix, such as text entry in full screen mode.