Flash Totanus Loader: all that boring stuff about Macromedia Flash and Xhtml...

How to use the popular Flash Satay, pass some flashVars to your flash movies, and still validate xhtml 1.0 strict

Preface

Maybe you are interested like me in both using flash movies and deploying valid xhtml code.
If so... well, you know that this could be a problem. In fact embed - which is automatically generated by Macromedia Flash Mx to insert the flash movie for non-IE-for-PC browsers - isn't a valid xhtml tag.

So this is the problem...

Actually, we can split the problem in two parts.
First, I want to use just a loader. I don't want to worry about size, scaling or alignment of the loaded movie. So I have to pass some informations to the loader such as scaleMode, align and of course source path of the final movie.
Second, I want also to pass other values... maybe because I need them to be generated dinamically, or whatever...

Let's try with Flash Satay

People at A List Apart, found a beautiful trick to load that swf stuff without using embed. However,if you use that trick, you still have to choose between validating your code to xhtml 1.0 strict or pass your movie some user defined variables...
Look at this code:

<object data="loader.swf"
type="application/x-shockwave-flash"
width="900"
height="400">
<param name="movie" value="loader.swf" />
<param name="menu" value="false" />
<param name="quality" value="high" />
<param name="bgcolor" value="#FFFFFF" />
<param name="flashVars" value="scaleMode=noScale&align=LT&src=movie.swf" />
Some content for non flash users
</object>

As you can see, the code above validates, but doesn't work for Safari or Internet Explorer 5.5 on Mac.
On the other hand, if I want to be visible to Safari users, adding flashVars="scaleMode=noScale&align=LT&src=movie.swf" to the object, I can't achieve validation:

<object data="loader.swf"
type="application/x-shockwave-flash"
width="900"
height="400"
flashVars="scaleMode=noScale&align=LT&src=movie.swf">
<param name="movie" value="loader.swf" />
<param name="menu" value="false" />
<param name="quality" value="high" />
<param name="bgcolor" value="#FFFFFF" />
<param name="flashVars" value="scaleMode=noScale&align=LT&src=movie.swf" />
Some content for non flash users
</object>

Download this example zipped

Second step... Nice try, but...

Well, I say... let's pass all that stuff as querystring in the source path of the loader:

<object data="loader.swf?scaleMode=noScale&align=LT&src=movie.swf"
type="application/x-shockwave-flash"
width="900"
height="400">
<param name="movie" value="loader.swf?scaleMode=noScale&align=LT&src=movie.swf" />
<param name="menu" value="false" />
<param name="quality" value="high" />
<param name="bgcolor" value="#FFFFFF" />
Some content for non flash users
</object>

In this case I still validate and pass all the variables but... but every time I change a user defined value the movie will be loaded again, bypassing the cache memory... Maybe this could be good sometimes, but I don't think it's a good idea if the movie to be loaded is too big.
Download this example zipped

The solution!

I was really getting crazy when a obvious idea jumped in my head... XML!
Let's load the loader movie passing just a variable with the value of a xml configuration file, which conveys all the informations that the final movie needs. The loader parses the xml data, puts all the flashVars content in an object available to the final movie. Obviously you have to code a little bit more with actionscript in your loader.fla, but... That's all. Simple. Clean. Valid. Whoa!
This could be the xml:

<?xml version="1.0" encoding="UTF-8"?>
<flash>
<scaleMode>noScale</scaleMode>
<align>LT</align>
<src>movie.swf</src>
<flashVars>
<test>user defined flashVar value</test>
</flashVars>
</flash>

And this is the xhtml code:

<object data="loader.swf?config=movie"
type="application/x-shockwave-flash"
width="900"
height="400">
<param name="movie" value="loader.swf?config=movie" />
<param name="menu" value="false" />
<param name="quality" value="high" />
<param name="bgcolor" value="#FFFFFF" />
Some content for non flash users
</object>

Download this example zipped

Final notes

Obviously this is just a first version of the trick... So please forgive me if documentation and code examples are so poor and disordered. I found this solution late at night and I just wanted to go to bed, so I promise that I'll improve this page soon.
Hope you've found those lines useful for your jobs.
If you have suggestions, corrections or whatever, feel free to write me at matteo-dot-balocco-at-gmail-dot-com (sorry but I do hate those spam robots!) Visit also my italian Blog: http://www.totanus.net/