Subscribe

RSS Feed (xml)

Powered By

Skin Design:
Free Blogger Skins

Powered by Blogger

2012年1月26日 星期四

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

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

http://www.aleosoft.com/flashtutorial_flashbackground.html

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:

沒有留言:

張貼留言