Recipe 21.2. Making Flash Content that Works with DHTML Menus

Problem

You want to use Flash content within an HTML page that uses DHTML menus, but the menus are obscured by the Flash content.

Solution

Use the transparent wmode setting.

Discussion

By default, Flash Player uses a window mode called window. In the default mode, Flash Player appears as though it's rendered within the browser window, but it's actually rendered in its own window space above the browser. That is the most efficient way for Flash Player to work. However, it presents some obvious issues if you want to display HTML content in front of Flash Player. No matter what, when Flash Player is using the window setting, no HTML content can appear in front of it.

You can also select from opaque and transparent window modes. If you select either opaque or transparent, Flash Player runs within the browser, and it can interact with HTML elements. That means that HTML elements can appear in front of Flash Player when the window mode is either opaque or transparent. Flash Player does not run as efficiently as it would with the window setting. (On most computers there's not likely to be a noticeable difference.) The opaque mode is more efficient than transparent, because the background of Flash Player is opaque. That means that no content that is at a lower z-index on the HTML page will be visible through the Flash content. If you use transparent mode, the Flash Player background is transparent, and content at lower z-indices will be visible through the Flash content.

You can set the window mode from the Publish Settings dialog box. From the HTML tab, you can select an option from the Window Mode menu. Optionally, you can set the value directly in the HTML. For the <object> tag you need to add a nested <param> tag called wmode:

 <param name="wmode" value="opaque" /> 

For the <embed> tag, add a wmode attribute.