AIR Tip 2 - Going Fullscreen

December 15th, 2007

One of the great features of AIR is the ability to go fullscreen. Obviously this could be abused - but when used properly, this opens up many doors. One great example of a useful fullscreen application is Daniel Dura's Twittercamp. When you click on the logo (bottom-right) it opens up into a fullscreen application. This is extremely useful for display in some "presentation" type mode - such as on a plasma or LCD Television.

VERSION: This tutorial is current through AIR Beta 3.

Changes in AIR Beta 3

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 in Code Example 1).

PLAIN TEXT

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;

Code Example 1 - Entering the Three Different Display States in Actionscript

Going Fullscreen in JavaScript

The logic works exactly the same in JavaScript as it does in Actionscript, but the classpaths are different. You can see the examples below in Code Example 2.

PLAIN TEXT

JavaScript:

// 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;

Code Example 2 - Entering the Three Different Display States in JavaScript

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

Fullscreen States Application

Sample Application
AIR File

Flex Application Code
Source Code

HTML / Javascript Application Code
Source Code

21 comments on “AIR Tip 2 - Going Fullscreen”

01

Hi David,
Thank you for the wonderful tutorial.
I noticed that the apps render full-screen, but I was wondering how we can render the app full-screen minus the OS taskbar similar to how Adobe Media Player or the EBay desktop renders.

Thanks
Sree

Sree at January 13th, 2008 around 8:48 am
02

@Sree - You will need to set ’showFlexChrome=false’ in your WindowedApplication.

David Tucker at January 14th, 2008 around 6:12 am
03

Hi,

when i test your application, when i return in standard view the roll overs on button are disabled and do not function

I use AIR beta 3 too. know you this problem ?

thanks

_Stef at February 11th, 2008 around 7:13 am
04

@Stef - I just tested the application again - and everything works on my end. Are you on Windows XP, Windows Vista, or Mac OS?

David Tucker at February 11th, 2008 around 7:18 am
05

Mac OSx 10.5.1

_Stef at February 11th, 2008 around 7:27 am
06

@Stef - I will chat with the AIR guys - and see if this is a known bug. If it is - I assume that it will probably be fixed when the final 1.0 version of AIR is released.

David Tucker at February 11th, 2008 around 7:29 am
07

Thanks a lot.

I try to re install flex 3 plug in and AIR beta 3 for the moment.

I have the problem with all my applications.

I haven’t the problem when i use fullScreenBoundsRect.

thanks again for speed to reply.

_Stef at February 11th, 2008 around 7:32 am
08

I have re - installed flex 3 and air 3 on my leopard, the problem is always present.

I have tested on MacOsX 10.4.11 and application it s ok and XP too ….

_Stef at February 11th, 2008 around 8:40 am
09

why
stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
can’t in the creationComplete handler ?

Nshen at February 24th, 2008 around 7:29 pm
10

Well, FULL_SCREEN_INTERACTIVE; is a step forward for me.

Are there any Kiosk style key trapping functions yet?
So we can disable ctrl+alt+delete etc?

I’m starting to think Kiosk is a four letter word around Adobe HQ :p

Thanks
Greg

Greg at March 2nd, 2008 around 10:11 am
11

@Greg - AIR doesn’t quite provide that level of Kiosk support. My assumption is that Director 11 (yes, there is going to be a new version of Director) will have that type of support.

David Tucker at March 3rd, 2008 around 2:24 pm
12

Hey Dave

I’d been wondering about Director’s fate with Flash becoming so powerful?

The real wildcard seems to be Mac? I don’t know of any solutions that have Mac kiosk features. PC I could extend myself if needed.

Been in search of a cross OS platform for years, figured it was time to look into AIR. I really like it, but it looks like it has some big hurdles for me still.
It seems to have everything else I require too

Cheers

Greg at March 4th, 2008 around 10:53 am
13

[...] AIR Tip 2: Going Fullscreen (AIR 1.0) [...]

雨飞blog » David Tucker的air tips at March 5th, 2008 around 8:07 pm
14

[...] AIR技巧 AIR Tip 1: Monitoring a Network Connection (AIR Beta 3) AIR Tip 2: Going Fullscreen (AIR Beta 3) AIR Tip 3: What Version is My Application (AIR Beta 3) AIR Tip 4: Calling a SOAP [...]

火柴工作坊 » Blog 存档 » David Tucker的一些AIR教程 at March 10th, 2008 around 5:30 pm
15

[AIR] Interactive Fullscreen on AIR….

Article : http://www.davidtucker.net/2007/12/15/air-tip-2-going-fullscreen/ AIR : http://www.davidtucker.net/airtips/Tip2.air AIR 에서는 AS3.0 에서 지원되지 않았던 Fullscreen-Interaction 이 가능해졌다. 바로 StageDisplayState.FULL_SC…

Adobe AIR / www.AS3.kr / ActionScript 3.0 at March 17th, 2008 around 6:31 am
16

How to use FULL_SCREEN_INTERACTIVE for a web application and not in AIR ? FULL_SCREEN works, but the interactive one gives this error in flex builder:

1119: Access of possibly undefined property FULL_SCREEN_INTERACTIVE through a reference with static type Class.

Frank at March 28th, 2008 around 9:21 am
17

@Frank - Unfortunately this feature is not available in a Flex application. This is done for security purposes.

David Tucker at March 28th, 2008 around 9:26 am
18

[...] 来源：AIR Tip 2: Going Fullscreen [...]

RichBox’s Blog » Blog Archive » [翻译]AIR TIP2：全屏应用 at April 10th, 2008 around 11:15 pm
19

Thanks for the post and the sample app.

I’m using Flex Builder 3 to build my Air application. And while using FULL_SCREEN_INTERACTIVE gives an error when testing the application but it doesn’t cause any problems when publishing it as an AIR app and installing.

I’m curious why it does give an error when my project is clearly for an AIR application and not a Flex application ?

Ryan at May 30th, 2008 around 10:32 am
20

@Ryan - Is your root tag Application or WindowedApplication?

David Tucker at May 30th, 2008 around 11:04 am
21

_STEF
“why
stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
can’t in the creationComplete handler ?”

I had the same problem. It seemed to be because I was setting the width and height properties in the tag

2pha at August 24th, 2008 around 12:26 am