• 
• Forums
• Calendar
• CMX Info
• Join CMX
• My CMX

•  Home
•  All Content
•  Dreamweaver
•  ColdFusion
•  Flash
•  Fireworks
•  Freehand

• Articles
• Tutorials
• Extensions

• Articles
• Tutorials
• Extensions

• Articles
• Tutorials
• Extensions

• Articles
• Tutorials
• Extensions

• Articles
• Tutorials
• Extensions

• Articles
• Tutorials

Latest Free Content

• Get the Time of Day as a MySQL Developer - Part 1: Data Types
• Introducing CMX JumpStart Agra
• Ribbons Using the Warp Tool
• Star Burst Lines (Polar Coordinates)
• Call To Action - Is Your Web Site Working For You?

View All
Free Content

Accessibility

• Main content
• Log in
• Power Search
• Today's Content

Flash Video Cue Points: Part 3 - Building a List of Embedded Cue Points

By: Robert Reinhardt

Page 1 of 3

Set for printing

Next

In the last tutorial of this series, you learned how to create embedded navigation cue points with Flash Video (FLV) files. Such cue points are automatically recognized by the new FLVPlayback component that ships with Flash Pro 8, and most skins used by this component enable you to seek forward and backward among cue points. However, if you have several cue points in your FLV file or if you want to offer an alternative method of jumping to cue points, you need to code your own solution. Using ActionScript, you can read the cue points from a Flash Video (FLV) file and populate a list with the cue point names, or, alternatively, with additional data that you prescribe for each cue point. In this installment, you learn how to read navigation cue points from a Flash Video (FLV) file and populate a List component with the cue point names. In the next tutorial of this series, you learn how to encode an FLV file with extra data on each cue point.

CAUTION: In order to add navigation cue points to compressed Flash Video files with Flash 8, you need to use Flash Professional 8.

Reading Cue Point Data

If you're using your own custom code to load and play Flash Video (FLV) files with the NetStream class, you can use the NetStream.onMetaData() method to read any cue point data that might exist in the video file. In the source files of this tutorial, extract the stella_dog_tricks.flv file, and perform the following steps:

1. In Flash 8, create a new Flash document. Save the document as cuepoints_read.fla, in the same location as the stella_dog_tricks.flv you extracted from the source files.
2. Rename Layer 1 to actions. Select frame 1 of this layer, and open the Actions panel (F9, or Option+F9 on Mac). Insert the following code:

   var nc:NetConnection = new NetConnection();
   nc.connect(null);
   
   var ns:NetStream = new NetStream(nc);
   ns.play("stella_dog_tricks.flv");
   
   ns.onMetaData = function(oMeta:Object){
      trace("onMetaData >");
      trace("\tNumber of cue points: " + oMeta.cuePoints.length);
      for(var i:Number = 0; i < oMeta.cuePoints.length; i++){
         var oCue:Object = oMeta.cuePoints[i];
         trace("\t\t" + i + ": " + oCue.name + ", " + oCue.type);
      }
   };

3. Save the Flash document, and test it (Ctrl/Cmd+Enter). When the Flash movie loads the FLV file, the onMetaData() method will invoke as soon as the first bits of the FLV file have downloaded into the Flash Player. If cue points have been added to the FLV file, the trace() statements tell you how many cue points exist, and the name and type of each cue point. The metadata object, oInfo, contains an array named cuePoints. Each element in this array is a cue point object, oCue, with two properties: name and type. The name value is whatever you typed into the Name column of the Cue Points tab in the Flash 8 Video Encoder or the Flash Pro 8 Video Import wizard. The type value is either "navigation" or "event" for embedded cue points. The following text should appear in your Output panel:

   onMetaData >
      Number of cue points: 3
         0: trick_1, navigation
         1: trick_2, navigation
         2: trick_3, navigation

Tip: To review usage of the Cue Points tab in the Flash Pro 8 Video Import wizard, read my previous article in this series.

If you're using the FLVPlayback component, you can also read the cue point data from the FLV file when the metadataReceived event is broadcast by the component. To understand how this event works, perform the following steps:

1. Open the cuepoints_nav.fla file from the source files of this tutorial. This is the completed file from the last tutorial in this series. Resave this file as cuepoints_read_flvplayback.fla.
2. Create a new layer named actions. Select frame 1 of this layer, and open the Actions panel. Insert the following code:

   import mx.video.FLVPlayback;
   import mx.utils.Delegate;
   
   var cfp:FLVPlayback;
   
   function onVideoMeta(oEvent:Object):Void {
      trace("onVideoMeta >");
   
      // retrieve metadata from FLVPlayback instance
      var oMeta:Object = oEvent.target.metadata;
   
      // retrieve cue point data from video
      var aCues:Array = oMeta.cuePoints;
   
      // loop through cue point data and
      // find navigation cue points
      trace("\tcue points:");
      for(var i:Number = 0; i < aCues.length; i++){
         var oCue:Object = aCues[i];
         trace("\t\t" + i + ": name: " + oCue.name + ", type: " + oCue.type);
      }
   }
   
   cfp.addEventListener("metadataReceived", Delegate.create(this, onVideoMeta));

3. Save the document, and test it (Ctrl/Cmd+Enter). When the Flash movie loads the FLV file (already specified in the Parameters tab of the cfp instance), the Output panel should display the following cue point information:

   onVideoMeta >
      cue points:
         0: name: trick_1, type: navigation
         1: name: trick_2, type: navigation
         2: name: trick_3, type: navigation

Page 1 of 3 1 2 3 Next

Download Support Files

Keywords
cue points, embedded, navigation cue points, FLVPlayback component