Creating full-screen Flex applications

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.

View MXML

<?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>

[GoogleAdsWide]

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>

114 thoughts on “Creating full-screen Flex applications

  1. Is it possible fullscreen mode in flex apllication?If it is yes plz suggest how to write the full screen mode application…

  2. The code above got me started but this uses a getter/setter on fullScreen:Boolean to allow you to enter fullscreen mode with “fullScreen=true” and bind to the value of fullScreen, as I do below with the checkbox:

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >
      <mx:initialize><![CDATA[
      systemManager.stage.addEventListener(
        FullScreenEvent.FULL_SCREEN,
        function(event: FullScreenEvent): void {  fullScreen = event.fullScreen; }
      );
      ]]></mx:initialize>
    
      <mx:Script><![CDATA[
      private var _fullScreen: Boolean;
      [Bindable] public function get fullScreen(): Boolean { return _fullScreen; }
      public function set fullScreen(isFull:Boolean):void {
      _fullScreen = isFull;
      stage.displayState = (isFull) ? StageDisplayState.FULL_SCREEN : StageDisplayState.NORMAL;			}
      ]]></mx:Script>
    
      <mx:CheckBox id="fs" label="Full Screen"
        click="fullScreen=event.target.selected" selected="{fullScreen}"
        horizontalCenter="0" verticalCenter="0"/>
    
    </mx:Application>
    
  3. Peterd,
    i saw you answered that the Keyboard events are disable in full screen mode,
    can you tell why? is it going to be solved soon? test is the name of the game
    in RIA…
    Boaz

  4. Hello,
    I’m new on Flex but from what I read, the Full screen mode doesn’t allow text input nor switching tab. This is a show stopper for me. Is there a way of going around those restrictions ? Instead of Flex’s full screen mode, I could use a browser full screen but how to trigger a F11 keystroke on the browser from a Flex link ?

    Happy Flex
    Philippe

  5. how to add fullscreen here:

    <script type="text/javascript">
            // <![CDATA[
                var so = new SWFObject('MechanisM.swf', 'website', '100%', '100%', '10', '#000000');
                so.useExpressInstall('swfobject/expressinstall.swf');
                so.write('content');
            // ]]>
            </script>
    
  6. MechanisM,

    I’ve never tried SWFObject, but does something like this work?

    <script type="text/javascript">
    // <![CDATA[
       var so = new SWFObject('MechanisM.swf', 'website', '100%', '100%', '10', '#000000');
       so.addVariable("allowFullScreen", "true");
       so.useExpressInstall('swfobject/expressinstall.swf');
       so.write('content');
    // ]]>
    </script>
    

    Peter

  7. Peter,

    Is there any work being done to enable full functionality (e.g. text input) in the full screen mode? Without this capability, it’s not good for much more than a video player or statis charting application. Supposedly there is some security concern, but it needs to be up to the developer/client to decide (fullScreenInteractive = “true”).

  8. Great post Peter,
    but I’m guessing at text input problem.
    I totally got lost trying to find a work around..

    any advice?

    thank you,
    andrea

  9. “Text input is currently not supported while a Flash/Flex application is in full screen mode in Flash Player.”

    And hopefully will never be. Consider a page that renders a full screen flex window showing a standard Windows log in screen. How many will think that something weird has happened to Windows once again and enter the login credentials into the malicious window?

  10. Hey!

    Is it possible for an AIR application to have two stages which go fullscreen on two monitors with different content? I would like a movie on full screen on my secondary display and controls on the other, both in fullscreen. This would really help me out, thanks!

  11. Magz,

    I’m not aware of any APIs that allow you to do that (but I’m certainly no AIR expert). Maybe try asking on a high-traffic list like FlexCoders and see if anybody has tried experimenting with AIR + full screen + dual monitors.

    Sorry,
    Peter

  12. In AIR you can use the FULL_SCREEN_INTERACTIVE statement to go fullscreen with working text inputs. It could be nice to have this feature in Flex too. I undestand all the security issues bond with this function, but I can’t believe that there is not a workaround in order to let us developers design a fully functional fullscreen application and at the same time let users keep their security safe.

    At the current conditions, fullscreen feature in Flex is nothing more than an oddity, good just for poorly interactive web sites…

    If this problem can’t be solved, I think I’ll abandone the Flex platform very quickly :-(((

  13. Adobe developers say that disabling text inputs when in fullscreen is a security feature: you cannot interact with a Flex application running fullscreen because a potential hostile could duplicate a login interface and stole your account, with a well-known phishing technique.

    But did you noticed a funny thing? You can’t write directly into an input field in fullscreen mode, yes, but you can always <b>PASTE TEXT INTO IT</b> (right-click on the field, and then select “paste” from the popup menu) and thus completely bypass the clever and strong security “fullscreen feature”. No need for hacks, patches, or whatever. <b>Just copy a text from notepad and paste it into the “disabled” input field of your fullscreen Flex application</b>: oh my god, the disabled input field works again! Press your submit button, and go.

    WOW!!! :-\

    Dear Adobe developers, please, remove this silly limitation NOW, and try to deal with security issues in better ways. <b>Security through obscurity is nothing but a failure</b>, if you are a real software developer.

    There are peoples here, who try to produce useful interactive applications with Flex (in my case, applications to be used for scientific research in oncology and molecular biology) and who really would like to take advantage from a fully working fullscreen feature…

    And please, don’t suggest to switch to AIR, this is not a valid alternative if you’re developing an application to be distributed as a web service.

  14. Hi,

    I have a white screen when I insert “allowFullScreen”, “true”. The problem occur exactly if I insert this line. Any idea why, apparently, javascript don’t like this…

    I use as well Cairngorm, locales, and external module but I don’t think it’s related ?

    By the way I can run your example and I have the last player version.

    Thanks
    Simon

  15. Via Flex 3, & Flash Player 10, editing the html template file produces a blank screen in Firefox 3. Anyone else having this issue? Thanks in advance!

  16. Pessoal eu não concegui realizar o teste ….
    alguem poderia me ajudar ?

    Eu clico no botão mas não acontece nada, eu ja abilitei o “allowFullScreen”, “true”
    Teria como algeum me passar um video ou um projeto completo de exemplo?

    Obrigado!

  17. I click on the button but nothing happens, I already enable the “allowFullScreen”, “true”
    Algeum can I pass a video or complete a project as an example?

    Thank you!

  18. Magz.. regarding your query.. I think WebOrb can potentially do this in a couple of ways.. one of which is to use shared objects to pass information between the 2 different browser instances or potentially stages, each of which could be hosting different content but effectively be communicating to be ‘one application..

  19. What if you have another swf inside of your flex app using fullscreen? It is a video player and I want to make the video player go fullscreen on click, but the whole flex app goes fullscreen. How do I capture that and tell flex to make that inside player be the thing that is FS?

  20. Thanks for this great article. While trying to enable “automatic full screen” I encountered several security errors and found some solutions:

    – From inside a browsers window you just can’t automatically switch to fullscreen; even when you dispatch a clickevent. It can only be triggered by a REAL clickevent.

    – When compiled and exported to a projector (from within flashplayer) you actually CAN automate fullscreen and have textinputs etc. enabled (this last thing I did not test).

    :)

  21. thank you for this great function;
    i haven’t had time to read your post through; but i’m sure it’s very useful.
    the code works; and was easy to add to a project.

    thanks again and
    please keep it up :P

  22. @tyler: i think you can just stretch the video swf to the full screen size by making the flex app full screen and then directly after that; changing the video swf’s height and width properties to the same as full size of the screen / stage.

    hth

  23. @tyler I had this problem so what I did was create two Video containers, one of them sitting above everything else within a Box container with a black background and its visibility bound to a Boolean that represented the Fullscreen mode. When the video is playing you swap the NetStream from one Video container to the other. The result is a seamless bit of fullscreen video without the rest of the SWF content.

  24. Hi!

    i need to use in my FullScreen Application the ESCAPE key for navigation…

    My cuestion is:

    Could i disable o cancel the FullScreenEvent and use the KeyboardEvent.KEY_DOWN ? i need an only fullScreen App….

    this.addEventListener(KeyboardEvent.KEY_DOWN, keyDownEventHandler);

    }
    private function keyDownEventHandler(event:KeyboardEvent):void {
    switch(event.keyCode)
    {
    case Keyboard.ESCAPE: cancelAction();break;//never happends
    case Keyboard.ENTER: goAction();break;
    }
    }

    Thanks!

  25. Excellent site.

    I went through the entire tutorial just to find out that my Flex application at Full Screen will not allow inputs. This is still the case after 1.5 years time, eh? Ouch.

    I guess I’ll read all the comments before actually trying the code next time. A blurb at the beginning of the article could’ve saved me 30 mins though…

  26. Hi! Theres any way to modify the wrapper file generated from Adobe Flex Builder? I hate to modify all the time the Full screen options. Thanks in advance

  27. I mean, theres a posibility to change automatically the content of the wrapper file on Flex IDE to make this fullscreen options available without modify the wrapper file by hand, beacose when you change the source the wrapper change too. Thanks and sorry for double post
    Sun

  28. There is no place in the IDE in order to change or add params but you can go to the root folder of your project, and go into html-template and add these parameters in index.template.html and save the file.
    This is a template html file, flex builder uses, in order to generate html wrapper file.

    -Pankaj

  29. I am very thank full and for using this example, but i want to know that Videodisplay control is capable of full screen, or canvas or any other container except application.

    It would be nice if any body send me the answer.

  30. 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)).

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

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

  33. 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 :)

  34. 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!

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

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

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

  38. 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:

    &lt?xml version=”1.0″ encoding=”utf-8″?&gt
    &ltmx:WindowedApplication xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” color=”#000000″ viewSourceURL=”srcview/index.html” borderColor=”#000000″&gt

    &ltmx:Style source=”styles.css”/&gt

    &ltmx:Script&gt
    &lt![CDATA[
    Application.application.stage.displayState = StageDisplayState.FULL_SCREEN;

    [Bindable]
    private var myUrl:String = “http://”;

    ]]&gt
    &gt/mx:Script&gt

    &gtmx:ApplicationControlBar dock=”true” fillAlphas=”[1.0, 1.0]”
    fillColors=”[#3D3D3D, #3D3D3D]” right=”-1″ left=”-1″ top=”-33″ color=”#FFFFFF” height=”38″ themeColor=”#A6A5A5″&gt
    &gtmx:Spacer width=”100%”/&gt
    &gtmx:Button label=”<” click=”browser.historyBack()” themeColor=”#3D3D3D” borderColor=”#3D3D3D” fillAlphas=”[1.0, 1.0]” fillColors=”[#3D3D3D, #3D3D3D]” color=”#A6A5A5″/&gt
    &gtmx:Button label=”>” click=”browser.historyForward()” borderColor=”#3D3D3D” themeColor=”#3D3D3D” fillAlphas=”[1.0, 1.0]” fillColors=”[#3D3D3D, #3D3D3D]” color=”#A6A5A5″ fontWeight=”normal”/&gt
    &gt/mx:ApplicationControlBar&gt

    &gtmx:HTML id=”browser” right=”0″ left=”0″ top=”0″ bottom=”0″ color=”#000000″ location=”http://www.kapasitor.net/apaca”/&gt

    &gt/mx:WindowedApplication&gt

    i hope u can help me to solve this error.

  39. how to set width and height of the flex application using htmlwrapper. i just want to show a application on some part of web browser like you display this flex application with width 680 height 150 ….
    thanks

    1. @hari,

      The easiest way I’ve found is to set the width/height on the main MX/Spark Application tag. That way the generated HTML code in the Flash Builder project’s /bin-debug/ folder should set the appropriate width/height on the embedded SWF file.

      For example, if you set the width and height on the s:Application tag in a Flex 4.0+ application, like this:

      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
              xmlns:s="library://ns.adobe.com/flex/spark"
              xmlns:mx="library://ns.adobe.com/flex/mx"
              width="680" height="150">

      You can see that the generated HTML template sets the appropriate width/height on the SWFObject embed code:

      swfobject.embedSWF(
          "foo.swf", "flashContent", 
          "680", "150", 
          swfVersionStr, xiSwfUrlStr, 
          flashvars, params, attributes);

      As well as setting the width/height on the <noscript/> code block:

              <noscript>
                  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="680" height="150" id="foo">
                      ...
                      <!--[if !IE]>-->
                      <object type="application/x-shockwave-flash" data="foo.swf" width="680" height="150">
                          ...
                      <!--<![endif]-->
                      <!--[if !IE]>-->
                      </object>
                      <!--<![endif]-->
                  </object>
              </noscript>

      Peter

  40. how to write a program in mxml when i click on the button it will automatically runs the vlc player located in the path C:\Program Files in my computer pls help me out ….ASASP

  41. Hi

    Fullscreen keyboard inputs worked in AIR apps when I compiled using the FLEX 3 Builder.

    I compiled the same app using Flex 4 and keyboard inputs are NO longer working.

    Have I missed an additional/alternative setting in Flex 4 or have Adobe stopped Keyboard Inputs all together in Flash/AIR.

    I hope not – there are so many smart options for allowing Fullscreen Keyboard Inputs , including a Security Setting which the user can control – can’t understand why Adobe won’t implement a proper security solution here – dumb!

    Cheers

    P

  42. Ooops, I realised my error when compiling to Flex 4, I was using FULL_SCREEN setting rather the FULL_SCREEN_INTERACTIVE.

    So Flex 4 will compile AIR apps that allow keyinput during Fullscreen.

    I still think that Adobe should re-examine the issue with Fullscreen and Keyinput in Flash Apps.

    Apologies for the error in my previous post.

    Cheers

    Parmy

Comments are closed.