Full Browser/Full Screen Flash

The code for full screen/full browser is really simple. In fact, the only code that is needed is to make sure that the objects within the SWF itself does not scale – and a line of code to align it to the Top Left of the browser.

Stage.scaleMode = “noScale”;
Stage.align = “TL”;

The rest depends on your publish settings(Ctrl + Shift + F12). What you need to do is to set the width and height to 100 Percent. Remember to change the dimensions to percentage.

I’ve attached a file, which I don’t remember where I got from. =x

The code features a onResize Handler, which is important for full screen flash as well. This is because you need this listener to check if the user resized the browser, then change the positions of the elements in the SWF accordingly.

The flash file contains the HTML, the SWF, and the FLA file for this. In the center, is a text field containing the dimensions of the Flash. Open the index.html and try resizing the browser, and you will see that the text field will always be in the center. This is done by adding lines of code to set the _x and _y of the text field within the onResize handler.

this.onResize = function() {
//– Called when browser is resized.
this.txtDimentions._x = (Stage.width/2)-(this.txtDimentions._width/2);
this.txtDimentions._y = (Stage.height/2)-(this.txtDimentions._height/2);
this.txtDimentions.text = Stage.width+”x”+Stage.height;
};

I hope you guys enjoyed this little tutorial. A lot of people have asked me how I did QwertyDesign, and well, here is the base of what started QD.net.

Project Files: FullBrowserFlash

12 Responses to “Full Browser/Full Screen Flash”

  1. Janko

    i tried to make your Full Browser/Full Screen Flash, but it doesn’t seem to work well when i change the Dynamic text for a movieclip instance… In works on load but doesnt work when i resize it in real time. It centered at the place where it is first loaded, doesnt change position…
    I got a movie clip (instance name “glavno”) and i got one frame with this script:
    this.onResize = function() {
    //– Called when browser is resized.
    this.glavno._x = (Stage.width/2)-(this.glavno._width/2);
    this.glavno._y = (Stage.height/2)-(this.glavno._height/2);
    this.glavno = Stage.width+”x”+Stage.height;
    };
    Stage.scaleMode = “noScale”;
    Stage.align = “TL”;
    Stage.showMenu = false;
    Stage.addListener(this);
    this.onResize();

    Help is much obliged,
    thank you

  2. macleane

    i changed here:

    old:
    Stage.scaleMode = “noScale”;

    new:
    Stage.scaleMode = “exactFit”;

    now it’s fullscreen in browser!

  3. tai chian hui

    still got problem,can you email this to me…

  4. Arindam Mojumder

    “press Esc to exit full screen mode”

    when a browser will become full screen from flash, then this message will appear. I know it. But don’t know is there any option to modify this line with my custom message, or can keep this message in hide mode or not?

    Please Reply.

  5. my2009

    I’m doing a flash same as Janko did 2 years ago. I made my movie clip instance name “mc1”, and copied your code as:

    this.onResize = function() {
    //– Called when browser is resized.
    this.mc1._x = (Stage.width/2)-(this.mc1._width/2);
    this.mc1._y = (Stage.height/2)-(this.mc1._height/2);
    this.mc1 = Stage.width+”x”+Stage.height;
    };
    Stage.scaleMode = “exactFit”;
    Stage.align = “TL”;
    Stage.showMenu = false;
    Stage.addListener(this);
    this.onResize();

    but it doesn’t work. the flash reminds me “syntax errors” when i go test my movie. I tried what Janko did, which was changing the Stage.scaleMode = “noScale” to Stage.scaleMode = “exactFit” still didn’t work.
    Could you please give me some suggestions about that?

    Thank you so much.

  6. DarkSuiyoken

    I will need to see how you set up your flash file to be able to know what went wrong. Are you able to upload it somewhere?

Leave a Reply

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