« You were once a Web Standards novice
And her name is Willow »

Layering flash and html tutorial

Jana asked for tutorial on lay­er­ing HTML over Flash, so here is how the cur­rent footer works, though it will be replaced real soon.

Warn­ing

This will only dis­play cor­rectly on Mac and *nix machines 50% of the time. There is a bug in the flash plu­gin that ran­domnly assign which ele­ment will be above the other in stack­ing order, no mat­ter what you do with z-index or source order. So if you scroll up and down or ref­eresh the page, the order may change.

There are also prob­lems with Flash­bock plu­gin for Fire­fox, over­lay­ing HTML over flash cur­rently makes it impossible to play the flash file. How­ever, a solu­tion may be at hand.

First you need SWFob­ject to handle the IE Eolas pat­ent prob­lem and provid­ing altern­at­ive con­tent 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 cor­rect path to the SWFob­ject 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 SWFob­ject only added bits is you must have a height and width as num­bers (do not end in px or sim­ilar) the default is pixels but you can change that in your style sheet.
the html-overtop div (or other block ele­ment) can con­tain 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 assump­tion the HTML over­lay is smal­ler 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 ver­sion of flash, SWFob­ject replaces the div id #swfobject-to-replace with the flash object #id-for-flash
  2. The flash object is taken out of the nor­mal flow of the doc­u­ment, and abso­lutely posi­tioned to the first posi­tioned par­ent ele­ment (hence #con­tainer requires pos­i­tion: relative;)
  3. The html div #html-overlay is in the nor­mal flow of the doc­u­ment, and is posi­tioned nor­mally in rela­tion 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 there­fore above #id-for-flash. But because #id-for-flash is out­side the order, you can never to safe.

12 Oct: At WD06, well sit­ting out­side a pub after a few drinks, hav­ing a cigar­ette, James Edwards explained the solu­tion to the Mac OsX flash player prob­lem is to use an iframe shim, so once I have exper­i­mented with it, I will post the solution.

This entry was posted on Friday, June 16th, 2006 at 4:38 pm and is filed under css and html . You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

21 Responses to “Layering flash and html tutorial”

  1. wren Says:
    July 4th, 2006 at 12:54 am

    Your site looks like it provides good inform­a­tion but is extremely dif­fi­cult to read because of the large text size. You should con­sider using a stand­ard text size.

  2. Dor Says:
    August 17th, 2006 at 8:59 pm

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

  3. Brian Says:
    September 20th, 2006 at 6:05 am

    Try res­iz­ing your browser win­dow guys.

  4. Escape Says:
    November 15th, 2006 at 7:31 am

    use ctrl+scroll )

  5. Escape Says:
    November 15th, 2006 at 7:33 am

    so what about work­ing demo?

    Nick: This whole blog is a work­ing demo of this tech­nique, if you are using Fire­fox, use view source to see the pre rendered ver­sion of the page and use the view source chart exten­sion to see what hap­pens after the javas­cript does it’s and the flash files inserted.

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

  6. Spencer Says:
    March 1st, 2007 at 9:35 pm

    I don’t want to have to res­ize my browser. You need to change it for a stand­ard view as opposed to try­ing some­thing new. There are already stand­ard pro­to­cols on the web. “Catch-up”.

  7. reinier Says:
    March 13th, 2007 at 3:12 am

    This only seems to work when you set win­dow mode (‘wmode’) to trans­par­ent.
    But why do you need the flash movie to be trans­par­ent if it is behind the html con­tent?
    If you set wmode to ‘win­dow’ or omit the wmode para­meter, the flash movie is placed on top of the html con­tent, ignor­ing the z-index attrib­ute.
    Do you know of a way to keep the opaque­ness (no trans­par­ency) and still be able to place the html con­tent on top?

  8. nick Says:
    March 13th, 2007 at 9:13 pm

    Reiner, I wanted to use flash for back­ground vec­tor images, usu­ally over tiled bit­map back­ground images. Hence the use of wmode trans­par­ent. Unfor­tu­nately it only works in flash player for win­dows. wmode trans­par­ent in flash­player for mac or linux has a few problems.

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

  9. D Says:
    March 22nd, 2007 at 4:21 am

    Don’t be losers. The header/footer res­iz­ing is pretty cool when you size the type.

  10. joe Says:
    May 1st, 2007 at 11:19 pm

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

  11. Christian Says:
    July 18th, 2007 at 3:03 am

    Hey every­one,
    Does any­one have an answer for the prob­lem rein­ier brought up on March 13th?
    I’m hav­ing the same issue as I can­not change the wmode of the flash? I have been search­ing this issue for a while now and it seems like the prob­lem could have some­thing to do with the layer los­ing focus to the flash and then the flash shows on top? Any­one 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:
    July 29th, 2007 at 7:22 am

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

  13. Tom Says:
    October 10th, 2007 at 4:12 am

    how about the dream­weaver AC-Runactivecontent plu­gin instead of swfobject ?

  14. Nick Says:
    October 12th, 2007 at 5:46 pm

    Tom, I do not use dream­weaver reg­u­larly, so I know very little about AC_Runactivecontent. It appears to solve the IE Eolas pat­ent prob­lem. How­ever, it does not provide altern­ate con­tent to vis­it­ors without the flash plu­gin, ie iPhone users. That is the advant­age of SWFobject.

  15. Anon Says:
    April 7th, 2008 at 5:25 pm

    iPhone dont sup­port flash

  16. Nick Says:
    April 8th, 2008 at 6:06 pm

    Anon that is why you provide altern­at­ive con­tent, for devices that do not sup­port flash.

    ps when the iPhone does sup­port flash, it will have the same prob­lem as other *nix browsers, see the first two para­graphs. So altern­at­ive com­ment is by far the lesser of two evils.

  17. Russell Says:
    July 1st, 2008 at 4:44 pm

    Am I miss­ing some­thing? 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:
    July 1st, 2008 at 6:07 pm

    Thanks! I’ll give it a try!

  19. Nick Says:
    September 4th, 2008 at 5:45 pm

    Oops! my mis­take, the code example above is now fixed.

  20. Mike Says:
    September 25th, 2008 at 2:40 pm

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

  21. Jon Jackson Says:
    April 4th, 2009 at 12:35 am

    Thanks for this art­icle. Very use­ful info…

Affiliates

Google
text advertising by
Powered by Reseller Zoom