Flash Article

Flash video learning guide

Adding video synchronization and captioning

So far you have learned about producing Flash video and displaying it in your web page. The next logical next step is to utilize Flash's strengths and synchronize the video with content and caption displays in your movie. Flash CS3 Professional 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.0 component features for video captioning.

For detailed articles and example files on video synchronization, visit the Flash video templates page.

About video cue points

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 Flash content.

Three types of video cue points

There are three types of cue points; navigation, event, and ActionScript. Navigation and event cue points are embedded directly into the FLV file during encoding. Navigation cue points are ideal for Flash 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.

Note: Using navigation cue points embedded directly into the video is the only way to create accurate seeking to a time in a progressively delivered 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. This can currently be done only with FLV files; MPEG-4 video can utilize only ActionScript cue points.

Creating cue points

Navigation and event cue points can be added to FLV files using the Flash Video Import wizard or the Flash CS3 Video Encoder at the time of encoding. ActionScript cue points can be added using the FLVPlayback component's cuePoint parameter in the Property inspector while authoring the movie or by using ActionScript at runtime.

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

Responding to cue points

Once you have created your cue points, you have to respond to them using a bit of Flash 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.0 version of the FLVPlayback component or the ActionScript 3.0 version of the component.

For documentation on handling ActionScript 2.0 video events and cue point parameters, see the Flash LiveDocs  section, "Listening for cuePoint events". (See ActionScript 2.0 Components Language Reference > FLVPlayback Component > Using cue points > Listening for cuePoint events.)

For documentation on handling ActionScript 3.0 video events and cue point parameters, see the Flash LiveDocs  section, "Listening for cuePoint events". (See Using ActionScript 3.0 Components > Using the FLVPlayback Component > Using the FLVPlayback component > Using cue points > Listening for cuePoint events.)

Cue point parameters

When you catch a cue point event in ActionScript, the event handler function is passed an event object which 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: The name of the cue point.
• time: The time associated with the cue point.
• type: The type of cue point (navigation, event, or ActionScript).
• parameters: An object containing variables associated with the cue point.

Common ways to synchronize Flash video to Flash content

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 Flash content are to navigate to frames containing frame labels that match the name of the cue point (in an ActionScript 2.0 or ActionScript 3.0 timeline-based file) or to navigate to slides named the same as the cue point names (in an ActionScript 2.0 screens-based file). The key is to use the cue point name as a way to navigate to a location in Flash that contains the content that should appear with the corresponding time in the video.

Checklist for creating video synchronized to Flash content

The following list describes common steps involved in creating a Flash file containing video synchronized to text or graphics along the Flash 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 Flash 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 Flash 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.

Using the ActionScript 3.0 video captioning features

The ActionScript 3.0 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.0 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.0 FLVPlayback captioning, see the Flash LiveDocs  section, "Using the FLVPlaybackCaptioning Component". (See Using ActionScript 3.0 Components > Using the FLVPlaybackCaptioning Component.)

Page 5 of 6

Previous Page

Next Page