Ever since I saw the current version of the Playstation website I have been excited about the possibilities available to designers when flash can be used as a background.
In this article I will cover how to set a Flash movie as a background element of a HTML and CSS based webpage.
Click here to view a demo..
What we are creating
The flash movie will be the background element and fills the width of the window. It has 4 grey buttons which will change the background colour of the movie. There are two DIVs displaying in front of it which will contain any HTML you require.
The first DIV (front-header) is the top white area is where you can put your logo, navigation etc. It has a fixed height that is set within the CSS.
The second DIV (front-content) is the lower white area and is where you will put the page content. It’s height expands infinately as you would expect.
I will not cover the SWF file in this tutorial, I will assume you guys have some knowledge of Flash – the file included in the zip really is Flash at its most basic :o).
The blue gradient is a SWF movie with a 100% width
The HTML
<div id=”front-header”>
<h1>Header</h1>
</div>
<div id=”front-content”>
<h1>Using Flash as a Background</h1>
<p>The content goes here</p>
</div>
<div id=”background”>
<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=”100%” height=”600″ id=”test”>
<param name=”allowScriptAccess” value=”sameDomain” />
<param name=”movie” value=”bg.swf” />
<param name=”quality” value=”high” />
<param name=”scale” value=”noscale” />
<param name=”salign” value=”lt” />
<embed src=”bg.swf” wmode=”transparent” quality=”high” scale=”noscale” salign=”lt” bgcolor=”#333333″
width=”100%” height=”600″ name=”test” align=”left” allowScriptAccess=”sameDomain”
allowFullScreen=”true” type=”application/x-shockwave-flash” pluginspage=
”http://www.macromedia.com/go/getflashplayer” />
</object>
</div>
The CSS
#front-header{z-index: 2; position: relative; top: 0px; margin: 0px auto; width: 900px; padding: 0px; height: 118px; background: #ffffff;}
#front-content{z-index: 9; position: relative; top: 316px; margin: 0px auto; padding: 25px; width: 850px; background: #ffffff;}
#background{position: absolute; width:100%; top: 0px; left: 0px; height: 100%;}
Source Files
Download the Source Files (HTML, CSS and FLA).
Related Posts
- So It Begins…
Posted in
All,
Tutorials.