The Flash underlay technique is a simple method that allows you to sit HTML content on top of a flash movie. Traditionally we have been unable to achieve this effect as Flash content will always sit on top of page content with the exception of form fields. Using this method we can however achieve the desired result making a whole new bag of design tricks available at our finger tips. An excellent example of this technique in use is on the Allied Domecq homepage.
Flash underlay in action
This content sits on top of a flash movie
So there you go it does work.
Step 1: Flash Satay
Firstly and most importantly we need to use a method of inserting our Flash that is valid XHTML. The best way to do this is to use the Flash Satay technique as outlined at A List Apart. This does away with the nasty <embed> tag, but if you are thinking about streaming movies then make sure to read the article in full as there are some workarounds required.
Step 2: Position absolute
The underlay technique works by wrapping the Flash and content in seperate Divs and using asolute positioning to place one on top of the other.
<div id="underlay-example">
<iv id="underlay-content">
<p>This content sits on top of a flash movie</p>
</div>
<div id="underlay">
<object type="application/x-shockwave-flash" data="/images/knowledge/content/fishy.swf" width="360" height="200" id="fishy" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="menu" value="false" />
<param name="scale" value="noscale" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="bgcolor" value="#ffffff" />
<param name="movie" value="/images/knowledge/content/fishy.swf" />
</object>
</div>
</div>
The obvious drawback of this is that we loose the natural flow of the document, so our new fancy flash underlay will probably end up sitting on top of subsequent content. To counteract this we wrap our flash and underlay-related content in a container of their own. By setting the height of this to the height of the underlay we effectively create white-space for the underlay to sit in.
<style type="text/css">
#underlay-example {
position: relative;
width: 360px;
height: 220px;
}
#underlay {
position: absolute;
left: 0;
top: 0;
width: 360px;
height: 200px;
z-index: 20;
}
#underlay-content {
position: absolute;
left: 20px;
top: 30px;
width: 200px;
height: 50px;
padding: 5px;
z-index: 40;
background-color: white;
}
</style>
Note 1: Accessibility etc
Now before you all start muddying my name I realise that this would leave us with some obvious holes in terms of design, layout and accessibility. If for example we were to re-size the text sitting over our underlay it's quite possible that it would exceed our specified height/whitespace. The Flash underlay technique was originally developed for fancy homepage backgrounds and I still believe this is where it has the most potential along with perhaps other specific site elements such as page headers.
So we have to exercise a bit of judgement in where we apply this technique.
Having said that it's been a while since I developed this technique and I'm fairly certain that given the time improvements could be made to remedy this.
Note 2: Cross browser
The other consideration we have to account for is our old friend 'cross-browser compatability'. Sadly the major drawback of this technique is that so far at least I haven't been able to get it working on a Mac.
The best way I've found to implement it is to use JavaScript browser sniffing to only apply the underlay in the correct environments.
That's that
Hopefully that's all clear enough that you can go off and make it work for you. The Flash Underlay technique is something I came up with a while ago now, so while the example here will certainly work, it's put together from memory rather than application. To that end i'd really like to hear from you if you manage to take it any further.
Last updated 06 June 2005