| Register
Sunday, May 11, 2008   

Mastering Full Browser Flash (Part 3)

Created By  Benjamin Mace, at  4/18/2005 - 94 comments.

Click to view this author's website.

As I discussed in my introduction article, Full Browser Flash (FBF) has recently become a lightning trend in Flash based site design. Its many benefits include seamless background and content integration as well as an unrestricted movie size, as with hard coded stage sizes. In Part 2 we discussed how to implement this technique. Now that you have you SWF encompassing 100% of the browser window and have eliminated scaling within the movie, let's talk about placing content in your new real estate.

There are many different ways we can utilize the given browser size. We can center content, create content that is a set width, but a dynamic height or visa versa and we can scale content to fit a percentage of the given window. The combinations and layout are endless so let's focus on how to do a few simple things that you can build on later.

Before we decide on a layout we need to figure out how it will react to the stage when the browser window is launched and when it's resized by the user. The way this works is by using a listener on the Stage object that will fire a function when the browser gets resized. Any time this happens, the built in Stage event will fire a given function once it has been defined.

If you don't know how listeners work or want to learn more about them, there are lots of tutorials on the web regarding them (Ultrashock for example has several good ones written by Robert Penner). It's a bit out of scope to explain them in-depth here. For right now though, all you need to know is that we will be listening to the Stage's onResize event handler. Our code will look something like this:

With that out of the way, let's decide on how we want to react to the event. Let's start with the most popular method employed right now which would be centering. There is always a different way to skin a cat so this method is by no means the be-all end-all. The core concept here is to create a movieclip that will contain your content. That clip will then be centered on the stage, thus centering all your content. This is much easier to do than centering hundreds of little parts based on a dynamic stage size.

This technique, as well as other simple layout tricks just uses a small bit of math and coordination of your content's registration point on the stage. To find the middle of the stage we'll just grab the new stage width and height and get half of that dimension.

After you get the coordinates for your clip you need to reposition the clip to that point. How you center your clip depends on where the registration point for you content clip is. It could be centered or it could be in the top left for example. Let's look at the difference between the two:

When the registration point is at the center of the clip, we are referring to when your art is centered on the Movieclips symbol's stage (Fig.1). When it's at the top left, we are referring to the art being placed at its top left corner at 0,0 (Fig.2).

Centering your content depends on the clips layout. If your registration point is centered you'll just use the results of the math you did earlier to place the clip exactly in the middle.

On the other hand, if it's not center as in Fig.2 you'll need to get the width of the clip and subtract half of it to offset the clip and have it centered on the stage. (Fig.3)

With the above combined listener code and your new math you can do just about anything you want. You're keys to manipulating the art are the Stage.width and Stage.height properties. After you get these you can do anything you would like. Setting clips position and scale are all relative to these two variables.

For example if we want to resize our content to 75% of the stage width all we need to do would be to rescale it with the width:

Or if we want to place the clip's _y position to 10% of the stage height we'd say:

And last up setting something to the right side of the window (using the example of the registration point being the same as in Fig.2):

There is an unlimited list of ways you can use these variables. I hope by showing you how to set up your HTML, Flash stage and this listener you can discover new and innovative ways to employ this technique. Repositioning clips, resizing components and rearranging content are just a few examples.


Need Professional Help For Your ActionScript Project?
ActionScript.com Consulting Services provide top quality professional ActionScript consulting to businesses around the globe. If you have a professional project in need to world-class talent, tell us about your project by requesting a quote today.

Reader Comments

  1. somaboy  Replied:
    ( 4/27/2005 At 1:40 PM)

    My appoach to this is to use a custom class, "StageManager" which receives events from Stage and positions all elements accordingly.

  2. Immortal_Fire  Replied:
    ( 4/28/2005 At 9:16 AM)

    how can i show scroll bars in the flash movie if the screen size is smaller than the movie clip (myClip)

  3. Benjamin Mace  Replied:
    ( 4/29/2005 At 12:44 AM)

    Great idea. The focus of these articles was a super simple way to convey how this can be done. Dropping it into a class and AS2.0 etc are all options, but this can be applied anywhere and it the basis of what is happening in a nutshell.

  4. ClauÐio  Replied:
    ( 5/1/2005 At 2:43 AM)

    pretty nice explantion and utility of the code.. just thanks.

  5. Keith Wilcox  Replied:
    ( 5/1/2005 At 2:09 PM)

    When using this method, how do I make it so that the flash player and projector do not try to center the cilp when their window is resized? The stage resizes correctly, but the flash player/projector attempts to center the cilp which leads to an incorrect display.

  6. Adam Schroeder  Replied:
    ( 5/2/2005 At 9:02 PM)

    Any information about emulating other features of a standard HTML web site.
    Back Button (http://www.xodus31.com/index.php?categoryid=11)
    Bookmarks (maybe using a variable passed in the URL )
    Search Engine Optimization (getting the text listed)

  7. david r  Replied:
    ( 5/6/2005 At 4:10 AM)

    In your flashmovie, do:
    Stage.scaleMode = "noScale" // prevents scaling. leave this out if you DO want it to be scaled.
    Stage.align = "TL" // aligns the stage to Top Left, you can change it to "center" if you want your movie to be centered

  8. Phil Piper  Replied:
    ( 5/12/2005 At 12:03 PM)

    Instead of dealing with the two separate cases of a clip's registration point being at the centre or the left-hand side, you could use the getBounds() function to handle any clip, regardless of where its centre point is located.
    The centering code for this would be:
    var stageXCenter = Stage.width * .5;
    var stageYCenter = Stage.height * .5;
    // Offset the center point with half of
    // of the clip width and height, plus
    // the minimum internal x and y bounds
    var b=myClip.getBounds();
    stageXCenter = stageXCenter - (b.xMin + myClip._width * .5);
    stageYCenter = stageYCenter - (b.yMin + myClip._height * .5);
    // place the clip with the offset
    myClip._x = stageXCenter;
    myClip._y = stageYCenter;

  9. Slade  Replied:
    ( 5/14/2005 At 4:39 AM)

    Thanks very informational will be saving for future referance.

  10. Rob Muir III  Replied:
    ( 5/16/2005 At 2:08 AM)

    Is it possible to have a background image fixed to the bottom right of the fbf without scaling? Any help would be much appreciated. thanks.
    Rob
    rob@rmuir3.com

  11. Keith Wilcox  Replied:
    ( 5/16/2005 At 3:55 AM)

    Thanks for the help with aligning the Stage. The information was here in the docs the whole time, but I missed it for some reason. Thanks again.

  12. Henrik  Replied:
    ( 5/18/2005 At 1:33 PM)

    Okay, so i really cant seem to get this going :(
    could some put up an example .fla file please, i will probably understand it a bit more, especially where to place the AS
    the stage is centered on screen, but i cant seem to get my myClip to move to the center
    thx, the help is much appreciated

  13. Cai  Replied:
    ( 5/19/2005 At 2:18 PM)

    Hi,
    With regards part 2, I followed the instructions and everything worked as I expected until I got to adding the code:
    Stage.scaleMode = "noScale";
    Whereby my movie stopped scaling, but also stopped filling the browser window. IE it remained at it's published stage size within the browser window.
    It should fill the browser window shouldn't it?
    Thanks

  14. Ludwig Geerman  Replied:
    ( 5/19/2005 At 4:31 PM)

    It's great how much I'm learning from the pro's. Getting to the point: I use mozilla firefox and my firefox browser is not functioning like it should have displaying only part of my movie. PLease let me know if you guys get a problem solver for this. Thanx from Holland

  15. albert  Replied:
    ( 5/22/2005 At 12:30 PM)

    hi.
    Great Information! Thanx Much. -- just one question, my flash movie always starts from the left side of the browser window; it move to the center only when the browser window is being resized :( I do hope someone can help me.
    Thanx again.

  16. TB  Replied:
    ( 6/2/2005 At 6:31 PM)

    I am trying to resize my flash film on start, meaning that when the page is called first it resizes using the function
    stageListener.onResize();
    Somehow though this doesnt work! Any suggestions anybody? When does the listener start listening? on the first resize or earlier? thanks for the help!
    TB

  17. dorota  Replied:
    ( 6/9/2005 At 11:27 PM)

    Following instructions i have a problem: object is not centered until the window resized. It causes unpleasant "jump" beside bad positioning at the start.

  18. Drazic  Replied:
    ( 6/10/2005 At 12:00 PM)

    Hi there. First of all, GREAT topic.
    This has already been asked, but does anyone know how to get scroll bars showing up, in the HTML movie, if the screen size is smaller than the Movie Clip?
    Any help would be greatly appreciated.
    Thanks,
    Drazic

  19. MC Peko  Replied:
    ( 6/29/2005 At 12:25 AM)

    I need the scrollbars too. I don't think there is a known solution, except maybe Flash scrollbars. But is it possible to scroll "_root"?

  20. BoulderFlash  Replied:
    ( 6/29/2005 At 8:22 PM)

    About FBF technique, you can even expand the swf height beyond the 100%. If you want to use the browser the vertical scrollbar (but you must use JavaScript to change the player height)
    Also, I was recently working in a Panel component, using LayoutManager, FlowLayout, BorderLayout and GridLayout classes (as that in Java). The layout code isn't difficult (I don't think it will be difficult to implement BoxLayout or even GridBoxLayout), but I got stuck with some problems: the necesity of preferredSize, minimumSize... methods for components added in the panel, the way clips are attached and its initialization (that not allows a preview in author time)... If the LayoutManager manage the preferred sizes of its components, so perphaps it could be done
    Another related (but unused) thing that I posted time ago in www.FlashLA.com is the configuration of flash components thru html: the component user didn't need flash to use it. You configure the width and height in the object/embed tags, and the other properties in the FlashVars paramater (you must convert the string values to the corresponding property type). The swf version of the component must preload the component itself (if there's a regular component counterpart) and handle the size using a Stage listener.
    If you want, I could write a tutorial of the former ;)

  21. dev  Replied:
    ( 6/30/2005 At 1:53 AM)

    Can someone please post a sample .FLA file? I can't get the Stage's onResize to work correctly. So far, here's the code I have:
    Stage.scaleMode = "noScale";
    stageListener = new Object();
    stageListener.onResize = function() {
    expandBG();
    expandLogo();
    };
    Stage.addListener(stageListener);
    expandBG = function () {
    BG._heigth = Stage.heigth;BG._width = Stage.width};
    expandLogo = function () {
    LOGO._y = Stage.height *.5;
    LOGO._x = Stage.width *.5};

  22. Kasper Nedergaard Sorensen  Replied:
    ( 7/1/2005 At 2:00 AM)

    Hey! I also have this problem where Firefox only shows part of the full screen movie. It works fine when I download pre-made examples, but I can't get it working when following this or any other tutorial. It must be some setting that I've left out, but what could it be?

  23. jordan robinson  Replied:
    ( 7/10/2005 At 4:40 AM)

    Does anyone know how to get pixel fonts or the clip to jump to a whole pixel? They blur if this is not achieved. Hit me up & thanks in advance.

  24. jordan robinson  Replied:
    ( 7/10/2005 At 5:01 AM)

    If using pixel fonts use
    myClip._x = Math.floor(stageXCenter);
    myClip._y = Math.floor(stageYCenter);
    to keep the fonts crisp!

  25. Winton DeShong  Replied:
    ( 7/14/2005 At 5:27 AM)

    This is in response to dorota, and albert. I had the same problem with firefox only centering my content upon resizing the window. Then I realized in reality you aren't initially centering the browser window so firefox isn't far off. You just need to initially determine and set the positioning and onResize. So, I just created a function and called it initially and onResize. The code is below. This will fix your problem ;).
    Stage.scaleMode = "noScale";
    function center_mc(movobj:Object){
    stageXCenter = Stage.width * .5;
    stageYCenter = Stage.height * .5;
    //upper left oriented reg points
    stageXCenter -= (movobj._width * .5);
    stageYCenter -= (movobj._height * .5);
    movobj._x = stageXCenter;
    movobj._y = stageYCenter;
    };
    center_mc(myClip_mc); //firefox fix
    //receive screen events
    stageListener = new Object();
    stageListener.onResize = function(){ center_mc(myClip_mc); };
    Stage.addListener(stageListener);
    Best Regards,
    Winton G. DeShong

  26. mieras  Replied:
    ( 7/26/2005 At 6:33 PM)

    for the firefox problem..
    just put this in your html file:
    body, html, object {
    height: 100%;
    }

  27. dev  Replied:
    ( 7/27/2005 At 2:50 AM)

    winton..i replaced my code and plugged yours in but still no luck..can you send me an .fla of an FBF

  28. Mark  Replied:
    ( 7/27/2005 At 5:49 PM)

    I'm a little confused, is centering the content like this neccessary? If you already have the flash player dimensions set to 100% with noScale dosen't the content stay centered automatically?

  29. Chris Hicks  Replied:
    ( 7/29/2005 At 5:55 PM)

    I used this code just to play around with, and created a simple movie clip. My problem is that it only appears in the center of the stage when i have the broswer resized to the defaul stage size for flash (550x400). If i resize the browser to a larger size the clip basically stays in the bottom right corner of the broswer. Any ideas?

  30. Winton DeShong  Replied:
    ( 7/30/2005 At 7:36 PM)

    dev, one thing I did find that doesn't work is having masked content that goes past the visual limits of the portion that you want to center. Not sure if that will help. I'm e-mailing you a zip containing the .fla that I did testing in. Hopefully this helps.

  31. Daniel  Replied:
    ( 8/5/2005 At 11:28 AM)

    Hi,
    This might be a NEWB question, but I could sure use some help on this. What size should I make my flash document to begin with?
    I've just been using the default as of now.
    What's a good flash document size when creating full browser flash sites?
    All help is immensly appreciated.
    Thanks in advance!
    -Daniel

  32. Stephen  Replied:
    ( 8/9/2005 At 10:08 PM)

    "Following instructions i have a problem: object is not centered until the window resized. It causes unpleasant “jump” beside bad positioning at the start."
    Since no one has answer this question. What you need to do is define the starting location like such:
    var stageXCenter = Stage.width * .5;
    var stageYCenter = Stage.height * .5;
    my_Clip._x = stageXCenter;
    my_Clip._y = stageYCenter;
    stageListener = new Object();
    stageListener.onResize = function ()
    {
    var stageXCenter = Stage.width * .5;
    var stageYCenter = Stage.height * .5;
    my_Clip._x = stageXCenter;
    my_Clip._y = stageYCenter;
    }
    Stage.addListener(stageListener);
    Simple fix as the code above doesn't kick in until the resize.

  33. Harold Covey  Replied:
    ( 8/9/2005 At 10:54 PM)

    "I used this code just to play around with, and created a simple movie clip. My problem is that it only appears in the center of the stage when i have the broswer resized to the defaul stage size for flash (550x400). If i resize the browser to a larger size the clip basically stays in the bottom right corner of the broswer. Any ideas?"
    I was fiddling around with this earlier today and came across the same issue. Finally I realized that, while the values for the Stage dimensions change, the _x and _y values for location of myClip are still measured from the origin (0,0) of the original stage dimensions. This becomes a problem if your browser window is larger than the actual dimensions of the SWF. In my case I was working with a 1024x768 stage size in a full-screen browser window on 1280x1024 resolution, which produces the "bottom right" error. Quick fix was to build in an additional subtraction of excess browser space. You can see it here:(http://www.kpcqa.com/FBF/shell.html) -- or download the source files here:(http://www.kpcqa.com/FBF/fbf.zip)
    *NOTE: This example uses top-left justification of Movie Clips.

  34. Stephen  Replied:
    ( 8/10/2005 At 12:25 AM)

    I don't really understand what this solves because what if the user has a resolution such as 1600x1200, then the problem still remains.
    How do you tell an object to always go to the edge of the browser window?

  35. Harold Covey  Replied:
    ( 8/10/2005 At 2:09 AM)

    Here's a version where the content actually reacts to Stage size:
    http://www.kpcqa.com/FBF/v2/shell.html
    http://www.kpcqa.com/FBF/v2/fbf_v2.zip

  36. Harold Covey  Replied:
    ( 8/10/2005 At 6:04 PM)

    Stephen, the way the code is set up it won't matter what the viewer's resolution is. Once you define the initial Stage size, the Stage.width and .height methods will dynamically adjust to browser window at any size. Download the source files to see what I'm talking about.
    Making your content left justified is easy enough. If the browser window is larger than initial Stage size then _x offset would be -((Stage.width-initStageWidth)/2). Basically determining the excess margin, divide by half since the overall excess is divided left/right, then push myClip by that amount to the left of the origin (0,0).
    // Assuming initial Stage.width = 1024
    // Screen resolution = 1600x1200
    // Full-screen browser window
    var stageXLeft = -((Stage.width-initStageWidth)/2);
    // Equates to -((1600-1024)/2)
    // = -288
    myClip._x = stageXLeft;
    // Should be flush left with the browser window
    Of course none of this is a problem if your Stage is huge ... like 2560x2048. I'm looking for a 1024x768 "active" area which is why I went to all the trouble.

  37. Stephen  Replied:
    ( 8/10/2005 At 9:19 PM)

    Awesome man. Thanks for spelling it out for me. I realized later that it did solve the issue once I played around with it a bit more. I was handling it wrong until I took the time to study your source file.
    Thanks for showing how to align thing's to the side of the screen. I'm playing around with that a bit more.

  38. sam Wilson  Replied:
    ( 8/10/2005 At 11:04 PM)

    I am not sure if this has been mentioned, but the firefox bug (where the swf doesn't scale the entire page when viewed in firefox) when you insert the following css into your page
    body,html {
    margin:0px;
    padding:0px;
    height:100%;
    }
    You can read more about it at bit-101's site http://www.bit-101.com/blog/archives/000050.html

  39. eljay  Replied:
    ( 8/17/2005 At 8:06 AM)

    Does this work in any screen resolution? coz i have a small MC and i'm afraid if it would be a bit choppy if it's viewed in a higher reso..

  40. Andrew Smith  Replied:
    ( 8/26/2005 At 5:23 PM)

    Thanks for the tutorial!!
    Just one quick questions my tiled background works great but the thing is it covers up the rest of my movie? Is there some way to fix this. Is it something with this function...
    this.getNextHighestDepth());
    thanks for the help.
    _andrew

  41. cameron  Replied:
    ( 8/27/2005 At 1:21 AM)

    I was having the same firefox problem (only the first 100px or so of the swf being rendered) as the others above mentioned, but the
    body,html{
    height:100%;
    }
    just wasn't working for me. I tested it in firefox on both mac and pc and got no results.
    My solution was to use an absolute height for the object tag that contains the swf (you have to change it in two places). I know this is not ideal for some situations because it adds space to the bottom of the document, but you can always remove the scrollbars... Hope this helps anyone else in dire striaghts.

  42. Ogla Sungutay  Replied:
    ( 8/29/2005 At 6:53 PM)

    Not working in Linux Firefox 1.0.1
    My starting point was mustardlab's tute:
    http://www.mustardlab.com/developer/flash/objectresize/
    The example in this page is not working either, and I managed to reproduced the same affect with my swf app. When size is changed the space is filled with a grey box.
    Tried dynamically giving size in pixels:
    document.getElementById(divid).style.height = newH+"px";
    var embed_tag = document.getElementsByName("mymovie");
    embed_tag[0].style.height=newH+"px";
    OR

    document.getElementsByName("mymovie");
    embed_tag[0].style.height=newH+"px";
    Go figure... The micro second I leave the cosy swf environment and enter the evil HTML/CSS world suddenly I am a small child lost in a jungle. Not a good feeling for someone writing SWFs in C.

  43. Harold Covey  Replied:
    ( 8/29/2005 At 7:56 PM)

    In your HTML page replace this:

    with THIS:

    then it will work in Mozilla Firefox. I'm using version 1.0.5

  44. zainab shaikh  Replied:
    ( 9/1/2005 At 10:19 AM)

    This tutorial is fine but u should add example file also which is helpful to view the output.

  45. Dave  Replied:
    ( 9/3/2005 At 12:52 PM)

    The site was working fine in all my browsers, (full screen). But now fails in Netscape and Mozilla, only the top say, 10% to 20% show of the movie. It's as if the rest of the move is not being displayed. It is fine in I.E. and Opera, seem in might have changed whin I upgraded to Flash player 7.
    Help ! and Thanks for the great tutorial.

  46. Cameron  Replied:
    ( 9/3/2005 At 11:39 PM)

    dave - read the comments above. a few people (including myself) have had the same trouble. there are a few solutions (one of which didnt work for me). one option is to set the height of the object tag manually to a greater value than your avg viewers screen, so if they go full size, they still see everything. the other option (that didn't work for me) is to insert some css concerning the body,object tag like so: body,object{ height:100% }
    if that one works for you, i would go with it, as my method is more of a quick and dirty fix and isn't ideal in most situations.

  47. Freelance Web Designer  Replied:
    ( 9/5/2005 At 2:25 AM)

    not sure if that works, but i failed two times :(

  48. Dave  Replied:
    ( 9/5/2005 At 9:46 AM)

    I was able to fix the partical display of swf by using the solution above by Sam Wilson on
    (08/11 at 03:04 AM). I believe the reason that it worked, then didn't work was because I changed the size of a background image, and stage size. It was 900 px in hieght(larger than the browser could diplay) , so the swift was being down sized, and it gave the browser "something to display" as Flash resize everything. So making the document size taller than the browser can display may be a fix also. I have not tested this thoery, maybe someone can.

  49. Steve  Replied:
    ( 9/15/2005 At 5:02 AM)

    I HAVE A FIREFOX FIX THAT I HAVE TESTED AND WORKS!
    First thing you need to prep is your flash file:
    set whatever clip you want as your backgound clip to span the browser. CENTER IT TO STAGE!!! this is a must for firefox!!! If you use code to dynamically position the clip to the center of the stage - Firefox will offset it a number of ways - depending on your math. Something even as simple as:
    var stageXCenter = Stage.width/2;
    var stageYCenter = Stage.height/2;
    WILL BREAK FIREFOX!
    Below is the only code you should need to strech a clip called "bkg" to fill the browser:
    /* do not use code to center clip, center to stage manually */
    bkg._width = Stage.width;
    bkg._height = Stage.height;
    stageListener = new Object();
    stageListener.onResize = function() {
    // resizes the bkg MovieClip to fit width and height of Stage
    bkg._width = Stage.width;
    bkg._height = Stage.height;
    };
    // Assign a listener for the Stage object
    Stage.addListener(stageListener);
    Then the only thing you need to do is make sure your html has the flash object height and width set to 100% and your body margins are set to 0. Oh, and don't forget the instead of any form of XHTML DOCTYPE at the very top of your page.
    That's it... for real - I have proof :)

  50. MATT  Replied:
    ( 9/18/2005 At 5:10 PM)

    Hello, really interesting talk.
    I've tried by myself to make this but i'm having a problem with the height of the stage.
    Can someone download my fla and tell me what's wrong in it? http://users.skynet.be/versechorusverse/test.fla
    Moreover, I d'like the background color to be chosen by the user (with a click on different color clips), I think I know how to achieve this, but the question is, how can i make a transition effect between the actual background color and the chosen one?
    Many many thanks, I hope my script can help some of you.
    Cheers

  51. Gorky  Replied:
    ( 9/29/2005 At 3:51 PM)

    Hey, guys.... Just FYI... i found realy cool site that using this script we are discusing. Plus elasticity, plus multilanguage. So cool, but i can not (even) imagine the scripts they are using. Can somebody figured it out???
    http://www.infinityartstudio.com/

  52. juggle  Replied:
    ( 9/30/2005 At 5:16 PM)

    yep these FBF windows are cool...
    http://www.nulldesign.de/
    this one seems to use all the elements of the above site but is more dynamic between each area & image, the fluiditity of is amazing
    *how can u do that!!?*

  53. peter b  Replied:
    ( 10/4/2005 At 5:35 AM)

    I have managed to get all of this working, but I have started another project whereby I have the one flash move which calls a bottom section (a city scape) which I would like to be able to scale but always stay bottom of screen, and also call a top section (the navigation) which I would like to always sit at the top, and not scale. Essentially what I need to be able to do is have the parent movie scale to 100% width and height, and then pull in the movies top and bottom to a target, but keep the top movie from scaling. any ideas?

  54. maliego  Replied:
    ( 10/4/2005 At 10:09 AM)

    I got the files and the movie working. thx so much for the tips!
    but what I want to do is something like the below site where the myClip moves into position slowly.
    http://www.sooff.com
    can anyone help me with that?

  55. craig  Replied:
    ( 10/13/2005 At 12:27 AM)

    Hey guys
    I am dynamically loading a background image and centering it on resize/load
    It all works fine but on firefox it positions its xy co-ords at the center of the screen then on resize it works, I have looked at the code above but there is nothing different to what I have
    have a look at this on firefox please and tell me wtf is going on
    http://www.setvariable.com/elastic/index_launch.html
    any ideas?

  56. Ryan  Replied:
    ( 11/18/2005 At 5:42 AM)

    When resizing my Full browser flash my pixel fonts get blurry. No matter what I've tried won't fix it. Researching this issue has brought me here with little sucess. Here's the code.
    Stage.align = "TL";
    Stage.scaleMode = "noScale";
    MainMovie._x = Stage.width/2;
    MainMovie._y = Stage.height/2;
    backgroundstretch._width = Stage.width;
    sizeListener = new Object();
    sizeListener.onResize = function() {
    // change movieclip properties when the window is resized.
    topstretch._width = Stage.width;
    MainMovie._y = Stage.height/2;
    MainMovie._x = Stage.width/2;
    backgroundstretch._width = Stage.width;
    };
    Stage.addListener(sizeListener);

  57. Harold Covey  Replied:
    ( 11/18/2005 At 7:53 PM)

    Pixel fonts need to be "zeroed-out" to retain their crispness. Use Math.floor method:
    // change movieclip properties when the window is resized.
    topstretch._width = Math.floor(Stage.width);
    MainMovie._y = Math.floor(Stage.height/2);
    MainMovie._x = Math.foor(Stage.width/2);
    backgroundstretch._width = Math.floor(Stage.width);
    };

  58. Vali  Replied:
    ( 11/22/2005 At 1:29 AM)

    Hey guys
    Only one that works in mozila was posted by:
    Gorky replied:
    (09/29 at 07:51 PM)
    http://www.infinityartstudio.com/
    The idea is to use javascript to resize the window:
    <script LANGUAGE="JavaScript">
    function size(){
    self.moveTo(0,0);
    self.resizeTo(screen.availWidth,screen.availHeight)
    }
    size();
    </script>
    That will fix the mozila bug.
    Tested on Win/Mac IE, Win/Mac mozila, Win Opera, Mac Safari.
    Problem is it doesn't work in mozila on linux... or on epiphany. The flash area is not 100%, so you will probably need some JavaScript to write the size in pixels there.
    Only down size is that it will resize your windows ... so if you were surfing something else in another tab, it will resize that also.

  59. martin kurzmann  Replied:
    ( 11/23/2005 At 9:02 AM)

    hi all,
    based on the knowledge of this discussion and after doing some research I managed to put together a fla that comes close to infinityartstudio.com.
    you may download it here: www.martink65.com/fullBrowserFlash/fullBrowserFlash.zip
    bye,
    martin

  60. Randy  Replied:
    ( 11/29/2005 At 3:43 AM)

    Just wonderinf if anyone knows the solution to having the stage objects ease in to their new positions as in the following site:
    http://www.sooff.com
    Thanks,
    Randy

  61. martin kurzmann  Replied:
    ( 11/29/2005 At 4:20 AM)

    hi randy,
    what do you mean? the sources I provided are tested and should work...the comments make it pretty easy to grasp the concept behind the desired effect.
    bye,
    martin

  62. Randy  Replied:
    ( 11/29/2005 At 5:52 AM)

    Hi, Martin. Thanks for your reply. I've downloaded your .flv and it is very useful. However what I'm trying to achieve is to have the stage objects move slowly into postion, and not bounce, as in: http://www.sooff.com/ Notice how the stage object glides? It's also done at this site: http://www.superfad.com/
    Thanks, Martin.
    Randy

  63. Vali  Replied:
    ( 11/29/2005 At 7:19 AM)

    Randy: really simple.
    You place your object off screen somewhere.
    You set a tagerX variable for the mc.
    And you make a onClipEvent with:
    if (Math.abs(mc.x - mc.targetX) > 2) {
    mc.x = mc.x - ((mc.x - mc.targetX) / 2);
    }
    that will start up really fast and slow down in a few frames to wherever you set the targetX to.

  64. martin kurzmann  Replied:
    ( 11/29/2005 At 7:32 AM)

    that's easy - have you already downloaded the tween-extension? http://laco.wz.cz/tween/
    check out the documentation, there are a lot of animation-types. change "easeOutElastic" from my example to "easeOutExpo" and you have the glide, adjust the seconds-to-complete, play around with the settings...I use this for all easing-stuff I need!
    bye,
    martin

  65. Randy  Replied:
    ( 11/29/2005 At 8:17 AM)

    Martin, that's it!! Thanks so much. I've been using the Custom Easing Tool, but only in the timeline. I didn't know how to do anything else with it with Action Script, but I'm learning and will explore some more. Thank you again. I've been looking for this solution for weeks now.
    -Randy

  66. martin kurzmann  Replied:
    ( 11/29/2005 At 9:57 AM)

    good to hear, randy. using this extension opens a whole new world of possibilities...
    martin

  67. Alastair  Replied:
    ( 12/2/2005 At 12:56 AM)

    Kind Folks,
    The next step, which for me is particularly crucial especially with database driven long lists of info, is figuring out how to get the actual BROWSER SCROLL BAR to detect the length of the movie.
    Example: http://www.defunker.com/
    Notice that when you resize the window, not only do the number of items in each column change (easy enough) but the scroll bar to the right shows that the movie is growing or shrinking. I don't know javascipt, is that how they are doing this? Andy bright ideas? It is almost as if the HTML container is growing and shrinking.
    -a

  68. Alastair  Replied:
    ( 12/2/2005 At 2:06 AM)

    my bad, I spoke too quickly and found a great example here: http://flashcodersny.org/?p=42
    If you download the zip and run the file you can see the browser window grows (including the browser scrollbar) with the growing Flash movie. This is EXCELLENT for Flash usability.
    -a

  69. martin kurzmann  Replied:
    ( 12/2/2005 At 3:58 AM)

    hi alastair,
    link is broken - please send me the zip-file - thanks!
    martin
    martink65 AT martink65 DOT com

  70. Mark  Replied:
    ( 12/2/2005 At 8:54 AM)

    Hey Alastair,
    After looking at the html on the defunker.com site, i saw that he used the js file called flash_resize.js and a div layer called "flashid".
    Well it all matches up with an example here:
    http://www.mustardlab.com/developer/flash/objectresize/
    You may want to check it out.
    peace.

  71. martin kurzmann  Replied:
    ( 12/2/2005 At 9:27 AM)

    alistair - link works now, got the files...
    bye, martin

  72. Mark  Replied:
    ( 12/2/2005 At 12:10 PM)

    Ok,
    I put something together based on the idea that Alastair had. This uses javascript calls from flash to resize a div layer. That's what makes the scrollbar resize. Also, the movie centers with ease when you resize your browser
    Check it out here:
    http://www.markgriffo.com/scrollTest/
    Download it here
    http://www.markgriffo.com/scrollTest/ScrollBarTest.zip
    peace.

  73. martin kurzmann  Replied:
    ( 12/2/2005 At 5:42 PM)

    very nice, I guess it's perfect now. easing, dynamic resizable *and* browserscrollable flashcontent - now that's really cool ;-)
    one minor thing: if you want to get rid of the inital scrollbar that shows in firefox, add an 'align=middle'-attribute to the object- and embed-tags. I don't know why but somehow it doesn't show then...for ie set 'scroll=auto' in the body-tag.
    bye,
    martin

  74. Alastair  Replied:
    ( 12/2/2005 At 7:50 PM)

    Mark, this is great. I will need to take a closer look at what you have done when I get out from under the crunch over here. I am just amazed that the flash movie can essentially grow beyond its designated size. Again, great work, I'll take a closer look in the next few days. Thanks.

  75. Raj  Replied:
    ( 12/5/2005 At 9:24 PM)

    I went through this post right from top to bottom and was happy with the outcome. Guys you have worked hard. Thanks Keep it up. It has helped me a lot.

  76. nabil  Replied:
    ( 12/14/2005 At 4:59 AM)

    http://www.subdisc.com/
    how was this done - the scroll bar on the right -
    i have tried the example above with javascript http://www.markgriffo.com/scrollTest/ but it did not work for me because i am trying to use a full adjustable gradient background - such as back_mc._yscale= Stage._height - when i resize the browser my background is loosing it s stage._height value
    thx in advance .

  77. MrDinky  Replied:
    ( 12/21/2005 At 1:52 PM)

    This tutorial has be very helpful in getting my full flash working
    now.. only one issue..
    yes its the firefox issue
    i change the doctype and it seems to show all flash area BUT it does show scroll bar so i change the doc type to HTML 4.01
    now, i used style="overflow:hidden" to get rid of the scroll bar but it will still scroll with a mouse wheel.
    I used the above style with margin and height 100% etc etc but I am still able to scroll about 10-20 pixels with my mouse wheel..
    thoughts?

  78. MrDinky  Replied:
    ( 12/21/2005 At 2:27 PM)

    O one more thing, I didnt change the Doctype but that didnt seem to matter. the style="overflow:hidden" and scroll="no"
    sovles that issue of FF scroll bar showing

  79. hari  Replied:
    ( 12/26/2005 At 10:13 AM)

    hi friends,
    Is it possible to execute other exe file from main.exe file.
    Problem is :
    There is 2 categories in my flash presentation. one is web remaining part is multimedia part.
    When i click web icon is it working properly. But when i click flash icon, i'm not able to open my other presentation file (xyz.exe)...

  80. nuno c  Replied:
    ( 1/4/2006 At 5:11 PM)

    HELP! the article is fantastic...but i´m lost. I Want to do something like this: http://www.easybit.it/flash2005/main.php?language=eng or like http://www.converse.com/index.asp?bhcp=1 I can´t do it :(, one bar always on top, another on bottom, and a movie always in the midle. Can anyone help? Post a FLA or code please. Thanks so much.

  81. Jon A  Replied:
    ( 1/19/2006 At 6:57 PM)

    Martin- I downloaded your example for the infinity site, and dang if that wasn't exactly what I needed! I do have a question though. I am using Flash 8, and when I publish to player 8, the solution fails. When I set publish to player 7, it works great again.
    I am the first to admit that most of the script is over my head, but wondered if you might know what the issue is? The swf plays fine in player 8, just can't publish to player 8.
    Thanks again for taking the time to put that FLA together!

  82. martin kurzmann  Replied:
    ( 1/19/2006 At 10:43 PM)

    hi jon,

    just rechecked the fla - publish settings: version = Flash Player 8, ActionScript version = ActionScript 2.0

    works perfectly...


    bye,
    martin

  83. steve hubbard  Replied:
    ( 1/21/2006 At 9:50 AM)

    Hi all,

    I've been working with this method for some time now with mixed results.
    I have a 2 part question for any that have the time.

    First:
    I am loading in content to an "index" swf. That index.swf resizes to match browser on load. The components of the content(gallery.swf) that are placed in the refrence "image_dest" inside of the index do not resize to match the browser until the window is manually resized.
    <http://www.nationalflashback.com/mray/>

    the as used is;
    //-----
    Stage.align = "LT";
    // prevent the Flash movie from resizing when the browser window changes size.
    Stage.scaleMode = "noScale";

    // create a listener object
    stageListener = new Object();
    // add a methods for it to do certain things when the Stage is resized by our user
    stageListener.onResize = function() {
    expandTop();
    expandBodyText();

    }

    expandTop = function() {
    // expand the top banner/header/masthead - whatever you want to call it - to be as wide as the stage
    // then move our nice little "contact us" button so it stays right-aligned with the page


    thumb_dest._x = Stage.width - menu._width -155;
    thumb_dest._y = 35;


    //image_dest._xscale = Stage.width* .02;

    image_dest._x = Stage.width/2;
    image_dest._y = Stage.height/2;

    caption_shell._x = Stage.width - caption_shell._width +15 ;
    caption_shell._y = Stage.height - caption_shell._height -50;


    }
    Stage.addListener(stageListener);

    ----//

    Second:
    I will only be vauge and hope someone knows what I am talking about.
    I have the main image loading .. yet it does not scale in proportion, nor can I set a min max for it's scale.

    www.sksantos.com is a great example of all the methods covered here. It's exactly what I would hope to achieve with a gallery as far as dynamic placement goes. If anyone has any clues / answers on this it'd be greatly appreciated.

  84. herz b  Replied:
    ( 6/23/2006 At 10:53 AM)

    Hi all,

    One question about combining scalable content and static content in FBF.

    How can I create an effect like http://www.hi-res.net/? They have non-scalable content (menu plus text) on top of full-browser, fully scalable video clip background.

  85. Benjamin Mace  Replied:
    ( 6/27/2006 At 8:58 PM)

    All you need to do is set the movie to scale false in the actionscript and then on browser resize set the scale of a clip containing the background image to the size of the stage/browser window.

  86. Adam Robezzoli  Replied:
    ( 7/11/2006 At 1:23 AM)

    I got everything to work great when I open the html page on my local machine, but for some reason the flash doesn't show up once it's on the server. Has anyone else run into this problem? Any suggestions would be greatly appreciated.

    You can view the page at http://www.mattmahermusic.com/temp.html

  87. Gary Hussey  Replied:
    ( 8/8/2006 At 2:43 PM)

    great tutorial, thanks fo the help...

  88. ale kate  Replied:
    ( 9/19/2006 At 11:41 PM)

    hello ppl i need to ask something cause im going mad!
    i decided to make my sites only in flash and i want them to be 100% with and 100%height so the user will not have scrollbars in any resolution he change.
    i make my images and then to flash at a resolution of 1280x1024
    or 1024x768 it doesnt matter (the difference is always 256 pixels)
    so...
    if i make the flash 1024x768 it works great in this resolution but if i change the resolution it scales so it loose the quality (pixels appear the circles look like egg ...)
    i have tried ALL the common solutions ,i think i need something bigger here (listenrs?action script??)
    Ive tried everything with javascript,css and nothing works ,i think that the trick must put in the flash code and not in the html code of the page (after in dreamweaver i use)
    something that will understand the resolution of the user and will choose the correct swf ,or will resize the original swf in a normal way.
    for example :
    for the 1280x1024 template i would like in this resolution to be 100% (W&H)
    but in 1024x768 to be 100%W and leave the normal size (1024)
    otherwise it gonna pull it in the top and its no good
    plzz any help i apreciate.

    soz for "maybe" bad english :(

  89. Somewhat Anonymous  Replied:
    ( 10/30/2006 At 8:46 PM)

    OK, being a relative Flash "n00b" I came across this article looking for a way to get flash to resize in my browser... but then I wondered if all I want my movie clip to do is react to a browser window resize (I am using w=100% and h=100%) but lock the aspect (preserve my 1:1 pixel ratio) so my movie doesn't get distorted, do I need to set up listeners? Won't setting my scale to "Show all" take care of this problem for me? I experimented and it seemed to work well in IE at least.
    Maybe I don't understand the problem you're explaining how to solve, this seemed to do what I needed.

  90. Jeff G  Replied:
    ( 12/12/2006 At 10:44 PM)

    Please fix the images as they are broken. Thanks!

  91. Cynthia  Replied:
    ( 1/21/2007 At 11:43 PM)

    Hi everyone,

    I'm trying to fill my browser window with my flash movie, but without resizing my nav buttons. My other element on stage is an FLV so I should be able to assign it's width & height, right?

    This is my code which does NOT work:

    Stage.scaleMode="noScale";
    var stageL=new Object();
    stageL.onResize = function(){
    this.video._width = Stage.width - this.navigation_exit._width
    this.video._height = Stage.height - this.navigation_left._height
    }

    Stage.addListener(stageL);

    What am I doing wrong??

    Thanks!

    C.

  92. Harold Covey  Replied:
    ( 7/26/2007 At 5:46 PM)

    If anyone is interested, this is the final result of the FBF experiments I started almost two years ago:
    http://www.busch.com/

    Thanks for the jump-off point, Benjamin!

  93. Tommaso Bufano  Replied:
    ( 8/17/2007 At