Using alternate content as content in Flash

Posted on by

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.

33 thoughts on “Using alternate content as content in Flash”

  2. hhmmm…I think it’s a really cool approach for using the same content in different ways…pretty cool!

    but, somehow, I’m not able to download the zip?!?

  4. Great possibilities. How would one split the data to different text fields? Ex. – part of the alternate content would be used in a dynamic text field named aboutUs_txt, and part would be used in a dynamic text field named services_txt – in the same swf – would this be possible?

  5. What you do with the XML is up to you – you would parse it just as you would if you were loading it in from an external file.

  6. Awesome, as the guy who mentioned SEFFS on Eric Webster’s post this is something I very much like the idea of – never really built anything in flash or xhtml that needs this tho, but I have been meaning to create a flash enhanced version of my (one day finished) website and this is something that has so much potential.

  8. I have been using something similar here : http://www.voltaudio.ro/, however, if you test the script in internet explorer notice how internet explorer alters the content of innerHTML :

    – Capitalization of tag names
    – Even if the page has xhtml doctype, some tags like id=”my_id” are transformed into id=my_id , which is not xml compliant and confuses the flash xml parser.

    I worked around this by loading the XHML pages into flash with XML.load() rather than passing the information through javascript.

    Again, this happens only in internet explorer and this method is great because it gives graceful degradation for your pages on browsers which don’t have flash player installed.

  9. Pingback: Flasher -Flash/Web Design-

  10. ‘Anonymous’:

    That Google update article is very interesting, but there isn’t really any concrete evidence in it. It just seems to be a bunch of heresay based on some random unidentified users and a bunch of ‘gut feelings’ from the author.

    The idea is very very interesting though, and it will seriously shake things up if it’s true.

    Dragos:
    That’s too bad about IE. It should still be possible to use this technique with it, though. You’ll just have to be careful about what your HTML looks like.

  11. I’m using this FlashObject method on a site, and my client is flipping out because an SEO Consultant keeps whispering in their ear that Google doesn’t index Flash. They don’t understand that their content is actually HTML being replaced by Flash. I’ve even cracked open the code in front of them to no avail. Deconcept’s posts breifly mention the ability for these pages to be indexed properly, but does anyone have any concrete proof or examples that proper indexing occurs?

    It’s easier to tell someone, “Look, this method works” as opposed to, “It will work, promise.”

  12. This is something you sould post to the FlashObject mailing list…

    But to answer your question, the way to test whether or not the content is index is by searching for it in google.

    If you pull up Google and search for “This is replaced by the Flash content” (including the quotes) you’ll see tons of pages that use FlashObject (and who didn’t replace the original alternate content in the example file!) and the content is indexed just fine.

  13. Here’s another proof that Google sees Geoff’s method: search for Lowcountry Monthly on google – the fifth entry is EdFunkPhotos.com – a pure flash site with some Lowcountry Monthly cover photos that the photographer took for the magazine. Check the source of the site, it’s all one flash file, with alternate content text.

  15. Interestingly enough, innerHTML seems to choke on tags. Any ideas? I want to build my alt page to at least display the images somewhat. I’m on a mac, and this is true in both Safari and Firefox. I was thinking of using , but that just seems wrong.

  16. what i was trying to say was innerHTML chokes on img tags, but i got it working with object tags. just seems a bit convoluted.

  17. I haven’t tried it with img tags yet – can you be more specific? Would it be possible to use a regular expression to fix whatever part is mangled by the browser?

  18. It’s not so much “mangled” as “never gets there”.
    Here is a version w/ image tags – http://www.unitytheory.com/flashobject/imgtag.html – it gets truncated. I’m guessing because an image tag doesn’t have any innerHTML – since it can’t contain anything. It’s extra weird, because the browser seems to insert a closing img tag rather arbitrarily where it doesn’t belong.
    The version with object tags displays properly. http://www.unitytheory.com/flashobject/objecttag.html
    If you like, I can send a longer email detailing what I’ve tried – since I’ve tried just about every permutation I could think of to make it work.

  19. If in your xhtml content you have hybrid tags like IMG or BR, for instance, it doesn’t work properly. This is due to the shitty nature of innerHTML that returns html not xhtml. Time ago I did an experiment and I had to use RegularExpressions to fix the html in xhtml.

  20. Yeah, there’s a lot of little quirks with this method, so it’s not really for everyone. But usually it’s possible to work around the issues, either by using a regular expression to ‘fix’ the html that is passed into the Flash movie, or by changing your HTML to be less complex.

  21. Pingback: FLOG

  22. I worked around this by loading the XHML pages into flash with
    XML.load() rather than passing the information through javascript.

  25. Tim suggests that whatÒs special about Tom WatsonÒs blog is that heÒs the first politician to use a blog to tell us what he really thinks instead of just telling us whatÒs in his diary.

  29. ÓYou had your last chance girl. Now you will get a sound lesson in obedience and respect for your elders. Take off your clothes.Ô

  31. Pingback: slot-machine

  32. Pingback: Air-Conditioners

  33. Pingback: testanchor404

Comments are closed.