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.

Example: Download the Flash and HTML file Beg 027a

01: 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">
   <param name="movie" value="webwasp-logo.swf" />
   <param name=quality value=high />
   <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>
   </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">
   <param name="wmode" value="transparent" />
   <param name="movie" value="webwasp-logo.swf" />
   <param name=quality value=high />
   <embed src="webwasp-logo.swf" wmode="transparent" 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>
   </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.

02: Compatibility Issues

I have tested this in latest versions of Internet Explorer, Firefox and Netscape using Windows XP. It should also work in Mac OS X and up.

This effect may not work in older browsers or if the Flash Player is old. The following Browsers currently support transparency:

Internet Explorer 3.0 & up (Windows)
Internet Explorer 5.1* & 5.2* (Mac)
Netscape 7.0*
Mozilla 1.0*
CompuServe*
AOL*

* Flash Player 6 or higher is needed.

In windowless mode performance maybe slow so if speed is important consider alternatives. Transparent backgrounds are not possible in a Flash standalone projector.

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

Rollover the image to see the new background colour.

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

discuss this topic to forum