This is just a quick tutorial on enabling transparency in your flash files. For example, in this site menu at the top the orange dropdown buttons are in a flash file with a transparent background, to allow for the shape of the page to show through. Without the flash buttons, the site looks like this:
With two simple steps we can add transparency to flash, opening the flood gates for a range of cool effects.
STEP 1
First off, once you have created your flash file, you need to alter the publish setting to allow transparency. To do this go to File > Publish Settings. This will open a window similar to this:
Select the HTML tab (indicated above), and set the ‘Window Mode’ to ‘Transparent Windowless’:
This is all we need to do in Flash to allow transparency. The rest is in the HTML object tags.
STEP 2
To display a flash object with a transparent background you need to add the following parameter within the object code in your html.
<param name="wmode" value="transparent">
This line just needs to be added under the other parameters, resulting in you final code looking similar to this:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
height="142" width="100%" >
<param name="movie" value="/pageincs/header1.swf" />
<param name="wmode" value="transparent">
<!--[if !IE]> <–>
<object type=”application/x-shockwave-flash”
data=”/pageincs/header1.swf” height=”142″ width=”100%”>
<param name=”movie” value=”/pageincs/header1.swf” />
<param name=”wmode” value=”transparent”>
</object>
<!–> <![endif]–>
</object>
This will then overlay the flash, allowing the background to show through like so:
The Dude
Did this tutorial help you? If so, click the bookmark button, stumble me, add me to your twitter and tell your friends! Alternatively, sign up and leave a comment!
Not what you were looking for? Then leave a comment or email me and we’ll get you the tutorials you need.
Did this post help you? If so help us continue to grow and Digg this page or Share on Twitter!
If you haven't already, sign up to our RSS feed or register to recieve updates direct to your email!
Very helpful thanks!!
So does fullscreen mode require that the parameter be used in both the outer and inner object tag, too?