Saturday, February 26, 2011

Setting the Z-Index for Flash

'You may have run into this problem before and like many others have been driven crazy trying to get it to work. If you have been stumped trying to set the z-index of your Flash objects, fret no more. The solution is actually quite simple.

Set the "wmode" parameter in your Flash HTML code to "opaque".

Sounds simple enough, here is some example code:

You may already have the parameter "wmode" set, most likely it is set to "window", change it to "opaque". If you do not have the "wmode" parameter set, add it to your Flash code.

You may also use the "embed" tag in your Flash code, here is an example using the "embed" tag as well:

If you use the "embed" tag, make sure to set the "wmode" to "opaque" in the "embed" tag too.

If your Flash object has transparency and you want the elements behind the flash to show through the transparency then set "wmode" to "transparent" rather than "opaque".

Now that the "wmode" parameter is set to "opaque" (or "transparent"), the z-index you set will be able to control the depth of the Flash element on the web page.

Why does this work?

When a Flash object has the "wmode" parameter set to "window", the Flash plugin creates a "window" that (in a sense) floats over top of the web page in your browser, so no matter what you set the z-index to, it will always stay in its "window" floating above the web page. If you do not need to set the z-index, (and if it does not have transparency) then "window" mode is ideal as it provides the fastest performance.

When you set the "wmode" to "opaque", you are able to set the z-index because the Flash plugin builds the Flash object directly into the web page, rather than in a window floating over top of the web page. If you need to set the z-index, but do not have transparency in your Flash object, then "opaque" is ideal as it provides faster performance than "transparent".

If you need to set the z-index and your Flash object has transparency, then "transparent" is the way to go.'

No comments:

Post a Comment