How to make a Flash SWF movie with transparent background?

After you have included the Flash SWF file to your HTML page, you can open the HTML page with your HTML editor and edit the HTML code.

Look for the code that embeds the Flash Movie. It should look similar to this:

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

To make the background transparent, you need to add the WMODE parameters to the HTML code.
1. Add the following parameter to the OBJECT tag:
<param name="wmode" value="transparent">
2. Add the following parameter to the EMBED tag:
wmode="transparent"

After edit, the HTML code should look similar to below. The new changes are shown in red.

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

To make the Flash movie floating on other elements of the HTML page, you need to use the div layers. A div layer is like a window inside a window, which lets you define an area inside your HTML page, and you can set the layer on top of the rest of your HTML page with a property "z-index".

<div style="position:relative;">
<div style="position:absolute; top:0px; left:20px; z-index:1; padding:0px;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="480" height="125">
<param name="movie" value="flashmovie.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent">
<embed src="flashmovie.swf" quality="high" type="application/x-shockwave-flash" width="480" height="125" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
</div>

The style position:relative; of the first <div style="position:relative;"> layer keeps this layer in the current position.

The style position:absolute; top:20px; left:20px; defines the position of the second layer is 0px to the top, 20px to the left of its container, the first div. The z-index:1 defines the layer will be on top of the rest of your HTML page.


Reference : http://www.aleosoft.com/flashtutorial_transparent.html