eLibrary Resources

Flash Stirfry

One of the most common issues facing web developers is what to do when a client hasn't got the Flash plugin installed, but you have a Flash element on the page providing critical content (links,etc). The normal approach is to include the legacy HTML elsewhere on the page, and live with the fact you'll have an empty box or your content layout will be borked. There is, however, another option.

Firstly, we will start with the standards-compliant "Flash Satay" model for embedding the SWF document, which removes the <embed> tag and strips the <object> tag down to size. This has the advantage of keeping the W3C happy, though admittedly there's a payoff for some older browsers and your SWF must handle version-checking. There is another advantage that few know about - we can include HTML in the <object> that will be rendered only if the object's embedding process fails.

Welcome to Flash Stirfry

OK, we had to keep the takeaway tradition going, and 'Sushi' was taken..

We'll start with the normal "Satay" code for a menu created in Flash.. here's an extract of a page:-

Now, in the Satay Pro code we released on the world many moons ago, we revealed that we could insert an image into the <object> tag, and it'd be displayed if Flash Player wasn't available. This time, we insert an entire chunk of HTML. Our original menu SWF had four clickable links, so we'll drop in a simple table with the same links:-

<object type="application/x-shockwave-flash" data="MyMenu.swf" width="280" height="90"> <param name="movie" value="MyMenu.swf" /> <param name="wmode" value="transparent" />  <table width="280" height="90" class="mymenu"> <tbody> <tr><td><a href="#">Link One</a></td><td><a href="#">Link Two</a></td></tr> <tr><td><a href="#">Link One</a></td><td><a href="#">Link Two</a></td></tr> </tbody> </table> </object>

So what does this do? Well, if the client browser has Flash player installed, they see the Flash content as normal. The legacy HTML vanishes from the screen entirely, and since we've been careful to keep the same dimensions, our page layout remains identical.

If the browser hasn't installed Flash, they get the legacy HTML in place of the Flash content, with the usual browser reaction to a missing plugin (IE asks a question, Firefox adds a top bar, etc.) so the viewer knows they're missing out on something.

Testing

You can try the Stirfry behavior without uninstalling your Flash player, simply by changing the attributes of the <object> tag to confuse the browser. For IE, the mime type is the important item - so to simulate the lack of a plugin, change it to something silly.. like this:-

<object type="application/x-shockwave-flashxxx" data="MyMenu.swf" width="280" height="90">

For Firefox and it's siblings, the mime type is not used - the browser cares about the file extension of the 'data' parameter. So to confuse Firefox, try this:-

<object type="application/x-shockwave-flash" data="MyMenu.swfxxx" width="280" height="90">

Important things to remember

You can place anything you want in the legacy HTML, apart from another <object> tag, but in your HTML or CSS stylesheet, you should make sure the HTML occupies the same box dimensions as your SWF if you want to preserve your overall page layout. the browser doesn't enforce the SWF 'width' and 'height' values on your legacy content - you have to do it. Of course if you want the dimensions to be different there's nothing stopping you.

The legacy content is visible by text-mode browsers and so will be indexed by search engines - which is of course what you want! It's a perfect way to insert routable links for robots, but the major engines know about the technique and will usually penalise sites who use Flash Stirfry to embed misleading content or robot spam.

This is not a workaround for the IE ActiveX-activation issue - IE with Flash Player installed will still display the Flash content with OLE interactivity-protection as normal.

This article was written by Jay Turner from our Platforms group.