- About the Projects
- Prerequisites
- Planning the Projects
- Project: Navigation Cue Points in a .flv File
- Project: ActionScript Cue Points for Captions in an XML File
- Project: Basic Caption Display Template
- Project: Channeling Cue Points to the Caption Display
- Project: Code for Audio-only Captions
- Project: Advanced Captioning Template
- Project: Synchronized Images Template
- Exploring the Support Classes
- Final Thoughts
This chapter is from the book
This chapter is from the book
This chapter is from the book
Project: Channeling Cue Points to the Caption Display
Now we’ll pull things together. Namely, we’ll play the the_children_must_learn.flv video file we generated earlier while sending the captions gathered using the gathering_tool.swf to the captionText1.swf file we just built.
Steps
- Creating the main.fla file
- Creating the CaptionHolder symbol
- Assembling support class files
- Implementing the final code
- Alternative 1: making the video play automatically
- Alternative 2: adding a second captionText1.swf that supports navigation cue points
Step 1: Creating the main.fla File
For this project, we need to create a simple movie file that contains an FLVPlayback component that points to our .flv file.
Create a new Flash file and save it as main.fla in the same directory in which you’ve been working—the one that contains the video file the_children_must_learn.flv.
Select Window, Components and drag onto the stage an FLVPlayback component (from the FLVPlayback - Flash 8 category). Use the Properties panel to give the component an instance name of playback.
Step 2: Creating the CaptionHolder Symbol
Select Insert, New Symbol. Click Advanced to expand the dialog box if isn’t already expanded. Make sure the Type is set to Movie Clip and name it CaptionHolder. Next, enable the Export for ActionScript check box, which automatically enables the Export in First Frame check box. Then fill in both fields (Identifier and AS 2.0 Class) with the name CaptionHolder so your dialog box looks like the one in Figure 3.13. Click OK.
Now this empty symbol will be associated with the class file CaptionHolder.as.
)
Figure 3.13 When you create the empty CaptionHolder movie clip, you can associate it with an ActionScript class file (CaptionHolder.as—but you don’t type the .as).
After you click OK, you are taken inside this new clip. Although you don’t have to put anything here (the captionText1.swf file is loaded at runtime), draw a rectangle that’s exactly 320 x 50 pixels (the space your captions need). Use the Info panel to ensure the rectangle’s upper-left corner is aligned with the center of the clip (the plus sign), as shown in Figure 3.14.
)
Figure 3.14 The rectangle you draw inside the CaptionHolder symbol should have its upper-left corner aligned with the symbol’s center (where the plus sign is shown).
Select your drawn rectangle and then select Modify, Convert to Symbol. Make sure the Movie Clip option is selected and name it Rectangle. After you click OK, use the Properties panel to give the Rectangle symbol an instance name of preview. Finally, click the first keyframe—still inside the CaptionHolder symbol—and type this code:
preview._visible = false;
This way, the preview instance is visible only while authoring.
Return to the main timeline of main.fla and drag an instance of CaptionHolder onto the stage. Because it contains the rectangle shape, you can position it below the playback instance or right on top—wherever you want. Use the Properties panel to give the CaptionHolder symbol on stage an instance name of captions_clip.
Step 3: Assembling Support Class Files
You’ll need to add two class files for the code to work. Copy the two homemade class files I created, named CaptionHolder.as and EventChannel.as, from the starter_files folder to your working directory. The following is a list of the minimum set of files that need to be in the same folder as main.fla:
- the_children_must_learn.flv
- video_captions.xml
- captionType1.swf
- CaptionHolder.as
- EventChannel.as
The FLVPlayback skin you selected, such as MojaveOverNoVol.swf, must also be adjacent to main.fla. (You’re welcome to move the video, the XML, and the captionType1.swf files into a subfolder—just remember to add the path to that subfolder when specifying filenames in the next step.)
The CaptionHolder.as class file is needed by the CaptionHolder symbol you created in step 2. It handles loading the captionType1.swf file (or whatever template you specify). The EventChannel.as class does a lot of work, as detailed at the end of this chapter. It has three primary features:
- It takes all the events broadcast by the different cue point types in an FLVPlayback and channels them through a single, consistent event broadcast. That is, the cue point types all fire off different events (with different parameters and such), and the EventChannel.as class makes them all consistent.
- It handles the task of loading an optional XML file full of cue point information and injecting that information (as ActionScript cue points) at runtime.
- It supports the Sound object. This means that nearly everything you do with the FLVPlayback component and video you can do with an audio clip. (And you will in the next project.)
In doing all this work, the EventChannel.as class insulates you from the tedious code and keeps the code you have to write for each new project to a minimum.
Step 4: Implementing the Final Code
Inside main.fla, select the first keyframe and open the Actions panel. Type the code in Listing 3.2.
There’s very little code here, but it’s worth digging into. The first three lines simply set up the FLVPlayback instance (playback), the same as using the Parameters panel but with script instead. Notice that you must set autoPlay to false because you need to wait for video_captions.xml to fully load. (I’ll show you alternative code that makes the video start playing automatically in the next step.)
Line 5 creates an instance of the EventChannel class (saved in the variable myEventChannel). Next, we pass three parameters when triggering the init() method on the captions_clip instance (the CaptionHolder symbol you put on the stage—and therefore an instance of the CaptionHolder class). Those parameters are the path to the captionType1.swf template file we created earlier, a reference to the myEventChannel instance, and an array (eventList) that specifies which event types you want sent to the captionType1.swf template. (This array can include any of the following caption types: "event", "navigation", "actionscript", "caption", or "marker". In this example, though, because the array contains just "actionscript", we want to display only the cue points from the XML file.)
Listing 3.2 This Code Associates theEventChannel Class with YourcaptionType1.swf File
1 var playback:mx.video.FLVPlayback; 2 playback.autoPlay = false; 3 playback.contentPath = "the_children_must_learn.flv"; 4 5 var myEventChannel:EventChannel = new EventChannel(); 6 7 //send init() function to the CaptionHolder instance //on stage (captions_clip) 8 var url = "captionType1.swf"; 9 var eventList = ["actionscript"]; 10 captions_clip.init(url, myEventChannel, eventList); 11 12 myEventChannel.init(playback, "video_captions.xml");
Finally, in the last line, we initialize myEventChannel by specifying the media source—in this case, it’s the playback, which is an FLVPlayback component, but it could also be a Sound instance—and the XML file where ActionScript cue points can be found. The second parameter is optional, meaning you don’t have to load cue points from the file if you don’t want to.
Select Control Test Movie and then click the Play button on the FLVPlayback component to view the video. Figure 3.15 shows what mine looks like: The captions are on top of the video as if they were there the whole time.
)
Figure 3.15 The finished video with overlaying captions.
Step 5: Alternative 1: Making the Video Play Automatically
There are two quick variations to this project worth examining. First, you might not like the fact that the video didn’t automatically start playing. Add the following code before the last line, which triggers init() on myEventChannel:
function ready(){
playback.play();
}
myEventChannel.addEventListener("ready",
this);
If this code looks familiar, that’s because the myEventChannel instance supports every event supported by the FLVPlayback component (that is, our playback instance). Here, when the ready event fires, you tell the playback instance to play(). The myEventChannel class’s ready event fires only after the XML has safely loaded and the playback instance has fired its ready event.
Select Control, Test Movie to confirm that the video begins playing automatically.
Step 6: Alternative 2: Adding a Second captionText1.swf That Supports Navigation Cue Points
Just to see how versatile this application is, let’s view those Navigation cue points you injected into the video back in the first project. One way you could do this is by simply passing ["navigation", "actionscript"] (instead of just ["actionscript"]) for the third parameter when invoking init() on the captions_clip (lines 9–10 of Listing 3.2). But seeing both cue point types in the sole captionsType1.swf would get messy.
Do this instead: Create a duplicate of the captions_clip instance on stage and give it an instance name of captions_clip2. Move it to another area, such as above the video. Add the following code directly below where you call init() on captions_clip (line 10 of Listing 3.2):
var url = "captionType1.swf";
var eventList = ["navigation"];
captions_clip2.init( url,
myEventChannel,
eventList );
It’s the same as the original call, except you’re calling init() on captions_clip2 (not on captions_clip) and passing a different list of event types to support. (Well, just one type, but notice that it’s an array, so you can specify more types. In fact, if you omit this parameter all cue point types are sent to the clip.)
Now when you test the movie, you’ll see both ActionScript cue points (the captions in the XML file) and the names of the Navigation cue points embedded in the video.