Working with Full Screen mode in AS3

When working with fullscreen mode in AS3, there are a few things to take notice of when developing applications.

For fullscreen mode to be enabled, the allowFullScreen tag in the embed has to be set to true for Flash Player to be able to display in full screen.

<object> 
    ... 
    <param name="allowFullScreen" value="true" /> 
    <embed ... allowfullscreen="true" /> 
</object>

When working with fullscreen mode, applications are often a lot less confusing if a full screen button is only displayed if the application can actually display in full screen mode.
To check if full screen mode is available to Flash Player, you can check the stage Boolean property stage.allowsfullScreen(). If true, fullscreen mode can be used and a button to enter full screen mode can be shown to the user for example. To check if full screen mode can be used, use the following:


if(stage.allowsFullScreen())
{
 //full screen code here
}

Fullscreen mode can also only be turned on by a user interaction, the user has to have pressed a button for the change to take place. It is not possible in Flash Player to automatically force the user into fullscreen mode, and the user must trigger the change. In Adobe AIR applications, it is ok to automatically load an application in full screen mode.

You can add an event listener for when a application enters or leaves full screen mode. This is how to create an event listener for that event:

import flash.events.FullScreenEvent; 
 
function handleFullScreenEvent(event:FullScreenEvent):void 
{ 
    if (event.fullScreen) 
    { 
      //handle fullscreen mode
    } 
    else 
    { 
        //handle normal mode
    } 
} 

clip.stage.addEventListener(FullScreenEvent.FULL_SCREEN, handleFullScreenEvent);

Finally, setting stage.fullScreenSourceRect can greatly increase performance of projects running in full screen mode. This makes the Flash Player render the project using hardware, rendering the display stack as an upscaled bitmap instead of scaling the vector artwork. The result is much faster render speeds and a performance increase, however it can look a little blurry.

stage.fullScreenSourceRect() is a rectangle, and which is used to specify an area of the screen to upscale as a bitmap in fullscreen mode. It normally makes sense to set this to the screen size of your minimised stage size, with an x and y position of 0. For example:

stage.fullScreenSourceRect = new Rectangle(0,0,stage.stageWidth,stage.stageHeight);

More information about working with fullscreen mode in AS3 can be found on the Adobe docs here.

** Update **

I have found when embedding flash content in HTML pages and using the fullScreenSourceRect property. I am using a Macbook Pro and Flash Player 11.5 in Chrome, and have tested the problem with older versions of Flash Player also. When using fullScreenSourceRect, you can upscale fine when in fullscreen mode in the projector and in the browser. However in the browser when you exit full screen mode and return to normal the Flash Player has a terrible time of things and the display gets really confused. The sampled image and the scaled image can be seen at the same time, and there seems to be no fix for this bug. Even setting the fullScreenSourceRect to null does not work. I have emailed Adobe about this problem and will post up their response when or if I receive one. Fingers crossed this can be fixed as we are wanting to use this feature in Enola: Prelude!

Leaving fullscreen mode can leave both renders visible with fullScreenSourceRect

Leaving fullscreen mode can leave both renders visible with fullScreenSourceRect

Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInShare on RedditShare on StumbleUponShare on TumblrEmail this to someone

2 thoughts on “Working with Full Screen mode in AS3

  1. Hey there, any update on the Chrome issue?
    I’m having the same problem in full screen Chrome when instantiating stage.fullScreenRectangle (Flex sdk 4.0)
    So far no clue on what’s happening…

    1. I ended up giving up on using fullScreenRect and used the following:

      var ratio:Number;
      if ( (stage.stageWidth / width) < (stage.stageHeight / height) ) {
      ratio = stage.stageWidth / width;
      } else {
      ratio = stage.stageHeight / height;
      }

      x = ( stage.stageWidth – width * ratio ) / 2;
      y = ( stage.stageHeight – height * ratio ) / 2;

      scaleX = scaleY = ratio;

      Enjoy!

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>