Accessibility

Flash Quick Start: Building Flash video projects

Getting started with the ActionScript 3 FLVPlayback component

The ActionScript 3 FLVPlayback component lets you easily include a video player in your Adobe Flash CS4 Professional 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. 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.

You can find the FLVPlayback component in the Components panel under the Video tree control. Below this component 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.

Video section of Components panel

The FLVPlayback component also includes 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.

This article covers the following topics:

Adding the FLVPlayback component to your application

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

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. If it is not already open, open the Component inspector.

  4. With the FLVPlayback component selected on the Stage, click the source parameter in the Component inspector and enter a string that specifies one of the following:

    • A local path to an video file
    • A URL to an video file
    • A 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. In the Component inspector with the FLVPlayback component selected on the Stage, click the Value cell for the skin parameter.
  6. Click the magnifying glass icon to open 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. 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.

  8. Click OK to close the Select Skin dialog box.
  9. 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.

    Import Video dialog

  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.

    Skin selection in video import wizard

    • 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. 
    import fl.video.*;

var flvPlayer:FLVPlayback = new FLVPlayback();
addChild(flvPlayer);
//The next line assumes you have copied the skin file to the local directory
flvPlayer.skin = "./SkinUnderPlaySeekMute.swf"
flvPlayer.source = "http://www.helpexamples.com/flash/video/water.flv";
  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.
  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

AlertThis content requires Flash

Download the free Flash Player now!

Get Adobe Flash Player

To download the source files for this example, click here.

Back to top

Specifying the video file to play

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

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.

    3. Content Path dialog for entering source parameter

    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.

Back to top

Applying skins and playback controls

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.

Select Skin dialog box

Skins that are listed in the Skin drop-down menu are located in the folder Adobe Flash CS4\Common\Configuration\FLVPlayback Skins\ActionScript 3.0. 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.

Back to top

Using LivePreview

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. Clicking the preview parameter opens the following dialog box, which plays the source file.

Select preview dialog

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 run time, 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.

Using LivePreview

Back to top

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

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.

Back to top

Related Flash Quick Starts

About the author

Bob Berry is a senior technical writer with Adobe Systems, Inc. Prior to joining Adobe, Bob worked at Macromedia for four years, at IBM briefly, and at Informix Software for 10 years.