Quick Tip: Embed a Transparent Flash Movie with CSS – Basix

Learn how to export a Flash Movie with a transparent background and embed it in an HTML file.

Step 1: Brief Overview

Using a publish option in Flash and a little bit of CSS, we’ll embed a transparent Flash Movie on top of HTML content.

Step 2: Choose a Flash File

Select the file you want to use with a transparent background, I used the Random Ease Candle template included in Flash CS5.

Step 3: Publish Settings

With your file open, go to File > Publish Settings, click in the HTML tab and change the window mode to Transparent Windowless.

Click the Publish button to export the corresponding swf and html file.

Step 4: HTML

You can get the exact same result by setting a parameter in the HTML file you’re using.

Let’s take a look at that part, starting in the flashContent div.

<div id="flashContent">
	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="320" height="240" id="Transparent" align="middle">
		<param name="movie" value="Transparent.swf" />
		<param name="quality" value="high" />
		<param name="bgcolor" value="#ffffff" />
		<param name="play" value="true" />
		<param name="loop" value="true" />
		<param name="wmode" value="transparent" />
		<param name="scale" value="noscale" />
		<param name="menu" value="true" />
		<param name="devicefont" value="false" />
		<param name="salign" value="" />
		<param name="allowScriptAccess" value="sameDomain" />

The highlighted line is the parameter that sets the movie in transparent mode.

Step 5: A Little CSS

Opening the html file in your browser will give you the transparent background we’re looking for, but without content it will be impossible to notice.

To fix that we’ll use a little bit of CSS, open the file and add the following to the flashContent ID.

#flashContent { width:100%; height:100%; position:absolute; left: 0; top: 0;}

This will place the flash movie on top of the content revealing the effect.

Note: Bear in mind that any interactive HTML content (hyperlinks for example) behind your Flash movie will be rendered unusable.

Conclusion

Now you know how to publish this kind of movie, it’s your job to implement it in a creative way. Experiment!

Thanks for reading!