How to Fullscreen Flash File in Browser

Since the Flash Player 9,0,28,0 update, flash applets can go to true full-screen. There are no fancy javascript hacks needed either. Users can toggle between normal size and fullscreen with a simple click, which can toggle Stage["displayState"] from "normal" to "fullScreen". The param allow FullScreen must be set to true in the applet html.

{code type=codetype}
<param name="allowFullScreen" value="true" />
{/code}

The first thing to do is create a button and add the following code to it:

{code type=codetype}

1. on(press){


2.   toggleFullScreen();


3. }

{/code}

The code for the function toggleFullScreen and a resize listener are placed on the main stage.

{code type=codetype}

1. //Don't scale the movie when the stage size changes


2. Stage.scaleMode="noScale";


3. //Align the stage to the top left


4. Stage.align = "TL";


5. //Function to toggle between fullscreen and normal size


6. //the toggle fullscreen button calls this function when pressed


7. function toggleFullScreen(){


8.   //if normal size, go to fullscreen, else go to normal size


9.   if(Stage["displayState"]=="normal"){


10.     Stage["displayState"]="fullScreen";


11.   }else{


12.     Stage["displayState"]="normal";


13.   }


14. }


15. //Create a listener for each time the Stage is resized


16. var resizeListener:Object = new Object();


17. //Called each time the stage is resized


18. resizeListener.onResize = function () {


19.   //Move the button to the center of the screen


20.   toggleFullScreenButton._x=Stage.width/2;


21.   toggleFullScreenButton._y=Stage.height/2;


22. }


23. //Add the listener to Stage


24. Stage.addListener(resizeListener);

{/code}

Example XHTML used for this applet:

{code type=codetype}
<object data="http://www.tutorialspalace.com/wp-content/uploads/tuts-flash/flash-fullscreen/flash-fullscreen.swf" type="application/x-shockwave-flash" width="400" height="200" >
<param name="movie" value="http://www.tutorialspalace.com/wp-content/uploads/tuts-flash/flash-fullscreen/flash-fullscreen.swf" />
<param name="allowFullScreen" value="true" />
</object>
{/code}

The balls were added in to show that the stage extends to the borders of the screen, even when resized.

View Demo