Advanced Options with Dynamic Publishing

SWFObject's dynamic publishing mode provides a number of advanced options when embedding a SWF. As explained in the Dynamic Publishing article, there are five required arguments in a dynamic embed statement:

swfobject.embedSWF("mymovie.swf", "flashcontent", "550", "400", "9");

1. the URL of the SWF
2. the ID of the <div> (or other element) that will be replaced
3. the width of the SWF (written as a string, i.e. "550")
4. the height of the SWF (written as a string, i.e. "400")
5. the minimum required version of Flash Player (written as a string, i.e. "9" or "9.0.0")

However, there are also five optional arguments you can pass when embedding your SWF:

1. Express Install
2. FlashVars
3. Parameters
4. Attributes
5. Callback function

Here's a complete list of all ten arguments accepted by SWFObject's dynamic publishing system. Note that they must be passed in this precise order:

1. URL for the SWF (string, required) The URL of your SWF.
2. Target ID (string, required) The id of the HTML element that will be replaced by your Flash SWF.
3. SWF width (string, required) The width of your SWF.
4. SWF height (string, required) The height of your SWF.
5. SWF's required Flash Player version (string, required) The Flash player version your SWF requires. The format is written as "major.minor.release" (such as "9.0.0"). It can also be simplified to only specify the "major" number ("9").
6. URL for the Express Install SWF (string, optional) If a URL for the expressinstall.swf file is provided, SWFObject will attempt to invoke Flash Player's Express Install feature when the minimum version of Flash Player is not found.
   • Express Install is covered in-depth in the article Adobe's Express Install.
   • Note: If you don't want to use Express Install, you may also simply pass a boolean false instead of a string.
7. FlashVars (object, optional) An object containing variables that will be sent to your SWF via FlashVars using name:value pairs. Variables passed to your movie via FlashVars become root-level variables in your SWF.
   • See an example of how to use FlashVars here: Using FlashVars to load and display text.
   • Note: If you don't want to use Express Install, you may simply pass a boolean false instead of a string.
8. Parameters (object, optional) Parameters specified here will be converted to <param> elements used by the <object> element. This is where you can specify things like background color, wmode, scale mode, base, etc.
   • See Adobe's complete list of available and configurable Flash Player parameters.
   • Note: If you don't want to specify any parameters, you may simply pass an empty object OR a boolean false instead of an object.
9. Attributes (object, optional) Attributes that will be applied to the <object> element. Uses name:value pairs. The most common user-defined attributes for the <object> element are probably id and class.
   • The SWF will automatically inherit the ID of the element it is replacing unless you specify a new ID here.
   • Note: If you don't want to specify any attributes, you may simply pass an empty object OR a boolean false instead of an object.
10. Callback Function (JavaScript function, optional) A callback function that is invoked upon both successful and failed embed attempts.
    • The callback function is covered in-depth in the article The Callback Function.
    • Note: If you don't want to specify a callback function, you can omit this argument — it's the last one and can be left off the list without causing errors — or you can simply pass a boolean false instead of a function.

When using all ten arguments, your SWFObject embed code will look like this (line breaks added for legibility):

swfobject.embedSWF("mymovie.swf", 
                   "flashcontent", 
                   "550", 
                   "400", 
                   "9", 
                   "expressinstall.swf", 
                   flashvars, 
                   params, 
                   attributes, 
                   callback);

Note that the last four items are JavaScript variables, not strings. Since we haven't defined those variables yet, the above example would throw an error. Here's the same example, but with the variables properly defined:

var flashvars = {};
var params = {};
var attributes = {};
var callback = function (){ };
 
swfobject.embedSWF("mymovie.swf", 
                   "flashcontent", 
                   "550", 
                   "400", 
                   "9", 
                   "expressinstall.swf", 
                   flashvars, 
                   params, 
                   attributes, 
                   callback);

Now that the variables are defined, we won't see any JavaScript errors. But… the variables are empty, which does us no good at all! Here are some common ways these variables could be used:

var flashvars = {
    foo: "bar",
    someInternalVariable: "some string",
    username: "Bugs Bunny"
};
var params = {
    wmode: "opaque",
    bgcolor: "#F8F8F8"
};
var attributes = {
    "class": "my-css-classname"
    //"class" is in quotes because it is a JavaScript reserved keyword
};
var callback = function (e){
    if(e.success){ 
        alert("The SWF was successfully embedded");
    }
};
 
swfobject.embedSWF("mymovie.swf", 
                   "flashcontent", 
                   "550", 
                   "400", 
                   "9", 
                   "expressinstall.swf", 
                   flashvars, 
                   params, 
                   attributes, 
                   callback);

Some but not all

What if you'd like to use some of the options but not all of them? Are you still required to specify the optional parameters? For example, if you'd like to specify some FlashVars but don't want to use Express Install, do you still need to specify the Express Install SWF's URL?

The answer is yes. And no.

In this example, you'd need to specify something for the sixth argument (the spot required for Express Install), because FlashVars is always the seventh argument.

Luckily, if you don't plan to use an optional item, you can simply pass a boolean false in its place (see descriptions for the 10 arguments above). For our example, if you'd like to use FlashVars without specifying an Express Install SWF URL, simply pass a false where the Express Install URL would normally go, like so (linebreaks added for legibility):

var flashvars = { 
    foo: "bar"
};
swfobject.embedSWF("/path/to/mymovie.swf", 
                   "flashcontent", 
                   "550",
                   "400",
                   "9.0.0",
                   false,
                   flashvars);

For another example, let's say you'd like to pass a callback function, but you don't need any of the other optional arguments… no Express Install, no FlashVars, no parameters, and no attributes. Easy! Just pass false for each of the items you don't want to use (linebreaks added for legibility):

var callbackHandler = function(e){ 
    alert("Was embedding successful: " +e.success);
};
swfobject.embedSWF("/path/to/mymovie.swf", 
                   "flashcontent", 
                   "550",
                   "400",
                   "9.0.0",
                   false, //Express Install
                   false, //FlashVars
                   false, //Parameters
                   false, //Attributes
                   callbackHandler);

Adding optional attributes without declaring variables

Some people don't like the verboseness of declaring each optional argument as a variable. If you count yourself as part of this group, here's another way you can write your SWFObject statements, sans vars (linebreaks added for legibility):

swfobject.embedSWF("/path/to/mymovie.swf", 
                   "flashcontent", 
                   "550",
                   "400",
                   "9.0.0",
                   "expressinstall.swf", //Express Install
                   { username: "Bugs Bunny" }, //FlashVars
                   { wmode: "opaque", bgcolor: "#F8F8F8" }, //Parameters
                   { "class": "my-css-classname" }, //Attributes
                   function(e){ 
                       alert("Was embedding successful: " +e.success);
                   });

This approach isn't recommended because it's harder to read, but it is an option for those who are interested in cutting down on var statements.