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

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

1. lee probert says:

   August 3, 2009 at 7:14 am

   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);
   • Peter deHaan says:

     August 3, 2009 at 10:30 am

     @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
     • Peter deHaan says:

       August 3, 2009 at 10:41 am

       Added SWF.
   • Peter deHaan says:

     August 3, 2009 at 11:33 am

     @lee,

     What about this?

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

     Peter
2. Matt S. says:

   August 4, 2009 at 1:45 pm

   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?
   • Peter deHaan says:

     August 4, 2009 at 2:12 pm

     @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. Matt S. says:

   August 5, 2009 at 7:52 am

   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>
   • Bo says:

     September 30, 2011 at 2:02 am

     I had the same Problem and your code works perfectly.
     Thank you for posting it.
4. Peter deHaan says:

   August 5, 2009 at 7:58 am

   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. Luis Rdz says:

   June 16, 2010 at 11:07 am

   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
   • Peter deHaan says:

     June 16, 2010 at 12:34 pm

     @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. Luis Rdz says:

   June 17, 2010 at 6:35 am

   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. J. Carbajal says:

   July 14, 2010 at 2:12 pm

   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. Luis Rdz says:

   July 16, 2010 at 11:13 am

   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. Luis Rdz says:

   July 16, 2010 at 11:37 am

   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. Marylka says:

    June 17, 2011 at 1:12 am

    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. Freddy Flores says:

    June 21, 2011 at 3:26 pm

    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