I’ve been going on and on about using progressive enhancement on your pages that use Flash ever since I released FlashObject. The idea is that you build your pages without Flash, then add in the Flash parts later using Javascript if the user has the correct version of the Flash player. One of the really cool side effects of doing this is that Google will then index your alternate content (Google doesn’t know Javascript).

Today I saw somone taking this a bit further: They were using sIFR to embed a Flash movie on the page, and then passing in the replaced HTML content into the Flash movie as a flashvar.

Now this is nothing new – Claus Wahlers created SEFFS a while back that does just this (I think in his example he loaded the entire XHTML document), and sIFR does this but on a very small scale.

Up until today I never really saw much of a benefit to doing something like this. Usually your site would be run from a database anyway, so you could output your navigation and page content from your database as alternate content, and then use that same data again for the XML file that your Flash movies would read. But today I think I finally realized how cool this might be: Imagine removing all the server calls from your Flash movies when they request their XML configuration files, or imagine saving the user’s bandwidth by not loading all that content twice.

So I came up with a proof of concept of this technique using FlashObject:

How it works

First, embed your Flash movie just as you normally would using FlashObject. Then, to pass the data into you Flash movie, you just need to add one line of code. The whole thing looks like this:

var fo = new FlashObject("passdata.swf", "passdata", "300", "300", "8", "#ffffff");
fo.addVariable("xmlData", encodeURIComponent(document.getElementById("flashcontent").innerHTML));
fo.write("flashcontent");

You can see that I’m simply taking the same element that I target with FlashObject, grabbing the innerHTML of that element, URL encoding it* and then passing it into Flash as the variable xmlData.

Once the data is in the Flash movie – It’s available on the first frame as _root.xmlData, we take that string, and create an XML object out of it. That code is very simple, and looks like this:

var xml = new XML();
xml.ignoreWhite = true;
xml.parseXML(unescape(_root.xmlData));

That’s it! You now have a nice and tidy XML object you can use to generate your Flash content, and it will always match your alternate content perfectly. Your users don’t have to download the content twice (once in the HTML, once in the XML file Flash would load, or duplicated in the swf) and you saved your server an extra call from the Flash movie.

View a working example here, and you can download all the files in the example here.

* Using encodeURIComponent to support double byte characters.

Please note that the FlashObject mailing list has been retired, and the SWFObject mailing list has replaced it.

FlashObject has been gaining a lot more popularity lately, and with it the number of requests for help has gone up steadily (what, my tutorials aren’t good enough? ;)). So I created a mailing list just for FlashObject related questions!

Sign up now by going here and filling out the form. (And make sure you watch your spam folder for the confirmation e-mail!)

Once you are signed up, send any problems or issues you might be having (it’s ALWAYS better if you include code samples or a link to the page you are having issues with) or even new feature requests.

Enjoy!