Accessibility

Flash Article

 

Controlling Flash video with FLVPlayback programming


Table of Contents

Getting started

This section provides a quick overview of what you'll need to know to begin customizing video playback with ActionScript 3.0. If you have already installed the behaviors and have previous experience developing using ActionScript 3.0, working with Flash video and the FLVPlayback component, then you may wish to skip ahead to the following pages of this article. Otherwise, it is important that you have a full understanding of the following information to ensure you have the foundation needed to programmatically modify the FLVPlayback successfully.

Before you start

If you haven't done so already, read up on the documentation about encoding Flash Video and working with the FLVPlayback component to display Flash Video:

To follow along with the instructions in this article, you will need to have an ActionScript 3.0 FLVPlayback component and an FLV file to use with the provided code examples.

Understanding the sample files

Download the provided sample files and uncompress the folder to get working code examples that control a short FLV file. Notice that each of the files is set up consistently with two layers on the main timeline: assets and actions. The assets layer holds the FLVPlayback component (named display) and the actions layer contains the code. Use the sample files as a guide to compare with the files you create or use them as a foundation to begin building your own project.

Setting up your file to run the code samples

You'll need three things to get started; an FLV file, an FLVPlayback component instance, and an actions layer with a few lines of code. To use the code samples in this article, do the following:

  1. Create a folder on your desktop or select a location where you'd like to save your files. Save a copy of the FLV file from the sample files folder into this location.
  2. Create an ActionScript 3.0 FLA file using Flash CS3 Professional. Save the file next to the FLV file as described in the last step.
  3. Rename the default layer 1 to assets.
  4. Open the Components panel and drag an instance of the FLVPlayback component from the Video folder.

    Note: While it's possible to create and position the FLVPlayback component and other UI components programmatically, the components must first be copied from the Components panel to the Library of the current FLA file. For the purposes of this article, we'll go one step further and suggest that you start your file by dragging an FLVPlayback component to the stage, naming its instance, and positioning it visually as desired.

  5. Place the component on the stage and resize its dimensions as desired using the Free Transform tool.
  6. With the component selected, name the instance in the Property inspector.

    Note: The examples in article use the instance name display for the FLVPlayback instance. Either use this instance name or change the name in your code to match the instance name of your video component.

  7. Create a new layer and name it actions.
  8. Select the keyframe on Frame 1 of the actions layer and open the Actions panel (F9).
  9. Copy the code example from the article or the sample file and paste it into the text editor of the Actions panel.
  10. Update the flvControl variable to the video component instance name you used and update the flvSource variable with the URL of your FLV file.
  11. Export the SWF (Control > Enter) or publish the movie to see the results.

Understanding your working files

Once you've run through the steps above, you'll have a handful of files to work with including the FLV file, possibly an HTML file, the master FLA file, the SWF file, and the skin SWF file (if a skin is used). You will upload all of these files, except the FLA file, to the server for the deployment of progressive video.

For full details on the ActionScript 3.0 FLVPlayback API, see the following section of the Flash CS3 Help pages; ActionScript 3.0 Language and Components Reference > All Classes > FLVPlayback class.