Learn how to create transparent Flash Movies and how to change the background colour of a Flash Movie via the HTML. You can see that this page has a textured paper background effect. Any Flash Movie that I place on this page with the background set to transparent will also have the same paper background.

You will notice in the example below that the Movie sometimes has a transparent background and sometimes not. The black background is just a graphic symbol which fades and animates in and out reveling the transparent background. Try placing your Mouse over the top of the Movie. You will see a rollover effect which will make the Movie immediately go transparent.

Creating a Flash Movie with a Transparent background

1. Create a: Flash Movie
2. Place your Movie on a: Web Page

Cross Reference: If you do not know how to do this see the tutorial on: Publishing a Flash Movie

3. Open your normal web editor and go to code view so that you can see the: HTML
4. Look for the code that embeds the Flash Movie. It will look similar to this:
   
   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="300" height="210"><br/> <param name="movie" value="webwasp-logo.swf" /><br/> <param name=quality value=high /><br/> <embed src="webwasp-logo.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="300" height="210"></embed><br/> </object>


5. You need to add the lines that are in red:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="300" height="210"><br/> <strong style="color: red;"><param name="wmode" value="transparent" /></strong><br/> <param name="movie" value="webwasp-logo.swf" /><br/> <param name=quality value=high /><br/><embed src="webwasp-logo.swf" <strong style="color: red;">wmode="transparent"</strong> quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="300" height="210"></embed><br/> </object>

Note: You will see several tags that start <param name= something />. Place your line of code in the same section as the other param name tags. The order of the param tags does not seem to matter.

The wmode="transparent" should go inside the embed tag as above.

6. To test your Movie you will need to view it in a Browser like Internet Explorer. It will not be visible in web editors such as Dreamweaver. So save your file and re-open in your web Browser.

Compatibility Issues

I have tested this in latest versions of Internet Explorer, Firefox and Netscape using Windows XP Service Pack

It works fine with all these Browsers. This effect may not work in older Browsers:

The following Browsers and Operating Systems currently support Trancparency:

Windows and Mac OS X
Internet Explorer 3 or higher (Windows)
Internet Explorer 5.1* and 5.2* (Macintosh)
Netscape 7.0*
Mozilla 1.0 or higher*
AOL*
CompuServe*

* From Macromedia Flash Player version 6 (Windows and Mac) or higher required for this feature.

Mac Classic does not support for this feature. Transparent backgrounds are also not possible in a Flash standalone projector.

If windowless mode is used, performance can be affected to some degree. If fastest performance is a top priority, you may consider other design options.

Background Colour

It is worth knowing that this same technique can be used to change the background colour of a Flash Movie. This should override the default setting used in the Flash Movie:

To apply an alternative background colour use the following tags as above:

• The Param Tag: <PARAM NAME=bgcolor VALUE=#999999>
  
• The Ebed Tag: bgcolor=#999999
  
  Note: The 999999 is a hexadecimal colour setting.
  
  Cross Ref: If you are not familiar with setting colours using the hexadecimal system see the tutorial on: Web Safe Colours

That's all there is to it. Enjoy!!