johncurriewebdesign.com

1. How can I create a SWF that will encompass 100% of the browser window?

The following technique is also known as Full Browser Flash:

1. Set both the width and height of your SWF to 100% in your SWFObject definition
2. Include CSS to get rid of any default margins/padding and set the height of the html element, the body element and the entire chain of block level HTML elements that your SWF will be nested in to 100%, because Firefox (or: any Gecko based browser) in standards compliant mode (or: using a valid DOCTYPE) interprets percentages in a very strict way (to be precise: the percentage of the height of its parent container, which has to be set explicitly):

         
           html, body, #containerA, #containerB { height:100%; }
           body { margin:0; padding:0; overflow:hidden; }
   

3. Manage the scaling and alignment of your SWF and the positioning of your SWF's elements, within your ActionScript code, e.g.:

         stage.scaleMode = StageScaleMode.NO_SCALE;
         stage.align = StageAlign.TOP_LEFT;
   
         stage.addEventListener(Event.RESIZE, resizeHandler);
   
         function resizeHandler(event:Event):void {
           // center stuff
         }
   

   NOTE: For positioning elements always define a resize handler, because a user can resize the browser window and in Internet Explorer (using the dynamic publishing method) the stage size is only available on first load. When reloading or revisiting a page it will initially be 0, causing the Flash player to keep on triggering the stage.resize event until it receives its current value

Sample Files

• Resize Demo
• Static SWFObject Demo
• Dynamic SWFObject Demo
• swfobject.js
• expressInstall.swf

Comments (0)