Flash 8 Actionscript for Satay Method - XHTML Standards
This post is in reponse to the article titled "Flash Satay: Embedding Flash while Supporting Standards" by Drew McLellan.
Problem summary...
The flash actionscript in the article is outdated for the newer Flash 8.
The Article summary...
The article describes how to use cleaner, more efficient code to embed your flash files, while keeping your xhtml valid. The "Satay Method" is used to link your flash file instead of the "Twice-Cooked Method." These two methods differ in how the browser identifies a player for the file. The newer method replaced classid and codebase attributes with a mime type which had a data attribute. The <embed> element was the cause of the problem so this was taken out along with replacing the two attributes:
The <embed> element was created by Netscape as their method of embedding plug ins and players in web pages. It’s not part of the XHTML specification, and while some browsers other than Netscape support it, it’s not standards-compliant, so it’s out.
The attributes classid and codebase did not cause any xhtml validations problems but were rendered useless since the <embed> element had to go.
Flash files would still play in all browsers with valid xhtml, but wouldn't stream in Internet Explorer. Meaning you had to wait until the whole movie downloaded before it played, obviously rendering preloaders useless. This issue was fixed from within the flash file itself by creating a container movie for the content movie to load into. The way this worked was to have a small flash file that would load quickly, remembering that IE had to download the whole file before it played. Inside the container movie, the content movie could be called with it's loading specifications independent from the browser itself. Bingo, problem solved.
Even better, the Satay method passes a variable to the container movie identifying which content movie to load. Great if you have multiple pages with different flash files. Nobody wants to have a container movie for EACH content movie! The code looked like this:
<object type="application/x-shockwave-flash"
data="c.swf?path=movie.swf"
width="400" height="300">
<param name="movie"
value="c.swf?path=movie.swf" />
</object>
The variable being the path to the movie file = path. The content of the variable is "movie.swf." The container movie (c.swf) loads the content movie via the variable "path" passed to it. Here is what the actionscript looked like:
_root.loadMovie(_root.path,0);
Simple, load "movie.swf" (our path) to the _root level of "c.swf."
The problem... Flash 8 vs. previous versions
After following the instructions, I noticed that my container movie loaded but would not load my content movie. Everything else looked fine except the actionscript. Using Flash version 8, the actionscript had errors (nb. you won't get this error other than Flash 8):
**Error** Scene=Scene 1, layer=Layer 1,
frame=1:Line 3: Type mismatch.
_root.loadMovie(_root.path,0);
The error tells us that there was an attempt to assign the wrong type of data to a variable. So I started the debugging, and noticed that _root.path did not make any sense. If we interpret this actionscript, flash is looking for a variable defined in the root of the document instead of looking outside of the movie clip. If we we remove the second _root from the whole line we are left with:
_root.loadMovie(path,0);
Trying this, I still got an error message. I noticed that the 0 was not needed either since _root is already taking care of what level the movie loads to. Now we are left with:
_root.loadMovie(path);
The movie now finds the content movie from the variable passed to it from the web page. Through experimenting I also found this way to write the actionscript with the same result:
loadMovieNum(_root.path,0);
To test and see if everything is working correctly, you will need to place the container, content movie and xhtml file on your server with the appropriate directory structure for your files to find each other. Another hint that everything is working correctly is that you get the following message in your Flash output window:
Error opening URL "file:///path/to/your/file/undefined"
The undefined part tells us that the variable is undefined. This is because the flash file is not inside the xhtml file and therefore cannot be passed the variable.
In Conclusion...
Use _root.loadMovie(_root.path,0); for Flash MX and below. Use _root.loadMovie(path); or loadMovieNum(_root.path,0); for Flash 8.
The Satay method works in Internet Explorer, Mozilla and Netscape as stated by Drew. The article has no mention of this working in Safari but it should. I'll test that shortly and update with the findings. Big thanks to Drew for coming up with this method, ensuring xhtml validity while embedding flash!
Files for download
The following files are available to download so it can be seen how the flash satay method works. The fla files are for Flash 8 only since this article is about Flash 8 and the satay method.
This works, except that it scales the loaded movie funky.
Also, I can still never figure out if passing a path is relative to the document, or the swf. The only thing that works is putting everything at root, which is ugly. I can’t use an absolute URL, since I’m testing, and have to move code to different testing servers. Argh!
The movie should load properly scaled if you set the height and width to the size of your container swf.
width=”400″ height=”300″ is used as an example and need to be changed. Also make sure your container swf and content swf are the same size.
Passing a path using the Satay method is relative to the document. We could easily skip declaring the variable there, and do that from the container movie instead. If this was the case, then a container movie would have to be created for each flash file if you have multiple pages.
Also, the only code you need to put at root is:
_root.loadMovie(_root.path,0);Nothing else needs to be in the container movie except a stop a few frames down. Without the stop the code would keep executing and using CPU cycles.
You don’t need a testing server or an absolute URL for this. You can test it locally if your page is a html file. You’d only need a testing server if your document is php, asp, or any format that requires server side code. If you do need to use a testing server, just duplicate your document, container and content swfs and test them on the same server. That way you’re not risking losing work that has already been published.
Finally, I am going to include the files used in the satay method so it’s easier to see where everything should be placed. Updates to follow.
UPDATE: I added files available for download which shows clearly how to get the satay method working properly. Files include the htm, both content and container fla’s and finally everything in a zip file.
Thanks Lewis.
Upon reading my comments, I realized how confused I was. I did indeed forget the height/width tags, but my paths never work, even relative.
s/c.swf?path=s/main.swf for example, does not work for me, and adding base param “/”. Nothing. It may be my server… I don’t know how.
You wrote “s/c.swf?path=s/main.swf” for your data. So your document is searching in the folder “s” for for c.swf, is that correct?
Did you see I added files for download above? Download the zip and check the source of my html with yours. Let me know if that works for you.
One more thought… make sure you’re writing your sections like this:
data=”s/c.swf?path=s/main.swf” — should be within the object tag
value=”s/c.swf?path=s/main.swf” — should be within the param tag
Everything should look like this:
<object type="application/x-shockwave-flash"data="s/c.swf?path=s/main.swf" width="400" height="300">
<param name="movie" value="s/c.swf?path=s/main.swf" />
</object>
downloaded the .fla files above
tried to open with MX 2004 on win and mac
to no avail what’s the score?
//– It also validates as html4.01 trans , including the wmode=transparent.
In case any one wants to know…
Bye
downloaded the .fla files above
tried to open with MX 2004 on win and mac
to no avail what’s the score?
Julie,
Although this article explains about the flash satay process, its main purpose is to correct the actionscript for use with Flash 8.
These .fla files will not open with previous versions.
The files accompanying it are specific to version 8. If you have problems still, feel free to contact me.
Thank you very much for this! I am going to be using it in my next site update.
I am having one problem though. I made my container .swf into a short intro clip showing my logo. Unfortunately, all of the games on my site are different widths and heights, so when it shows the logo, the logo clip always appears scrunched. Is there a way to keep the aspect ratio of the container clip when its resized, something like centered vs. streched in which I could make it centered?
Thank you very much, I hope I was clear enough.
Nevermind, fixed it. Using the scale parameter set to noborder. I thought this wouldnt work because the actual game would be distorted but evidently since the window is automatically set to the games dimensions it works.
Thanks again for the clarification anyways!
Alright a new round of wierdness while working on this. I ended up entirely fixing the scaling issue by putting this in the actionscript:
Stage.scaleMode = “noScale”;
At the starting of the clip and then setting it back to:
Stage.scaleMode = “Scale”;
at the end so the original movie would look as it should. This problem if fixed but now I seem to have a new one.
The container movie has a white background many of the movies it loads have different color backgrounds, but unfortunately, the container move for some reason sets the background color to be white no matter what I have tried, so the movie that it loads does not show the background color as intended.
Is this a universal problem or just one I am having, if not, any help out there? Thanks in advance.
This works for me, but only if I remove script for removing “Click to Activate and use this control” in IE.
I used code from: http://capitalhead.com/articles/activating-activex-controls.aspx
objects = document.getElementsByTagName("object");for (var i = 0; i
Do You have solution for this problem?
Thanks
I’m having the same issue when it comes to using the <object> activation script. It seems when IE tries to rewrite the object it doesn’t actually load the movie that the container swf is pointing to.
See:
http://www.thepixelage.com/blog/well_microsoft_lost_the_battle_and_we_have_to_suff.html
For information about the script in question.
Anyone have any thoughts on the issue?
mfloyd and blaine,
I’m currently trying to find a solution to that issue and I’ll post any findings that I have. Hopefully we can find a fix.
Yo dude! Much appreciated… I’ve been trying to figure this one out..
Ok. First of all. Nice Site.
This is driving me mad. I have double checked that my c.swf file is ok, in fact, when I navigate to the c.swf file using this URL: http://www.chrisholbrook.com/portfolio/files/c.swf?path=river_web.swf it works. However, when I try to put it into one of my pages like this:
it doesn’t. Any ideas what I’m doing wrong?
the page I’m trying to fix is here: www.chrisholbrook.com/flash
Cheers
Thanks Chris,
Double check your path to you file. It seems like it is not able to find that file.
Cheers.
[…] didn’t worked… so after a few more searches I have found the solution to the problem in designlegion.com. The problem is that the satay method as described originally is for Flash MX and I was working […]
I was having problems with this method working. I’m using Flash CS3, exporting as Flash 8 and under AS 2.0. My container (”swfLoader.swf”), main movie (”hospBarStools.swf”) and php file (”index.php”) are all in the same directory.
Inside the flash file “swfLoader.swf” which was my container, I had the line
_root.loadMovie(path);and in my .php document I had
which is exactly as it should be. But for some reason this wasn’t working. I tested to see if the code was right within the container, and the error
Error opening URL "file:///path/to/your/file/undefined"
code>
came up, which means it was working. I thought to myself "Generally, loadMovie's target is within double inverted commas", so I tried it:
_root.loadMovie(path);and it worked. Not sure if anyone else is having this problem, but I posted this just in case it’s a coincidence and I’m to be proven wrong, or if I’ve shed some light :).
Thanks.
Nope, I lied. Coincidence ^__^ *feels dumb*
This works very well, clears up a lot of things with the original method. Thanks!