Showing content over a flash 9 swf?

Question

Hi, I have a swf that requires flash 9, and I'm trying to show content over it. To facilitate this, I've set wmode to transparent. The problem is, this ONLY works when the user has flash 10 installed, and I really don't want to require flash 10 to view the content on the site I'm working on. When I pull up a div over the flash content with flash 9, the swf bleeds into or completely overwrites the div.

How can I prevent this without making flash 10 a user requirement?

I'm using swfobject to embed the swf and jquery-ui to display divs over the flash content.

EDIT:

This failure behavior is only noted in Safari.

Answer 1

wmode transparent has been part of Flash for years and is not restricted to Flash Player 10.

regardless, you don't need to use wmode transparent; unless you truly need transparency in your SWF, you should use wmode opaque instead. it's less buggy and uses less processing power.

the trick is to also ensure your HTML elements have a 'position' stated in the CSS.

try following the examples and instructions here: http://pipwerks.com/lab/swfobject/z-index/2.0/index.html

Answer 2

I found this in my bookmarks (and they are from the pre-10 era). Though I don't have any Flash Player 9 / Safari over here to validate this right now. Give it a shot.

Different WModes for Browsers

As pipwerks said, WMode should control this, but not all platforms/browsers handle them correctly. In that case I would consider this to be Safari's/Flash9 fault and not fixable.

Answer 3

try setting the wmode parameter to opaque. That seems to solve a lot of HTML layer/depth problems when Flash is involved.

Answer 4

I can't offer advice that could solve the problem, so I'll suggest that you might want to avoid the problem, instead.

Rather than have the (x)html content over the flash content in the z-index

+------------+
|            |
| +-------------+
| |   html      |
| |             |
| +-------------+
|   Flash    |
+------------+

How about instead placing the (x)html content above the Flash in the window:

+------------+
|  html      |
|            |
+------------+
+------------+
|            |
| Flash      |
|            |
|            |
|            |
|            |
+------------+

It's not ideal, but it at least offers a workable solution until Flash/html can co-exist more successfully.

Answer 5

I'm not sure if this will help you per se. But I've used following method to show content over flash.

I had faced this problem some time ago. I was to show user a popup for Terms and Conditions for registration on a site. Popup was coming okay, but There was a flash movie at top of the page which was hidding upper portion of the dialog. The tested and widely used method is to put an Iframe at place where you want to show your content and absolute position your content and IFrame. For example, if you want to show a div above a flash movie, then place a IFrame like follows:

    <iframe style="position:absolute;top:250;left:150;"></iframe>

Then position the div exactly above this iframe like:

    <div style="position:absolute;top:250;left:150;"></div>

I was using jquery on the page to show dialog using ui.dialog plugin. After fooling around sometime I devised following simple solution.

1) put id attribute on movie element to uniquely identify the movie object. Like,

<object id="movie1"></object>

2) before showing the dialog (or other content for that matter) call a javascript function to hide the movie. Like,

$("#movie1").css("display","none");

3) now show dialog. Like,

$("#dialog").dialog("open");

4) after closing the dialog, show the movie again. Like,

  $("#dialog").dialog("close");
  $("#movie1").css("display","inline");