How Do I... Create a custom Web user interface for my Flash video?

-[Reshipment]Authorship by John Lee, a consultant specializing in design and illustration and a freelance technical writer

Adobe Flash’s video technology is all over the Web and is an example of how Internet video has finally arrived after overcoming many technological hurdles during the past decade. (Have you ever been to YouTube.com? You may have heard of it.) The latest version of Flash, CS3, makes it extremely easy to build a custom flash video player to show off your Flash Video (.FLV) files.

If you have never used Flash before, don’t be intimidated. Building a custom FLV player is largely a matter of dragging and dropping Flash’s Component objects into a document and scripting only a line or two of very simple ActionScript code. In fact, don’t be surprised if you find yourself jumping head first into ActionScript authoring after you see how easy it is.

If you don’t own a copy of Flash CS3, you can download a fully functioning 30-day trial. Also, you’ll be using a royalty-free FLV file to complete the exercise.

Let’s start by opening Flash CS3 and creating a new file. From the File menu, select the New… option. In the dialog box that appears, select the Type: Flash File ActionScript 3.0. This is important; Flash’s video components are more limited if your Flash File is an ActionScript 2.0 type.

This blog post is also available as a TechRepublic download.

Your layout should look like Figure A.

Figure A



The default layout of the Flash CS3 workspace

At the top of the screen, you will see the Layers palette. It is widely considered a good idea among Flash developers that you should keep the objects in your Flash file on a layer that is separate from an empty layer that will hold your ActionScript code. This makes it easier for another developer to look at your file and know where to look to modify the code. It also prevents you (or someone else, for that matter) from accidentally deleting ActionScript code if you need to throw away a layer that contains objects you wish to delete.

At the bottom of the Layers palette, click the New Layer button. Then, rename the top layer “ActionScript” and rename the bottom layer “Objects.” On the ActionScript layer, click the dot under the padlock icon. This will lock the ActionScript layer and prevent you from placing objects on it, as in Figure B. This is also a good time to save your file. Be certain to save it in the same directory as the sample_movie.flv file you downloaded earlier.

Figure B



Arranging and locking layers

Time to build your video player. Select the “objects” layer to make it the active layer, then go up to the Window menu at the top of the screen and select the Components option. The Components palette will appear, as in Figure C. Click the cross to expand the Video Component tree, if you need to.

Figure C



The Components Palette

From the Components palette, click and drag the FLVPlayback component to the stage. A large black box with some controls should now sit on the stage (Figure D).

Figure D



The FLVPlayback component

Flash was kind enough to provide you with a set of controls, but hey… we’re building our own custom video player, here! Let’s get rid of those things. Click on the video component on the stage to select it and then go down to the Properties palette at the bottom of the screen and click on the Parameters tab. In the dialog box that appears, double-click the Skin option to bring up the Skin selector dialog box. From the Skin pull-down menu, select None and click OK to remove the generic controls on our FLVPlayback component (Figure E).

Figure E



Removing the default video controls from the FLVPlayback component

Next, your video component needs an instance name, which will allow ActionScript to call it. With the Video still selected on the stage, click on the Properties tab and in the field labeled , click and type the name “myvideo” (without the quotation marks) and press the Enter key. (Figure F)

Figure F



Giving the FLVPlayback component an instance name

Now we need to tell the FLVPlayback component which FLV file to play. With the video still selected, click on the Parameters tab again and scroll down to the property labeled “source.” Double-click in the empty field to bring up the dialog box that will let you point the FLVPlayback component to the FLV file you downloaded earlier. Be sure to select the Match Source FLV Dimensions check box. Click OK (Figure G). When you return to the stage, you will find that the FLVPlayback component has resized itself to match the size of the sample movie.

Figure G



Setting the Parameters of the FLV component

Now let’s look at the Components palette again. All of the objects under the Video section are components that can be used to control the FLV on the stage. We can use any or all of these to make our custom player, but for now, just click and drag the PlayPauseButton, SeekBar, and VolumeBar components to the stage, directly under the video (Figure H).

Figure H



Dragging the buttons from the Components panel to the stage

Let’s modify these controls a little more. First, select the SeekBar component. Then right-click on the SeekBar and from the pop-up menu that appears, select the Free Transform option. Then hold down the Alt key, click on the right-hand center anchor, and stretch the SeekBar over to the right to make it take up the length of the video up to the VolumeBar (Figure I).

Figure I



Enlarging the SeekBar

Nice, but we can still modify it a bit more. Click on the PausePlayButton to select it and in the Properties panel, go to the Color pull-down menu and select the Tint option. From the color selection menu, choose a nice blue and keep the effect at 50 percent. (Figure J) You could also repeat this step for the VolumeBar and SeekBar and customize their colors as well.

Figure J



Giving the Play/Pause button a different color

Your button components now need instance names — just like the FLVPlayback component — so that ActionScript can call them and link them to the FLV movie. Click on the PlayPauseButton to select it and in the Properties panel, give it an instance name of “playpause.” (Don’t include the quotes.) Repeat this process, giving the instance names of “seekvideo” to the SeekBar component and “volslide” to the VolumeBar component (Figure K).

Figure K



Giving instance names to all of the video control components

Here’s the part where you get write some ActionScript. Go to the top of the screen and in the Layers palette, select the ActionScript layer. Then, go to the Window menu and select the Actions option. A large pane will appear. This is where you will write your ActionScript code (Figure L).

Figure L



The ActionScript layer selected and the open ActionScript Window

Recall that we gave the FLVPlayback component an instance name of myvideo. We’re going to refer to that in our ActionScript code, as well as referring to the instance names of each one of the three control components.

Click in the right-hand (blank) side of the Actions window and type the following three lines of code. Note: Lettercase is important here — type the code exactly as you see it below, or the Control buttons will not work!

myvideo.playPauseButton = playpause;

myvideo.seekBar = seekvideo;

myvideo.volumeBar = volslide;

Your ActionScript code should display in your Actions panel, as shown in Figure M.

Figure M



The completed ActionScript code

Save the file and test your handiwork by going up to the Control menu and selecting the Test Movie option. When the video loads, be sure to play with all of the controls to make sure that they work. (Figure N)

Figure N



Testing the Flash movie

This is a very simple demonstration of the variety and ease of customization that Flash CS3 and ActionScript 3.0 give you over Flash Video content. Experiment with the other video control components — their placement, colors, and sizes — and go wild!