AS3 : Toggle Fullscreen

The other day, friends were asking me how to do full screen popup for flash. So here I am with a simple demo for creating a full screen swf popup. (Note: the full screen popup can only be trigger by a generic mouse click only.)

Time for some coding... The main as file for the swf - Main.as

package com.zcs 
{ 
 import flash.events.Event;
 import flash.display.MovieClip;
 import flash.events.MouseEvent;
 import flash.display.StageDisplayState;

 public class Main extends InterfaceSetup implements IInterfaceSetup
 {
  private var _top_mc:MovieClip;
  private var _bottom_mc:MovieClip;
  private var _left_mc:MovieClip;
  private var _right_mc:MovieClip;
  
  private var _cover_mc:MovieClip;
  
  public function Main():void 
  {
   // constructor code
  }
  
  //Override the stage variables
  override public function setupStageEvent(event:Event):void
  {
   super.setupStageEvent(event);
   stageWidthF = 600;
   stageHeightF = 400;
   
   _top_mc = this.getChildByName("top_mc") as MovieClip;
   _bottom_mc = this.getChildByName("bottom_mc") as MovieClip;
   _left_mc = this.getChildByName("left_mc") as MovieClip;
   _right_mc = this.getChildByName("right_mc") as MovieClip;
   
   _cover_mc = this.getChildByName("cover_mc") as MovieClip;
   _cover_mc.buttonMode = true;
   _cover_mc.addEventListener(MouseEvent.CLICK, clickEvent);
   
   resizeEvent();
  }
  
  //Upon Screen Resize....
  override public function resizeEvent(event:Event = null):void
  {
   //Scale and position the MovieClip accordingly
   resizeSubFunc(_top_mc, "50%", "l", "0", "t", 1);
   resizeSubFunc(_bottom_mc, "50%", "l", "0", "b", 1);
   resizeSubFunc(_left_mc, "0", "l", "50%", "t", 1);
   resizeSubFunc(_right_mc, "0", "r", "50%", "t", 1);
   resizeSubFunc(_cover_mc, "0", "l", "0", "t", 1);
  }
  
  private function clickEvent(event:Event):void
  {
   toggleFullScreen();
  }
  
  private function toggleFullScreen():void
  {
   //if normal size, go to fullscreen, else go to normal size
   if(stage.displayState==StageDisplayState.NORMAL){
    stage.displayState=StageDisplayState.FULL_SCREEN;
   }else{
    stage.displayState=StageDisplayState.NORMAL;
   }
  }  
 }
}

This is an simple as file that I have been using for reusing some screen resize functions - InterfaceSetup.as

package com.zcs
{
 import flash.display.MovieClip;
 import flash.events.*;
 import flash.system.*;
 import flash.external.*;
 
 public class InterfaceSetup extends MovieClip implements IInterfaceSetup
 {
  public var stageWidthF;
  public var stageHeightF;
  
  public function InterfaceSetup():void
  {
   this.addEventListener(Event.ADDED_TO_STAGE, setupStageEvent);
  }
  
  //setup the stage after this is added to stage and listen for resize of flash file
  public function setupStageEvent(event:Event):void
  {
   this.removeEventListener(Event.ADDED_TO_STAGE, setupStageEvent);
   stageWidthF = 1024;
   stageHeightF = 768;
   
   stage.addEventListener(Event.RESIZE, resizeEvent);
  }
  
  //resize event
  public function resizeEvent(event:Event = null):void
  {
   
  }
  
  //sub resize function that requires the following variables
  //tempMC = the movieclip lo :P
  //tempPosX, the x position (ex: 0 || 50%)
  //Hdir, from l (left) or r (right)
  //tempPosY, the y position (ex: 0 || 50%)
  //Vdir, from t (top) or b (bottom)
  public function resizeSubFunc(tempMC,tempPosX,Hdir,tempPosY,Vdir,scaleByScreen = 0):void
  {
   var strArray;
   
   if(scaleByScreen == 1){
    tempMC.scaleX = (stage.stageWidth/stageWidthF) * 1;
    tempMC.scaleY = (stage.stageHeight/stageHeightF) * 1;
   }else if(scaleByScreen == -1){
    tempMC.scaleX = (stage.stageHeight/stageHeightF) * 1;
    tempMC.scaleY = (stage.stageWidth/stageWidthF) * 1;
   }
   
   if(Hdir == "l"){
    tempMC.x = -1 * ((stage.stageWidth - stageWidthF) / 2);
    if(String(tempPosX).indexOf("%") != -1)
    {
     strArray = String(tempPosX).split("%");
     tempMC.x += (int(strArray[0])/100) * stage.stageWidth;
    }else{
     tempMC.x += Number(tempPosX);
    }
   }else{
    tempMC.x = stageWidthF + ((stage.stageWidth - stageWidthF) / 2);
    if(String(tempPosX).indexOf("%") != -1)
    {
     strArray = String(tempPosX).split("%");
     tempMC.x -= (int(strArray[0])/100) * stage.stageWidth;
    }else{
     tempMC.x -= Number(tempPosX);
    }
   }
   
   if(Vdir == "t"){
    tempMC.y = -1 * ((stage.stageHeight - stageHeightF) / 2);
    if(String(tempPosY).indexOf("%") != -1)
    {
     strArray = String(tempPosY).split("%");
     tempMC.y += (int(strArray[0])/100) * stage.stageHeight;
    }else{
     tempMC.y += Number(tempPosY);
    }
   }else{
    tempMC.y = stageHeightF + ((stage.stageHeight - stageHeightF) / 2);
    if(String(tempPosY).indexOf("%") != -1)
    {
     strArray = String(tempPosY).split("%");
     tempMC.y -= (int(strArray[0])/100) * stage.stageHeight;
    }else{
     tempMC.y -= Number(tempPosY);
    }
   } 
   tempMC.x = Math.ceil(tempMC.x);
   tempMC.y = Math.ceil(tempMC.y);
  }
 }
}

A simple Interface file - IInterfaceSetup.as

package com.zcs
{
 import flash.events.Event;

 public interface IInterfaceSetup 
 {
  // Interface methods:
  function setupStageEvent(event:Event):void;
  function resizeEvent(event:Event = null):void;
 }
}

Main HTML file - main.html

<html>
 <head>
<style type="text/css">
<!--
html{height:100%}
body {
 margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 background-color: #000;
}
#flashContent {width:100%;height:100%;}
-->
</style>
    
   <!-- Include support librarys first -->  
  <script type="text/javascript" src="jsScript/swfobject.js"></script>
  <script type="text/javascript" src="jsScript/swfforcesize.js"></script>      
  <script type="text/javascript" src="jsScript/swfaddress.js?tracker=null"></script>    


    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  </head>
  <body>
    <table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%">
    <tr><td align="center">
    <div id="flashContent">
         <h1>You need at least Flash Player 10.0 to view this page.</h1>
                <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
    </div>
  <script type="text/javascript">
   function createSWF(){
    var now=new Date();
    now = Date.UTC(now.getYear(),now.getMonth(),now.getDate(),now.getHours(),now.getMinutes(),now.getSeconds());
    var swfURL = "swf/main.swf?date=" + now;
    var flashvars = {};
    var params = {bgcolor:"#FFFFFF"};
    //Need to set allowfullscreen to "true"
    params.allowfullscreen = "true";
    //By changing scale to "exactFit" will make the swf
    //fill up all the spaces in the browser window
    params.scale = "exactFit";

    var attributes = {};
    attributes.name = "flashContent";
    swfobject.embedSWF(swfURL, "flashContent", "100%", "100%", "10.0.2", null, flashvars, params, attributes);   
   }
   createSWF();
  </script>    
     </td></tr></table>  
</body>
</html>

* Click here for the demo.
(Click on any part of the flash file to show the full screen popup.)
^ Click here for the source files of the demo.