Accessibility

Table of Contents

Web video template: Spokesperson presentation with synchronized graphics

Understanding the project layout

This section provides an overview of the process for using the template and gives you a place to start. If you already feel comfortable with the template layout and general concepts, you may want to jump to the following sections for more details. For anyone new to using this type of video template or unfamiliar with the supplied file structure, this section is for you.

You should be familiar with the following terms used throughout the article:

  • FLV: This acronym refers to the Flash Video (FLV) format.
  • F4V and MPEG-4: This acronym refers to Flash Video 2 (F4V) which is the Adobe Media Player format for H.264 video. F4V and MPEG-4 formats are used for high-definition video and are supported in Flash Player 9,0,115 and later.
  • FLVPlayback component: The FLV playback control available in the Flash authoring tool. The ActionScript 3 FLVPlayback component includes many improvements in workflow, skinning options, and the ActionScript API.
  • Cue points: You will add cue points at various locations in the video so that you can synchronize content displays with those points or navigate to those points by button click. You can embed cue points in the FLV using the Video Import Wizard or Adobe Media Encoder. You can also create cue points using ActionScript or the FLVPlayback cuePoints parameter. Embedded cue points are more accurate and can be accessed with more options in the ActionScript API. Either type of cue point will work with this template, but the use of embedded navigation cue points is recommended.

Before you start

One of the key concepts repeated throughout the template is the concept of sections within the video. The big picture is that you are going to set cue points in a video and use them as section markers for synchronization. The structure of the template mirrors these cue points in the following ways:

  • Navigation button names match the cue point names in the video
  • Sections of text and animation content match the cue points in the video
  • FLVPlayback component events define the cue points and control the automated navigation through the content

For best results, create a quick outline of the sections you want to show in your movie. The goal during this planning stage is to figure out where to divide your video. What locations will your viewer logically want to jump to? Then figure out what text, image, and animation content you want to show for each section. What content can you use to reinforce the video and provide visual interest?

Understanding the supplied FLA file

The SyncVideoPreso.fla file contains a fully functional example of the working template. The content in the FLA file matches the content seen in the preview on the first page of this article. Take a moment to explore the FLA file.

Download the supplied files from the first page if you have not done so already and then open the file in Flash CS4 Professional.

Notice the layers and frames along the main Timeline. Labeled keyframes along the Timeline correspond to the cue point names in the video. Content synchronization occurs by navigating to a labeled frame in response to a cuePoint event dispatched from the FLVPlayback instance.

The synchronized video template contains six layers on the main Timeline (see Figure 1):

  • Background: Background screen that contains all the background colors, graphics, and text that you want to display throughout your presentation.
  • FLVPlayback: FLVPlayback component instance used to display the video.
  • Buttons: Navigation buttons and text labels.
  • Content: Content placed on keyframes corresponding to cue point names.
  • Title: Title text field seen throughout the presentation.
  • Actions & Labels: Frame 1 contains the code that powers the movie while subsequent keyframes contain labels corresponding to the names of the cue points.

     Main timeline
    in the template FLA

    Figure 1. Main timeline in the template FLA

The content on the Background, FLVPlayback, Buttons, and the Title layers appear continuously while the movie plays. On the Background layer, you can customize the user interface graphics. On the Buttons layer you can customize the buttons. The FLVPlayback component, on the layer of the same name, is the mechanism that loads and displays the FLV file. It acts as a center point and controller for the presentation.

The five labeled keyframes are shown one at a time while the video is playing. They are stopping points for the playhead in the movie. To add your own collection of labeled frames and associate them with cue point sections in the video, enter the frame label names into the cue point parameters for the FLVPlayback component on the controls screen.

You can modify the presentation by going to the labeled frame containing the content you want to update and making changes there.

First steps to using the template

If you are new to using templates or just want some direction, follow these steps to get started:

  1. Create a folder on your hard drive to store your copy of the presentation FLA file and your video.
  2. Duplicate the supplied SyncVideoPreso.fla file and rename it. Place the new file in the folder you just created. Note that it's a good idea not to overwrite the original file so that you can refer back to the working sample as you move forward.
  3. Create your video, convert it to the FLV format (see the Capturing and encoding section of the Video Learning Guide for Flash for more information), and place the FLV file in a relative position to the FLA file (usually next to the FLA or in a subfolder that is located in the same folder as the FLA file). Make a note of the filename and path relative to the FLA file. You will enter this information into the FLVPlayback component's parameters later to load the file.
  4. Open the FLA file in Flash CS4 and start editing. Note that because the supplied file already contains a working sample, you will be adding and removing content as you customize the presentation. Read the following sections for details on how to edit from here.