Flash on top of the HTML elements - changing the window mode parameter

Developers are not aware of the problem with a flash content "always on top" until they embed it in a HTML that has the elements that meant to be in front of everything else. This usually happens when using the CSS & java-script based drop-down menus. Embedding your movie with default settings always place it "outside" the HTML layers hierarchy and the z-index ordering.

The left picture below illustrates what happens when you move your mouse over the drop down menu to expand it. It just goes underneath the Flash content. The right picture shows what we wish to have.

The reason (and fix) for the problem is the windows mode - "wmode" parameter which is a part of <object> and <embed> tag.

By the way, if you have always wondering why there are two tags required when embedding a Flash content in html, the answer is that <object> tag is used by Internet Explorer (Flash works as ActiveX control) and <embed> is for all the other browsers (created originally by Netscape).

The wmode (window mode) parameter has three possible values:

• window (default) - Flash will be placed on top of everything in "its own window"
• opaque - Flash will be placed within other HTML elements, it will cover everything what is underneath as per z-index order and will be covered by everything which is higher as per z-index order
• transparent - Similar to opaque in terms of z-index, but everything placed underneath transparent portions of Flash will be visible.

So to fix problem with Flash content always on top you need to change the wmode either to opaque or transparent if you want to use transparency (bear in mind that transparency mode might be very CPU consuming depending of the complexity and how big is transparent area).

To change the wmode parameter from a HTML code, you need to find and modify the object tag:

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

And the embed tag:

wmode="opaque" 

This can be also done from the Flash itself from File -> Publish Settings -> HTML tag and Window Mode drop down:

If you want to learn more about other required and optional parameters of the <object> and <embed> tags, read Adobe's article here: http://kb2.adobe.com/cps/127/tn_12701.html

Update: two new wmodes in Flash player 10: Direct and GPU

There are two new wmodes available in Flash Player 10 to take advantage of users graphic processor. Hardware acceleration provides more resources to increase Flash performance and rendering time.

If user doesn't have hardware capable of supporting any of these two modes, Flash will use standard software rendering.

• wmode = direct improves performance for basic video playback by allowing Player to draw directly on the screen rather than allowing browser to do it. In this mode your HTML menu will not work properly.
• wmode = gpu - uses Graphics Processing Unit to perform video playback and rendering (like rescaling video, generating movie clips animations). Uses Direct3D on Windows and OpenGL on Linux. The better graphic card user has, the better performance of Flash in this mode.

This wmode can be set with html embed and object tags, same as for other modes like opaque, transparent. It can be also set in Flash from Publish Settings, Flash tab, Hardware Acceleration drop down menu.

Note that in some cases your movie clip may play actually slower than with standard options, for example when user has fast CPU but slow GPU. Flash Player seems to doesn't have any built in functionality to decide whether it's better to use hardware acceleration mode or standard software rendering. It's worth testing your app on few different hardware configurations before using any of these options.