Feb 07
Experimenting with Flash content and z-index
2005 at 05.05 am posted by Veerle Pieters
Have you ever created a webpage with a Flash animation overlapping other elements of your page? Well I haven’t so far, have been avoiding situations like this. The thing is the Flash content will (almost) always go on top of the other layers regardless of the stacking order (“z-index”) of those layers.
There is however a way to solve this problem by making the background of your Flash movie transparent, this way you'll see the layers underneath. I've read an interesting article on this subject on Joshuaink. This made me curious so I thought lets experiment a bit here.
There are 3 situations I've experimented with :
- Situation 1 : logo, header and navigation with vertical menu in Flash at the top of the page with HTML content below.
- Situation 2 : logo together with a search field at the top in HTML, header animation and navigation in Flash also at the top, below we have content in HTML.
- Situation 3 : logo, header and navigation with vertical menu in CSS/XHTML at the top of the page, the content below with a small Flash animation on the left. The navigation needs to open on top of the Flash.
Situation 1 : I did get the the navigation on top of my content using "wmode: transparent" but my navigation is totally transparent too, which makes this design unusable.
Situation 2 : this is exactly the same situation as in the article I've read and as you can see it works perfectly by using 'transparent' as window mode and the appropriate CSS (e.g. #id {position:absolute;z-index:1;}).
Situation 3 : this is something to experiment a bit further on... my design seem to work on Mac in Safari and in I.E. 6 and Firefox on PC. But in FireFox on Mac my navigation doesn't seem to work properly anymore. As soon as I leave the Flash out, things work fine.
If anybody have done similar experiments on this subject, feel free to share it here. Thanks.
19served
1
I remember having the same problem some years back. I thought things were solved when I found out about the parameter ‘wmode’, but unfortunately that trick didn’t work for NS4.x (I still tested for NS4 compatibility back then!). There were other issues as well that I don’t remmeber, but I remember that I couldn’t get them solved :s
So, after struggling for a while, I decided to revise the whole design so that my HTML dropdown menus would never cover any of the HTML-content. I did this by adding a big (animated) visual underneath the dropdown menu and did it all in Flash :) Nowadays I wouldn’t really consider doing that kind of stuff anymore because of obvious usability and accessibility reasons. But it’s still an option (you could offer an accessible alternative for visually impaired visitors for example).
Another hint… is the flower animation on your test page just a placeholder for something more ‘advanced’ or will the animation be that short and have just a few colours? In that case, you could consider to just export your FLA to an animated GIF… their filesizes are sometimes suprisingly small :)
2
@Roel, thanks for the insight. About the hint, this is no production site, it has absolutely nothing to do with a project, it’s pure as an experiment. Like I mentioned, I avoid situations like that for ‘real’ projects ;-)
3
Check out whatdoiknow.org I know Todd Dominey has done this type of thing, I just can not find his post about it. Look for his PGA site.
4
When it overlaps form fields is when it gets really sticky. In some windows browsers we all know the form fields are rendered by the OS API, when in others they are rendered by the browser API… Flash is almost like an API within itself so chances are one of the form elements will show through the middle of your flash if it was suppose to appear under it. Same happens with just CSS dropdown menus and such.
5
Here is the site from which my original post sprang
http://martingotrel.co.uk
Not that I am asking for a site critique (really I am not!) but thought a real world example might be interesting.
6
P.S. didn’t mean to sound so stuck up my own you know what - should have added this :-) at the end
7
Odd… you mentioned that Situation Three works in Safari, but over here it doesn’t want to work properly in OmniWeb, which I believe uses webkit as well… weird.
8
I did something similar for my school website a long time ago. http://hcms.eanes.k12.tx.us/
Wow. That page needs a facelift now. Oh well, still does the flash on top thing.
9
@John, thanks for sharing the URL. A real world example is always better ;-)
@gb, indeed, weird… I checked John’s URL and it seems to work fine in OmniWeb, my ‘situation 2’ doesn’t :-S I think I would try to avoid situations like this anyway unless I have enough time to experiment ... which I normally don’t have… most clients want things done yesterday :-S
@Jeff, indeed it might need a check-up ;-)
10
You know, I was reluctant to do what I had to do for the above URL but it was very much a case of pleasing the client and delivering as per the brief.
My conclusion has been to avoid it unless you really have no other choice. :-)
11
I haven’t seen a wmode=“opaque” example within your experiments. An article Flash, DHTML Menus and Accessibility explains all wmode options. Also, be aware, some browser don’t support this attribute/value combination.
12
Hi all, Hi Veerle,
I just read the interesting experiment on Flash content and z-index ... I was just wondering if there is any dhtml side solution. Only have solution mentioned here is changing the flash, but does any one know if the problem can be solved by means a changes to the dhtml.
I’m currently struggling with this in this situation: website includes flash element, dhtml popup is partly covered by flash element when appearing.
Anyone ?
13
Hi Veerle et al;
i am trying to add a flash section to my pMachine site. I would like the content to come from the mysql data base( a category) or an xml file. Any tips on how to do this? many thx….. (PS I would like to have text and images)
14
Just to add to the mix, I’ve been experimenting with designing sites entirely in Flash except for content in divs that will position over the Flash movie and be readable by search engines. The major problem I’ve found is that the wmode set to transparent drastically slows down the Flash animation on a Mac. PC is fine, but something about the Mac and transparent swfs makes them slow WAY down…
Wish this didn’t happen…
15
I’m also getting the same problem with FireFox
I’ll do some tests and get back to you all
Cheers
Si
16
Just to add to the discussion. I’ve come close to ruling out using divs in conjunction with full page SWF’s right now. Too bad. IE for the Mac just can’t handle it, Opera doesn’t work at all.
I was going to code divs with the content from my Flash movie with hidden visibility, just to make sure my content made it to spiders, but even these hidden divs are interfering with the SWFs function in a few different browsers—EVEN WITHOUT the wmode set to anything but normal. So it’s not JUST a wmode setting issue.
It’s too bad this isn’t supported cross browser. Things work in Safari for the Mac, but they’re buggy even then, causing the quality to degrade randomly…
17
You must place <param name=“wmode” value=“opaque”>. Also for firefox set inside embed tag wmode=“opaque” -> <embed wmode=“opaque” src=......>
18
Hey - thanks for the post! This was incredibly helpful. I wish that Flash would play nicely with other elements on the page without all this maneuvering - not everyone wants to design entirely in Flash or entirely in HTML!
Anyways, thanks for all your help.
19
It’s quite a while later, but I’ll mention fwiw: CSS menu isn’t overlaying in Firefox 1.08 on Linux. Bummer - I’ll ask a friend who has 1.5 on Linux and if so use this technique. Thanks for this info btw, I’d been wondering why all the examples I’ve seen, like Joshuaink, didn’t work for me - but Mac is now also a *nix system, so we must be sharing the same problem.