Providing Data and Event Handlers for Components

Visual data binding is just one way to pass data and events between components — you can also write your own ActionScript code to grab events from components or populate components with customized data. In this section, you learn how to work with data and events without using the visual data binding features of the Bindings and Schema tabs.

Adding Code to Movies Using Visual Data Binding

In the last section, you learned how to build a list of video clips that could initiate playback of .flv files with the FLVPlayback component. Learn how to finesse the interactivity of this movie using ActionScript.

On the CD-ROM 

You can continue to use the video_list.fla document you created in the last section. Or, you can make a copy of the same file located in the ch34/video_list folder on this book's CD-ROM. If you didn't complete the exercise from the last section, make sure you also copy the video folder and the video.xml document.

1. Open the video_list.fla document in Flash Pro 8. Test the movie (Ctrl+Enter to z+Enter) to review the movie's features. When the movie loads, the FLVPlayback component displays the progress animation as it waits for you to select a clip in the List component. Because this interface is a tad awkward, you'll want to fix it so that the first clip automatically plays when the movie starts.

2. Resave the document as video_list_select.fla.

3. Select frame 1 of the actions layer. Open the Actions panel, and add the bold code shown in Listing 34-2. This code creates a function named onDataLoad, which is invoked when the XML data loads into the cxc instance. Here, the first item in the List component is selected, and the contentPath of the cfp instance is set to the current data value of the List component, retrieved with the value property of the List class.

   Listing 34-2: Auto-playing the First Video Clip

    import mx.utils.Delegate; var cxc:mx.data.components.XMLConnector; var cli:mx.controls.List; var cfp:mx.video.FLVPlayback; function onDataLoad(oEvent:Object):Void {    cli.selectedIndex = 0;    cfp.contentPath = cli.value.toString(); } cxc.addEventListener("result", Delegate.create(this, onDataLoad)); cxc.trigger(); 

4. Save the Flash document, and test it (Ctrl+Enter or z+Enter). When the XML data loads into the movie, the first item in the List component automatically loads and plays in the FLVPlayback component.

On the CD-ROM 

You can find the completed file, video_list_select.fla, in the ch34/video_list folder on this book's CD-ROM.

Making a List of Cue Points for a Video Clip

This section continues an exercise using the FLVPlayback component from Chapter 17, "Displaying Video." You learn how to read the metadata from an .flv file loaded into an FLVPlayback component, and take the cue point data from the metadata to populate a List component. The List component can then serve as a table of contents for the video clip. When the user selects a cue point label in the list, the FLVPlayback component seeks to that cue point in the .flv file. The FLVPlayback component also informs the List component of the current cue point, so that the cue point label highlights automatically as the movie plays.

Cross-Reference 

Read our coverage of embedded cue points in Chapter 17, "Displaying Video," to understand how you can add cue points to an .flv file with the new Flash 8 Video Encoder application, or the Video Import Wizard of Flash Pro 8.

On the CD-ROM 

Before you begin this exercise, copy the ch17/cuepoints folder from this book's CD-ROM to your computer.

1. Open the cuepoints_embedded.fla file from your copy of the cuepoints folder taken from the book's CD-ROM. Resave this document as cuepoints_embedded_list.fla.

2. Move the cfp instance (the FLVPlayback component) to the right of the Stage, leaving room for a List component to the left of it.

3. Create a new layer named cli, and place the layer anywhere below the actions layer. On frame 1 of the cli layer, add an instance of the List component. In the Property inspector, name the instance cli. Use the Free Transform tool to stretch the width and height of the instance to fit along the left side of the cfp instance, as shown in Figure 34-12.

4. Now that you have a List component in the Flash movie, you can use the cli instance to display the embedded cue points in the .flv file used by the FLVPlayback component. Select frame 1 of the actions layer, and open the Actions panel. Add the bold code shown in Listing 34-3. To understand the modifications, let's work from the bottom up.

   Listing 34-3: Capturing Metadata from the .flv File

    import mx.video.FLVPlayback; import mx.utils.Delegate; import flash.filters.DropShadowFilter; import com.themakers.effects.BlurFader; var cfp:FLVPlayback; var cli:mx.controls.List; var tLabel:TextField; var bScrubbing:Boolean = false; var nUpdateID:Number; function onVideoMarker(oEvent:Object):Void {    var oCue:Object = oEvent.info;    var sLabel:String = oCue.parameters.label;    var sPos:String = oCue.parameters.position;    if(oCue.type == "navigation" && sLabel != undefined){       showLabel(sLabel, sPos);       selectListItem(oCue.name);    } else if(oCue.type == "event" && !bScrubbing){       removeLabel();    } } function showLabel(sLabel:String, sPos:String):Void {    [No changes in this function...] } function removeLabel():Void {    [No changes in this function...] } function onScrubStart():Void {    [No changes in this function...] } function onScrubFinish():Void {    [No changes in this function...] } function updateLabel():Void {    [No changes in this function...] } function onVideoMeta(oEvent:Object):Void {    var oMeta:Object = oEvent.target.metadata;    var aCues:Array = oMeta.cuePoints;    for(var i:Number = 0; i < aCues.length; i++){       var oCue:Object = aCues[i];       if(oCue.type == "navigation"){          cli.addItem({label: oCue.parameters.label, data: oCue.name});       }    } } function onCueSelect(oEvent:Object):Void {    cfp.seekToNavCuePoint(oEvent.target.value); } function selectListItem(sCueName:String):Void {    for(var i:Number = 0; i < cli.dataProvider.length; i++){       var oItem:Object = cli.getItemAt(i);       if(oItem.data == sCueName){          cli.selectedIndex = i;          break;       }    } } cfp.addEventListener("cuePoint", Delegate.create(this, onVideoMarker)); cfp.addEventListener("scrubStart", Delegate.create(this, onScrubStart)); cfp.addEventListener("scrubFinish", Delegate.create(this, onScrubFinish)); cfp.addEventListener("metadataReceived", Delegate.create(this, onVideoMeta)); cli.addEventListener("change", Delegate.create(this, onCueSelect)); 

   • New event listeners: The last two lines of code add new event listeners to t he script. The second to last line of code adds the onVideoMeta() function as a listener of the "metadataReceived" event from the cfp instance (the FLVPlayback component). When the .flv file played by the component is loaded, the onVideoMeta() function is invoked. The last line of code adds the onCueSelect() function as a listener of the "change" event from the cli instance (the List component). Whenever the user changes the selection in the List component, the onCueSelect() function is invoked.

   • onVideoMeta() function: This function retrieves the metadata from the .flv file playing in the FLVPlayback component. Within the metadata property, you can access the array of embedded cue points for the video clip. A for() loop cycles through each cue point object in the array, and adds the label parameter and name property values as a new item in the List component.

   • onCueSelect() function: This function is invoked whenever a user selects a new cue name in the List component. Because the cue point's name value is stored as a data property of the selected item in the List component, you can access the value property of the cli instance (oEvent.target) and pass the cue name to the seekToNavCuePoint() method of the cfp instance. The seekToNavCuePoint() method enables you to jump to a specific navigation cue point.

   • selectListItem() function: This function is called from the onVideoMarker() function whenever a navigation cue point is reached during playback. The cue name is passed to the selectListItem() function, where the name is looked up within the dataProvider of the cli instance. When the name is found, the appropriate index is selected in the List component.

5. Save the Flash document, and test it (Ctrl+Enter or z+Enter). When the .flv file is loaded into the FLVPlayback component, the metadata values are passed to the List component, where the label names are displayed. When you select one of the cue point labels in the List component, the video jumps to that cue point.

Figure 34-12: The cli instance to the left of the cfp instance

On the CD-ROM 

You can find the completed file, cuepoints_embedded_list.fla, in the ch34/video_cues folder. The video asset, HomeGarden_Full-Res.flv, is located in the ch17/cue points folder. This .flv file is required for the Flash movie.

Creating Lists with the DataGrid Component

If you need to display data in rows and columns, you might want to consider using the DataGrid component. You can use this component for sorting and displaying any type of ordered data, such as employee directories, product listings, and more. In this section, you learn how to populate a DataGrid component and control the number of columns displayed with the grid.

Note 

For this exercise, all of the content in the Flash movie is added to the Stage at run time, programmatically in ActionScript. Also, the DataGrid component is only available in Flash Pro 8.

1. Create a new Flash document, and save it as datagrid_basic.fla.

2. Open the Components panel, and expand the User Interface grouping. Drag an instance of the DataGrid component to the Stage.

3. Delete the DataGrid instance on the Stage. You only need to have the DataGrid component in the movie's Library panel — the component is automatically exported for ActionScript. You add the component programmatically in the next step.

4. Rename Layer 1 to actions. Select frame 1 of the actions layer, and open the Actions panel (F9, Option+F9). Add the following code. This code creates a new instance of the DataGrid component named cdg, assigns a width of 400 pixels and a height of 300 pixels, and positions it at the X, Y coordinate of 30, 30 on the Stage.

    import mx.controls.DataGrid; var cdg:DataGrid = createClassObject(DataGrid, "cdg", 1); cdg.setSize(400, 300); cdg.move(30, 30); 

5. Save the Flash document, and test it (Ctrl+Enter or z+Enter). When the movie loads, an empty DataGrid component displays on the Stage, as shown in Figure 34-13.

6. To add some data to the DataGrid instance, add the following code to the script on frame 1 of the actions layer. This code creates a new array named aData. The array contains three nested objects, each with the same property names: name, sign, and food. The array is then assigned as the dataProvider value of the cdg instance.

    var aData:Array = [       {name: "Robert Reinhardt", sign: "Scorpio", food: "Thai"},       {name: "John Smith", sign: "Leo", food: "Italian"},       {name: "Jimmy Calhoun", sign: "Aquarius", food: "Chinese"}         ]; cdg.dataProvider = aData; 

7. Save the Flash document, and test it (Ctrl+Enter or z+Enter). You should now see three columns in the DataGrid instance with the data specified in the aData array, as shown in Figure 34-14.

8. The last task to complete for this exercise is to assign more descriptive header text to the columns. By default, the column names of a DataGrid component are simply the property names for each "record" in the DataGrid instance, as shown in Figure 34-14. To set custom text headers, add the bold code shown in Listing 34-4.

   Listing 34-4: Creating Custom Header Text for DataGrid Columns

    import mx.controls.DataGrid; import mx.controls.gridclasses.DataGridColumn; var cdg:DataGrid = createClassObject(DataGrid, "cdg", 1); cdg.setSize(400, 300); cdg.move(30, 30); var aData:Array = [                {name: "Robert Reinhardt", sign: "Scorpio", food: "Thai"},                {name: "John Smith", sign: "Leo", food: "Italian"},                {name: "Jimmy Calhoun", sign: "Aquarius", food: "Chinese"}                ]; cdg.dataProvider = aData; var aColNames:Array = ["Name", "Sign", "Food Preference"]; for(var i:Number = 0; i < aColNames.length; i++){    var dgc:DataGridColumn = cdg.getColumnAt(i);    dgc.headerText = aColNames[i]; } 

   Here, you create a new array named aColNames. Each String value in the array represents the new text to be displayed for the columns of the DataGrid instance. The order of the values matches the columns from left to right. The for() loop cycles through the array, fetching the DataGridColumn object for each column in the DataGrid instance, cdg. The headerText property of each DataGridColumn column is set to the matching value in the aColNames array.

9. Save the document, and test it (Ctrl+Enter or z+Enter). The header text for each column should now display the custom text values you specified in the aColNames array, as shown in Figure 34-15.

Figure 34-13: The empty DataGrid instance

Figure 34-14: The new data in the DataGrid component

Figure 34-15: The custom header text for each column

On the CD-ROM 

You can find the completed file, datagrid_basic.fla, in the ch34/datagrid folder of this book's CD-ROM. You can find a more advanced example of the DataGrid component, datagrid_advanced.fla, in the same folder. This version of the file uses Data BindingClasses, along with the DataSet component, to more efficiently distribute data in the Flash movie.

Web Resource 

We'd like to know what you think about this chapter. Visit www.flashsupport.com/feedback to send us your comments.