UPDATE (7-24-2005): This page refers to an old version of the FlashObject script. For questions or comments, or to download the script, please refer to the permanent home of the FlashObject script.
This post is a continuation of a previous post. Read this for more background information on the FlashObject embed method.
In the months since I posted the FlashObject embed I’ve had a chance to talk to a number of developers and use it in a few high traffic projects. In doing so I’ve picked up some tips and best practices that I’ll be outlining here. I’ve also revamped the FlashObject script so it’s a bit more light weight and fixed a few small bugs.
- Alternate content is no longer written to the page by default – You may still use the
Here is an example of what your embed should look like:
Because of this change, you should always specify the ID of an element to write your Flash content into. You should also be sure to always include alternate content on the page. If your Flash movie is purely decorational, you can leave the
divempty, similar to using empty alt attributes (
- Support for pulling variables from the URL string when using anchors – There have been some discussion about Flash state tracking and direct or ‘deep linking.’ Most of the methods rely on parsing variables from the URL when the movie loads, so now you can pull vars out using the built in function
If your URL is:
You can pass those vars into your Flash movie by using the following code:
var fo = new FlashObject("fo_tester.swf", "fo_tester", "300", "150", 6, "#336699"); fo.addVariable("var1", getQueryParamValue("var1")); fo.addVariable("var2", getQueryParamValue("var2")); fo.write("flashcontent");
The same works for normal URL parameters in URLs such as:
Just to recap some of the things posted in the previous FlashObject post, here’s some of the thinking behind the FlashObject embed method:
- No Extra configuration files for each Flash movie. Some alternate methods of embedding Flash content in XHTML documents include using extra configuration files or ‘holder’ movies that load in other movies. With this method there is no need for any extra files aside from the single .js file.
- Easy to serve different content to different browsers. I worked on a project recently that made extensive use of the
wmode=transparentoption. Well when you are using IE or Firefox you can use
Problems with Flash Satay/pure Object tag embedding
The main issue with using any embed method that uses only
object tags to embed any plugin on a page is that Safari ignores the
param tags. For very basic embeds this isn’t a problem, but when you want to start passing in variables or change the background color of the movie without re-publishing it you start to run into problems.
The one area where using pure
object tag embeds shine is in using XHTML pages that are sent with a mime type of
application/xhtml+xml. Since the FlashObject script uses
innerHTML and sometimes
document.write, it is not compatible with pages sent with the
application/xhtml+xml mime type. Currently I have no plans to update it to work with these pages, as there are many issues with creating
UPDATE (5-5-2005): If anyone is interested, Paul Newman has wrapped this script into a Dreamweaver extension. It costs $15 (or free to CommunityMX subscribers), but if you are a not-so-technical Dreamweaver user I think it would be worth it.
UPDATE (5-17-2005): Made a small change to the
embed tag output. I changed the
id attribute to a