13 July 2009
This article is geared towards beginning- to intermediate-level developers who are interested in getting up to speed on video synchronization techniques. While programming experience is not necessary to understand the article, you may find it beneficial to review the Video Learning Guide for Flash.
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.
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:
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:
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:
cuePointsparameter. 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.
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:
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?
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):
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.
If you are new to using templates or just want some direction, follow these steps to get started:
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:
Here's how to make the presentation play your own video instead of the supplied video example:
sourcefield 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.
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:
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:
cuePointparameter to launch the editing Flash Video Cue Points dialog box (see Figure 4).
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 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:
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:
To move the collection of navigation buttons to another location on the screen:
To update the graphic or replace the graphic with text:
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.
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:
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.
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.
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:
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.
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:
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:
To add a new background graphic:
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.
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.
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:
Deleting a content frame is easy:
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.
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:
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.
isLiveFLVPlayback parameter to
Trueand enter a new
bufferTimevalue 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.
There are many ways to continue enhancing your presentation to be more sophisticated and better suit your needs:
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.