Layering flash and html tutorial

Jana asked for tutorial on layering HTML over Flash, so here is how the current footer works, though it will be replaced real soon.

Warning

This will only display correctly on Mac and *nix machines 50% of the time. There is a bug in the flash plugin that randomnly assign which element will be above the other in stacking order, no matter what you do with z-index or source order. So if you scroll up and down or referesh the page, the order may change.

There are also problems with Flashbock plugin for Firefox, overlaying HTML over flash currently makes it impossible to play the flash file. However, a solution may be at hand.

First you need SWFobject to handle the IE Eolas patent problem and providing alternative content to browsers without the right/any flash plugin.

In the head of your HTML page add:

<script type="text/javascript" src="swfobject.js"></script>

or the correct path to the SWFobject javascript

In the body of your HTML add:

<div id="container">
<div id="swfobject-to-replace">
<div id="alternative-content"></div>
</div>
<script type="text/javascript">
// <![CDATA[
var so = new FlashObject("flash-file-name.swf", "id-for-flash", "width in px", "height in px" , "flash_version_req", "background_colour");
so.addParam("wmode", "transparent");
so.write("swfobject-to-replace");
// ]]>
</script>
<div id="html-overtop">
</div>
</div>

the alternative-content could by an img instead of a div
the script is straight from the SWFobject only added bits is you must have a height and width as numbers (do not end in px or similar) the default is pixels but you can change that in your style sheet.
the html-overtop div (or other block element) can contain whatever you want.

And in your CSS add

#container { position: relative; }
#id-for-flash, #alternative-content { position: absolute; top: 0; left: 0;}
#container, #id-for-flash, #alternative-content { height: X; width: Y;}
#html-overlay{ z-index: 2; }

And that is play safe (only assumption the HTML overlay is smaller or the same size as the flash), note the height and width do not have to be in pixels, I use EMs for this blog.

How it works:

  1. If you have the required version of flash, SWFobject replaces the div id #swfobject-to-replace with the flash object #id-for-flash
  2. The flash object is taken out of the normal flow of the document, and absolutely positioned to the first positioned parent element (hence #container requires position: relative;)
  3. The html div #html-overlay is in the normal flow of the document, and is positioned normally in relation to div #container
  4. The z-index on #html-overlay is not really needed, because without the z-index, source order counts and #html-overlay is after and therefore above #id-for-flash. But because #id-for-flash is outside the order, you can never to safe.

12 Oct: At WD06, well sitting outside a pub after a few drinks, having a cigarette, James Edwards explained the solution to the Mac OsX flash player problem is to use an iframe shim, so once I have experimented with it, I will post the solution.

21 Responses to “Layering flash and html tutorial”

  1. wren Says:

    Your site looks like it provides good information but is extremely difficult to read because of the large text size. You should consider using a standard text size.

  2. Dor Says:

    I totaly agree about the font sizes, they’re really hard to read.

  3. Brian Says:

    Try resizing your browser window guys.

  4. Escape Says:

    use ctrl+scroll )

  5. Escape Says:

    so what about working demo?

    Nick: This whole blog is a working demo of this technique, if you are using Firefox, use view source to see the pre rendered version of the page and use the view source chart extension to see what happens after the javascript does it’s and the flash files inserted.

    If you are using a mac or *nix box, scroll down to the bottom of the page and you might see the footer. Scroll up and down again, it might appear or disappear.

  6. Spencer Says:

    I don’t want to have to resize my browser. You need to change it for a standard view as opposed to trying something new. There are already standard protocols on the web. “Catch-up”.

  7. reinier Says:

    This only seems to work when you set window mode (‘wmode’) to transparent.
    But why do you need the flash movie to be transparent if it is behind the html content?
    If you set wmode to ‘window’ or omit the wmode parameter, the flash movie is placed on top of the html content, ignoring the z-index attribute.
    Do you know of a way to keep the opaqueness (no transparency) and still be able to place the html content on top?

  8. nick Says:

    Reiner, I wanted to use flash for background vector images, usually over tiled bitmap background images. Hence the use of wmode transparent. Unfortunately it only works in flash player for windows. wmode transparent in flashplayer for mac or linux has a few problems.

    I don’t know of a way to place HTML over flash with wmode window, though an iframe shim may do it.

  9. D Says:

    Don’t be losers. The header/footer resizing is pretty cool when you size the type.

  10. joe Says:

    i already tried the iframe idea.. and i didn’t have much luck with it.. still tweeking t hings though…

  11. Christian Says:

    Hey everyone,
    Does anyone have an answer for the problem reinier brought up on March 13th?
    I’m having the same issue as I cannot change the wmode of the flash? I have been searching this issue for a while now and it seems like the problem could have something to do with the layer losing focus to the flash and then the flash shows on top? Anyone knows a way how to keep the focus on the layer at all times?

    Thanks

  12. lukep.net » Blog Archive » How do you keep Flash objects and animations from overlapping your dynamic javascript? Says:

    […] Tutorial to layer Flash and HTML […]

  13. Tom Says:

    how about the dreamweaver AC-Runactivecontent plugin instead of swfobject ?

  14. Nick Says:

    Tom, I do not use dreamweaver regularly, so I know very little about AC_Runactivecontent. It appears to solve the IE Eolas patent problem. However, it does not provide alternate content to visitors without the flash plugin, ie iPhone users. That is the advantage of SWFobject.

  15. Anon Says:

    iPhone dont support flash

  16. Nick Says:

    Anon that is why you provide alternative content, for devices that do not support flash.

    ps when the iPhone does support flash, it will have the same problem as other *nix browsers, see the first two paragraphs. So alternative comment is by far the lesser of two evils.

  17. Russell Says:

    Am I missing something? Where is the div#container you speak about? It’s not in th HTML, so why is its style defined in your CSS?

  18. Russell Says:

    Thanks! I’ll give it a try!

  19. Nick Says:

    Oops! my mistake, the code example above is now fixed.

  20. Mike Says:

    The text is great! It is E Z to read!

  21. Jon Jackson Says:

    Thanks for this article. Very useful info…

Google