How to enable html content on top of flash content without using the "transparent" wmode parameter or how to optimize framerate when using the "transparent" wmode parameter for a flash object?

Question

I'm developing a Flash application which is communicating with Javascript to allow more features such as custom html input etc., by placing an absolute positioned div on top of the flash application and controlling it's position etc. with Flash & Javascript.

Because these html elements have to appear above the flash content, I figured the following basic css would be enough to do the trick:

#flashContent {
                position: absolute;
                left: 0px;
                top: 0px;
                z-index: 0;
            }
            #htmlContent {
                position: absolute;
                left: 200px;
                top: 200px;
                z-index: 1;
                width: 200px;
                height: 200px;
                background-color: yellow;
            }

So, the htmlContent has a higher z-index than the flash content and thus it should be shown above it. Unfortunately, this only seems to work when you set the Flash object's "wmode" parameter to "transparent".

The problem with this setting is that it's seriousely decreasing the application's framerate to an unacceptable amount.

For static content this does not seem to be a problem, however for my application there's all kinds of elements that you can drag around which have to be moved real-time (while moving the mouse).

So, how do I enable html content on top of flash content without using the "transparent" wmode parameter or how do I optimize framerate when using the "transparent" wmode parameter?

Answer 1

You can use wmode = 'opaque', and still use z-index'ing. Transparent can be very buggy.

Answer 2

if you are using javascript already to show the new layer on top you could just hide the flash while the div is enabled and show it again when you're done.