Passing Variables from HTML to Flash

Most flash applications have little, if any, interaction with the web pages in which they are embedded. However, sometimes it is necessary for the page to share information with the flash application. For example, suppose you created a video player and wanted this single player to be able to play a different video depending on the page in which it was called? Or perhaps, you created a slideshow and similarly wanted it to use a different XML file for different galleries. In both of these cases, you will need to be able to pass some information from the page to flash.

Passing information can be done in several ways. But in this tutorial, we will show you the relatively simple method of passing variables.

Passing Variables via URL

The easiest method to pass variables is directly via the url or query string that is used to call the flash .swf file. For example, we have included some typical source code that you might use to embed your flash movie. (Note: There are many ways to embed movies, so your code may or may not look like this example.)

<object type="application/x-shockwave-flash" data="flash.swf" width="400" height="300">
<param name="movie" value="flash.swf" />
<param name="quality" value="high" />
<param name="src" value="flash.swf" />
<param name="bgcolor" value="#996633" />
</object>

So in this code sample, the flash element is referenced by the filename flash.swf.

Now, have you ever seen those urls that use a question mark? You’ve probably seen it, for example, with php files names, such as index.php?variable=value, or perhaps you’ve seen it with JavaScript. Either way, the question mark turns a typical url into a query string. So lets turn that boring flash url into a query string.

Suppose we had 3 movies for our flash player and wanted to be able to control which movie was played. We might reference our flash in one of three ways:

• flash.swf?movie=1
• flash.swf?movie=2
• flash.swf?movie=3

Now, we need to modify the flash movie to be able to accept these variables, and then do something with them. So suppose we already had a variable in our flash player called video. And you had hardcoded a video url into the swf. The ActionScript code might look something like:

video = mymovie.flv

But since we are passing variables, to dynamically change the movie being played, we can modify this code as follows:

video = mymovie.flv; // default movie
if (movie==1){
    video = mymovie.flv;
}
else if (movie==2){
    video = mymovie2.flv;
}
else if (movie==3){
    video = mymovie3.flv;
}

Or, if we wanted to, we could pass the name of the actual movie by calling the swf file like this: flash.swf?movie=mymovie3.flv. And then our ActionScript code would look very similar to the original code, like this:

video = movie;

Clearly, both options enable a great deal of flexibility. The first option might be used if you want to restrict which movies can be viewed with the player. And the second option enables any appropriately formatted video to be viewed.

There is one other simple option for passing variables which we will quickly show. However, we generally prefer the former method.

Passing Variables with FlashVars

As you saw in the initial code that we posted, you will often use parameter tags to configure certain settings such as quality or background color. Well, you can also use the tags to set your own variables by taking advantage of the FlashVars parameter. The sample code is shown below:

<param name="flashvars" value="movie=mymovie3.flv" />

Passing Multiple Variables

All of our examples have only shown how you’d pass a single variable. But you can just as easily pass multiple variables to your flash movie. To do so you just modify the query string, and separate each set of variables with an ampersand (&).

Take a look at the example below. We are passing some hypothetical variables to a flash element which displays what we ate last night, assuming we had baked brie, mushroom ravioli, lamb stew, and peach creme brulee. (Note: We’ve replaced spaces with their html equivalent %20.)

appetizer=baked%20brie&entre=mushroom%20ravioli%20and%20lamb%20stew&dessert=peach%20creme%20brulee

The above techniques are widely used because they enable efficiency and limit redundancy. If you have multiple copies of the same application for different web pages, you should consider implementing this technique.