Passing Variables Using Flash and Dreamweaver

CATEGORIES: Dreamweaver, Flash, Tutorials | Justin Finley | March 21, 2007

This tutorial will show you how to set paths to media content by passing variables to flash using html, as opposed to “hard coding” paths inside of flash. This allows for slightly more dynamic flash video delivery (especially if used as part of a bigger application), easier and faster updateability, and just less hassle overall.

Let’s get started by creating a new .FLA file.

First thing to do is to set up our layers. We will need one layer named “actions” that will hold all of our script and another that will have our video players on it, so we will name it “player”.

The size of the stage and any video players that you will use should depend on your personal project’s specs. For this tutorial, the video I will be delivering is 320×240, so I will set my stage to 320×300 just to have a little extra room at the bottom of the stage and make space for the FLVPlayback component’s controls.
Create a new folder on your desktop, name it anything you like, and save your .fla document to this new folder.

Next thing we will do is set up a local file structure. Usually this would be on a remote server, but for this tutorial we will be testing right off of our own desktop machine. The folder I just created will contain my working .fla document (for tutorial purposes), a .swf file, html file, and the FLV Playback player’s skin .swf. Also, inside of that folder I will create another folder labeled “video”, and in this folder I will keep the .flv video file that I will be delivering, which is named “psworld.flv”.

The scripting that is used to make this work, while very similar, differs slightly between the FLVPlayback Component and the MediaDisplay Component. I will show you how to set the FLVPlayer first, followed by the MediaDisplay.

FLVPlayback Component.

Step 1

Open the Components window, Window>Components (Ctl+F7), under FLV PLayback - Player 8, click-and-drag the FLVPlayback component onto the stage in frame 1 of the “player” layer.

Step 2

Now, what we would usually do here to set a video path would be to open the Component Inspector (Window>Component Inspector or Alt+F7), and enter the path to our video right where it says “contentPath” , as shown below. The path from my .swf file to the video would be “video/psworld.flv”. With this path set, when you test the movie (Ctl+Enter), you should see the video play.

The video I am using for demonstration purposes is courtesy of Step 3

Open the Component Inspector (Window>Component Inspector or Alt+F7), and delete the path from the “contentPath” field. Now, with the FLVPlayback component selected on the stage, give it an instance name of “player” in the Properties Inspector so that we may refer to it by this name in the Actionscript.

Step 4

Now we will set up our Actionscript.
Select the blank keyframe in frame 1 of the actions layer, and open the Actions window (Window>Actions or F9).

Insert this code:

stop(); var passed:String = video; player.contentPath= video;

Line 1 is a stop function telling the play head to remain on this frame, since it’s the only frame of the movie, its not REALLY necessary…

Next, we define the variable we will use to set the path to our video. In this case, I am going to call the variable “video”. Now, “var passed: string” is saying that the variable we will be creating is a string, or succession of letters and numbers, such as the word video is, and we set that equal to the word “video”. Video, in this instance, could be called anything… waffles, tacos, anything… since we are setting a video, video is appropriate.

The next line sets the FLVPlayback component’s (which we named “player” in the component spector) contentPath to equal the variable video, which we will set with our html code.

Step 5

Last thing left to do is to set the variable in the html. Go to File>Publish Preview>HTML. This will create a html file in the same folder that contains your other project files. As of right now, if you preview this file, you will notice it’s not working. This is because we have not set the variable in our code yet. Open this newly-created html file with Dreamweaver or your other favorite code-editing program.

In my case, I have named my working .fla file “passvariables”, so my .swf file and my html file both share this name. Yours will be dependant on what you named your file originally.

In the html code, you will see where it references the .swf file in 2 places.

To define and pass the “video” variable we created, we will add this onto the end of the .swf path:
?video=video/psworld.flv

which will result in the full path to the .swf being:
passvariables.swf?video=video/psworld.flv

We are defining video as the path “video/psworld.flv”. So, inside the .swf file, where we referenced “video” in the code, that video variable is replaced with “video/psworld.flv”.

Save your html file, and then open it with your favorite browser. The video should now be playing.
The best part is, if we ever need to change the video that is being delivered, all we have to do is edit this single html file.

You can accomplish the same thing using the MediaDisplay Component, however the action scripting varies slightly.

MediaDisplay Component

Delete the FLVPlayback Component off of the stage, open the Components window (Window>Components or Ctl+F7) and drag out the MediaDisplay Component onto the stage. With it selected, give it the instance name “player” in the Properties inspector. By using the same instance name as before, we will only have to alter our action script slightly.

Select the first frame of your actions layer, where you have place all of your code thus far, and open the Actions window. The only thing we will need to change here is the very last line of code.

We will replace this:
player.contentPath= video;

With this:
player.setMedia(video);

Export the new .swf, and simply hit Refresh on your browser. The same video will now play through the MediaDisplay Component.

That does it for this tutorial; hopefully it will save you some valuable time.