SWFObject – Flashvars Instead of External XML Files

March 31, 2009

We’ve been using SWFObject for quite some time to insert Flash content into a website. It’s a great way to get around the <embed> tag and remove the dreaded IE “click to activate this control” message.

Lately, we’ve started to use Flashvars as opposed to external XML files to generate the content in the Flash files. We really like this approach for a few reasons. First, the content is in the HTML page directly, which means there is one less file to manage. Second (and this is a big one), if your SWF looks for an XML file to load content, the browser tends to cache that content. So the next time you visit the page, you will see the cached content even if you’ve replaced and updated your XML file. In this situation, the user has to manually clear their cache and reload the page to see the new content. The problem here is that most users don’t clear their cache all that often. So you run the risk of users seeing old, outdated content, even though you’ve spent the time to update it. So our solution recently has been to use Flashvars when we can.

A good example of this can be seen on our new website. The panels right underneath the clouds on the top of all the pages have text in them. They have a headline, sub-header, and a paragraph of text. The headline and sub-header are part of the SWF file and thus require us to either use an XML file, put the text directly in the Flash file itself (not very friendly for updates), or use Flashvars. Here’s how we did it (in the <head> of our document):

1
2
3
4
5
6
7
<script src="js/swfobject.js" type="text/javascript"></script> <!-- Load SWFObject -->
<script type="text/javascript">
		var flashvars = {mainTitle: "Functional, interactive design.", subTitle: "Three words that mean more to us than you'd think."};
		var params = {wmode: "transparent", allowFullScreen: "false"};
		var attributes = {};
		swfobject.embedSWF("flash/workheader.swf", "flash-work", "950", "195", "9.0.0", "flash/expressInstall.swf", flashvars, params, attributes);
</script>

You need to be using the latest version of SWFObject (version 2) to do this. The benefits of using Flashvars is that the browser shouldn’t cache old XML data, it’s easier to maintain (i.e. less files to work with), and it’s written in the HTML document directly.

7 Comments

Rareview January 18, 2010 at 7:44 am

Doofus, I seriously doubt that Flash is going to be dead next year. However, I do think you’re correct that the complications Flash presents for developers, mobile devices, and search engines has steered people towards things like jQuery. But it still has it’s place – with video, audio, and complex animation. For example, we just finished a huge Flash animated family tree and that couldn’t have been done in any other way as effectively as it was done in Flash. In general though, we are definitely working a lot more with Javascript (jQuery) and CSS over Flash, which does seem to be the future.

doofus January 17, 2010 at 9:02 pm

Flash is old. Its not going to be around next year :)

Tom H May 7, 2009 at 6:19 pm

Here’s a concept for you, seeing as any content loaded into Flash should really be accessible without it (for Google, those who don’t have Flash, mobile phones…), why not load the XHTML document itself into Flash and parse out the information you need (consider using a specific ID to wrap it like #flash-content)

Andrew Knapp May 7, 2009 at 2:08 pm

Hey Dan,

I think what you’d want to do is send the name of the .xml file as a flashvar (ie. var flashvars = {xmlFile: “myxmlfile.xml”};

Once you have that imported into flash then you can use it like a normal .xml file and decompile it like that. We’ve used this a few times where we had the same .swf repeated, and needed the data inside of it to be changed, however there was too much data to send as all flashVars.

Good luck!

aok

dan May 7, 2009 at 1:30 pm

might be a dumb question…but what would i do if i wanted to pass the xml doc itself into the flashvars parameter? i.e.

here is the xml doc…

Advance to the next level:

Take control of your content, empower business users, build an online community, easily integrate Web 2.0 tools and more!

dan

Rareview April 1, 2009 at 7:04 am

Kyle,

That’s a great suggestion. Of course XML files have their place and we’ll continue to use them, but when only a small amount is text is required, we really like Flashvars.

I like the suggestion here and we will try it next time we use XML. Thanks!

Kyle April 1, 2009 at 7:00 am

Hey guys,

Good post, however, I have a solution to the XML caching problem that I’ve used on all my websites. You can append the xml file name your loading with a cache buster, or unique identifier, which forces flash to load the most recent version. This could be a random number or the current time and date. Works like a charm :)

I really like the flashvars though for small lines of text or other variable that indicate what page your on if your using a single flash file for a menu or something.

Cheers!
k

Leave a comment

 

Categories

Archives

Recent

RSS

About Rareview

In 2002, we started as a small group interested in creating lasting, progressive web applications that pushed the envelope. Today, as a small interactive agency in Los Angeles, we still have that same desire and feed off new challenges from clients and technology. We are fortunate to have plenty of great clients who give us creative freedom and leeway to redefine ourselves with each new project. To learn more visit our website at www.rareview.com.

We have also designed and built our own Project Management Application that's available for everyone. You can learn more, watch a video tour, and sign up for a free trial at www.projecturf.com.