Making your Flash movie transparent
Thursday, December 30th, 2004 | Programming, Tech
Making your movies transparent allows you to see the background on bits where there is nothing in the movie. However this is actually nothing to do with the settings in Flash when publishing movies. The trick is in the html file that the movie is added into.
Transparency in movies will only work in Internet Explorer 4+ and won’t work in Netscape.
To make your movies transparent, simply paste this code in between the HTML Object tags.
<param NAME="wmode" Value="transparent"
And so, the embedding code for the SWF file for the second example (transparent) is as follows:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" ID="himalayas" WIDTH="250" HEIGHT="100">
<param NAME="movie" VALUE="himalayas.swf">
<param NAME="quality" VALUE="high">
<param NAME="wmode" Value="Transparent">
<embed src="himalayas.swf" quality="high" bgcolor="#FFFFFF"
WIDTH="250" HEIGHT="100" TYPE="application/x-shockwave-flash">
</object>
Note: the above source file doesn’t include some key information like the Base Code URL due to the text width limitations.
Limitations
The transparency (as well as any other cool new technology) doesn’t work in Netscape at all. Use Internet Explorer to be able to view transparent Flash Content.
For the transparency effect to work as desired, don’t add a filler background element to your movies. Many developers add a large, white rectangular box, etc. to simulate white color. Make sure the drawing area behind the main movie is clear of any unwanted colours, etc (it will show up in the final animation).
Making your movies transparent allows you to see the background on bits where there is nothing in the movie. However this is actually nothing to do with the settings in Flash when publishing movies. The trick is in the html file that the movie is added into.
Transparency in movies will only work in Internet Explorer 4+ and won’t work in Netscape.
To make your movies transparent, simply paste this code in between the HTML Object tags.
<param NAME="wmode" Value="transparent"
And so, the embedding code for the SWF file for the second example (transparent) is as follows:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" ID="himalayas" WIDTH="250" HEIGHT="100"> <param NAME="movie" VALUE="himalayas.swf"> <param NAME="quality" VALUE="high"> <param NAME="wmode" Value="Transparent"> <embed src="himalayas.swf" quality="high" bgcolor="#FFFFFF" WIDTH="250" HEIGHT="100" TYPE="application/x-shockwave-flash"> </object>
Note: the above source file doesn’t include some key information like the Base Code URL due to the text width limitations.
Limitations
The transparency (as well as any other cool new technology) doesn’t work in Netscape at all. Use Internet Explorer to be able to view transparent Flash Content.
For the transparency effect to work as desired, don’t add a filler background element to your movies. Many developers add a large, white rectangular box, etc. to simulate white color. Make sure the drawing area behind the main movie is clear of any unwanted colours, etc (it will show up in the final animation).