3

I've been searching for a while now about how to layer html element over SWF object and at last what i came up to is (according to Abode):-

Internet Explorer : Doesn't support layering at all.

Firefox : Doesn't support layering (But it worked but without transparency).

Chrome : Adobe claims that it is not supported but amazingly it worked fine and with transparency.

Safari(Windows) : Doesn't support layering at all.

safari(Mac OS) : supported.

I know that i can easily set wmode="transparent" or wmode="opaque" an layering will work just fine. but i found out that with SWF object which contains 3D content its wmode must be set to "direct" or "gpu".

if anyone knows any solution to this problem, i would appreciated cause i'm developing a game on flash i want to overlay it with html elements and i didn't found any firm answer whether its possible or not

Thanks in advance

Community
  • 1
  • 1
user1327487
  • 41
  • 1
  • 5

1 Answers1

2

After a few tries I got a solution working on Firefox & IE. It's kind of dirty but works in some cases.

An iFrame is shown on top of the swf, so you can add your layered html in the iframe.

You can go further and set the iframe into the background, it's just needed to keep the spot clear for the upcoming html. HTML:

<div class="box">
<iframe src="emptyframe.html" frameborder="0" class="emptyiframe"></iframe>
<div class="content">
Shown on top
</div>
</div>

CSS:

.box { position: absolute; z-index: 100; background: #fff;}
.emptyiframe { position: absolute; width: 100%; height: 100%; border: none; z-index: -1;     }

With this solution it's possible to add elements over the flash even with wmode="direct". But you need to keep in mind that the iframe is in the background of the html on top of the flash, so you can not make any transparence.

mikael
  • 21
  • 2