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.
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 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.
Below is an example of Flash banner with transparent background.
The text and image are not part of the Flash movie.
The
text and image are not part of the Flash movie.
The Flash banner is made of Aleo
Flash Intro Banner Maker.
