Flash Tutorial:

How to add Flash SWF as background of a HTML page?

This tutorial will guide you how to add a Flash SWF file as background of a HTML page.

To embed Flash SWF as background of a web page, there are basically two steps:

Make the Flash movie transparent.

Use div and properties z-index, position:absolute and position:relative to make the Flash movie displaying under other contents.

Step 1: Make the Flash movie transparent.

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

Step 2: Use div and properties z-index, position:absolute and position:relative to make the Flash movie displaying under other contents.

To make the Flash movie as background, you need to use div layers. A div layer is like a window inside a window, which lets you define an area inside your HTML page.

<div style="width:480px;height:125px;position:relative;">
<div style="position:absolute; z-index:1;">
<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 style="position:relative; z-index:2;">
These are the HTML content.
</div>
</div>

The z-index is the key property. The smaller the value, the div layer will be lower.

Below is an example:

HTML content HTML content HTML content HTML content HTML content HTML content HTML content HTML content HTML content HTML content HTML content HTML content HTML content HTML content HTML content HTML content

Home | Download | Order Now | Contact us | Links | What's New | Company | Privacy policy | Site Map
Copyrightę Aleosoft.com All Rights Reserved.