Flash CS3 Documentation

Learning ActionScript 2.0 in Adobe Flash > Working with Images, Sound, and Video > About using FLV video > Working with cue points

Working with cue points

You can use several different kinds of cue points with Flash Video. You can use ActionScript to interact with cue points that you embed in an FLV file (when you create the FLV file), or that you create by using ActionScript.

Navigation cue points  You embed navigation cue points in the FLV stream and FLV metadata packet when you encode the FLV file. You use navigation cue points to let users seek to a specified part of a file.

Event cue points You embed event cue points in the FLV stream and FLV metadata packet when you encode the FLV file. You can write code to handle the events that are triggered at specified points during FLV playback.

ActionScript cue points External cue points that you create by using ActionScript code. You can write code to trigger these cue points in relation to the video's playback. These cue points are less accurate than embedded cue points (up to a tenth of a second), because the video player tracks them separately.

Navigation cue points create a keyframe at the specified cue point location, so you can use code to move a video player's playhead to that location. You can set particular points in an FLV file where you might want users to seek. For example, your video might have multiple chapters or segments, and you can control the video by embedding navigation cue points in the video file.

If you plan to create an application in which you want users to navigate to a cue point, you should create and embed cue points when you encode the file instead of using ActionScript cue points. You should embed the cue points in the FLV file, because they are more accurate to work with. For more information on encoding FLV files with cue points, see Working with cue points in Using Flash.

You can access cue point parameters by writing ActionScript. Cue point parameters are a part of the event object received with the cuePoint event (event.info.parameters). For information on accessing or tracing cue points, see Working with cue points in Using Flash.

Tracing cue points from an FLV file

You can trace the cue points that are embedded in an FLV document using NetStream.onMetaData. You need to recurse the structure of the metadata that returns to see the cue point information.

The following code traces cue points in an FLV file:

var connection_nc:NetConnection = new NetConnection();
connection_nc.connect(null);
var stream_ns:NetStream = new NetStream(connection_nc);
stream_ns.onMetaData = function(metaProp:Object) {
    trace("The metadata:");
    traceMeta(metaProp);
    // traceObject(metaProp, 0);
};
my_video.attachVideo(stream_ns);
stream_ns.play("http://www.helpexamples.com/flash/video/cuepoints.flv");

function traceMeta(metaProp:Object):Void {
    var p:String;
    for (p in metaProp) {
        switch (p) {
        case "cuePoints" :
            trace("cuePoints: ");
            //cycles through the cue points
            var cuePointArr:Array = metaProp[p];
            for (var j:Number = 0; j < cuePointArr.length; j++) {
                //cycle through the current cue point parameters
                trace("\t cuePoints[" + j + "]:");
                var currentCuePoint:Object = metaProp[p][j];
                var metaPropPJParams:Object = currentCuePoint.parameters;
                trace("\t\t name: " + currentCuePoint.name);
                trace("\t\t time: " + currentCuePoint.time);
                trace("\t\t type: " + currentCuePoint.type);
                if (metaPropPJParams != undefined) {
                    trace("\t\t parameters:");
                    traceObject(metaPropPJParams, 4);
                }
            }
            break;
        default :
            trace(p + ": " + metaProp[p]);
            break;
        }
    }
}
function traceObject(obj:Object, indent:Number):Void {
    var indentString:String = "";
    for (var j:Number = 0; j < indent; j++) {
        indentString += "\t";
    }
    for (var i:String in obj) {
        if (typeof(obj[i]) == "object") {
            trace(indentString + " " + i + ": [Object]");
            traceObject(obj[i], indent + 1);
        } else {
            trace(indentString + " " + i + ": " + obj[i]);
        }
    }
}

The following output appears:

The metadata:
canSeekToEnd: true
cuePoints: 
    cuePoints[0]:
        name: point1
        time: 0.418
        type: navigation
        parameters:
            lights: beginning
    cuePoints[1]:
        name: point2
        time: 7.748
        type: navigation
        parameters:
            lights: middle
    cuePoints[2]:
        name: point3
        time: 16.02
        type: navigation
        parameters:
            lights: end
audiocodecid: 2
audiodelay: 0.038
audiodatarate: 96
videocodecid: 4
framerate: 15
videodatarate: 400
height: 213
width: 320
duration: 16.334

For information on using cue points with the FLVPlayback component, see Using embedded cue points with the FLVPlayback component.

Using embedded cue points with the FLVPlayback component

You can view cue points for an FLV file in the Property inspector when you use the FLVPlayback component. After you set the contentPath property for the FLVPlayback instance, you can view any cue points that are embedded in the video file. Using the Parameters tab, find the cuePoints property, and click the magnifying glass icon to see a list of the cue points in the file.

The following example shows how to use cue point information with the FLVPlayback component.

To use cue points with the FLVPlayback component:

1. Create a new Flash document called cueFlv.fla.
2. Open the Components panel (Window > Components), and drag an instance of the FLVPlayback and TextArea components to the Stage.
3. Select the TextArea component, and type my_ta in the Instance Name text box in the Property inspector (Window > Properties > Properties).
4. With the TextArea component still selected, type 200 in the width text box and 100 in the height text box.
5. Select the FLVPlayback instance on the Stage, and then type my_flvPb in the Instance Name text box.
6. Select Frame 1 on the Timeline, and type the following code in the Actions panel.

   var my_flvPb:mx.video.FLVPlayback;
   var my_ta:mx.controls.TextArea;
   my_flvPb.contentPath = "http://www.helpexamples.com/flash/video/cuepoints.flv";
   var listenerObject:Object = new Object();
   listenerObject.cuePoint = function(eventObject:Object) {
       my_ta.text += "Elapsed time in seconds: " + my_flvPb.playheadTime + "\n";
   };
   my_flvPb.addEventListener("cuePoint",listenerObject);
   

7. Select Control > Test Movie to test the SWF file.

   The elapsed time appears in the TextArea instance when the playhead passes each cue point embedded in the document.

For more information on working with the FLVPlayback component, see ActionScript 2.0 Components Language Reference.

Creating cue points with ActionScript to use with components

You can create cue points with ActionScript, and then use them with a video object instance, or one of the video player components (FLVPlayback for Flash Player 8 and later, or MediaPlayback for Flash Player 7). The following examples show you how easy it is to use ActionScript code to create cue points, and then use a script to access them.

To create and use cue points with the FLVPlayback component:

1. Create a new Flash document called cueFlvPb.fla.
2. Drag an instance of the FLVPlayback component from the Components panel (Window > Components) to the Stage.

   The component is in the FLVPlayback - Player 8 folder.

3. Select the component and open the Property inspector (Window > Properties > Properties).
4. Type my_flvPb in the Instance Name text box.
5. Drag an instance of the TextArea component from the Components panel to the Stage.
6. Select the TextArea component and type my_ta in the Instance Name text box.
7. With the TextArea component still selected, type 200 in the width text box and 100 in the height text box.
8. Select Frame 1 on the Timeline, and type the following code in the Actions panel:

   var my_flvPb:mx.video.FLVPlayback;
   my_flvPb.contentPath = "http://www.helpexamples.com/flash/video/clouds.flv";
   
   // Create cuePoint object.
   var cuePt:Object = new Object();
   cuePt.time = 1;
   cuePt.name = "elapsed_time";
   cuePt.type = "actionscript";
   // Add AS cue point.
   my_flvPb.addASCuePoint(cuePt);
   
   // Add another AS cue point.
   my_flvPb.addASCuePoint(2, "elapsed_time2");
   
   // Display cue point information in text field.
   var listenerObject:Object = new Object();
   listenerObject.cuePoint = function(eventObject) {
       my_ta.text += "Elapsed time in seconds: " + my_flvPb.playheadTime + "\n";
   };
   my_flvPb.addEventListener("cuePoint",listenerObject);
   

9. Select Control > Test Movie to test your code.

   The following cue points trace in the Output panel:

   Elapsed time in seconds: 1.034
   Elapsed time in seconds: 2.102
   

For information on working with cue points and the FLVPlayback component, see ActionScript 2.0 Components Language Reference.

The following example shows how to add cue points at runtime and then trace the cue points when a FLV file plays in the MediaPlayback component.

To create and use cue points with the MediaPlayback component:

1. Create a new Flash document called cuePointMP.fla
2. Drag an instance of the MediaPlayback component from the Components panel (Window > Components) to the Stage.

   The component is in the Media - Player 6 - 7 folder.

3. Select the component, and open the Property inspector (Window > Properties > Properties).
4. Type my_mp in the Instance Name text box.
5. Select the Parameters tab, and click Launch Component Inspector.
6. In the Component inspector, type http://www.helpexamples.com/flash/video/clouds.flv in the URL text box.
7. Open the Actions panel (Window > Actions), and type the following code in the Script pane:

   import mx.controls.MediaPlayback; 
   var my_mp:MediaPlayback; 
   my_mp.autoPlay = false;
   my_mp.addEventListener("cuePoint", doCuePoint);
   my_mp.addCuePoint("one", 1); 
   my_mp.addCuePoint("two", 2);
   my_mp.addCuePoint("three", 3);
   my_mp.addCuePoint("four", 4);
   function doCuePoint(eventObj:Object):Void { 
        trace(eventObj.type + " = {cuePointName:" + eventObj.cuePointName + " cuePointTime:" + eventObj.cuePointTime + "}");
   }
   

8. Select Control > Test Movie to test your code.

   The following cue points trace in the Output panel:

   cuePoint = {cuePointName:one cuePointTime:1}
   cuePoint = {cuePointName:two cuePointTime:2}
   cuePoint = {cuePointName:three cuePointTime:3}
   cuePoint = {cuePointName:four cuePointTime:4}
   

For more information on working with the MediaPlayback component and the FLVPlayback component, see ActionScript 2.0 Components Language Reference.

Flash CS3