Publishing SWF tips

Sharing is caring!

 1.Stretch SWF 100% of the browser window or full flash browser

    a) Set both the width and height of your SWF to 100% in your SWFObject definition

 b) 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):

   c) 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.


2.Avoid extra whitespace is created underneath SWF?

When using dynamic publishing and a strict HTML DOCTYPE Firefox, Safari and Opera may create a few pixels whitespace underneath your Flash movie.

To avoid this make sure that your object element is set as a block level element, which can be achieved with the following CSS style rule:

<style type=”text/css” media=”screen”>

    object { display:block; }



3.ways to make a transparent background for your flash movie.

Using Flash editor to produce your HTML code

•   File menu -> Publish Settings -> HTML Tab

•   Look for WMODE setting and select transparent for it. Then publish to produce you HTML code.

Using Dreamweaver to insert your flash movie

•   Select the flash movie, click the parameter button in the property panel.

•   in the popup, add a parameter “WMODE” and set its value to “transparent”.

Using HTML code:

 add the following to the object tag:

add the following parameter to the EMBED tag:


4. Moving SWF to the centre of the page (Vertically & Horizontally)

a)solution 1

<style type=”text/css”>

#wrapper {

  width: 728px; height: 90px;

  position: absolute;

  left: 50%; top: 50%;

  margin: -45px 0 0 -364px;



b)solution 2

<table width=”100%” height=”100%” border=”0″ align=”center”>


    <td><div align=”center”>

        <object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”,0,29,0″ width=”250″ height=”150″>

          <param name=”movie” value=”yourmovie.swf”>

          <param name=”quality” value=”high”>

          <embed src=”yourmovie.swf” quality=”high” pluginspage=”” type=”application/x-shockwave-flash” width=”250″ height=”150″></embed></object>



</table>  –>

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.