Data Binding and Video in Flash Professional 8

In this tutorial I update a similar one done for Flash MX 2004 by showing you how data binding video can be done in Flash Professional 8. You are about to discover it is even easier to accomplish than in the past.

This is the project we will be constructing:

The Plan:

The plan is fairly simple. The video will play in an FLVPlayback Component. The actual playback will be managed by the FLVPlayback component and the videos will be selected from a pop down list in a ComboBox component.

The key to this exercise is choosing a video and getting it to appear in the FLVPlayback Component. This is accomplished by actually "binding" the data in the CombBox to the Playback component.

Building the interface

To start, you are going to need a few FLV files. These files will use a progressive download to play so be sure to place them in the same folder as the .swf you will be creating. This folder will ultimately be uploaded to your web server.Also keep the dimensions of the videos to either 240 X 180 or 320 X 240. If they are any larger you will get inconsistent results.

  1. Open Flash and create a new movie that is 475 X 325.
  2. Create two new layers on the timeline and name them:
    • Component
    • VidComponent
    • Interface.

the layers.

Image 1: The layers are created and in place.

  1. Open the FLVPlayback-Player 8 component panel and drag a copy of the FLVPlayback component to the VidComponent layer.
  2. With the FLVPlayback component selected, click the Parameters tab in the Property inspector and set the following parameters:
    • autoPlay : false
    • contentPath: Select a video. I used Mamma.flv
    • skin: MojaveExternalAll
  3. Open the UI Components and drag a copy of the ComboBox component to the Combo layer.
  4. Give this component the instance name of cbCombo.
  5. Select the Background layer, click the Text tool on the stage and enter the text "Pick a video:". Format the text and then drag it above the ComboBox Component or somewhere else on the stage.
  6. Save the movie.

The stage is set.

Image 2: The interface elements are on the stage.

Binding the Combo Box to the FLVPlayback component

The interesting thing about the FLVPlayback component is that it can be "bound" to the UI components. In the case of this exercise, the data you will soon enter into the ComboBox will be used to choose the video to play in the Playback component. By binding the data in the ComboBox you are able to broadcast and handle events across all of the UI components.

Though we are using a ComboBox component you can just as easily use a ListBox component for the same purposes.

  1. Select the ComboBox component on the stage
  2. Click the magnifying glass in the Data area of the Property inspector to open the Data values input box.
  3. Click the default value strip and enter the name of the FLV file, including extension.
  4. Add a new value by clicking the + sign.
  5. Continue adding one data value for each movie.
  6. When you are finished, click OK to close the dialog box.

The videos used as data

Image 3: The FLV files are listed as the data for the ComboBox.

  1. Repeat the steps listed above to add the labels for the ComboBox . These are the labels that will be visible when the movie plays.
  2. When you are finished, click OK to close the dialog box.

Be sure to add the labels in same order that the FLV files were added into the data area.

The labels

Image 4 : The labels are entered in the same order they appear in the data area.

Binding the data

With labels and the data created for the ComboBox, you now have to "bind" the FLV's to the MediaDisplay component. Here's how:

  1. Select the ComboBox on the stage.
  2. Open the Component inspector and click the Bindings tab.
  3. Add a new binding by clicking the + sign to open the Add Binding dialog box.
  4. Select the binding: selectedItem:Object
  5. Click the Use Path Expression to select it.
  6. Enter "data" into the input box. This tells the component what is being used.
  7. Click OK to close the dialog box.
  8. The binding named "selectedItem:data" will appear in the Component Inspector.

The binding

Image 5: The data in the ComboBox component will be used for the binding.

Now that the data in the ComboBox is to be used, it needs to be bound to the FLVPlayback component. Here's how:

  1. Click the binding you have just created to select it.
  2. Double click the Bound To property in the binding list. The Bound To dialog box will open.
  3. Select the MediaDisplay component in the left column.
  4. Select contentPath:String in the Schema Location list in the right column.
  5. Click OK to close the dialog box.
  6. Save the movie and test it.
  7. If everything works, publish the movie.

The binding to the video component is created

Image 6: The data in the ComboBox,which is a string, is bound to the FLVPlayback component.

Another take on this project:

As I am fond of saying: There are 6,000 ways of doing everything in this business.

This tutorial is no different

When I posted this tutorial, my colleague, Rob Reinhardt, posted a similar version to the Community MX site.In his version he uses a ListBox component and a slightly different approach to data binding. Check it out.

CreativeCommons license