FullScreen mode in AS3 and AIR

Since the overwhelming response I got when I wrote about full screen mode in AS2, i decided to write a follow up about it in AS3 and AIR.

The StageDisplayState Class in Actionscript 3 has two states, NORMAL and FULL_SCREEN the AIR API add one more; FULL_SCREEN_INTERACTIVE. (WARNING! This is only available in AIR.)

So that means that we now have two modes for full screen, StageDisplayState.FULL_SCREEN and StageDisplayState.FULL_SCREEN_INTERACTIVE. The first just resizes your application in full screen however you cannot interact with it. All the controls like input fields and buttons are disabled. The last one, StageDisplayState.FULL_SCREEN_INTERACTIVE, does allow the user to interact with your application. This can be very convenient when developing for kiosks, fullscreen video players, image viewers etc. Remember that control bar youtube has when playing video in full screen? Now you can have that too! So on with the code!

What works best for me is that i always set the scaleMode to no_scale, so i know that all my content will be shown at 100% and is not stretched. I set it up like so:

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

When we click the fullscreen button we need to check in what state we are in and change that to the full screen mode. and we need to be albe to respond to the resize event, so when we switch states our content is sized accordingly. (Also make sure that your content is positioned relatively and not with hard coded values)

stage.nativeWindow.addEventListener( Event.RESIZE, onResizeApp );
fullscreenButton.addEventListener( MouseEvent.CLICK, onFullscreenClick );

function onResizeApp( event:Event ):void {
// do repositioning of elements here
}

function onFullscreenClick( event:MouseEvent ):void {
if( stage.displayState == StageDisplayState.NORMAL ) {
stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
fullscreenButton.label = "Exit Fullscreen";
} else {
stage.displayState = StageDisplayState.NORMAL;
fullscreenButton.label = "Go Fullscreen";
}
}

So there you have it, an interactive full screen application. Source Files are included for you to play with. Have fun

Print PDF