- 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: Advanced Captioning Template
The projects in this chapter have thus far showed you various ways of collecting cue point information and then implementing the code to work with the accompanying class files. The only Flash file where you got to do any sort of layout work was the basic template from the third project, "Basic Caption Display Template." Now you’ll get to see how that template can be expanded. That is, you can make as many template types as you want. For example, you can change the overall theme by modifying colors and fonts. In addition, your template doesn’t have to show text at all. As long as your template includes a minimum set of features (namely, functions for clear(), showText(), and getSize()), you can make it perform however you want.
The features added to the basic display template in this project make the template more effective at displaying captions. In the next project, you’ll make a template for a synchronized Flash display instead of captioning per se. The first feature you’ll add here is a subtle transition animation that runs anytime the text updates. Although this might seem gratuitous, I think it’s an effective way to cue the user that the text has updated because her attention might have drifted to the images in the video. The second feature you’ll add is a hide/close feature. Some users might not want to view the captions, so allowing the viewer to turn off the captioning is a nice option to include.
Steps
- Creating the captionType2.fla file
- Nesting the text in a clip
- Modifying the code to move the text
- Publishing and testing
- Adding code for the Hide/Reveal feature
- Creating the Hide/Reveal button
Step 1: Creating the captionType2.fla File
If you have captionType1.fla handy from the earlier project, just open that and immediately select File, Save As. Then, name the new file captionType2.fla. (Use the version of captionType1.fla from the finished_source folder if you don’t have your own. But remember to save it as captionType2.fla in your working directory.)
Step 2: Nesting the Text in a Clip
To easily duplicate and move the text, select the _txt instance on stage and then select Modify, Convert to Symbol. Select the Movie Clip option and name the symbol clip. Also be sure you select the upper-left registration option. Click OK and then use the Properties panel to set the instance name to clip.
Step 3: Modifying the Code to Move the Text
Select the first keyframe and open the Actions panel. Completely replace the existing code with the code in Listing 3.5 (which, by the way, you can copy and paste from captionType2.fla in the finished_source folder):
Listing 3.5 This Code Displays Captions by Moving the Old Captions Offstage
1 function clear(){
2 clip._txt.text = "";
3 }
4 clear();
5
6 var dupe:MovieClip = clip.duplicateMovieClip( "dupe", 0 );
7 dupe._txt.text = clip._txt.text;
8
9 var initialLocation = clip._y;
10
11 function showText( name:String,
wholeObject:Object,
speed:String ){
12 if(speed == "fast"){
13 var duration = 0.2;
14 }else{
15 var duration = 0.5;
16 }
17 dupe._txt.text = clip._txt.text;
18 clip._txt.text = name;
19 var endTop = initialLocation - clip._height;
20 var endBottom = initialLocation + clip._height;
21
22 clip._y = initialLocation;
23
24 new mx.transitions.Tween(dupe, "_y",
25 mx.transitions.easing.Regular.easeOut,
26 initialLocation, endTop, duration, true );
27
28 new mx.transitions.Tween(clip, "_y",
29 mx.transitions.easing.Regular.easeOut,
30 endBottom, initialLocation, duration, true );
31 }
32
33 function getSize():Object{
34 return { width:320, height:50 };
35 }
As different as this code seems from the original captionType1.fla, it’s essentially doing the same thing: It’s code to clear the text, code to show new text, and code that returns the stage size. Let’s walk through it because it is more involved than the original. The clear() function is nearly identical as before, but notice that it’s clearing the text property of the _txt instance nested inside the instance clip. Lines 6 and 7 create a duplicate of the clip so the user will see two blocks of text animate: the old text (in the dupe instance) going up offscreen and the new block appearing from the bottom. The initialLocation variable simply saves a reference to the default location for the clip with text.
Inside showText() is where most of the work is done. First, notice that this time we do use the third parameter (speed) and set a local variable, duration, accordingly (lines 12–16). You’ll see how the wholeObject parameter is used in the next project, but because we want access to the third parameter, we need to leave wholeObject in line 11. The animation sequence goes like this: Copy the text from clip into dupe (line 17), put the new text (name) into clip (line 18), figure out the destination for text moving offscreen and ending at the top (line 19), figure the starting location below the stage for text moving up (line 20), make sure clip is in its initial location (line 22), and then create a new mx.transitions.Tween() for both dupe (lines 24–26) and clip (lines 28–30). It’s easiest if you can visualize new text arriving onstage (in clip) and old text moving off (in dupe), as Figure 3.18 shows.
)
Figure 3.18 When a new line of text arrives, the dupe clip is placed onscreen (with clip’s old text) and clip is moved offscreen to the bottom (b). Then they both move up (c). When the animation is over, dupe is offscreen and the new text appears on clip, which is in place (d).
Step 4: Publishing and Testing
While in your captionText2.fla file, select Control, Test Movie to produce captionText2.swf. You’ll just get a blank .swf for now, which you can close. Reopen one of your main files (main.fla or main_audio.fla) and change the first parameter in the init() method on the instance of the CaptionHolder symbol. You want to point to captionText2.swf and not to captionText1.swf. You’ll see that change in line 7 of Listing 3.6.
Listing 3.6 This Code UsescaptionType2.swf Instead ofcaptionType2.swf
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 var url = "captionType2.swf"; 8 var eventList = ["actionscript"]; 9 captions_clip.init(url, myEventChannel, eventList); 10 11 myEventChannel.init(playback, "video_captions.xml");
Here’s one last touch before you test: Select Modify, Document and set the frame rate to 31. This makes the mx.transitions.Tween() methods appear much smoother. Finally, make sure all the support files, such as the actual video, class files, and video_captions.xml data, are present. Then select Control, Test Movie.
The captions seem to appear from below and roll up offscreen as they depart. Plus, while you’re scrubbing, the captions still animate but much more quickly.
Step 5: Adding Code for the Hide/Reveal Feature
To support the hide/reveal feature, go to captionText2.fla, select the first keyframe, open the Actions panel, and add this code below all the existing code:
var showing = true;
var owner = this;
hide_btn.onPress=function(){
var duration = 1;
if(showing){
//move down
dupe._txt.text = "";
showing = false;
var destination = getSize().height;
var startPosition = 0;
}else{
//move up
showing = true;
var destination = 0;
var startPosition = getSize().height;
}
new mx.transitions.Tween( owner,
"_y",
mx.transitions.easing.Regular.easeOut,
startPosition,
destination,
duration,
true );
}
We’ll create the hide_btn next. Anytime the user clicks this button, the entire caption template (owner) moves down or back up again.
Step 6: Creating the Hide/Reveal Button
Inside captionText2.fla, draw a down arrow that is the full height of the stage. Above it, draw an up arrow, but make sure it’s just above the stage (but not on stage at all) as Figure 3.19 shows. Select both arrows and select Modify, Group so they don’t get wiped away.
)
Figure 3.19 The user will see only one arrow at a time (currently the arrow pointing down). After everything moves down, she’ll see the up arrow.
Nudge the clip instance over to the right if you need to make room for the arrows. You might also need to go inside the clip symbol to change the text margins or to modify the stage size. If you do change the stage size, remember to update the width and height properties in the object returned by the getSize() function that appears in the first frame’s ActionScript.
Finally, draw a rectangle that’s large enough to cover the two arrows. Convert the rectangle shape to a Button symbol by selecting it, pressing F8, and selecting the Button behavior. Name the new button symbol Invisible and click OK. Next, double-click the Invisible symbol and click once on the first keyframe; then click and drag the keyframe to the Hit frame. The button’s timeline should look like the one in Figure 3.20.
)
Figure 3.20 A Button symbol with nothing in any frame except the Hit frame will be invisible to the user but will remain clickable.
Return to the main timeline of captionText2.fla and be sure to give the Invisible symbol an instance name of hide_btn to match the code you added in step 5.
Select Control, Test Movie and then go back to and test the main file. Because only the template has changed, you could instead simply double-click the main.swf generated the last time you tested.