Page 3. Controlling Flash Video

Creating custom controls of video files (flv) is very easy in Flash CS3. While no ActionScript programming is required to make a nice looking video application, a little bit of programming goes a long way to giving you very precise control of a video. On this page we will provide the basics of importing flv files, the ActionScript code necessary for customizing the video controls, and show how to wrap things up to work in conjunction with the ideas on the previous page so that you can combine swf control and flv control in the same managing container.

Before starting this tutorial we strongly recommend you go through the video tutorial Creating a video application with components from the Adobe website. We will enumerate the steps below, but we will not go into a great deal of detail since this very nice video already exists.

Inserting an flv file into a your Flash movie

  1. Open a new Flash File (ActionSscript 3.0)
  2. Open the Components panel (Window > Components)
  3. Expand the Video list by clicking on the +
  4. Drag an instance of FLVPlayback from the Library panel onto the Stage in the desired spot.
  5. With this FLVPlayback object selected, type an instance name into the Property panel. We will use the name videoInstructions in the example below.
  6. Open the Parameters panel (by clicking on the appropriate tab of the Property panel) and make the following changes.
    • If your "skin" property does not say "None", click the magnifying glass next to it and choose "None" at the top of the list of options. (This removes the predefined control package so we can customize our own.)
    • Click on the "source" property and then on the magnifying glass icon to the right. You will get a dialog box for the selection of a video source file. Browse to and select your desired flv file. I will use the one called instructions.flv that will be relevant in our final application.
    • If you save and test your movie at this point, you should see the video load and start playing automatically.

Adding custom controls

Since our example will be short video instructions to an activity, we will add a "play/pause button," a "seek bar," and a "volume control." You can get a sense of all of your options by perusing the help files for the FLVPlayback class or by scanning the other items in the Components panel under Video.

  1. Return to the Components panel (Window > Components) and re-expand the Video list if necessary.
  2. Drag each of the following components onto the stage and position them where you would like: PlayPauseButton, SeekBar, and VoumeBar. Give each of these an instance name, using the names player, seeker, and volBar for consistency with the code below.
  3. Add the following lines of code to the Actions panel:

 

videoInstructions.playPauseButton = player;

videoInstructions.seekBar = seeker;

videoInstructions.volumeBar = volBar;

 

At this point, you will have an swf file consisting of one frame containing the video container with our custom controls. The swf file will behave as illustrated here. (We have not embedded this file within the page because video with sound that starts by itself can be annoying.)

Automatic response when the video is complete

Not only would we like to be able to continue in our main managing Flash movie when a video has finished playing, but we would like to do it in a way that is consistent with our work on the first two pages of this tutorial. In other words, the script that we wrote for the managing movie on page 2 can remain unchanged as long as we build the fla file containing the video clip properly. Recall that on page 2 we tested when a loaded swf was finished by comparing its currentFrame property to its totalFrames property. To make this work with an swf containing a video, we simply need to add a blank second frame and write instructions so that we go to the second frame when the video (in the first frame) has finished playing. This can be accomplished in just a few short steps.

In the Timeline panel of the fla file that you created above, click on Frame 2 (of the only layer you have presumably) and select Timeline > Blank Keyframe from the Insert menu. Then click on Frame 1 and repeat this step. You should now have blank key frames in Frames 1 and 3, and you should add the single line of code "stop();" to the Actions for each of these two new frames. Your timeline will look more or less like the screen shot shown at the right.

Once this is done, we want the following block of code to appear in the Actions panel in Frame 2 of our managing movie. Note that the three lines we used before are still here, but now we have another block of code that simply listens for the COMPLETE VideoEvent to occur and moves to the next frame (i.e., Frame 3) when it does.

Screen Short of Frame Organization

 

import fl.video.FLVPlayback;

import fl.video.VideoEvent;

 

videoInstructions.playPauseButton = player;

videoInstructions.seekBar = seeker;

videoInstructions.volumeBar = volBar;

 

videoInstructions.addEventListener(VideoEvent.COMPLETE, goNext);

 

function goNext(e:VideoEvent):void {

nextFrame();

}

 

stop();

 

With these two changes, the swf file is ready to be incorporated into our managing. Because we have a stop(); in the blank Frame 1, there is no point testing this file by itself. However, with these changes we can integrate this seamlessly into our previous work.

Downloads

  • Flash CS3 file video2.fla is the final file discussed above. Again, if you test this movie, you will simply see it stop in blank Frame 1.
  • The file instructions.flv was created on a computer using Camtasia.

Putting it all together

Let's integrate this new clip with embedded video into the work that we did on page 2. Open the file manager3.fla that you created in that step and add the string "video2.swf" to the array clips defined at the top of the code in the Actions panel. In our example, we will make the video clip be the second loaded clip by changing the first line of code to read as follows:

 

var clips:Array = ["clip0.swf", "video2.swf", "clip1.swf", "clip2.swf"];

 

The result of this change is shown at this link.

Downloads

Back to Intermediate Tutorials              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.