• Introduction
• Preparing the HTML page to make the Flash movie transparent
• Examples

The background of a Flash movie can be set to transparent. This allows the background color or image of the HTML page that contains the Flash movie to show through and allows the layering of Flash content with DHTML content.

The following browsers currently support windowless mode:

Windows and Mac OS X

Internet Explorer 3 or higher (Windows)
Internet Explorer 5.1* and 5.2* (Macintosh)
Netscape 7.0*
Mozilla 1.0 or higher*
AOL*
CompuServe*

* Macromedia Flash Player version 6,0,65,0 (Windows) or 6,0,67,0 (Macintosh) or higher required for this feature.

Note: Mac Classic is not supported for this feature. Transparent backgrounds are also not possible in a Flash standalone projector.

Note: If windowless mode is used, performance can be affected to some degree. If fastest performance is a top priority, you may consider other design options.

You can edit the the html code for the swf file and add a parameter called "wmode" and set it's value to "transparent" then swf flash background becomes transparent and you can see the html content through the flash file.

By default html code of a flash file looks like this:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=7,0,19,0" width="100" height="100">
<param name="movie" value="animation.swf" />
<param name="quality" value="high" />
<embed src="animation.swf" width="100" height="100" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/
x-shockwave-flash"></embed>
</object>

Here is how it should look with wmode=transparent:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=7,0,19,0" width="100" height="100">
<param name="movie" value="animation.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="animation.swf" width="100" height="100" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/
x-shockwave-flash" wmode="transparent"></embed>
</object>

note: The wmode is written in 2 locations inside the html code as you can see in html code above, first location is read by Internet Explorer type browsers and second locations is read by Mozilla type browsers.

With transparency

Without transparency