- 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: Basic Caption Display Template
A video can contain a lot of cue points, but you need a vehicle to display them, such as a text field. In this project, we’ll build a simple text display area that serves as a template from which you can create other styles and layouts. In the next project, we’ll link the video to this .swf template file so the cue points from the video are sent to this text display area.
Steps
- Creating a captionType1.fla file
- Adding the minimum code
- Creating the .swf file
Step 1: Creating a captionType1.fla File
Create a new Flash file and save it in your working directory with the name captionType1.fla. Select Modify, Document from the menu bar and set the width to 320 and the height to 50. These settings change the .fla file to match the video’s width and give you enough room for two lines of text—which should hold the caption text nicely.
Select the Text tool and create a block of text that fills the 320 x 50 stage. Use the handles on the text block to resize the text field area, as shown in Figure 3.12 (not the Properties panel’s W and H fields because they scale the text).
)
Figure 3.12 Resize the text field using the handles, not the Properties panel.
Next, use the Properties panel to set the Text Type to Dynamic Text. Set the instance name to _txt and set the Line Type to Multiline. Finally, choose a font that will accommodate two lines of text (you can just type the longest caption in your project to see whether it fits in the newly adjusted text field). Next, set the text color to White.
To make the white text stand out on top of any background video, add a filter effect. With the block of text selected (not the characters in the text) select, Window, Properties, Filters and add the Drop Shadow filter—in fact, add two. For both, set the Blur X and Blur Y options to 0, the Strength to 100%, the Quality to Low (for better performance), and the Distance to 1. The default black color for the shadow will work fine. However, set one of the filter’s angles to 225 and leave the other at the default angle of 45.
Finally, for the filter to really look great, return to the Properties panel and, with the text field instance selected, click the Embed button. Click the Basic Latin row and then click OK. This step adds to your .swf the font outlines for the font you chose. This way, the user won’t need to have installed the font you selected. In addition, the filters have higher-quality results when the font is embedded.
Step 2: Adding the Minimum Code
Each .swf file you create for this project can be used to display the text for a video. To do that, each .swf must implement the same minimum set of three functions: clear(), showText(), and getSize(). (They’re formally defined in the ICaption.as interface file.) We’ll add those functions now. Select the first keyframe in captionType1.fla and open the Actions panel. Type the code shown in Listing 3.1.
Listing 3.1 This Code Displays Captions in the captionType1.swf File
function clear(){
_txt.text = "";
}
clear();
function showText(name:String, wholeObject:Object, speed:String){
_txt.text = name;
}
function getSize():Object{
return {width:320, height:50};
}
Although you need all three of these functions in any template, you’ll be able to modify how they’re handled if you want to extend this project. (For now, use the code I provided here.) The clear() function is called immediately, and here we’re just clearing the text field of any text that might already be there. The getSize() function returns (to the custom CaptionHolder class I built for this chapter) the size of this window so it can be masked out. Notice that 320 and 50 match the width and height of your movie. By providing the getSize() method, the CaptionHolder class can load any sized captionType.swf you create. (By the way, don’t use Flash’s Stage.width and Stage.height here because they won’t report the correct values—the captionType1.swf file is ultimately loaded into a larger file that contains your video and Stage.width reflects the width of that file.) Finally, the showText() function is where you’ll do the most modification in the more advanced variations of this project. Right now, it’s very simple: When the video reaches a cue point, the cue point name is passed to the showText() function. In this case, we simply display it in the _txt field instance onstage. There are additional parameters that we won’t use until the "Advanced Captioning Template" project, later in this chapter.
Step 3: Creating the .swf File
Finally, save the captionType1.fla file and select Control, Test Movie to generate the file captionText1.swf, which we will associate with the video in the next project. (The .swf we generate here has a blank screen.)