Passing Variables

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".

Click to enlarge

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 320x240, so I will set my stage to 320x300 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".

Click to enlarge

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.

Click to enlarge

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.

Click to enlarge

The video I am using for demonstration purposes is courtesy of Photoshop World. It's a really awesome educational event for creative professionals, and I highly recommend it if you ever get a chance to go...anyway, back to the tutorial at hand...

This method of setting the content path works fine but does not allow for much flexibility in terms of updatability or dynamics. If I needed to change this .swf in anyway, say, to change the path of the video, or put in a new video, anything at all, I would have to find my original working .fla document (if you even can), open it up, change whatever I need to change, render out a new .swf, upload that .swf and possibly have to open the html document delivering that swf and change it too. As a web developer, we try to keep things as flexible and easy to update as possible, and that just doesn't cut it.

Instead we will use Actionscript to set the path of the video and pass a variable from html to the .swf telling it where to pull the video from. This allows me to just open that one html file, make my change and I'm done. This results in much less hassle than the other method and also conserves server disk space by using only one .swf to deliver multiple videos.

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.

Click to enlarge

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:

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.

Click to enlarge

To define and pass the "video" variable we created, we will add this onto the end of the .swf path:

which will result in the full path to the .swf being:

Click to enlarge

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.

Click to enlarge

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:

With this:

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.