Leadership

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


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 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 <Instance Name>, 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!

John Lee is a consultant specializing in design and illustration and a freelance technical writer. You can visit his Web site at johnleestudio.com.

21 comments
ellychang
ellychang

I have a problem - when I create the file in actionscript 2 and uplaod to the server, the video plays but the buttons don't work. When I do it in actionscript 3, the buttons work but the videos don't play.. Can you please let me know how I can fix this? Thank you,

tarun.khurana9928
tarun.khurana9928

I wan to change position of volume bar. Means right now it is in horizontal position i want it vertical position. please give me solution.

enebelic
enebelic

I tried it,and it works perfectly with my video and I love it,thanks very much for your efforts.

ravenhash
ravenhash

can anyone please explain how to show that the flash movie is loading

battend
battend

Please don't write posts in block capitals. It is much more difficult to read than a proper font.

michael.gunn
michael.gunn

How do I convert an MPG or AVI into a flash video?

max.sherman
max.sherman

...and then what? How do we (me) get it onto our website? It is no good just sitting and playing well in the PC. Max

samirk
samirk

it would have been better if the article would describe the way to create a truely customisable FLV player using AS3 classes.

janet.cook
janet.cook

This looks great and I'd like to try it with my website design students. Do you know if this Will work with previous versions of Flash or is this unique to the upgrade? Our school has Flash 8 and no funds to upgrade (site licenses are expensive!). Thanks, janet

cSpeak
cSpeak

If you go to the same components menu as where you added the "PlayPauseButton" you need to select the "BufferingBar" option. Select your BufferingBar and view it's properties and an Instance name "bufferingbar" Once you're done with that, click on the top layer "ActionScript". Go to the Window menu and select "Actions" (or press F9) and add the following line without quotes: "myvideo.bufferingBar = bufferingbar;" Your action script should now look like this: myvideo.playPauseButton = playpause; myvideo.seekBar = seekvideo; myvideo.volumeBar = volslide; myvideo.bufferingBar = bufferingbar; This is my first time ever working with flash or ActionScript but it worked for me. Let me know if you get it to work.

studio.johnlee
studio.johnlee

If you are unfamiliar with embedding a Flash movie on a web page, the easiest solution would be to let Flash generate an HTML page with the necessary code for you. From the File menu, choose the Publish Settings option. In the dialog box that appears, click on the Formats tab and check only the Flash and HTML boxes. Then, modify the names of the HTML and Flash movies to your preference and choose the Publish Destination by clicking on the corresponding folders for the HTML and Flash documents. Click the Publish button at the bottom of the dialog box. Your web page and Flash movie will be created on your hard drive, along with a third Javascript file called "AC_RunActiveContent.js" and you can then upload them to your server. Be certain that the FLV, SWF, HTML and JS files are all uploaded to the server and are in the same directory!

C-3PO
C-3PO

Yes, I've had the same problem... I've created a nice Flash FLV, created a player within CS2 and it runs beautifully on my computer, but when I upload the files to the server, nothing appears to work... Are there server side components that are required by the hosting company?

Spiritusindomit
Spiritusindomit

Download the spec and use the api calls for video control?

sanderson
sanderson

Will this run if your web site is running over SSL?

studio.johnlee
studio.johnlee

Sorry, the Video Components are exclusive to Flash CS3, since they require ActionScript 3.0 to function as illustrated in the article. Flash 8 only utilizes ActionScript 2.0.

scott.sibbald
scott.sibbald

I've tried to modify this so that the (FLV, SWF, and JS) files can live in one directory, while the (HTML) lives in a different directory, but no luck. How can I do this? Thanks!

LaJuan
LaJuan

If your Hosting provider is using Windows Server 2003, ask if they allow serving of FLV files. By default Windows Server 2003 and IIS does not serve FLV files. Please see Adobe tech doc - http://www.adobe.com/go/tn_19439

studio.johnlee
studio.johnlee

No Server-side components should be necessary, but make sure that: 1) There are no spaces or special characters in the filenames of the FLV, HTML or Flash files, 2) You have also uploaded the "AC_RunActiveContent.js" file that Flash automatically generates, and 3) All four files (.flv, .htm, .swf and .js) are in the same directory.

johnedgley
johnedgley

@johnlee; I don't get it, John, - in your reply to C-3PO who has used CS2, you imply strongly that he should not have any problems... which is it please, or have I just misunderstood....(more than likely!) p.s. I do realise this is a very old thread - but I found it whilst doing a current search for info!