Working with Cue Points


In general terms, a cue point is a specific time within a video clip where something of significance occurs. For example, you might want a cue point at the start of each cut or scene within a video, or when something noteworthy is said within the audio track of a video clip. With Flash Video, you can build systems that work with two types of cue points:

  • Embedded cue points: Using the new Flash 8 Video Encoder, which is enabled with Flash Pro 8, you can insert cue points within a video clip before the encoder compresses the clip. The resulting .flv file embeds each cue point on a keyframe in the video track. There are two types of embedded cue points:

    • navigation: This type of cue point marks the video frame as a point that the user can seek to, using the forward and back buttons of the FLVPlayback component, or with ActionScript code.

    • event: This type of cue point marks the video frame as a point that can be detected with an event handler in ActionScript code. You can not seek to event cue points unless you modify the functionality of the FLVPlayback component code.

  • ActionScript cue points: This type of cue point is one that is not embedded with the .flv file. An ActionScript cue point is added, as its name implies, via ActionScript code. For example, if your .flv file doesn't have cue points, you can create cue points with an XML file specifying the times and names of the cue points. You can load the XML file at run time, and pass each cue point value to the FLVPlayback component. You can specify ActionScript cue points in the Parameters tab of the Component Inspector panel (or the Property inspector) for an FLVPlayback instance, or using the FLVPlayback.addASCuePoint() method.

Caution 

By default, ActionScript cue points can not be used as navigation cue points. You need to modify methods of the FLVPlayback instance in order for ActionScript cue points to work with seek buttons. Later in this chapter, you learn how to accomplish this task.

In ActionScript code, you can detect which type of cue point is fired during playback. A cue point object in ActionScript has a type property, which is set to a String value of "navigation", "event", or "actionscript".

Creating .Flv Files with Embedded Cue Points

In this section, you learn how to use the Flash 8 Video Encoder to create cue points for video footage of garden plants. Each plant featured in the video will have a cue point, specifying its name and the location of the name on the screen. The cue points will be used to dynamically create text fields (with drop shadows!) on top of the video. You add both navigation and event cue point types to this footage. The navigation cue points will work with the forward/back seek buttons of the FLVPlayback component, and they will create the text labels for each plant type. The event cue points will remove the text label before the next label fades and blurs on to the stage.

Tip 

You can use the Video Import wizard of Flash Pro 8 to create cue points as well, but the Flash 8 Video Encoder saves the settings for each clip. So, if you need to edit the cue points later and recompress the footage, you should use the Flash 8 Video Encoder instead of the Video Import wizard.

On the CD-ROM 

Make a copy of the HomeGarden_Full-Res.mpg file from the ch17/source folder of this book's CD-ROM. Do not try to add the file directly from the CD-ROM from this exercise — one of the drawbacks to the Flash 8 Video Encoder tool is that you can not specify a different output folder for the compressed .flv file.

  1. Open the Flash 8 Video Encoder application. On Windows, you can find this application shortcut at Start ð Programs ð Macromedia ð Macromedia Flash 8 Video Encoder. On the Mac, you can find this application here: Applications: Macromedia Flash 8 Video Encoder: Flash 8 Video Encoder.

  2. Click the Add button on the right-hand side of the application, and browse to your copy of the HomeGarden_Full-Res.mpg file. Add this file to the queue.

  3. Double-click the new entry in the queue to access the Flash Video Encoding Settings dialog box, as shown in Figure 17-24. Click the Show Advanced Settings button to reveal the Cue Points tab.

  4. In the Cue Points tab, click the Add (+) button to add a cue point at the start of the video clip. Change the name of the cue point to plant_001. Change the Type menu to Navigation. Under the parameters area of the dialog box, click the Add (+) button to add a new parameter named label. For the value, type Black-eyed susans. Add another parameter named position with a value of rb. This position value stands for "right bottom" and it will be used to properly position the label text for the cue point. Refer to Figure 17-25 for these settings.

    Caution 

    Watch your spelling for parameter names and values. You must consistently name your parameters in order for your custom ActionScript code to work.

  5. Now, scrub the video playhead below the preview area to the next scene. The next cue point should be added around 4.6 seconds, as shown in Figure 17-26. Add a cue point by clicking the Add (+) button on the left, and name the cue point exit_001. Change the Type to Event. For this exercise, you won't need any parameters for event cue points.

    Tip 

    You can click the playhead and nudge it with the left and right arrow keys to finesse the playhead time.

  6. Now that you're familiar with the cue point addition process, add the following cue points at the approximate times shown in Table 17-1. (Feel free to choose your preferred values.) When you are finished, your cue point list should resemble Figure 17-27.

    Tip 

    Double-check the label and position parameters for each cue point before you start the encoding process.

  7. Click the Encoding tab. In the encoding profile menu (near the top of the dialog box), choose Flash 8 - Medium Quality (400 kbps). Change the Audio data rate to 16 kbps. This particular video clip has an audio track that is silent (meaning, there is an audio track, but it just recorded silence). Also, check the Resize video option, and clear the Maintain aspect ratio option. Because this video clip is DV footage, the clip uses nonsquare pixels, and must be squeezed into a square pixel ratio. Type 320 for the width, and 240 for the height (see Figure 17-28).

    Tip 

    Even if you don't need an audio track, we advise you to include a silent audio track for the clip in your video-editing program. We have found that video playback for larger files is significantly closer to the clip's frame rate if there is an audio track to sync to.

  8. Click OK to accept all of the new encoding settings. Back in the main application window, click the Start Queue button to begin the encoding process. The lower area of the application window displays the encoding progress, as shown in Figure 17-29.

  9. Before you close the Flash 8 Video Encoder application, choose File ð Save Queue. This option saves your clip's settings (and cue points!) so you can re-edit and re-encode if you made a mistake.

  10. Now, you're ready to build the Flash document to play the .flv file. Open Flash Pro 8, and create a new document. Save the document as cuepoints_embedded.fla, in the same location as the new .flv file compressed in Step 8.

  11. Rename Layer 1 to cfp. On frame 1 of this layer, drag an instance of the FLVPlayback component from the Components panel to the Stage. In the Property inspector, name the instance cfp.

  12. In the Parameters tab of the Property inspector, select a skin for the FLVPlayback instance. For our example, we used the SteelExternalAll.swf skin. For the contentPath parameter, browse to the HomeGarden_Full-Res.flv file created in Step 8.The FLVPlayback instance should resize to the dimensions of the .flv file.

  13. Create a new layer named tEmbed. This layer will be used to hold an embedded font for the video labels. On frame 1 of the tEmbed layer, use the Text tool to create a Dynamic text field off stage, above the Stage area. Type the text Arial in the field. In the Property inspector, make sure the type is set to Dynamic, and name the instance tEmbed. In the font menu, choose the font face Arial. Click the Embed button, and in the Character Embedding dialog box, select the Uppercase, Lowercase, and Punctuation ranges as shown in Figure 17-30.

  14. Create a new layer named actions, and place it 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 code shown in Listing 17-1. This script has the following functions:

    • onVideoMarker: This function is used as the listener for the "cuePoint" event broadcasted by the FLVPlayback instance, cfp. The event object (oEvent) passed to this listener contains an info property, which represents the data of the embedded cue point (oCue). The label and position values that you assigned to each cue point in the Flash 8 Video Encoder are available in the parameters property of the cue point object (oCue). If the cue point's type property is "navigation", then the showLabel() function is invoked with the label and position values. If the cue point's type property is "event", the removeLabel() function is invoked.

    • showLabel: This function creates a TextField object named tLabel, which is positioned on the movie's Stage according to the position value passed by the cue point. A DropShadow filter is also created and passed to the filters property of the tLabel instance. The TextFormat object, tf, specifies the Arial font that was embedded in Step 13.

      Cross-Reference 

      For more information on TextFormat objects, read Chapter 30, "Applying HTML and Text Field Formatting."

    • removeLabel: This function removes the tLabel instance from the Stage. Whenever a cue point with a type of "event" fires, this function is invoked to remove the label from the movie.

    • onScrubStart: This function is used as a listener of the "scrubStart" event broadcasted by the FLVPlayback instance, cfp. When the video clip is scrubbed with the seek bar, the onScrubStart() function is invoked. Here, the setInterval() function is used to continuously invoke the updateLabel() function, discussed later in this list.

    • onScrubFinish: This function is used as a listener of the "scrubFinish" event broadcasted by the FLVPlayback instance, cfp. When the user releases the mouse button from the seek bar, this function is invoked, clearing the setInterval() function initiated by the onScrubStart() function.

    • updateLabel: This function, invoked by the setInterval() action in the onScrubStart() function, calls the showLabel() function, using label and position data retrieved by the FLVPlayback.findNearestCuePoint() method. This method can use the playhead's current time (cfp.playheadTime) to return the cue point that is closest to the scrubbing arrow of the seek bar.

    Listing 17-1: The Frame 1 Script

    image from book
     import mx.video.FLVPlayback; import mx.utils.Delegate; import flash.filters.DropShadowFilter; var cfp:FLVPlayback; 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);    } else if(oCue.type == "event" && !bScrubbing){       removeLabel();    } } function showLabel(sLabel:String, sPos:String):Void {    var tf:TextFormat = new TextFormat();    tf.font = "Arial";    tf.size = 14;    tf.color = 0xFFFFFF;    var ds:DropShadowFilter = new DropShadowFilter();    ds.blurX = 0;    ds.blurY = 0;    ds.distance = 1;    tLabel = createTextField("tLabel", 1, 10, 10, 300, 30);    tLabel.autoSize = "left";    tLabel.embedFonts = true;    tLabel.antiAliasType = "advanced";    tLabel.text = sLabel;    tLabel.setTextFormat(tf);    tLabel.filters = [ds];    var sHoriz:String = sPos.toLowerCase().substr(0,1);    var sVert:String = sPos.toLowerCase().substr(1,1);    var nX:Number;    var nY:Number;    if(sHoriz == "l"){       nX = cfp._x + 20;    } else if(sHoriz == "r"){       nX = cfp._x + cfp.width - 20 - tLabel._width;    }    tLabel._x = nX;    if(sVert == "t"){       nY = cfp._y + 10;    } else if(sVert == "b"){       nY = cfp._y + cfp._height - 80;    }    tLabel._y = nY; } function removeLabel():Void {    tLabel.removeTextField(); } function onScrubStart():Void {    bScrubbing = true;    nUpdateID = setInterval(this, "updateLabel", 30); } function onScrubFinish():Void {    bScrubbing = false;    clearInterval(nUpdateID); } function updateLabel():Void {    var oCue:Object = cfp.findNearestCuePoint(cfp.playheadTime);    if(oCue.type == "navigation"){       showLabel(oCue.parameters.label, oCue.parameters.position);    } } cfp.addEventListener("cuePoint", Delegate.create(this, onVideoMarker)); cfp.addEventListener("scrubStart", Delegate.create(this, onScrubStart)); cfp.addEventListener("scrubFinish", Delegate.create(this, onScrubFinish)); 
    image from book

    Cross-Reference 

    The event-listener model for this script makes use of the Delegate class. You can learn more about the Delegate class in Chapter 33, "Using Components."

  15. Save the Flash document, and test it (Ctrl+Enter or z+Enter). The video clip should automatically play, displaying the plant names on top of the video display area (Figure 17-31). If you drag the playhead of the seek bar, you should still see the names of the plants appear on top of the video.

image from book
Figure 17-24: The Flash Video Encoding Settings dialog box

image from book
Figure 17-25: The new plant_001 cue point

image from book
Figure 17-26: The exit_001 cue point

Table 17-1: Cue Points for the HomeGarden_Full-Res.mpg File

Time

Name

Type

Label

Position

00:00:00.0

plant_001

Navigation

Black-eyed susans

rb

00:00:04.602

exit_001

Event

-

-

00:00:05.040

plant_002

Navigation

Echinacea

rb

00:00:09.833

exit_002

Event

-

-

00:00:10.251

plant_003

Navigation

Dinnerplate dahlia

rt

00:00:14.854

exit_003

Event

-

-

00:00:15.273

plant_004

Navigation

Pumpkin patch

rt

00:00:23.223

exit_004

Event

-

-

00:00:23.433

plant_005

Navigation

Giant pumpkin

lb

00:00:28.245

exit_005

Event

-

-

00:00:28.663

plant_006

Navigation

Huckleberry bush

It

00:00:33.266

exit_006

Event

-

-

00:00:33.475

plant_007

Navigation

Huckleberries

rt

00:00:38.287

exit_007

Event

-

-

00:00:39.333

plant_008

Navigation

Strawberries

rb

00:00:43.309

exit_008

Event

-

-

00:00:44.146

plant_009

Navigation

White roses

lb

00:00:48.749

exit_009

Event

-

-

00:00:49.167

plant_010

Navigation

Mallow

rb

00:00:56.071

exit_010

Event

-

-

00:00:56.490

plant_011

Navigation

Shrub rose

rt

00:01:01.093

exit_011

Event

-

-

00:01:01.511

plant_012

Navigation

Chocolate mint bush

rb

00:01:05.696

exit_012

Event

-

-

image from book
Figure 17-27: The complete cue list

image from book
Figure 17-28: The Encoding tab options

image from book
Figure 17-29: The encoding progress in the Flash 8 Video Encoder application

image from book
Figure 17-30: The Character Embedding dialog box

image from book
Figure 17-31: A dynamic text label on top of the video area

On the CD-ROM 

You can find the completed file, cuepoints_embedded.fla, in the ch17 folder of this book's CD-ROM. This file has an additional blur and fade effect applied to the text, using the BlurFader component we discuss in Chapter 20, "Making Your First Flash 8 Project."

Generating ActionScript Cue Points with XML

Unless you're planning to encode all of your Flash Video content with the new Flash 8 Video Encoder or the Video Import wizard in Flash Pro 8, you may find yourself looking for another solution to add cue points to Flash presentations that use the FLVPlayback component. You can create cue points at run time using the FLVPlayback.addASCuePoint() method, which enables you to specify the time and name of the cue point you want to add, such as:

 var cfp:FLVPlayback; var oCue:Object = {    type: "actionscript",    time: 5.2,    name: "plant_002" }; cfp.addASCuePoint(oCue); 

Note 

You can only add cue points of type "actionscript" or FLVPlayback.ACTIONSCRIPT (a constant that returns the String value "actionscript"). Event and navigation cue points can only be specified with embedded cue points.

Tip 

With the Property inspector's Parameters tab, you can also add ActionScript cue points to an instance of the FLVPlayback component. Select the component instance on the Stage, open the Property inspector, select the Parameters tab, and double-click the cuePoints parameter to access the Flash Video Cue Points dialog box. There, you can enter new ActionScript cue points for that component instance.

One of the problems of using ActionScript cue points is that they are not recognized as navigation cue points — you can not use the seek buttons on the FLVPlayback component's skin interface to navigate between cue points you add in Actionscript.

How you define the cue point data to use with the addASCuePoint() method is entirely up to you. You can hardcode cue point data in your ActionScript code, as the previous code example illustrates, or you can define your cue points in an external data source, such as an XML file. In this section, you learn how to build an XML file that defines cue points for the garden video clip you used in the previous section.

Creating the Cue Points in XML

In this section, you build the XML file that defines the cue points for the HomeGarden_nocue.flv file we provide in the ch17/cuepoints folder of this book's CD-ROM. This .flv file has the same video content as the HomeGarden_Full-Res.flv file you created in the last section. However, the HomeGarden_nocue.flv file does not have any embedded cue points. So, you're going to define those same cue points in an XML file. The basic schema for the XML file for our example is:

 <points>    <cue  time=" value" label=" value" position=" value" /> </points> 

where cue is a child node created for each cue point applicable to the video content, with the following attributes:

  • id: The name of the cue point, such as plant_001. You should use unique names with your cue points.

  • time: The point, in seconds, where the cue point should fire during playback or scrubbing of the video content.

  • label: The text label, or caption, to use for a TextField instance on top of the FLVPlayback component.

  • position: The location of the label text, relative to the frame of the video content. Acceptable values are lt (left top), rt (right top), lb (left bottom), and rb (right bottom).

For this exercise, you generate the same cue points you built in the previous section. As such, the parameters label and position have exact mappings in the XML schema. For more information about XML schemas, read the sidebar "XML Schemas for Cue Points" following this section.

  1. Open your preferred text editor such as Macromedia Dreamweaver 8, and create a new XML document (or text file).

  2. Save the document as cuepoints.xml. If your text editor has the capability to specify a character encoding in the Save As dialog box, choose Unicode UTF-8. If you're using Macromedia Dreamweaver, choose Modify ð Page Properties and choose Unicode (UTF-8).

    Tip 

    The default character encoding for Flash Player 6 and higher movies is UTF-8. Whenever possible, make sure you encode any text data loaded into Flash movies as UTF-8.

  3. Add the XML code shown in Listing 17-2. This data specifies the same cue points you used in the previous exercise. Note that the time values have been finessed to be more accurate with the cut points in the HomeGarden_nocue.flv file.

    Listing 17-2: The XML Cue Point data

    image from book
     <?xml version="1.0" encoding=" utf-8"?> <points>    <cue  time="0.3" label=" Black-eyed susans" position="rb" />    <cue  time="5.3" label=" Echinacea" position="rb" />    <cue  time="10.5" label=" Dinnerplate dahlia" position="rt" />    <cue  time="15.3" label=" Pumpkin patch" position=" rt"/>    <cue  time="23.4" label=" Giant pumpkin" position=" lb"/>    <cue  time="28.4" label=" Huckleberry bush" position=" lt"/>    <cue  time="33.5" label=" Huckleberries" position=" rt"/>    <cue  time="39.3" label=" Strawberries" position=" rb"/>    <cue  time="44.4" label=" White roses" position=" lb"/>    <cue  time="49.4" label=" Mallow" position=" rb"/>    <cue  time="56.7" label=" Shrub rose" position=" rt"/>    <cue  time="61.9" label=" Chocolate mint bush" position="rb"/> </points> 
    image from book

    Tip 

    One of the benefits of using external cue points is that you can more easily change time values associated with cue points. As you know, once cue points are embedded in an .flv file, you can't edit them. You must re-encode the original source file to change or add cue points to a new .flv file. With ActionScript cue points, you can easily modify the cue point data without building a new .flv file. However, ActionScript cue points are not frame accurate like embedded cue points. For this reason, some values have been changed in the XML version of the cue points.

  4. Save the document.

On the CD-ROM 

You can find the completed file, cuepoints.xml, in the ch17/cuepoints folder of this book's CD-ROM. The Listing17-2.as file in the ch17 folder also contains this XML data.

In the section, you load the cuepoints.xml into an XML object created in ActionScript code.

image from book
XML Schemas for Cue Points

An XML schema is the specific hierarchy of node names, values, and attributes that you use with your XML data. The XML schema we created for this section's example is just one way you can establish a structure to arrange cue point information. You can establish your own custom schema, or use one designed by another system. For example, you could break down your cue point data with the following schema:

 <cuepoints>    <cuepoint time="49.4">       <name>plant_001</name>       <type>actionscript</type>       <parameters>          <label>Mallow</label>          <position>rb</position>       </parameters>    </cuepoint> </cuepoints> 

This schema is used by Burak's Captionate utility for FLV captions, available at www.buraks.com/captionate. Of course, whenever you create a schema for XML data, you need to be able to parse the schema in your ActionScript code. The schema we created is simpler, assigning values as attributes instead of nested nodes, making it easier to parse the data in ActionScript. In the next section, you learn how to parse the cuepoints.xml file in a Flash movie.

image from book

Loading the Cue Points into the FLVPlayback Component

Once you've created the XML file describing the cue point data, you're ready to build the Flash movie that loads the XML file and adds the cue points to an instance of the FLVPlayback component.

On the CD-ROM 

Make a copy of the HomeGarden_nocue.flv file from the ch17/cuepoints folder on this book's CD-ROM. You use these files as a starting point for the following exercise.

  1. In Flash Pro 8, create a new Flash document and save it as cuepoints_xml.fla.

  2. Rename Layer 1 to cfp. On frame 1 of this layer, add an instance of the FLVPlayback component from the Components panel. Name this instance cfp in the Property inspector.

  3. In the Property inspector, select the Parameters tab. For the contentPath parameter, double-click the value to select the HomeGarden_nocue.flv file you copied to your computer from the book's CD-ROM. This .flv file has the same video and audio track as the HomeGarden_Full-Res.flv file you created in the previous section. However, the new .flv file does not have any embedded cue points. Also, change the autoPlay parameter to false. Playback should only begin after the XML data has been loaded and parsed by the Flash movie.

  4. Repeat Step 13 from the "Creating .flv files with embedded cue points" exercise earlier in this chapter. The Arial font face needs to be embedded in the Flash movie so that it can be used with dynamic text fields created in ActionScript.

  5. Create a new layer named actions. Select frame 1 of this layer, and open the Actions panel (F9, or Option+F9). Add the code shown in Listing 17-3. This code is nearly identical to that shown in Listing 17-1, with the exception of the bold code. Here's a break-down of the new modifications:

    • xmlCue instance: A new XML object named xmlCue is created, and its onLoad() handler is delegated to a new function, onCueLoad. This function cycles through all of the <cue> nodes and extracts the time, id, label, and position attributes to create oCue objects that are passed to the cfp instance of the FLVPlayback component, using the addASCuePoint() method. When all of the cue points are added, the cfp instance initiates playback with the cfp.play(); action.

    • onVideoMarker() function update: This function has been modified from the previous version to set up references to the internal cue points array within the FLVPlayback component. Whenever a cue point is fired, the cue point's name is looked up in the component's cue points table, using the FLVPlayback.findCuePoint() method. nIdx variable is set to that cue point's position within the array of cues stored in the cfp instance. A reference to the cue point table (or array) is also stored with the aCues variable. Both nIdx and aCues are used by the onBackClick() and onNextClick() functions we describe next.

    • onBackClick() and onNextClick() functions: Because the cue points that have been added are ActionScript based, the seek buttons do not navigate between the cue points. In order to enable the back and next seek buttons of the FLVPlayback's user interface for ActionScript cue points, the cfp instance's seekToPrevNavCuePoint() and seekToNextNavCuePoint() methods need to replaced. When the FLVPlayback component has initialized, the "ready" event is broadcasted and intercepted by the onReady() function, where the seek methods are overwritten with the onBackClick() and onNextClick() functions. These functions navigate to the next cue point, passed on the value of nIdx. The FLVPlayback.findNearestCuePoint() method is used to return a reference to the cue point object, which contains the time property indicating where within the video clip to seek to next.

    Listing 17-3: The XML Parsing Routine

    image from book
     import mx.video.FLVPlayback; import mx.utils.Delegate; import flash.filters.DropShadowFilter; import com.themakers.effects.BlurFader; var cfp:FLVPlayback; var tLabel:TextField; var bScrubbing:Boolean = false; var nUpdateID:Number; var aCues:Array; var nIdx:Number; var xmlCue:XML = new XML(); xmlCue.ignoreWhite = true; xmlCue.onLoad = Delegate.create(this, onCueLoad); xmlCue.load("cuepoints.xml"); function onCueLoad(bSuccess:Boolean):Void {    if(bSuccess){       var aNodes:Array = xmlCue.firstChild.childNodes;       for(var i:Number = 0; i < aNodes.length; i++){          var xn:XMLNode = aNodes[i];          var oAttribs:Object = xn.attributes;          var oCue:Object = {             type: "actionscript",             time: Number(oAttribs.time),             name: oAttribs.id,             parameters: { label: oAttribs.label, position: }          };          cfp.addASCuePoint(oCue);       }       cfp.play();    } } function onVideoMarker(oEvent:Object):Void {    var oCue:Object = oEvent.info;    var sLabel:String = oCue.parameters.label;    var sPos:String = oCue.parameters.position;    showLabel(sLabel, sPos);    var foundCue:Object = cfp.findCuePoint(oCue.name, FLVPlayback.ACTIONSCRIPT);    nIdx = foundCue.index;    aCues = foundCue.array; } function showLabel(sLabel:String, sPos:String):Void {    var tf:TextFormat = new TextFormat();    tf.font = "Arial";    tf.size = 14;    tf.color = 0xFFFFFF;    var ds:DropShadowFilter = new DropShadowFilter();    ds.blurX = 0;    ds.blurY = 0;    ds.distance = 1;    tLabel = createTextField("tLabel", 1, 10, 10, 300, 30);    tLabel.autoSize = "left";    tLabel.embedFonts = true;    tLabel.selectable = false;    tLabel.antiAliasType = "advanced";    tLabel.text = sLabel;    tLabel.setTextFormat(tf);    tLabel.filters = [ds];    var sHoriz:String = sPos.toLowerCase().substr(0,1);    var sVert:String = sPos.toLowerCase().substr(1,1);    var nX:Number;    var nY:Number;    if(sHoriz == "l"){       nX = cfp._x + 20;    } else if(sHoriz == "r"){       nX = cfp._x + cfp.width - 20 - tLabel._width;    }    tLabel._x = nX;    if(sVert == "t"){       nY = cfp._y + 10;    } else if(sVert == "b"){       nY = cfp._y + cfp._height - 80;    }    tLabel._y = nY;    if(!bScrubbing){       var cfb:BlurFader = createClassObject(BlurFader, "cfb", 2, {dir: "in", duration: 2, target: tLabel});    } else if(cfb != null){       cfb.removeMovieClip();    } } function removeLabel():Void {    tLabel.removeTextField(); } function onScrubStart():Void {    bScrubbing = true;    nUpdateID = setInterval(this, "updateLabel", 30); } function onScrubFinish():Void {    bScrubbing = false;    clearInterval(nUpdateID); } function updateLabel():Void {    var oCue:Object = cfp.findNearestCuePoint(cfp.playheadTime);    showLabel(oCue.parameters.label, oCue.parameters.position); } function onBackClick(oEvent:Object):Void {    var oCue:Object = aCues[nIdx > 0 ? nIdx - 1 : 0];    var nTime:Number = oCue.time;    cfp.seek(nTime);    onVideoMarker({info: oCue}); } function onNextClick(oEvent:Object):Void {    var oCue:Object = aCues[nIdx < aCues.length - 1 ? nIdx + 1 : 0];    var nTime:Number = oCue.time;    cfp.seek(nTime);    onVideoMarker({info: oCue}); } function onReady(oEvent:Object):Void {    cfp.seekToPrevNavCuePoint  = Delegate.create(this, onBackClick);    cfp.seekToNextNavCuePoint = Delegate.create(this, onNextClick); } function onFinish(oEvent:Object):Void {    removeLabel(); } cfp.addEventListener("cuePoint", Delegate.create(this, onVideoMarker)); cfp.addEventListener("scrubStart", Delegate.create(this, onScrubStart)); cfp.addEventListener("scrubFinish", Delegate.create(this, onScrubFinish)); cfp.addEventListener("ready", Delegate.create(this, onReady)); cfp.addEventListener("complete", Delegate.create(this, onFinish)); 
    image from book

  6. Save the Flash document, and test it (Ctrl+Enter or z+Enter). Once the cue points load into the Flash movie, the text labels should fade and blur onto the Stage, just as they had done with the embedded cue points example.

On the CD-ROM 

You can find the completed file, cuepoints_xml.fla, in the ch17/cuepoints folder of this book's CD-ROM.




Macromedia Flash 8 Bible
Macromedia Flash8 Bible
ISBN: 0471746762
EAN: 2147483647
Year: 2006
Pages: 395

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net