Here is a quick post on using Flash Player 9′s Full-Screen Mode in Flex. I’ve seen this appear a few times in the bugbase and on lists, but here is some simple code to let you toggle between “full screen mode” and “normal mode” in a Flex application. Note that in this example I’m listening for the applicationComplete event in the main <mx:Application /> tag instead of the creationComplete event. The applicationComplete tag is called slightly after the creationComplete event, after the Application has been completely initialized.
If you try and access the Application.application.stage property from the creationComplete event, you’ll get a run-time error (RTE) saying the following:
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at main/init()
at main/___main_Application1_creationComplete()
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()
at mx.core::UIComponent/set initialized()
at mx.managers::LayoutManager/doPhasedInstantiation()
at Function/http://adobe.com/AS3/2006/builtin::apply()
at mx.core::UIComponent/callLaterDispatcher2()
at mx.core::UIComponent/callLaterDispatcher()
The example below is pretty bare with just a few Label controls and a Button control, but it should have enough of the required code to give you a push in the right direction.
You must have version 9,0,28,0 or greater of Flash Player installed to use full-screen mode. Download the latest version of Adobe Flash Player.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/07/creating-full-screen-flex-applications/ -->
<mx:Application name="FullScreen_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
applicationComplete="init(event)">
<mx:Script>
<![CDATA[
import flash.display.StageDisplayState;
private function init(evt:Event):void {
/* Set up full screen handler. */
Application.application.stage.addEventListener(FullScreenEvent.FULL_SCREEN, fullScreenHandler);
dispState = Application.application.stage.displayState;
}
private function fullScreenHandler(evt:FullScreenEvent):void {
dispState = Application.application.stage.displayState + " (fullScreen=" + evt.fullScreen.toString() + ")";
if (evt.fullScreen) {
/* Do something specific here if we switched to full screen mode. */
} else {
/* Do something specific here if we switched to normal mode. */
}
}
private function toggleFullScreen():void {
try {
switch (Application.application.stage.displayState) {
case StageDisplayState.FULL_SCREEN:
/* If already in full screen mode, switch to normal mode. */
Application.application.stage.displayState = StageDisplayState.NORMAL;
break;
default:
/* If not in full screen mode, switch to full screen mode. */
Application.application.stage.displayState = StageDisplayState.FULL_SCREEN;
break;
}
} catch (err:SecurityError) {
// ignore
}
}
]]>
</mx:Script>
<mx:String id="dispState" />
<mx:Label text="width={Application.application.width}" />
<mx:Label text="height={Application.application.height}" />
<mx:Label text="displayState={dispState}" />
<mx:Button label="Toggle fullscreen" click="toggleFullScreen()" />
</mx:Application>
View source is enabled in the following example.
For more information on Full Screen Mode in Flash Player 9 (ActionScript 2.0 and ActionScript 3.0) check out the following article on the Adobe Developer Center: “Exploring full-screen mode in Flash Player 9″.
I *knew* I would have forgotten something. The real trick to using FullScreen support is to enable it in the JavaScript embed code, or <object /> and <embed /> tags… So, in your HTML wrapper, add the following property:
AC_FL_RunContent(
"src", "main",
"width", "100%",
"height", "100%",
"align", "middle",
"id", "main",
"quality", "high",
"bgcolor", "#869ca7",
"name", "main",
"allowScriptAccess","sameDomain",
"type", "application/x-shockwave-flash",
"pluginspage", "http://www.adobe.com/go/getflashplayer",
"allowFullScreen", "true"
);
Or, if you are using <object /> and <embed /> tags, you can use the following syntax instead:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id="main" width="100%" height="100%"
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
<param name="movie" value="main.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#869ca7" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<embed src="main.swf" quality="high" bgcolor="#869ca7"
width="100%" height="100%" name="main" align="middle"
play="true"
loop="false"
quality="high"
allowScriptAccess="sameDomain"
allowFullScreen="true"
type="application/x-shockwave-flash"
pluginspage="http://www.adobe.com/go/getflashplayer">
</embed>
</object>
Also, I just learnt from my co-worker Raghu’s blog (“FLEXing My Muscle” and his “Error on adding FullScreenListener in creationComplete handler” post) that you can use the SystemManager class instead of all my references to Application.application. Thanks Raghu!
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/07/creating-full-screen-flex-applications/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" applicationComplete="init()">
<mx:Script>
<![CDATA[
import flash.display.StageDisplayState;
import mx.managers.SystemManager;
private function init():void {
/* Set up full screen handler. */
systemManager.stage.addEventListener(FullScreenEvent.FULL_SCREEN, fullScreenHandler);
dispState = systemManager.stage.displayState;
}
private function fullScreenHandler(evt:FullScreenEvent):void {
dispState = systemManager.stage.displayState + " (fullScreen=" + evt.fullScreen.toString() + ")";
if (evt.fullScreen) {
/* Do something specific here if we switched to full screen mode. */
} else {
/* Do something specific here if we switched to normal mode. */
}
}
private function toggleFullScreen():void {
try {
switch (systemManager.stage.displayState) {
case StageDisplayState.FULL_SCREEN:
/* If already in full screen mode, switch to normal mode. */
systemManager.stage.displayState = StageDisplayState.NORMAL;
break;
default:
/* If not in full screen mode, switch to full screen mode. */
systemManager.stage.displayState = StageDisplayState.FULL_SCREEN;
break;
}
} catch (err:SecurityError) {
// ignore
}
}
]]>
</mx:Script>
<mx:String id="dispState" />
<mx:Label text="width={Application.application.width}" />
<mx:Label text="height={Application.application.height}" />
<mx:Label text="displayState={dispState}" />
<mx:Button label="Toggle fullscreen" click="toggleFullScreen()" />
</mx:Application>



{ 61 comments… read them below or add one }
← Previous Comments
Full screen works when I try it by button click handler.
But it doesn’t work when tried from Timer handler or
even using button.dispatchEvent(new MouseEvent(MouseEvent.CLICK)).
You can create a virtual keyboard in full screen mode, to get the user and password by mouse clicking.
It’s very simple to simulate Windows or Linux, with this virtual keyboard.
I don’t understand the limitation in the text input component…
Need help.
When I click on the example above, full screen works well. I copied this code and tried to run it on my computer, the full screen does not work. I edited the HTML to contain the fullScreen attributes. The page is empty. If I try and run the swf, the swf runs without fullScreen capability. I must be doing something simple wrong. Please help. Thanks
Very nice work.
If you’re getting a blank screen after adding ‘ “allowFullScreen”, “true” ‘ into the html wrapper, make sure you’ve put a ‘,’ after the previous entry as it’s a list.
Looks like i wasn’t the only person to make this mistake :)
We have a problem after coming out of full screen mode on IE that text inputs no longer work – like it isn’t properly exiting the security problems of being fullscreen.
Full details, along with a reward for solving this issue can be found here.
http://www.sparkol.com/ScreenProblem.html
Thanks for your help!
hi!!!
I am new to flex… and i am trying to write an application which displays albums of my friends which are pesent in my friendlist..
Kindly help…
I’ve also encountered the same problem Jon Air mentions. After switching a simple test application in and out of fullscreen mode twice, text inputs no longer work in non-full-screen mode after that.
This happens in IE but not in FireFox. It does not happen when I run the app locally within IE from within Flex Builder 3, either. The application only behaves like this when it is actually installed on my server.
Has anyone else encountered this bug? Jon Air’s link no longer works.
I don’t think it’s adobe engineers who decided to disable the keyboard in full-screen mode, usually such idiotic decisions come from the head hanchos, especially the ones graduated from India. If critical thinking comes critically hard than they should stay away from computing!!
If a site wants your login/password in full-screen mode they can still do that saying “Your keyboard is locked, please re-login using the virtual keyboard” and half the fools out there will fall for it.
Times like these motivate you to look at Silver Light!! Tell Shantanu Narayen to stop promoting idiots.
sir,
i beginner flex,
i want create the web browser using flex and air application. how i want my web browser application run in full screen mode without toggle button.
i have tried input your code but i have error #1119 : access of possibly undefined property application through a reference with static type class.
here my code:
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:WindowedApplication xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” color=”#000000″ viewSourceURL=”srcview/index.html” borderColor=”#000000″>
<mx:Style source=”styles.css”/>
<mx:Script>
<![CDATA[
Application.application.stage.displayState = StageDisplayState.FULL_SCREEN;
[Bindable]
private var myUrl:String = “http://”;
]]>
>/mx:Script>
>mx:ApplicationControlBar dock=”true” fillAlphas=”[1.0, 1.0]”
fillColors=”[#3D3D3D, #3D3D3D]” right=”-1″ left=”-1″ top=”-33″ color=”#FFFFFF” height=”38″ themeColor=”#A6A5A5″>
>mx:Spacer width=”100%”/>
>mx:Button label=”<” click=”browser.historyBack()” themeColor=”#3D3D3D” borderColor=”#3D3D3D” fillAlphas=”[1.0, 1.0]” fillColors=”[#3D3D3D, #3D3D3D]” color=”#A6A5A5″/>
>mx:Button label=”>” click=”browser.historyForward()” borderColor=”#3D3D3D” themeColor=”#3D3D3D” fillAlphas=”[1.0, 1.0]” fillColors=”[#3D3D3D, #3D3D3D]” color=”#A6A5A5″ fontWeight=”normal”/>
>/mx:ApplicationControlBar>
>mx:HTML id=”browser” right=”0″ left=”0″ top=”0″ bottom=”0″ color=”#000000″ location=”http://www.kapasitor.net/apaca”/>
>/mx:WindowedApplication>
i hope u can help me to solve this error.
so.addParam() worked for me.
so.addVariable() passes the variables to the flash application itself.
← Previous Comments