Wednesday, January 7, 2009

How to :True Full Screen Flash Action script 3.0

Special thanks to http://www.bezzmedia.com/swfspot/tutorials/intermediate/True_Fullscreen_Flash_Mode


- really helps me on doing my ever first you tube like website.



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 allowFullScreen must be set to true in the applet html.

<param name="allowFullScreen" value="true" />


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

  1. on(press){
  2. toggleFullScreen();
  3. }

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

  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);


Example XHTML used for this applet:

<object data="http://www.bezzmedia.com/swfspot/resources/34-fullscreen.swf"

type="application/x-shockwave-flash" width="400" height="200" >

<param name="movie" value="http://www.bezzmedia.com/swfspot/resources/34-fullscreen.swf" />

<param name="allowFullScreen" value="true" />

</object>


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



Download the source file below:





Download Source File

No comments:

Most Viewed