Ace on Tech -- All things Tech and Me.

Ever tried to insert a flash animation into a valid XHTML webpage? I certainly have, and it always breaks your markup. The standard markup flash uses to render its animations stems from an ancient era of semantically misused tags and properties. There must be a better way, I hope…

Several methods have independently been developed, each with their own benefits. There are two major techniques to choose from: the first being the “Flash Satay” method, the other kinda remains nameless. Let’s start with the Satay method.

Flash Satay

The full directives are listed at the notorious A List Apart website.

In short, this method basically incorporates a container movie, into which you load the actual animation, preserving your content, with a friendly wrapper. This produces fairly nice markup, but it’s kind of a hassling experience — nonetheless effective.

The other method

The other technique uses the omni-valid tag called “object”, which is recognized by [nearly] all major browsers. No container file is used: you provide the user with an image containing a friendly error message. This is the way I do things. It’s a clean thing to do, but leaves a white backdrop on transparent framed flash movies (like those from YouTube). I’m certain there’s a way to cure this, but I haven’t had the (uhm) chance to look into it yet.

<object type="application/x-shockwave-flash" data="yourflash.swf" width="288" height="128"> <param name="movie" value="images/banner.swf" /> <img src="error.gif" width="288" height="128" alt="banner" /> </object>

Either path you choose, there are always drawbacks. For instance, when a visitor doesn’t already have Flash installed, he/she will not get a direct link to Adobe’s website (unless you make the effort of defining it yourself). Nevertheless, standards compliance is the way to go, although I know we’d all appreciate an out-of-the box solution — someday soon.