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
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.
encodeURIComponent to support double byte characters.