Adding video, playback controls, and cue points

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

  

  Figure 2. View of the template while the FLVPlayback instance is selected on the Stage

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.

   

   Figure 3. ActionScript 3 FLVPlayback parameters in the Component Inspector panel

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).

   

   Figure 4. Cue points entered into the working template file

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.

Page 3 of 6

Previous Page

Next Page