Flash Article

Flash 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 Flash templates 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 format used by Flash and Flash Media Server.
• FLVPlayback component: The FLV playback control available in the Flash authoring tool. The ActionScript 3.0 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 the Flash Video 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 choose cue points within a video and use them for synchronization. The structure of the Flash template mirrors these cue points in the following ways:

• Navigation buttons match the cue points in the video
• Sections of text and animation content match the cue points in the video
• FLVPlayback component settings 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 SynchronizedVideoPres.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 SynchronizedVideoPres.fla file from the first page if you have not done so already and then open the file in Flash CS3 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.
• 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.

  

  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 SynchronizedVideoPres.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 "Capturing and encoding video" in the Flash Video Learning Guide 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 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.

Screens versus frames

Previous versions of this template used Flash screens as a synchronization and layout metaphor. Screens are not supported in ActionScript 3.0 and therefore are not being used in the current template layout.

Page 2 of 6

Previous Page

Next Page