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. good example, I didn’t know the difference between “applicationComplete” and “creationComplete” untill saw you tutorial.
    thank you!

  2. Your blog is pretty awesome: this entry in particular. Application Complete, who knew? With that said, I keep getting a 1046 error relating to the evt:FullScreenEvent, around line 8. The exact diagnostic is…

    1046: Type was not found or was not a compile-time constant: FullScreenEvent.

    Any idea what the problem might be?

  3. Hi, i’ve tried the code but i get a “Error #2152: Full screen mode is not allowed” in Firefox 2.0.0.6 and IE 7. The funny thing it’s that it runs ok when using it from your site. So i guess it’s not a browser security/config related problem.
    Can you help me out ? thanks in advance !! great work and great site !!!!!!!!!!

  4. li wenzhi,

    There is a really good article over at Wietse Veenstra’s blog on “Understanding the Flex Application startup event order” which describes the order in which the various events (preinitialize, initialize, creationComplete, updateComplete and applicationComplete) get called. It’s a very good read and I highly recommend it.

    Lively & Co,

    If you are using the Adobe Labs version of Flex Builder 3, there was a bug (SDK-11792: “Class Missing: flash.events.FullScreenEvent”) where the FullScreenEvent class wasn’t working in the original beta 1 release. You can fix this by downloading and installing a newer nightly build of the Flex 3 SDK.

    Lucio,

    Sorry, I forgot to mention that you have to edit the HTML wrapper code to add the “allowFullScreen” property and set it to “true” (it is false by default). I updated the post above. Good catch, thanks.

  5. This is a cool feature to add to my app, thanks for sharing the trick.
    The only problem is that with Flex 2 SDK it works only if I run the application in Debug mode and doesn’t when I run it in release… any ideas?
    Thank you!

  6. irina,

    Are you sure both your Debug and Release versions of the Flash Player are 9.0.28.0 or higher? I don’t think I mentioned it above, but I should update the post to mention that.

  7. I upgraded Flash player to 9.0.47.0 and still have the same problem… When I launch it from Flex 2 Builder in debug – works fine, but when I launch it in release – it doesn’t work… Thank you!

  8. hey, i got it working! i had wmode=opaque parameter set in the html (wasn’t there for debug mode) and that got in a way for some reason, it now works with that attribute removed.

  9. irina,

    Thanks for the update.

    I checked the online docs and found this quote in the “Exploring full-screen mode in Flash Player 9” article on the Adobe Developer Center:

    Full-screen mode was not originally supported if the wmode is opaque or transparent windowless, but it is now supported starting with the latest Flash Player 9 Update on Adobe Labs…

    I believe the current posted Adobe Flash Player build number on Labs is “9.0.60.120”, which lists among its features and enhancements:

    Enhancements to full-screen mode to use hardware scaling for improved video performance and quality on systems running Windows 2000 and newer or Mac OS X 10.2 and newer.

    Happy Flexing!

  10. See for dummies like me, if you want me to use that mxml or whatever that actually is, you have to say, put this one here in head, link there, etc. I am lost … I see your example but can’t figure out where and to what to stick this to?

    Fortunately the allow full scale = true works good enough …

    Just a though, must write to lowest denominator :-)
    Thanks do for good blog.

    Shamick

  11. Shamick,

    Yeah, sorry. It is a bit confusing since full-screen does require a few different moving parts (MXML HTML/JavaScript). But you do have a good point, I should update the ZIP file for these examples to include all the JavaScript HTML SWF files and not just the MXML source.

    Peter

  12. I get the same error as Lively & Company …
    1046: Type was not found or was not a compile-time constant: FullScreenEvent.
    can you tell me what the problem could be and what i should do to activate fullscreen

  13. Alternatively, if you have a clue what you are doing and want to skip all the BS above, here is a much shorter version. You never have to use Application.application from within the main app mxml file btw, nor do you have to use the system manager in this instance. This will create the exact same results as the example above but with only 4 lines of code:

  14. My apologies, I didn’t realize this blog stripped tags from posts, hopefully this one shows up right:

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" applicationComplete="{stage.addEventListener('fullScreen',function(e:Event):void{ debugText.text='width:' width ' height: ' height '\\rDisplay State: '   stage.displayState; })}">
    <mx:Text id="debugText" text="width: {width} height: {height '\\r'}Display State: normal" width="200" height="60" textAlign="left" />
    <mx:Button label="Toggle fullscreen" click="{stage.displayState=='fullScreen' ? stage.displayState='normal' : stage.displayState='fullScreen';}" />
    </mx:Application>
    
  15. selva,

    Which version (and build) of the Flex SDK are you using? I believe there was a problem with the Labs version of Flex Builder 3 Beta 1, but if you update to a newer nightly build everything should be A-OK.

    Peter

  16. Peter,
    I tried to get source code from this page. Full screen does not work. I installed player gain. Found another example with no source code where full screen works. Can you please post the final source code?. I am kind of newbe. Thanks.

    sh

  17. shilpi,

    Which version of the Flash Player are you using? (If you aren’t sure, you can check out this post and it should have an embedded SWF that will tell you the OS, Player Version, and whether or not its a debug version of Flash Player: “Debugging Flex applications with mm.cfg and flashlog.txt“.) And did you modify the HTML template and set the “allowFullScreen” property to “true” in both the JavaScript and Object/Embed tags?

    I’ve updated the ZIP file (FullScreen_test.zip) with the MXML as well as the HTML/SWF/JavaScript. Can you try downloading the ZIP file again and trying the sample?

    Peter

  18. Peter,
    I am very sorry that I did look at your comment when I checked for your reply. Noticed my name on top and stopped right there. Many thanks for replying right back.
    I was able to build and run fine with this and after copying your code. My problem was that I did not have playerglobal.swc needed to run video. You may want to include that file in your source – I had trouble fnding that file!.

    — shilpi

  19. i need a code rhat can enable my myspace to be views in full screem
    wgen visited, the code needs to be in style tags of some kind, css only works that i know of
    will pay for it

  20. Hi, thanks for the great tutorial, but for a beginner like me does help much :(
    I was wondering if you could help me out.
    How can i add this full screen function to my website?
    I only know how to work in flash, i don’t know flex.
    So, how do i make a button in flash that calls this script?
    This means a lot,
    Cheers!

  21. Hello,

    I try to switch my application in fullscreen mode at the launch. I don’t want to have to push a button to switch to fullscreen mode…

    BUT when a force Fullscreen in the applicationComplete Event i have the message : Fullscreen not allowed… And when i push the toggle fullscreen button it works….

    Somebody have a solution?

    Thank you very much for your contribution.

  22. I might be incredibly stupid, but whenever I tried to add this code to my project, it says I can’t override a built in function. So I did a little investigating, and it turns out there’s a “toggleFullScreen” already for a Click event? I’m really confused. Thanks!

  23. Adam,

    I don’t see a “toggleFullScreen” method/property in the Flex 3 Language Reference. If you want to try posting some code, I can take a look.

    Just remember that you may need to escape “<” characters as “&lt;” and “>” characters as “&gt;”, otherwise the blog may eat your code.

    Peter

  24. I cant see my post so ill post again

    A funny fact.
    If you write mysite.com/main it wont work.
    If you write mysite.com/main.html it will work
    I have no idea why this is so,
    Im using IE7.

    Phill

  25. BloOdFiRe
    I met the same problem, I even try to force toggle fullscreen button dispatch mouse_click event in the applicationComplete Event. this error still there. I have no idea. Any body could help us? Thanks very much!

  26. Works like a charm, although i’d really like to supress the message telling the user that pushing escape will end the fullscreen. Any idea on how to accomplish that? thx.

  27. Very good! It works fine… Except one very important thing :(

    When I’m at the fullscreen mode, I can’t write anything in the flex application!
    I can’t even select a textbox or textarea, etc…

    Can you help me? If someone knows the answer, e-mail me: gugahawk@gmail.com

    Thanks!

  28. Oh no, sadly there is no error, it should act like that:

    “Users cannot enter text in text input fields while in full-screen mode. All keyboard input and key-related ActionScript is disabled while in full-screen mode, with the exception of the keyboard shortcuts that take the viewer out of full-screen mode.”

  29. Hello, your blog is the only one that works for me, everytime i get stuck you have a blog post about it. and i mean about 9 times so far.

    My question is, I want to change the “Press esc button to exit full screen mode” to a different language. Is this possible without defining a locale? Or is it possible to create my own locale?

    thanks so much for your contribution.
    Alex

  30. Cool,
    Though my app switches to full screen
    once navigated, my browser is getting crashed (Both FF and IE).
    Navigation includes (change in ViewStack’s children)

    Thanks

  31. Many thanks Peterd for your tricks that help me more than books do.
    However, i tryed the creation of full screen and encountered a problem.
    I can no longer write any text in my application.
    Could you help me ?
    Thank you.

  32. Hi,

    I have a flex application and i have loaded a swfloader(player) in a small panel. Now i want to make this small panel into full screen and i want to restore.

    If i want to make a main application as a full screen mode, its working fine.But can anyone know the solution for the above pbm?

    thanks
    Dhinakaran.C

  33. Thanks Peter for your wonderful efforts. Your code helped me too! I was playing around with it and realized that when I click on the full screen button on a cloned implementation on my app, the Full screen version always shows up on my primary monitor, irrespective of where the browser is. However the demo app you have on this blog loads shows the full screen on the correct monitor. Any ideas to where the problem might be? Thanks in advance!

  34. Hey great blog! Thanks for the tips. I wonder how to provide the application with a full screen property so as soon as you go to the swf, so the page goes full screen automatically. I’m building a website in html/css but need the full screen functionality of flash 9 on one of the pages with a timer. Or some how include the full screen toggle with the Start Dream Creation button. Here is the code for what I’m working on and want this to be full screen. This code is a edit of another example on this website. I would link to it but I don’t want to F with your SEO.

  35. Alex Grande,

    I don’t believe you can force full-screen. I believe it needs to be initiated by a user event (mouse click, for example).

    Peter

  36. its give an error to me

    Error #2152: Full screen mode is not allowed. ( which is SecurityError)

  37. I have full-screen mode working but my Flex application, when loaded in an IE browser, does not seem to allow any user interaction once the Flex app is in full-screen mode. It’s almost as if something is blocking user interaction.

    Anyone ever seen this?

    I am running Flash 9,115,0. It’s the oddest thing. It works fine when running through straight Flash player (minus the IE browser, etc.).

    Thanks.

  38. Hi,

    I am working on flex application with .net. I want to open a modal dialog box (asp.net page) on click of a button placed in the flex application. How can i achieve this?

    Thanks in advance…

  39. hello sir i am facing problem to create slide show in flex plz could you tell me the procedure plz sir i want script how to create slide show on flex

  40. Thanks for sharing this, Peter.

    One thing that is somewhat annoying is that if the Flex application contains a video anywhere in the application (in my case a FLVPlayback component) going into full screen mode only shows the video component, not the entire application. Commenting out the video component allows the whole application to be full screen.

    Does anyone know how to allow a Flex application with video to show the whole application when in full screen mode?

  41. After a little more Googling, I found the answer to my own question. I thought others might be interested, so I’m reposting it here:

    Why does FLVPbaybak component take over the whole screen when the Flex application goes into full screen mode?

    For the FLVPlayback Flash component this is the default. If you want to see the other elements then set it to false.

    fullScreenTakeOver : Boolean
    “When the stage enters full-screen mode, the FLVPlayback component is on top of all content and takes over the entire screen.”

Comments are closed.