3

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 its 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 seriously decreasing the application's frame rate 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 frame rate when using the "transparent" wmode parameter?

Laurel
  • 5,965
  • 14
  • 31
  • 57
Tom
  • 8,536
  • 31
  • 133
  • 232

3 Answers3

2

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

Tyler Egeto
  • 5,505
  • 3
  • 21
  • 29
  • This actually seems to do the trick. Are there any downsides to using opaque? Thanks! – Tom Jan 24 '10 at 22:58
  • The one downside I know of is if your design requires a transparent swf, say for HTML content below it, your out of luck. As a whole though, opaque is faster and less buggy than transparent. Transparent has rendering and mouse interaction issues. Glad it helped. – Tyler Egeto Jan 24 '10 at 23:14
  • can this be done with wmode='direct' I must use that wmode and also have an html in front (at times) – Fahim Akhter Apr 25 '13 at 13:01
0

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.

Josh
  • 6,256
  • 2
  • 37
  • 56
  • They're not separate things. Flash and HTML objects kind of flow into eachother resulting in one application. – Tom Jan 24 '10 at 22:58
0

don't use absolute positioning. float it.

albert
  • 8,112
  • 3
  • 47
  • 63