Avg. Rating 4.0

Problem

Many applications are designed to be run in fullscreen. In addition, many applications are also designed to be both fullscreen and interactive.

Solution

By using the different modes of stage.displayState, you can make your application go into the fullscreen mode without any system chrome.

Detailed explanation

Prior to AIR Beta 3 there were only two display states: normal and fullscreen. The fullscreen state was not an interactive state. This meant that a user could not interact (enter text in a text box for example) with the application when it was in fullscreen state. However, in AIR Beta 3 a third state was introduced, fullscreen interactive.

Going Fullscreen in ActionScript

The main stage for the AIR application has a displayState property. The framework also contains a class, StageDisplayState, that defines three constants for the three different display states. By using these classes you can put your AIR application into any of the three display states (as shown below).

ActionScript:

// Enter Fullscreen Interactive State
stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
// Enter Standard Fullscreen State
stage.displayState = StageDisplayState.FULL_SCREEN;
// Enter Normal State
stage.displayState = StageDisplayState.NORMAL;

The logic works exactly the same in JavaScript as it does in ActionScript, but the classpaths are different. You can see the examples below. These classes will be shorter if you are using the AIRAliases.js file.

// Enter Fullscreen Interactive State
window.nativeWindow.stage.displayState = runtime.flash.display.StageDisplayState.FULL_SCREEN_INTERACTIVE;
// Enter Standard Fullscreen State
window.nativeWindow.stage.displayState = runtime.flash.display.StageDisplayState.FULL_SCREEN;
// Enter Normal State
window.nativeWindow.stage.displayState = runtime.flash.display.StageDisplayState.NORMAL;

Sample Application

The sample application demonstrates each of the three display states. You will notice that the text field only works in the normal and fullscreen interactice modes (as described earlier). The source code for the application is available for download below.

FullscreenSample.zip
[This file includes source code for both a Flex and JavaScript sample application that utilizes the three different stage display states.]

+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.

Report abuse

Related recipes