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).
-
// 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.
-
// 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.
Sample Application
AIR File
Flex Application Code
Source Code
HTML / Javascript Application Code
Source Code
|
Comments
| Trackback |
Del.icio.us |
Digg |
Technorati
18 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
02
@Sree - You will need to set ’showFlexChrome=false’ in your WindowedApplication.
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
04
@Stef - I just tested the application again - and everything works on my end. Are you on Windows XP, Windows Vista, or Mac OS?
05
Mac OSx 10.5.1
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.
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.
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 ….
09
why
stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
can’t in the creationComplete handler ?
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
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.
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
13
[...] AIR Tip 2: Going Fullscreen (AIR 1.0) [...]
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 [...]
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…
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.
17
@Frank - Unfortunately this feature is not available in a Flex application. This is done for security purposes.
18
[...] 来源：AIR Tip 2: Going Fullscreen [...]
Leave a Reply