How to create true fullscreen movies with Flash

Flash Player 9.0.28 is the first version that supports true full screen playback for Flash movies. Unfortunately this awesome feature won't be fully supported by the Flash Authoring Environment until version 9 comes out later this year, but with a small modification to your Flash 8 installation, you can already create flash movies that make use of this feature today. Here's a simple tutorial to make your flash movie run in full screen:

Before continuing with this tutorial, make sure that you are using at least Flash Player version 9.0.28. Prior versions of Flash Player 9 (9,0,16,0 and 9,0,20,0) don't support this feature yet. You'll need to upgrade to 9,0,28,0, which happens to be the first version to also work with Vista.

The key to the new feature is a new attribute to the Stage object in ActionScript, 'displayState'. This attribute takes two inputs:

• 'fullScreen': Sets the stage to display full-screen
• 'normal': Default setting

Before you can go and set this attribute, you'll need to make a modification to your Flash 8 installation. Pull up the following file in your Flash installation folder:

Flash 8\en\First Run\Classes\FP8\Stage.as

Add the line "static var displayState:String;" to the file so it looks like this:

Now you can set the displayState attribute in your flash movie. For security purposes Flash only allows the displayState to be set to fullscreen on user interaction, which means you cannot have a movie open in fullscreen mode by default. You'll need to add a button that captures the user's interaction in order to switch to full screen. In my example I simply created a toggle button:

toggle_btn.onRelease = function(){
  if(Stage.displayState  == "fullScreen"){
    Stage.displayState  = "normal";
  }
  else{
    Stage.displayState  = "fullScreen"
  }
}

If you want to detect that fullscreen mode has been entered or exited, you can use a new event listener function, onFullScreen:

EventListener = new Object;
EventListener.onFullScreen = function( bFull:Boolean ){
  // change  to fullscreen mode has been detected
  if(bFull){
    v_mc.vtxt  = "You are in Full Screen Mode";
  }
  else{
    v_mc.vtxt  = "Everything is back to normal";
  }
}
Stage.addListener( EventListener );

There's one more trick to this. Another security restriction requires a new attribute to be added to the EMBED tag, 'allowFullScreen'. You need to manually set this attribute to 'true':

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
width="320" height="240" id="fullscreen_flash" align="middle">
  <param name="movie" value="fullscreen_flash.swf" />
  <param name="quality" value="high" />
  <param name="allowFullScreen" value="true" />
  <param name="bgcolor" value="#ffffff" />
  <embed src="fullscreen_flash.swf" allowfullscreen="true" quality="high"
  bgcolor="#ffffff" width="320" height="240" name="fullscreen_flash" align="middle"
  type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

Unfortunately it seems like neither SWFObject or UFO support this new attribute, so you'll have to rely on the plain old embed tag for now.

Update: UFO does support the new attribute in version 3.21. Be sure to use the set the lowercase variable allowfullscreen:"true". SWFObject also supports it via so.addParam("allowFullScreen", "true").

And that's all you need to know to start building fullscreen flash movies. You can download the demo FLA here.