AIR Tip 2 – Going Fullscreen

Posted by David Tucker in AIRDec 15th, 2007 | 28 responses

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:
  1. // Enter Fullscreen Interactive State
  2. stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
  3. // Enter Standard Fullscreen State
  4. stage.displayState = StageDisplayState.FULL_SCREEN;
  5. // Enter Normal State
  6. 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:
  1. // Enter Fullscreen Interactive State
  2. window.nativeWindow.stage.displayState = runtime.flash.display.StageDisplayState.FULL_SCREEN_INTERACTIVE;
  3. // Enter Standard Fullscreen State
  4. window.nativeWindow.stage.displayState = runtime.flash.display.StageDisplayState.FULL_SCREEN;
  5. // Enter Normal State
  6. 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




28 Responses to “AIR Tip 2 – Going Fullscreen”

  1. Sree says:
    January 13, 2008 at 8:48 am

    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

  2. David Tucker says:
    January 14, 2008 at 6:12 am

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

  3. _Stef says:
    February 11, 2008 at 7:13 am

    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

  4. David Tucker says:
    February 11, 2008 at 7:18 am

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

  5. _Stef says:
    February 11, 2008 at 7:27 am

    Mac OSx 10.5.1

  6. David Tucker says:
    February 11, 2008 at 7:29 am

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

  7. _Stef says:
    February 11, 2008 at 7:32 am

    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.

  8. _Stef says:
    February 11, 2008 at 8:40 am

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

  9. Nshen says:
    February 24, 2008 at 7:29 pm

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

  10. Greg says:
    March 2, 2008 at 10:11 am

    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

  11. David Tucker says:
    March 3, 2008 at 2:24 pm

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

  12. Greg says:
    March 4, 2008 at 10:53 am

    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

  13. 雨飞blog » David Tucker的air tips says:
    March 5, 2008 at 8:07 pm

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

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

    [...] 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 [...]

  15. Adobe AIR / www.AS3.kr / ActionScript 3.0 says:
    March 17, 2008 at 6:31 am

    [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…

  16. Frank says:
    March 28, 2008 at 9:21 am

    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.

  17. David Tucker says:
    March 28, 2008 at 9:26 am

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

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

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

  19. Ryan says:
    May 30, 2008 at 10:32 am

    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 ?

  20. David Tucker says:
    May 30, 2008 at 11:04 am

    @Ryan – Is your root tag Application or WindowedApplication?

  21. 2pha says:
    August 24, 2008 at 12:26 am

    _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

  22. Surendra Gurjar says:
    December 8, 2008 at 9:37 pm

    Hi,

    I am Surendra Gurjar and I am a novice Programmer of Adobe Air,

    When i am uninstalling my Adobe Air Application and it is running it showing some strange error,

    Can anyone suggest me that how can i intimate user that application is running plz stop it and try to uninstall.

    OR

    How can i automatically stop the application while i am uninstalling it?

  23. Surendra Gurjar says:
    February 2, 2009 at 5:58 am

    Hi, This Surendra Gurjar , the full adobe Air 3 really very exciting and useful.

    thanx for providing me that code.

  24. Pruthviraj says:
    February 3, 2009 at 2:14 am

    Hello David,
    This is Pruthviraj, i have used stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;, if i publish its working file, if i open the published swf file i’m getting a run time error like this

    TypeError: Error #2007: Parameter displayState must be non-null.
    at flash.display::Stage/set displayState()
    at fullScreen_fla::MainTimeline/frame1()

    could you please help in this one.

    Thanks in advance.

  25. zvjerka24 says:
    March 25, 2009 at 11:43 am

    I have same problem like Pruthviraj…
    anyone?

  26. wiibart says:
    May 27, 2009 at 12:10 pm

    Thanks for the showFlexChrome=”false” tip, I really was confused because I thought the FULLSCREEN setting would be sufficient, but it’s not

  27. FullScreen- AIR « Durairaj’s Weblog says:
    July 15, 2009 at 3:23 pm

    [...] Sample4 [...]

  28. Long says:
    October 20, 2009 at 6:16 am

    hi,

    i am trying to launch an AIR application that uses Touchatag to move through a presentation. the presentation runs on a HP touchscreen computer/monitor, which in itself isn’t a problem .

    however, I can’t get the full screen mode when i’m using;

    “stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;”

    i’m working on Windows Vista.

    can you help?
    thanks,
    Long.

Leave a Reply