Saturday, November 04, 2006

Writing XHTML compliant Flash

There are a number of ways to manage XHTML compliance while embedding flash in webpages. I had wanted to blog about this for a long time now. So there it goes.
All UF websites are being moved to support strict XHTML compliance (with the new signature tags and all). If you’re into the whole web nerd thing, you’ll know that embedding Flash in a XHTML page doesn’t play so nice with these web standards everyone is raving about. Developers basically have two choices these days when working with XHTML and Flash:
  1. The Flash Satay method, which uses a single object tag to embed the Flash movie. This method’s main drawback is that the movie won’t start playing until it is 100% loaded. This can create problems with large Flash sites where the user would be left with a blank screen until the movie loads. There are ways around this, but it involves using another .swf file that loads your main movie and placing the preloader inside the first swf. This can clutter up your directories with ‘holder’ movies and make adding Flash content much more time consuming than it should be.
    (There is a little bugginess in Firefox v1.5 with relation to Satay.)
  2. Use Javascript to write the object / embed tags - This seems to be the most common way of embedding Flash today. Drawbacks include reliance on Javascript being enabled on the user’s browser, and having to include a .js file with each Flash movie, or rewrite the object and embed code for each movie.
Most large sites I looked at used simple Javascript to write each Flash movie to the page, or some reusable code that accepted parameters for the Flash movies. ABC News has one of the most advanced version I could find, with some excellent reusable Javascript that detected the plugin and could not only write the object and embed to the page, but could also target an element on the page and place the Flash movie inside it.

Two guys from http://www.choppingblock.com also showed a clean way to do this at http://www.flashforwardconference.com. They use 2 div's one for alternative content and one for the flash content. Then there is an nifty .js file for checking the client for version and writing the object or embed tag with all its params and the other usable code

read more:
flash-object-best-practices
http://www.alistapart.com/articles/flashsatay/

=> Adobe Developer Center logs

So, the best way is to remove the embed tags and populate the object tags with all necessary properties - while handling alternative content as shown here: http://www.dgx.cz/trine/item/how-to-correctly-insert-a-flash-into-xhtml
I'll show how I handled all this.. in a later blog :P