Working with Visual Data Binding: Building a Video Clip Selector

The visual data binding features of Flash Pro 8 enable you to add external data and interactivity to your Flash movies without typing much (if any!) code in the Actions panel. In this section, you learn how to build a list of video clips to play with the FLVPlayback component.

Note 

You must be using Flash Pro 8 to complete the following exercise.

Have you ever wanted to build a dynamic list of video clips that controls the content of a video-based component? In this section, you learn how to build a Flash movie that loads a list of video clips specified by an XML file. When the user selects one of the clips in a List component, an instance of the FLVPlayback plays the content.

Preparing the Assets

We've already done the work of preparing five video clip files (.flv) to play in the sample user interface. We used Sorenson Squeeze 4.2 to compress the original video source clips of five garden plants.

On the CD-ROM 

You can find these .flv files in the ch34/video_list/video folder of this book's CD-ROM.

Before you proceed, make a copy of the video folder (containing the five .flv files) from the CD-ROM to a location on your computer. For final Web deployment, these video assets should be uploaded to your Web server as well.

Making an XML File

Before you build the Flash movie showcasing the user interface of the project, you create a simple XML file that describes the video assets to be loaded. Complete the following steps in your preferred XML editing tool, such as Macromedia Dreamweaver 8. You can also use a text editor such as Notepad on Windows or TextEdit on Macintosh.

1. Create a new XML (or text) document. Save the file as video.xml, in the same location where you copied the video folder from the previous section. In the Save As dialog box, look for an option that lets you specify the character encoding — you want to save this document as Unicode (UTF-8) text.

   Tip 

   If you're using Macromedia Dreamweaver, choose Modify ð Page Properties to convert the document's encoding to UTF-8. Flash Player 6 and higher prefer to load data saved in UTF-8 encoding.

2. Add the text shown in Listing 34-1. This XML schema defines a parent node of <video>, which has child nodes named <item> describing each video asset. The label value stores the displayed name of the video clip, while the data value stores the URL (relative or absolute) to the video file.

   Listing 34-1: The List of Video Assets

    <?xml version="1.0" encoding="utf-8"?> <video>    <item label="Echinacea" data="video/plant_001.flv" />    <item label="Dalia" data="video/plant_002.flv" />    <item label="Pumpkin" data="video/plant_003.flv" />    <item label="Strawberries" data="video/plant_004.flv" />    <item label="Rose" data="video/plant_005.flv" /> </video> 

3. Save the XML file.

On the CD-ROM 

You can find the completed file, video.xml, in the ch37/video_list folder of this book's CD-ROM.

Now that you have the video assets copied to your computer and the XML file describing those assets created, you can build the Flash movie user interface.

Constructing the Flash Movie

In this section, you create the Flash document featuring the List, XMLConnector, and FLVPlayback components. The XMLConnector component loads the XML file created in the last section, and passes the data to a List component. The List component then displays the list of video clips. When the user clicks an item in the List component, the FLVPlayback component plays the video clip.

1. In Flash Pro 8, create a new Flash document and save it as video_list.fla in the same location as the video.xml file you built in the last section.

2. Rename Layer 1 to cxc. This name stands for component XMLConnector.

3. Open the Components panel (Window ð Components), and expand the Data nesting. Drag an instance of the XMLConnector component to the Stage. You can place the instance anywhere you want, as the icon of the component hides at run time.

4. Select the instance, and open the Property inspector. Name the instance cxc. Click the Parameters tab, and change the URL value to video.xml. Change the direction value to receive — for this sample, you only load XML data into the Flash movie. No data is sent from the Flash movie. Review the settings shown in Figure 34-1.

5. Now, you need to load a sample XML schema for the cxc instance, so that the component knows how to parse the XML data in the video.xml file. With the cxc instance selected, open the Component Inspector panel (Alt+F7 or Option+F7). Select the Schema tab. There, highlight the results entry, and click the document icon button (displaying a blue arrow pointing down). This button enables you to import a sample XML file which Flash 8 can analyze. Keep in mind that this import feature does not store the actual XML data — only the XML schema (that is, the arrangement and names of XML nodes within the document) is stored in the cxc instance. Import the video.xml file you built in the last section. Your Schema tab and results parameter should now resemble Figure 34-2.

   The schema of a component dictates which properties of the component are bindable to other components. If you hadn't imported (or created) a schema for the cxc instance, you wouldn't be able to pass specific pieces of data to other components.

6. Once a schema is defined for the component, you can start to bind properties within that schema to other components. Now you'll bind the label and data properties of the cxc component to a List component. Create a new layer named cli, which stands for component List. In the Components panel, expand the User Interface nesting and drag an instance of the List component to the left half of the Stage.

7. In the Property inspector, name the new List component instance cli. You don't need to add any labels or data to this component in the Parameters tab — that's the job of the XMLConnector component.

8. Select the cxc instance on the Stage, and go back to the Component Inspector panel. Select the Bindings tab. Click the plus ( + ) button to add a new binding. In the Add Binding dialog box, select the item array, as shown in Figure 34-3. This property will be bound to the List component you added earlier. Click OK.

9. With the new binding entry selected in the Bindings tab, change the direction value to out — you want to bind the item data out from the cxc instance to another component.

10. Double-click the bound to field in the Bindings tab. In the Bound To dialog box, select the cli instance in the Component path column. In the Schema location column, choose the dataProvider property. Refer to Figure 34-4. Click OK.

    Tip 

    The XML schema of the video.xml file intentionally uses label and data attributes for each video item, as these names serve as direct mappings to the data provider format of the List component.

11. Before you can test the binding in a Flash movie, you need to tell the XMLConnector component to load the XML file. Create a new layer named actions, and place the layer at the top of the layer stack. Select frame 1 of the actions layer, and open the Actions panel (F9, or Option+F9). Add the following lines of code. The trigger() method of the XMLConnector component instructs the instance to retrieve the XML document you specified in the Property inspector (in Step 4).

     var cxc:mx.data.components.XMLConnector; cxc.trigger(); 

12. Save the Flash document, and test it (Ctrl+Enter or z+Enter). The XML data loads into the cxc instance, which then passes the label and data values of each <item> node to the cli instance (refer to Figure 34-5).

13. Now, you're ready to map the data value of the selected item in the List component to an FLVPlayback component. When the user clicks an item in the cli instance, the video clip for that entry should begin playback. Create a new layer named cfp, and place it below the actions layer. Open the FLV Playback — Player 8 nesting in the Components panel, and drag an instance of the FLVPlayback component to the Stage. Place the instance to the right of the List component.

14. Select the FLVPlayback instance, and name it cfp in the Property inspector. Click the Parameters tab, and choose a skin for the component. For this example, use the SteelExternalAll.swf skin, as shown in Figure 34-6. Also, use the Free Transform tool to stretch the width and height of the List component to line up with the FLVPlayback component.

15. The List component, by default, only has a schema item for the selectedItem property of the List class. Therefore, you need to add the label and data properties to this property of the cli instance. Select the cli instance on the Stage, and open the Component Inspector panel. Click the Schema tab, and highlight the selectedItem entry. Click the smaller plus (+) button, second from the left, in the toolbar of the Schema tab. This button adds a subproperty to the currently selected schema property. Change the field name value to data, as shown in Figure 34-7.

16. Now, you have a bindable property named data in the cli instance. Select the Bindings tab, and click the plus (+) button to add a new binding. (Note that you should already have an existing binding named dataProvider from the previous steps — do not remove this binding.) In the Add Binding dialog box (shown in Figure 34-8), select the new data property and click OK.

17. With the new binding selected in the Bindings tab, double-click the bound to field. In the Bound To dialog box, select the cfp instance in the Component path column. Then, choose the contentPath property in the Schema location column. The data property of the selected item in the List component contains the path to the .flv file, which needs to be passed into the FLVPlayback component to initiate playback (refer to Figure 34-9). Click OK. The Bindings tab should now look like the one in Figure 34-10.

18. Save the Flash document, and test it (Ctrl+Enter or z+Enter). After the XML data loads into the XMLConnector component and displays in the List component, click one of the video clip names in the List component. The .flv file associated with that video clip should then play in the FLVPlayback component, as shown in Figure 34-11.

Figure 34-1: The settings for the cxc instance

Figure 34-2: The Schema tab information for the cxc instance

Figure 34-3: The Add Binding dialog box

Figure 34-4: The Bound To dialog box

Figure 34-5: The XML data populating the List component

Figure 34-6: The FLVPlayback component settings

Figure 34-7: The updated Schema tab of the cli instance

Figure 34-8: The Add Binding dialog box

Figure 34-9: The Bound To dialog box

Figure 34-10: The updated Bindings tab for the List component

Figure 34-11: The selected clip playing in the FLVPlayback component

On the CD-ROM 

You can find the completed files for this exercise in the ch34/video_list folder on this book's CD-ROM.

Note 

If you open the Library panel for the Flash document built in this exercise, you'll find a DataBindingClasses symbol. This component contains all of the ActionScript 2.0 classes necessary to make the features of the Bindings and Schema tabs work. This component weighs about 12 KB in your final .swf file. In the ch34/datagrid folder of this book's CD-ROM, you can find the datagrid_advanced.fla document, which uses the features of the DataBindingClasses more extensively in ActionScript.

You might be wondering how you can auto-select the first entry in the clip list to enable playback of the clip as soon as the movie loads. In the next section, you learn how to add custom ActionScript code to handle events with components.