How to overlay a transparent Flash SWF movie on a background image?

You can overlay a transparent Flash SWF movie on an image with HTML code, which will make the image just looking like the background of the Flash movie, but without modifying the Flash file.

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 overlay the Flash movie on the image file, there are two things to be done:

1. Make the Flash movie transparent.
2. Add HTML code which adds image to the bottom of the Flash movie.

To make the Flash movie background transparent, you need to add the WMODE parameters to the HTML code.

Add the following parameter to the OBJECT tag:

<param name="wmode" value="transparent">

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 add an image to the bottom of the Flash movie, you need to use a div layer. A div layer is like a window inside a window, which lets you define an area inside your HTML page.

<div style="width:600px;height:200px;background:url(background.jpg');">

<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>

The style width:600px;height:200px;background:url(background.jpg'); defines the size and background image of the div. Please note, the size need to be same as that of the Flash movie.

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