Web video template: Spokesperson presentation with synchronized graphics

Additional Requirements

Flash Media Server 3 (optional)

• Try
• Buy

Note: Although it is optional for this tutorial, Flash Media Server enables you to use streaming video downloads instead of progressive video downloads. For more information, see the "Working with streaming video" section of this article.

Flash Player 9 or later (required for ActionScript 3 files)

• Download

Note: Flash Player 9,0,115 or later is required for the playback of high-definition video in H.264 format.

Controlling topic navigation and synchronizing text with a video presentation is a great way to bring a corporate-type presentation to life on the web. Compared to static slide shows, this simple-looking presentation captivates audiences because it combines audio, video, and animation. This template features video synchronization to content located on labeled frames in the Timeline. When the user clicks one of the buttons, the video and content update themselves to that topic automatically.

Here are some examples of how you can jazz up this presentation for your needs:

• Add your own video, resize it, and position it anywhere on the page
• Add company graphics and colors to any part of the presentation, including the background
• Add buttons, text, and so on to the navigation bar at the bottom
• Move the navigation bar to the top or the sides
• Add your own text and graphics that appear synchronized with your video
• Add FLVPlayback UI components for customizable video controls

This article provides an overview of the template structure and process required to transform the supplied file into a customized presentation suited for your own needs. (The article and the supplied files are an ActionScript 3 update to the former version of the article written for Macromedia Flash Professional 8.)

Updated features include the following:

• ActionScript 3 source file and ActionScript 3 class package
• ActionScript 3 FLVPlayback component
• Code editing not required to modify the template
• Full-screen button and full-screen mode
• Timeline-based synchronization method
• Updated user interface graphics
• Alternate dynamic XML-driven sample file

Note: If you are using Flash Professional 8 or an ActionScript 2 file in Flash CS4 Professional, please see the previous version of this article.

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.

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.

When you open the SyncVideoPreso.fla file, you see that the video is the black rectangular object placed on the FLVPlayback layer (see Figure 2). You can customize the video on this screen in several ways:

• Change the video source
• Change the video's size
• Change the video's location
• Add and remove cue points as synchronization markers
• Add FLVPlayback custom UI components for additional video controls

Changing the video that plays

Here's how to make the presentation play your own video instead of the supplied video example:

1. Click the FLVPlayback instance to select it.
2. Open the Component Inspector panel (Window > Component Inspector). You may have to reselect the video display on the Stage.
3. In the Component Inspector panel, click the source field to enter the path to the video file (see Figure 3). This is a relative path to the FLV file on the server. Note that if you are using Flash Media Server for streaming video downloads, you will need to enter an absolute path name to trigger the server.

Changing the size and location of the video

If the size of your video differs from what the template anticipates, or if you want to expand your video, you can change the video display size easily.

Place the video anywhere in the presentation. The video appears on the left center of the Stage by default. Keep in mind that if you change the position of the video, other content layers in the presentation might overlay the video if you don't adjust the content accordingly:

1. Select the FLVPlayback instance on the controls screen.
2. In the Property inspector at the bottom of the screen, change the W and H values so they correspond to the width and height (in pixels) of your video. You can also right-click (Control-click on the Mac) the FLVPlayback instance and select Free Transform from the pop-up menu to display handles on the video so you can resize it.
3. To reposition the video on the controls screen, drag the video to your preferred location.

Adding, removing, and disabling cue points

Cue points are a driving factor when it comes to synchronizing video with content in a movie. Flash CS4 Professional gives you an easy-to-use cue point editing tool located in the cuePoint parameter of the FLVPlayback component.

To view the cue points in the supplied file:

1. Select the FLVPlayback instance on the controls screen.
2. Open the Component Inspector panel and double-click the cuePoint parameter to launch the editing Flash Video Cue Points dialog box (see Figure 4).

3. To add an ActionScript cue point, click the plus (+) button at the top left of the dialog box. Edit the new fields as desired.
4. To edit an existing ActionScript cue point, click the Name or Time field and enter a new value.
5. To remove an ActionScript cue point, select the cue point and click the minus (–) button.

I explore cue points further in the "Adding text, graphics, and animations" section of this article.

Note: The approach described above will work only if you're adding and editing ActionScript cue points using code or the Cue Points editor. The supplied file uses Navigation cue points which are embedded at the time of encoding and are editable only at encoding time. Using embedded Navigation cue points is the recommended approach if you're using buttons to navigate to cue points in addition to displaying synchronized content with cue point timing.

Adding FLVPlayback custom user interface components to the display

Adding playback controls is easy. All you have to do is add any of the FLVPlayback custom user interface components from the Components panel in Flash CS4 Professional. These components offer a range of functional controls that can be added individually or in combination to an FLVPlayback instance. This version of the template features the addition of the FullScreenButton control to launch to full-screen mode. The components are designed to be easy to use and easy to customize graphically.

For example, if you wanted to add a mute button, you would follow these steps:

1. Open the presentation FLA file in Flash CS4 Professional.
2. Open the Components panel and drag the MuteButton component from the Video folder to the Stage. Position it as desired.
3. That's it. Double-click the mute button instance if you want to edit the graphics. Edit as you would normally edit inside a movie clip symbol.

Please see my article, Skinning the ActionScript 3 FLVPlayback component, for more information on skinning the FLVPlayback component and using the custom user interface components.

You can customize the buttons along the bottom any way you want by adding graphics, text, and even animations to the buttons (see Figure 5). The buttons and associated graphics are located along the bottom of the screen on the Buttons layer.

There are several things you can do to update the navigation bar:

• Change the buttons' positions and graphic content
• Change the section highlight color
• Remove navigation buttons
• Add navigation buttons

Updating the supplied button graphics

To move the collection of navigation buttons to another location on the screen:

1. Click the Buttons layer.
2. Lock the other layers and move the buttons and button graphics to the desired location.

To update the graphic or replace the graphic with text:

1. Click the Buttons layer.
2. Notice that the buttons appear as a series of rectangular buttons with text overlaying them. The buttons are all instances of the same symbol in the Library.
3. Change the button graphic by double-clicking an instance of it to enter its timeline. Edit the Up, Over, and Down frames as desired. Import new graphics by selecting File > Import > Import to Stage and choosing the graphic file you want to use. Return to the main Timeline (Control-E) when you're finished.
4. Change or remove the text by double-clicking the text to edit it. Change the text attributes by changing the values in the Property inspector at the bottom of the work area.

To resize graphics you have imported, right-click and select Free Transform from the pop-up menu. Use the handles to resize the image. Note that it is most efficient to import images at the size you intend to use them in the movie.

Changing the section highlight color

If you want to do so, you can change the highlight that appears on the navigation buttons (see Figure 6). You need to do this only if you want to change the color, add text, or even make the highlight a graphic, such as a fancy frame. Most people will probably leave the highlight as is.

The same green highlight box is used for all graphics, so you need to change the green box only in one place. Notice that the size of the highlight is the same as the size of the button. The code on the Actions layer dynamically aligns the highlight to the top-left edge of the buttons during the course of the movie. Keep this in mind if you create custom highlight graphics so you can achieve proper alignment.

Because all graphics used in the project are stored in a library, you can open this graphic directly from the library and change it once:

1. Open the Library panel by pressing F11 or selecting Windows > Library.
2. Open the Navigation Buttons folder (see Figure 7).

3. Double-click the small graphic next to the CustomButtonSelected item. In the center, you will see the green highlight box; you can edit the graphic there.
4. To change the green highlight box, double-click the green highlight. To change the line color, select a new color in the Tools palette:

You can add anything you want in this area, including graphics or text. Anything you add will appear when the video plays to this point. Notice that the green highlight is actually made up of two slightly different colors of green to create a glowing effect. You can change one or both of those box colors.

5. To accept your changes, click the controls screen again.

Removing navigation buttons

To remove the entire navigation button bar, click the Buttons layer to select everything on it, and press the Delete key.

Removing just one button is different. After you click the Buttons layer, highlight the button you want to delete and press Delete. Make sure you delete the button instance and the text field. To make sure you delete all the items, drag the mouse across that area of the screen to draw a box around anything on the Stage. If you see any blue highlight boxes, delete them.

Adding navigation buttons

To add a button to the navigation bar, you can either make the other buttons smaller to make room for the new one or place the button somewhere else on the screen. Buttons do not need to be in a single row. Follow these steps:

1. Lock all the layers except for the Buttons layer.
2. It's easiest to copy a button and then modify the copy. Highlight a button you want to copy on the buttons layer by clicking it with the mouse, and then copy and paste it (it will appear in the middle of the screen).
3. Position the button where you want it.
4. Select File > Import to Stage to add a graphic. Replace the old graphics with your newly imported graphics.
5. Click the button you just added. Be sure to click the button, not just the graphic. When you click the button, a blue highlight box appears around the button (see Figure 8).

   In the Property inspector, name the button instance. This triggers the button highlight when the cue point changes. The Actions layer code expects the name to be in the format of cue point name plus the characters _btn. For example, if the cue point is named introduction, then the matching button's instance name should be introduction_btn (see Figure 8). As you'll recall, cue point names are defined in the FLVPlayback component parameters and match the corresponding screen names as well.

6. In the example above, when the user clicks the introduction_btn button, the video moves to the introduction cue point and starts playing from there.

Customizing the user interface and content in the presentation can be as simple or complex as your presentation requires. There are several things you can do to customize the content on the screens:

• Change the background graphics and user interface
• Customize the text, graphics, and animations while the video plays
• Add and delete labeled frames containing content to match the cue points in your video
• Animate between labeled frames or within movie clip instances placed at labeled frames

Changing the background graphics and colors

You can add logos, background images or colors, borders, and anything else you want to display throughout the presentation. Aside from adding your own video, this is probably the quickest and easiest way to make the presentation truly look like your own.

Keep in mind that adding a large bitmap image increases the size of your presentation, so it will require more time to download. Instead, consider creating simple vector graphics using the drawing tools in Flash CS4 or an application such as Fireworks CS4. Or use a bitmap with a limited range of colors such as the background included in the sample.

To add your own graphics or colors:

1. Click the Title layer and edit the text field to add the title and formatting of your choice. Move the title anywhere you like if you'd like to experiment.
2. Add layers and frames containing graphics as you like. Usually, you will place graphics that are intended to appear throughout the movie on frame 1 without any keyframes following them on that particular layer.

To add a new background graphic:

1. Select the Background layer and delete the default graphic on the Stage.
2. Choose File > Import > Import to Stage.
3. Select the file to import in the Import dialog box and click OK. For some file types, you may see an additional dialog box with options you can set for that particular file.
4. Position the file where you want it to appear onscreen.

To resize the graphic, right-click (Control-click) the graphic and select Free Transform from the pop-up menu.

To add a background color or border, select the Background layer and use the drawing tools in the Tools panel to add a colored box, draw graphics, and so on. Anything you add to the Background layer appears throughout the movie.

Customizing text and graphics while the video plays

While the video plays, text and graphics appear on the screen. The text and graphics are carefully synchronized with the video so that they appear just as the video reaches specific cue points. You will probably want to update the text and graphics that appear when your own video plays.

Use labeled keyframes to place content in your presentation. By synchronizing the content appearance with your video at different labeled frames, you can control how the content appears alongside your video. When the video reaches a cue point, the frame with the corresponding label will appear.

To add your own text and graphics to an existing labeled keyframe, just edit the text and graphics on each labeled frame along the content layer in the template. Synchronize those locations with your video by changing the cue point names in the FLVPlayback component to trigger the frame label navigation at the right moment.

In the sample file, content animations are built in movie clip instances that appear at the labeled keyframes for synchronization. In most cases you will want to delete the existing content animation and add your own content and effects. You may find it easiest to delete the supplied labeled frames and start with empty ones.

Note that if you change the frame label names, you will have to update the associated cue point names in the FLVPlayback component parameters and the associated button instance names on the Buttons layer.

Adding and deleting labeled keyframes in your presentation

In this section, you learn how to add and remove labeled keyframes. Whenever you do so, you have to add or remove the corresponding cue point on the FLVPlayback component and update the associated button instance name on the Buttons layer.

To add a new content frame:

1. Click on the frame where you want to add a new label keyframe along the Actions & Labels layer.
2. Press F6 to add a keyframe to that frame on the Timeline.
3. Select the new keyframe by clicking it and enter a label name in the field at the upper left of the Property inspector. The label name should match the name of the cue point to which it corresponds.
4. Select the same frame on the Content layer and add a keyframe (F6).
5. Add your content to the new layer as desired.

Deleting a content frame is easy:

1. Click the keyframe in the Timeline.
2. Press Shift + F6 to remove the keyframe.

As you've seen in the previous sections of this article, the FLVPlayback component is the heart of the template as it powers the controls for the display. The component is capable of downloading FLV files using either progressive or streaming methods. Progressive video is available when using Flash Player 7 or later and the FLV format. This is the standard option for downloading FLV files from a web server. Progressive video has many advantages over standard embedded video, such as improved performance.

Streaming video can be achieved by using Flash Media Server (FMS) in addition to your SWF content. Flash Media Server is designed to stream content to SWF files. Streaming FLV content includes all the improvements of progressive video with added features like bandwidth monitoring and control, more efficient use of network resources, and the ability to create large multiuser applications that you can update in real time. In addition, you'll find that streaming video is required for truly advanced navigation enabled video interfaces where seeking is commonplace.

Note: For more information on progressive and streaming video, see the Progressive and streaming video section of the Video Learning Guide for Flash, as well as the Video Technology Center.

If you have installed the free developer edition of Flash Media Server, or have access to it, follow these steps to enable streaming video in your presentation file:

1. Open your presentation FLA file in Flash CS4 Professional.
2. Select the FLVPlayback component in the left of the screen.
3. Enter an absolute URL to the FLV file on the server running Flash Media Server. Using an absolute URL wakes up the server when the video is requested.

   Note: Your path to the streaming video will most likely be an RTMP path as that is the commonly used standard for the Flash Media Server. It may alternatively be an HTTP path.

4. Set the isLive FLVPlayback parameter to True and enter a new bufferTime value to match your average audience's target bandwidth.

Read Beginner's guide to streaming video with Flash Media Server 3 by Tom Green for more information about streaming video using the new video-on-demand service in FMS.

Where to go from here

There are many ways to continue enhancing your presentation to be more sophisticated and better suit your needs:

• Change the user interface and graphics to fit your target look and feel.
• Animate the text and graphics in unique ways to choreograph your content on the screens.
• Look at the SyncVideoPreso2.fla and SyncVideoPreso2.as file in the supplied sample files to see a more advanced variation of the template that uses XML to configure the screen dynamically.

Make sure also to try the other video templates provided in the Flash Developer Center. Also check out the Video Learning Guide for Flash to understand the basics of using FLV video.