Getting started with the ActionScript 3 FLVPlayback component

The ActionScript 3 FLVPlayback component lets you easily include a video player in your Adobe Flash Professional CS4 (or later) application. With the FLVPlayback component you can play progressively downloaded Adobe Flash Video files over HTTP or play streaming video files from Adobe's Flash Media Server or from Flash Video Streaming Service (FVSS).

Prior to Flash Player 9, the FLVPlayback component supported only video files in FLV format. Flash Player 9, Update 3 added support for high-definition MPEG-4 video formats that use standard H.264 encoding. These formats include MP4, M4A, MOV, MP4V, 3GP, and 3G2 as long as they use standard H.264 encoding. The FLVPlayback component does not, however, support protected MP4 file such as those downloaded from Apple iTunes or digitally encrypted by FairPlay.

Note: For more information about the FLVPlayback component and Flash Player 9 Update 3 (ver. 9,0,115,0), read Using the FLVPlayback component with Flash Player 9 Update 3.

FLVPlayback 2.5 is available

Adobe released the FLVPlayback 2.5 component after Flash Professional CS4. The FLVPlayback 2.5 component is an update to the FLVPlayback component and is available for Flash Professional CS4 as a download on the Flash Media Server software tools page. Both the FLVPlayback and the FLVPlayback 2.5 components are included in Flash Professional CS5. The FLVPlayback 2.5 component increases the streaming performance and quality for video on demand (VOD) and live streaming and supports dynamic streaming and live digital video recording (DVR) functionality. Use the FLVPlayback 2.5 component the same way you would the FLVPlayback component.

Note: A project that includes instances of both the FLVPlayback and FLVPlayback 2.5 components uses the FLVPlayback 2.5 version of the component for all FLVPlayback component instances in the published SWF file. In other words, the FLVPlayback 2.5 component replaces instances of the FLVPlayback component in a project that includes both components when the project is published.

You can find the FLVPlayback and FLVPlayback 2.5 components in the Components panel (Window menu > Components) under the Video tree control. Below these components are several FLVPlayback Custom UI components, which provide individual buttons and control mechanisms that you can customize and use to play, stop, pause, and otherwise control a video.

The FLVPlayback components also include a set of prebuilt skins that incorporate playback controls. For more information on these skins, see the Applying skins and playback controls section of this article.

You can add the FLVPlayback component to your application in the following ways:

• Drag the FLVPlayback component from the Components panel
• Use the Video Import Wizard to create the component on the Stage
• Use ActionScript to create an FLVPlayback instance dynamically

Note: When you add the FLVPlayback component to your application, if you do not set the source or skin properties, the generated movie clip appears to be empty. For information on specifying a video file and applying a skin to FLVPlayback, beyond what is provided in the following procedures, see Specifying the video file to play and Applying skins and playback controls.

To drag the FLVPlayback component from the Components panel

1. In the Components panel, click the Plus (+) button next to the Video tree control if the tree is not already expanded.
2. Click the FLVPlayback component and drag it to the Stage.
3. For Flash Professional CS5, you edit the FLVPlayback parameters in the Properties panel. Click the Properties panel to see the parameters. For Flash Professional CS4, if the Component inspector is not already open, open the Component inspector.
4. With the FLVPlayback component selected on the Stage, click the source parameter in the Properties panel or Component inspector and enter a string that specifies one of the following:
   • Local path to a video file
   • URL to a video file (you can use http://www.helpexamples.com/flash/video/water.flv as an example)
   • URL to a Synchronized Multimedia Integration Language (SMIL) file that describes how to play a video file. For information on using an SMIL file, see Using ActionScript 3 Components in the online documentation.
5. With the FLVPlayback component selected on the Stage, click the skin parameter Value cell to open the Select Skin dialog box.
6. Select one of the following options:
   • From the drop-down Skin menu, select one of the prebuilt skins to attach a set of playback controls to the component. The Color picker appears so you can change the color and transparency of the skin.
   • To attach a custom skin, select Custom Skin URL from the bottom of the drop-down menu and enter in the URL box the URL for the SWF file that contains the custom skin.
   • Select None from the top of the drop-down menu and drag individual FLV Playback Custom UI components to the Stage to add the playback controls.

   In the first two cases, a preview of the skin appears in the viewing pane above the drop-down menu.

7. Click OK to close the Select Skin dialog box.
8. Select Control > Test Movie to execute the SWF file and start the video.
   

Use the Video Import Wizard to create the component on the Stage:

1. Select File > Import > Import Video to start the Video Import wizard.

2. Indicate the location of the video file by selecting one of the following options:
   • On your computer
   • Already deployed to a web server, Flash Video Streaming Service, or Flash Media Server
3. Depending on your choice, enter either the path (using the Browse button) or the URL that specifies the location of the video file.
4. Click Next.
5. If you selected a file path, you'll next see a set of radio buttons from which you can select one of the following options to specify how you would like to deploy your video:
   • Load external video with playback component
   • Embed FLV and play in timeline
   • Import as mobile device video bundled in SWF

   Note: Do not select the Embed Video option. The FLVPlayback component plays only external FLV files or streaming video. This option will not place an FLVPlayback component on the Stage.

6. Click Next. You will see the Select Skin dialog box.
7. Select one of the following options:
   • From the drop-down Skin menu, select one of the prebuilt skins to attach a set of playback controls to the component. A preview of the skin appears in the viewing pane above the drop-down menu.

• If you created a custom skin for the component, select Custom Skin URL from the bottom of the drop-down menu, and enter the URL for the SWF file that contains the custom skin.
• Select None from the top of the drop-down menu, and drag individual FLVPlayback Custom UI components to the Stage to add playback controls.

8. Click Next.
9. Read the Finish Video Import dialog box to note what happens next and then click Finish.
10. If you have not saved your FLA file, a Save As dialog box appears. Save your FLA file.
11. Select Control > Test Movie to execute the SWF file and start the video.
    

Use ActionScript to create an FLVPlayback instance dynamically:

1. Drag the FLVPlayback component from the Components panel to the Library panel (Window > Library).
2. Add the following code to the Actions panel on frame 1 of the Timeline.

3. Save the FLA file.
4. Copy the SkinUnderPlaySeekMute.swf (or whichever skin file you are using) to the same directory as the FLA file.

   Note: The skin SWF file needs to be in the same location as the published SWF file for your application. While testing your application in Flash Professional, this locations is the same folder as the FLA file. However, when you deploy/publish your files to their final location, you need to copy the skin SWF file to the same location as the published SWF file for your application—or else specify the location for the skin property relative to the deployed application files.

5. Select Control > Test Movie to execute the SWF file, which will start downloading and playing the FLV file, as in the example below.

Result

Skin SWF file locations

Skin SWF files are stored in the following locations:

• Windows: <program files>\Adobe\<Adobe Flash Professional Version>\Common\Configuration\FLVPlayback Skins\<version>\
  For example: C:\Program Files\Adobe\Adobe Flash CS5\Common\Configuration\FLVPlayback Skins\ActionScript 3.0
• Macintosh: Applications\<Adobe Flash Professional Version>\Common\Configuraton\FLVPlayback Skins\<version>\
  For example: Macintosh HD:Applications:Adobe Flash CS4:Common:Configuration:FLVPlayback Skins:ActionScript 3.0

Result

To get the source files for this example, download one of the two ZIP files linked to at the top of this page, depending on which version of Flash Professional you are using. For the Flash Professional CS4 source file for this example, download FLVPlaybackExample_CS4.zip. For the Flash Professional CS5 source using the FLVPLayback 2.5 component for this example, download FLVPlaybackExample_CS5.zip.

You can specify the video file for the FLVPlayback component to play in the following ways:

• Set the source parameter in the Component inspector.
• Use ActionScript.

To set the source parameter in the Component inspector:

1. Double click the value cell for the source parameter in the Component inspector to open the Content Path dialog box.
2. Enter the URL or local path for either the video file or an SMIL file that describes how to play the video file. For information on using an SMIL file, see Using ActionScript 3 Components in the online documentation.

The Match source dimensions option specifies whether the FLVPlayback instance on the Stage should match the dimensions of the source video file. The source file contains preferred height and width dimensions for playing. If you select this option, the dimensions of the FLVPlayback instance are resized to match these preferred dimensions.

To specify the video file with ActionScript:

You can also specify the name and location of the video file using the ActionScript FLVPlayback.source property or the FLVPlayback.play() and FLVPlayback.load() methods. The source property and both of the methods take precedence over the source parameter in the Component inspector because you set them at runtime. For more information, see FLVPlayback.source, FLVPlayback.play(), and FLVPlayback.load() for the FLVPlayback class in the ActionScript 3 Language and Components Reference.

You can select a skin for the FLVPlayback component by clicking the Value cell for the skin parameter in the Component inspector. Then click the magnifying glass icon to open the following Select Skin dialog box, in which you can select a skin or provide a URL that specifies the location of the skin SWF file.

Skins that are listed in the Skin drop-down menu are located in the Configuration folder of your Flash Professional installation (see Skin SWF file locations above). You can make new skins available to this dialog box by creating them and placing the SWF file in the folder. The skin name will appear in the drop-down menu with a .swf extension. When you publish the SWF file containing the FLVPlayback component, the skin files are automatically copied to the same folder as the SWF file.

You can also apply a skin to an FLVPlayback instance by setting the skin property using ActionScript. For an example, see Use ActionScript to create an FLVPlayback instance dynamically.

The FLVPlayback preview parameter in the Component inspector lets you view a frame of the source video file on the Stage along with any changes that you make to the component's skin. Flash Professional CS5 enables live preview automatically. Clicking the preview parameter opens the following dialog box, which plays the source file.

Click OK when the video reaches the scene that you would like to capture for previewing the component on the Stage. Displaying a frame of the file in the component on the Stage enables you to see it in relationship to other elements of the component and the application on the Stage.

Note: This has no effect on what you see when you run the published SWF. If you want to load a poster image of the video at runtime, use the Export button to export this image as a PNG file and write ActionScript to load it in at runtime. That exercise is beyond the scope of this article, however.

For more information about the FLVPlayback component, see the following resources:

• Full-screen support in Using ActionScript 3.0 Components
• Stream FLV files from Flash Media Server in Using ActionScript 3.0 Components
• Using cue points in Using ActionScript 3.0 Components
• FLVPlayback class in the ActionScript 3.0 Reference for the Adobe Flash Platform
• Using the FLVPlayback component with Flash Player 9 Update 3

If the FLVPlayback component does not meet your needs, and you prefer to create your own custom video player, read Handling metadata and cue points in Flash video for some useful tips.

Related Flash Quick Starts

• Using Adobe Media Encoder CS5
• Handling metadata and cue points in Flash video