David Stiller’s blog

By default, Active Content is written directly to the screen, which means it appears on top of other HTML content, regardless of its z-index stacking order, as defined by CSS.  This includes Flash, QuickTime, Windows Media, Java applets, and basically any other file that requires a plug-in in order to be displayed in a browser. 

One of the most popular questions in regard to this issue is some variation on the following:  “Flash is showing through my drop-down navigation!  How can I keep this from happening?”  The answer is provided on Adobe’s website in TechNote #15523.  This TechNote has been available since December 2002, when it was written under the auspices of Macromedia.  Unfortunately, it has been factually incorrect from the very beginning — not fatally flawed, but certainly misleading.

Update!  Adobe revised this TechNote!  Not sure when, exactly, but obviously some time between the original date of this blog entry (07/18/2006) and today (11/29/2006). 

The scoop

The key to getting a browser to recognize the stacking order of Active Content is something called WMODE (windowless mode).  Fair warning, WMODE is one of those phenomena some developers see as “evil,” like ActionScript’s _root and _global — an assessment I personally find unjust.  If you happen to swing that way, so be it.    But bear in mind, the buck doesn’t stop with Adobe on this particular feature:  WMODE was neither the invention of Adobe nor Macromedia.  In a case of “if you build it, they will come,” browser manufacturers provided the feature and Macromedia responded to it with Flash Player 6.  Yes, WMODE causes a performance hit, and yes, WMODE has been documented as buggy in the community.  But given the alternatives (none), and depending on the audience, it is a valid tool in the arsenal, when handled with due diligence.

So, what is this funny term?  WMODE is a browser feature that allows Active Content to be written to the browser’s composition buffer, rather than directly to the screen.  It is this trait that makes stacking order possible in context of Active Content.  It is also this trait that forces the browser to “think harder” when rendering its pixels, which causes the performance hit.  See the Wmode Woes entry of Justin Everett-Church’s Flash blog for additional information on accessibility issues and matters of inconsistent performance.

If you’re still interested, WMODE is easy to implement.

An answer, short and sweet

The <object> and/or <embed> HTML elements that reference your Flash content accept a number of optional parameters.  For the <object> element, these parameters are supplied via nested <param> elements.  Simply add the following new <param>:

<param name="wmode" value="opaque">

The <embed> parameters are supplied via attributes.  For the <embed> element, add the following new attribute:

wmode="opaque"

That’s it.  Your Flash content is now stackable via z-index; for example, you may wrap your <object>/<embed> pair in a <div> and set the <div>’s z-index as you please.

<div style="position: absolute; z-index=1;">
 <object attributes >
  <embed attributes />
 </object>
</div>

If you’re using Dreamweaver, just press the Parameters button in the Insert > Media > Flash dialog or in the Property inspector when selecting existing Flash content.  Type “wmode” (without quotes) in the name/parameter column and “opaque” (without quotes) in the value column.  That will handle the above HTML for you, even with the new JavaScript embedding available since the 8.0.2 update.

Know your options

The Adobe TechNote I mentioned incorrectly implies, as of this writing*, that WMODE must be set to transparent to make Flash content stackable.  There are actually three WMODE possibilities:  opaque, transparent, and window.  Of these, both opaque and transparent allow the z-index stacking order — and opaque is purportedly the less buggy of the two.  The transparent option is only necessary when a transparent background is desired in addition to stacking order.  The window option is the default, and leaving it off is the same as specifying wmode="window".

* Update!  Adobe revised this TechNote!  Not sure when, exactly, but obviously some time between the original date of this blog entry (07/18/2006) and today (11/29/2006).

For additional detail, check out Stephanie Sullivan’s “Flash, DHTML Menus and Accessibility” (free content) article on Community MX.

And here’s the TechNote, for sake of completeness.  Just remember that transparent is not compulsory.

http://www.adobe.com/go/tn_15523

This entry was posted on Tuesday, July 18th, 2006 at 11:44 pm and is filed under Flash, Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.