Video Learning Guide for Flash: Synchronization and captions

Other sections of the Video Learning Guide for Flash have explained how to produce video and display it in your web page. The next logical next step is to synchronize the video with content and caption displays in your movie. Flash Professional CS5 offers you a range of features that allow you to synchronize text, animations, graphics, and captions with points of time in the video.

This section provides an overview of the key concepts involved in content synchronization and captioning, including the basics of working with video cue points and the new ActionScript 3 component features for video captioning.

Cue points are markers that you place in the FLV file to specify the times at which you will synchronize content or activity. Understanding the basics of cue points will allow you to start coordinating endless possibilities for combining video with other types of content in Flash Professional.

There are three types of cue points:

• Navigation and event cue points are embedded directly into the FLV file during encoding. Navigation cue points are ideal for user interfaces where navigation to exact locations in the video is necessary. The encoder forces a whole keyframe in the location where the cue point is added allowing for accurate navigation to that point.
  
• Event cue points are also embedded during encoding and can be used to synchronize times in the video to timed text caption files and other events.
  
• ActionScript cue points are not embedded in FLV file—they are added at runtime via ActionScript or at authortime using the improved workflow for cue points.

Note: Using navigation cue points embedded directly into the video is the only way to create accurate seeking to a time in a progressive video. When creating interfaces where buttons allow the viewer to jump to specific times in the video, it is recommended that you embed the cue points directly in the video at the time of encoding or use the Flash Media Server for streaming video.

Creating cue points

Navigation and event cue points can be added to FLV files using the Video Import wizard or Adobe Media Encoder at the time of encoding. ActionScript cue points can be added using the FLVPlayback component's cuePoints parameter in the Properties panel while authoring the movie or by using ActionScript at runtime. Flash Professional CS5 includes an improved workflow for working with ActionScript cue points at authortime. The Cue Points area in the Properties panel allows you to easily add an edit cue point while viewing the live preview of the FLVPlayback component on the Stage. The result is a far easier process for adding ActionScript cue points to video content.

Tip: Cue points can be exported to an XML file during encoding using the Video Import wizard or the Adobe Media Encoder. The saved XML file can then be imported while working on other videos to create consistency and save time during production.

Tip: Cue points can also be embedded in an FLV or F4V during encoding in Adobe Premiere Pro or Adobe After Effects.

Responding to cue points

Once you have created your cue points, you have to respond to them using a bit of ActionScript code. Cue points are made available to the Flash movie in the form of ActionScript events. Events in ActionScript are timing hooks that allow you to respond to something (an event) when it occurs. To respond to a cuePoint event, the standard component event listening code pattern must be applied. Note that this process is slightly different depending on whether you're using the ActionScript 2 version of the FLVPlayback component or the ActionScript 3 version of the component.

For documentation on handling ActionScript 2 video events and cue point parameters, see the Listening for cuePoint events section of the ActionScript 2 Components Language Reference.

For documentation on handling ActionScript 3 video events and cue point parameters, see the Use cue points section of Using ActionScript 3 Components.

Cue point parameters

When you catch a cue point event in ActionScript, the event handler function is passed an event object that contains information about the cue point. This is significant as you use this information to decide what to do in response to the event.

The following properties are contained in a cue point event object's info property:

• name: Name of the cue point
• time: Time associated with the cue point
• type: Type of cue point (navigation, event, or ActionScript)
• parameters: Object containing variables associated with the cue point

Once you have written the code that responds to the cue point event notifications and have access to the cue point parameters, you are authoring in the correct timing and need to do something. The two most common ways to synchronize to content are to navigate to frames containing frame labels that match the name of the cue point (in an ActionScript 2 or ActionScript 3 timeline-based file) or to navigate to slides named the same as the cue point names (in an ActionScript 2 screens-based file). The key is to use the cue point name as a way to navigate to a location in the FLA file that contains the content that should appear with the corresponding time in the video.

Another alternative to using the Timeline or screens would be to handle the loading of the content dynamically using ActionScript. In this case, the content would most likely be added to the document library of the FLA file or made immediately available through some other means like a preloaded asset SWF.

The following list describes common steps involved in creating a file containing video synchronized to text or graphics along the Timeline.

To create a synchronized video presentation:

1. Acquire a source video and determine the points at which you want to synchronize content.
2. Encode the video to FLV format and embed the navigation cue points at the desired locations. (For MPEG-4 video files, add them using ActionScript.)
3. Create a FLA file and add keyframes at any interval along the main Timeline. Add a keyframe for each cue point in the video and add a frame label to each keyframe that corresponds to the name of the related cue point.
4. Place content on the keyframes where the content corresponds to the correct cue point name (frame label).
5. Import the video file using the Video Import Wizard or the FLVPlayback component parameters.
6. Add a cuePoint event listener to the FLVPlayback component and add the event listener code pattern to frame 1 of the main Timeline.
7. In the event handler code, add a gotoAndStop action that targets a frame label of the same name as the cue point parameter name.

The ActionScript 3 version of the FLVPlayback components includes the new FLVPlaybackCaptioning component. The FLVPlaybackCaptioning component provides an easy way to include captioning content for accessibility or standard text captioning uses.

The ActionScript 3 component provides two ways to include captioning text:

1. Using a W3C standard caption XML file, called a Timed Text file.
2. Using an XML file containing event cue points with captions associated with the parameters field of the cue point.

Both options listed above coordinate the caption with specific points in the video's timing during playback. In this case, the synchronization work is done for you as the FLVPlaybackCaptioning component automatically listens for the cue point events and time when placed on the same Timeline as an FLVPlayback component. For creating captioning, there is no need to write ActionScript code—the component does the work for you.

The FLVPlaybackCaptioning component contains the following features:

• Captioning timing can be specified (also duration if a Timed Text file is used)
• Captioning text can be formatted via the XML file definition
• Captioning can be toggled on and off using the Captioning button
• Captioning supports multiple language tracks
• Captioning can be assigned to multiple FLVPlayback instances

For documentation on working ActionScript 3 FLVPlayback captioning, see the Using the FLVPlaybackCaptioning Component section of Using ActionScript 3.0 Components.

For detailed articles and example files on video synchronization, visit the Flash video templates page. Also be sure to check out other sections in the Video Learning Guide for Flash.