Since we (my team at Digitas) have launched the new Pontiac website using web standards, I have had the opportunity to lift up the hood and explain some of the inner workings to some of the other teams at Digitas.

One of the typical comments we receive is that people love the way that we increased speed and SEO of all the flash objects on the site by using a tweaked script based upon Mike Davidson’s Flash Replacement (aka sIFR).

Mike Davidson’s concept was simple enough -- take a headline (h1-h6) and pass it to a flash movie so you can use flash’s ability to render text in non-standard font faces without having to use 3rd party software (other than Flash) or clunky image rendering scripts.

We took Mike Davidson’s SIFR idea (and script) and expanded on it a little, why does it have to stop with headlines? Why couldn’t we pass multiple elements (paragraphs, lists and links) into a flash movie as XML so that all the content in a flash movie was dormant in the XHTML source. This idea has greatly increased SEO, Accessibility and ease of maintenance because now changing content in flash is as simple as editing XHTML.

Some of the ways this also increased “speed” of our flash is that normally when you utilize XML in flash the load sequence looks something like this.

Server Renders Application page > HTML is Downloaded to the user agent > Flash is initialized by user agent > Flash downloads XML from server > Flash Parses XML and renders movie > Movie is Displayed

All this loading, connecting and parsing takes time as any flash developer will tell you. The size of your XML is directly related to how long this procedure takes.

Using XHTML Content Injection the XML content is already present in the movie on flash load because the content is passed in using querysting values by JavaScript on initialization. Because of this all you need to do is to select the content using your favorite XML parsing utility – we used a mix of XPath and homegrown applications. This load sequence saved us valuable seconds on both the server and client side.

Check out the example on the test demo page, there is a div which has an ID of “flashInjectionExample” on the demo page. This content is being selected by JavaScript which then initializes and replaces the div with the flash movie. That initialization code is placed below -- this calls upon functions which are in the edited sIFR Injection library JavaScript.

<script language="JavaScript" type="text/javascript"> // <!-- var objFlash = getElemRefs("flashInjectionExample"); //var hasFlash = "flase"; if (hasFlash == true){ if(typeof sIFR == "function"){ if (objFlash != null) { sIFR.replaceElement(named({nWidth:760,nHeight:262,oNodeRef: objFlash, sFlashSrc:"flash/fpo_600x380.swf", sColor:"#000000", sLinkColor:"#000000", sBgColor:"#FFFFFF", sHoverColor:"#CCCCCC", nPaddingTop:0, nPaddingBottom:0})); } } } else { // show our backup content. if (objFlash != null) { objFlash.className = "enableBackup"; } } // --> </script>

Download flashInjection_SIFR.js source