Creating full-screen Flex applications in Flex 4 (SWFObject Edition)

In a previous example, “Creating full-screen Flex applications”, we saw how to toggle full screen mode in a Flex application by setting the allowFullScreen parameter in the HTML wrapper template’s AC_FL_RunContent() method.

The following example shows how you can enable full screen from your HTML template to your Flex applications using the Flex 4 SDK (which uses SWFObject now).

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/15/creating-full-screen-flex-applications-in-flex-gumbo-swfobject-edition/ -->
<s:Application name="Gumbo_FullScreen_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/halo"
        applicationComplete="init();">
 
    <fx:Script>
        <![CDATA[
            [Bindable]
            private var fullScreenState:String;
 
            private function init():void {
                fullScreenState = stage.displayState;
            }
 
            private function btn_click(evt:MouseEvent):void {
                if (btn.selected) {
                    fullScreenState = StageDisplayState.FULL_SCREEN;
                } else {
                    fullScreenState = StageDisplayState.NORMAL;
                }
 
                try {
                    stage.displayState = fullScreenState;
                } catch (any:*) {
                    // ignore
                }
            }
        ]]>
    </fx:Script>
 
    <s:VGroup horizontalCenter="0" top="20" width="150">
        <s:SimpleText text="width={width}" />
        <s:SimpleText text="height={height}" />
        <s:SimpleText text="displayState={fullScreenState}" />
        <s:ToggleButton id="btn"
                label="Toggle fullscreen"
                click="btn_click(event);"
                width="100%" />
    </s:VGroup>
 
</s:Application>

NOTE: It appears that the /html-template/index.template.html sets the allowfullscreen flag to “true” by default now, so you no longer need to manually edit the .HTML templates.

[GoogleAdsWide]

View source is enabled in the following example.

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

17 thoughts on “Creating full-screen Flex applications in Flex 4 (SWFObject Edition)

  1. Hi Peter. Me again! I’m trying to do this today and am finding that I can’t set a listener up on the stage object. Has this changed in the latest SDK?

    this.stage.addEventListener(FullScreenEvent.FULL_SCREEN,handleFullscreen);
    1. @lee,

      I just updated the example to work with the latest API (or 4.0.0.8903+, at least) and it worked fine. Which error(s) were you seeing with the example?

      Peter

    2. @lee,

      What about this?

      FlexGlobals.topLevelApplication.stage.addEventListener(FullScreenEvent.FULL_SCREEN,handleFullscreen);

      Peter

  2. Peter,

    In your example, if the escape key is used to return to normal from fullscreen, the togglebutton remains in a selected state, and the text for displaystate continues to show “fullscreen”.

    I’m currently trying to use a toggle button, but want it to return to its unselected state if the user hits the escape key to return to normal view.

    The following (executed during creationComplete of a custom button) results in an “Error #1009: Cannot access a property or method of a null object reference.” on “stage”:


    stage.addEventListener( FullScreenEvent.FULL_SCREEN, fullScreenHandler, false, 0, true );

    or, alternately:
    FlexGlobals.topLevelApplication.stage.addEventListener( FullScreenEvent.FULL_SCREEN, fullScreenHandler, false, 0, true );

    Thoughts on how to resolve this?

    1. @Matt S.,

      This works for me in Flex 4.0.0.9027:

      <?xml version="1.0" encoding="utf-8"?>
      <!-- http://blog.flexexamples.com/2009/03/15/creating-full-screen-flex-applications-in-flex-gumbo-swfobject-edition/ -->
      <s:Application name="Gumbo_FullScreen_test"
              xmlns:fx="http://ns.adobe.com/mxml/2009" 
              xmlns:s="library://ns.adobe.com/flex/spark" 
              xmlns:mx="library://ns.adobe.com/flex/halo"
              applicationComplete="init();">
       
          <fx:Script>
              <![CDATA[
                  [Bindable]
                  private var fullScreenState:String;
       
                  private function init():void {
                      fullScreenState = stage.displayState;
                      stage.addEventListener(FullScreenEvent.FULL_SCREEN, stage_fullScreen);
                  }
       
                  private function btn_click(evt:MouseEvent):void {
                      if (isFullScreen()) {
                          fullScreenState = StageDisplayState.NORMAL;
                      } else {
                          fullScreenState = StageDisplayState.FULL_SCREEN;
                      }
       
                      try {
                          stage.displayState = fullScreenState;
                      } catch (any:*) {
                          // ignore
                      }
                  }
       
                  private function stage_fullScreen(evt:FullScreenEvent):void {
                      btn.selected = isFullScreen();
                  }
       
                  private function isFullScreen():Boolean {
                      return (stage.displayState == StageDisplayState.FULL_SCREEN);
                  }
              ]]>
          </fx:Script>
       
          <s:VGroup horizontalCenter="0" top="20" width="150">
              <s:SimpleText text="width={width}" />
              <s:SimpleText text="height={height}" />
              <s:SimpleText text="displayState={fullScreenState}" />
              <s:ToggleButton id="btn"
                      label="Toggle fullscreen"
                      click="btn_click(event);"
                      width="100%" />
          </s:VGroup>
       
      </s:Application>

      Peter

  3. Thanks, Peter.

    That solution definitely works in a situation where the components and handlers are defined directly in the Application object, and the stage listener can be handled on applicationComplete.

    For the benefit of those seeking a solution similar to my case…
    In my case (handling this in a custom button component), setting an Event.ADDED_TO_STAGE handler was the solution. This allowed me to set the FullScreenEvent.FULL_SCREEN listener on stage in the custom component; since stage = null until the component is added stage’s display list.

    (Noting that I’m presently using Halo, not Spark, components with Flex 4 [Gumbo])

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Button xmlns:mx="http://www.adobe.com/2006/mxml"
            creationComplete="init()"
            click="clickHandler(event)"
            toggle="true">
     
        <mx:Script>
            <![CDATA[
                override protected function clickHandler(event:MouseEvent):void
                {
                    try 
                    {
                        switch ( stage.displayState )
                        {
                            case StageDisplayState.FULL_SCREEN:
                                stage.displayState = StageDisplayState.NORMAL;
                                break;
                            default:
                                stage.displayState = StageDisplayState.FULL_SCREEN;
                                break;
                        }
                    }
                    catch ( any:*) { }
     
                    event.stopImmediatePropagation();
                }
     
                private function fullScreenHandler( e:FullScreenEvent ):void
                {
                    selected = e.fullScreen; 
                }
     
                private function init():void
                {
                    addEventListener( Event.ADDED_TO_STAGE, addedToStageHandler );    
                }
     
                private function addedToStageHandler( e:Event ):void
                {
                    stage.addEventListener( FullScreenEvent.FULL_SCREEN, fullScreenHandler, false, 0, true );
                }
            ]]>
        </mx:Script>
     
    </mx:Button>
  4. Sorry, if you’re posting XML, MXML, or HTML, you’ll need to escape your < chars as &lt; and your > chars as &gt;

    I’ll try and update the comments form to mention that.

    Peter

  5. Hi!

    I have a problem, I’m trying to make my application with Full Screen at the start… so in the application on creation complete I call a function and in that function I’m putting this code:

    private function efectoentrada():void
    {
        try{
            stage.displayState = StageDisplayState.FULL_SCREEN;
        }catch(any:*){
            // ignore
        }					
        fadeIn.play(); //an animation of entrance
    }

    I’m doing it that way because I don`t want a button to shuffle between full screen or normal screen, I want full screen at the beginning… but with that code it doesn’t do anything, of course it shows an error if I cut off the try-catch method saying that cannot access something that its null

    so, How can I do my app fullscreen at the beginning?

    Thanks

    1. @Luis Rdz,

      As far as I know, that isn’t possible. I believe that going full screen requires user interaction (for example, a button press). Otherwise you could potentially have websites (or rogue banners) that just spontaneously go full screen without the user doing anything, which would be very annoying and intrusive.

      Peter

  6. Hi Peter

    Oh, ok I see.. yeah I think so too about the annoying it could be, it’s just a requirement that someone ask me, and I tried to do it, but didn’t know it was impossible, at first I thought it as an AIR application, not a website… but you know… people insist some times …

    Thank you for your answer

  7. Hi Luiz Rdz,

    Have you tried dispatching the FullScreenEvent.FULL_SCREEN event ?. Dispatching this event would be the same as user interaction.

    You can add the dispatchEvent(…) line after the stage.addEventListener(FullScreenEvent.FULL_SCREEN, stage_fullScreen); in the init method of this example.

    private function init():void {
    fullScreenState = stage.displayState;
    stage.addEventListener(FullScreenEvent.FULL_SCREEN, stage_fullScreen);
    // Your line of code here Luis =)
    }
    Let me know if it works.

  8. Hi J. Carbajal
    thanks for the tip, I will try it :)

    Right now I came here to ask a problem that I’m having with a fullscreen mode. In my project of flash builder, I have an application that uses textinputs and comboboxes and other stuff… well the thing here is that, when I’m on fullscreen mode, I can’t write on the textinputs :S , I put the cursor on whatever textinput on the app and start typing and nothing happens, but when I try to write on normal screen mode, it writes just fine… in the same application (I’m switching fullscreen and normal screen with a button on the app next to the textinputs), it works OK my switching of fullscreen to normal and viceversa, but when I’m on fullscreen, the user can’t write on the fields.. that’s weird.

    Any reasons of why is happening that?…

    Thanks

  9. I’m sorry to post again.. just check other section of this blog about fullscreen and found that Peter already said that is currently not possible to write on textinputs while is on fullscreenmode.

    Thankx anyway

  10. Hi Peter.

    How can I make my Flash Catalyst project website scale/use a liquid layout? How do I do it using Flash Builder?

    Thank you!

  11. Hi, was wondering if someone can help. I am creating a desktop application and I want to have two options.

    1. Go to Full Screen when opened.
    2. Hide the mouse.

    Can some tell me how to code this in within the
    s:WindowedApplication

    /s:WindowedApplication

Comments are closed.