How do I validate my .html for xhtml when it has Flash in it? What is the Satay method?

Posted February 25, 2005

I had read about how to validate any .html files with Flash included in an article by A List Apart a couple of months back. Now as we are nearing the end of the project development, I am needing to go through and finalize the details in browser compliance and also in XHTML validation.

The Satay method was created by A List Apart, and it is a way to get around the non standards compliant, <embed> tag. If you are having problems validating your flash integrated documents, you can read the article on the Satay Method at A List Apart’s website.

This is what I found.

The article doesn’t go into too much depth. If you read, you will notice that you will be loading the actual movie into a blank movie container. The article doesn’t specify, however, how big that container should be in relation to the actual movie. It only say that it should be small so that it can load quickly, hopefully less than 4k.

What I found worked for me, was to set the container to the same dimensions as the actual movie I was loading. In this case, the movie I was loading was 740 x 100, so I made a container of the same size.

The second thing that I did different is in how I loaded the movie. The article says to pass a variable through the get string to the Flash movie container similar in fashion to this;

c.swf?path=movie.swf

In this example, I actually stripped off everything after the question mark (?), and changed the actual actionscript information in the container movie.

His method suggests you enter this into the first frame of your container’s timeline;

_root.loadMovie(_root.path,0);

I changed mine so that the path to the movie was actually in the container. In this case, the end result looked like this;

_root.loadMovie(’/main_banner.swf’,0);

The final thing that I learned was actually about child elements in using the <object> tag. Basically, you can nest additional html information inside of the <object> tag in case the users browser does not understand. It is kind of like an alternative. In this case, we are going to use an image inside of the <object> tag that will display when it fails, or in this case, when the user does not have any version of Flash installed. Which is very rare, with something like 96% rate of use of at least Flash version 5.0

So now I have a valid XHTML compliant document that loads and contains Flash. Pay attention to the final code that is suggested for insertion. The main reason that it works is because it uses both the “data” attribute for the <object> tag, and the <param> tag with the attribute set of name and src to load the movie, which works for loading in both IE and Netscape type browsers.