Accessibility

Flash Article

 

Flash video learning guide


Table of Contents

  1. Introducing Flash video
  2. Delivery options for Flash video
  3. Capturing and encoding video
  4. Adding Flash video to your web page
  5. Adding video synchronization and captioning
  6. Overview of video standards

Adding Flash video to your web page

There are two general approaches to adding Flash video to your web pages: using Dreamweaver and using Flash.

Before you can add video to your pages, you must decide which delivery mechanism to use: progressive download or streaming. For more information, see Delivery options for Flash video.

You can use Dreamweaver to quickly add video to your web page without having to use Flash. For more advanced capabilities—such as adding interactivity, selecting from a wider range of custom interfaces, layering video with other Flash animation, synchronizing the video with text and graphics—use Flash.

When you add web video to a page, you should also add a behavior to the page to detect for Flash Player. In particular, you should check that any visitor trying to view the page has a version of Flash Player that lets them view the content you're providing. For details on detecting plug-ins, see Robert Hoekman's article, Best practices for Flash Player detection.

Importing Flash video into Dreamweaver

The following procedure describes how to add Flash video to a web page within Dreamweaver. You must have an encoded Flash video (FLV) file before you begin.

To add Flash video to a web page using Dreamweaver:

  1. Capture and/or encode an FLV file. For details, see Capturing and encoding video.
  2. Select Insert > Media > Flash Video.
  3. In the Insert Flash Video dialog box, select Progressive Download or Streaming Video from the Video Type pop-up menu.
  4. Complete the rest of the dialog box options.

Note: To publish MPEG-4 video, you need to change the file extension to .flv so that Dreamweaver will recognize the video file. You also need to manually enter the video's width and height in the Insert Flash Video dialog box.

You can select an option that inserts code that detects the Flash Player version required to view the web video and that prompts the user to download the latest version of Flash Player if they don't have the correct version.

For a tutorial on creating a project in Dreamweaver that includes Flash video, see Jen deHaan's article, Presenting video with the Flash video component in Dreamweaver CS3.

Authoring with Flash

You can use the Flash authoring environment to build a rich interface for playing your video in the browser.

The following procedure describes how to use components to author a Flash video player. You can import a video file that is already deployed to a web server, or you can select a video file that is stored locally on your computer, and upload the video file to the server after importing it into your FLA file. For information on hand-coding your video controls using ActionScript, go to the Flash LiveDocs section, "Playing back external FLV files dynamically." (Select Using Flash > Working with video > Using ActionScript to play external Flash video > Playing back external FLV files dynamically. This technique also works for MPEG-4 video.)

Note: The following examples demonstrate publishing FLV files. To publish MPEG-4 format video files, a slightly different technique is used. See Using the FLVPlayback component with Flash Player 9 Update 3 for more details.

To import video for progressive download:

  1. To import the video clip into the current Flash document, select File > Import > Import video. The Import Video wizard is displayed.
  2. Select the video clip you want to import. You can select either a video clip stored on your local computer, or you can enter the URL of a video already uploaded to a web server.
  3. Select Progressive Download from a standard web server.
  4. (Optional) If the video you are deploying is not in FLV format, the Import Video wizard displays the Encoding panel. For information on encoding your video using the Import Video wizard, see the Flash LiveDocs section, "Selecting a video encoding profile." (Select Using Flash > Working with video > Encoding video > Selecting a video encoding profile.)

  5. Select a skin for your video clip. You can choose to:

    • Not use a skin with the video.
    • Select one of the predefined skins.
    • Select a custom skin of your own design by entering the URL of the skin on the server. For more information, see Dan Carr's article, Skinning the ActionScript 3.0 FLVPlayback component, or the Flash LiveDocs section "Creating a new skin." (Select Using ActionScript 3.0 Components > Using the FLVPlayback Component > Customizing the FLVPlayback component > Creating a new skin.)
      The Video Import wizard will encode your source video clip into the FLV format (if it isn't already in FLV format) and create a video component on the Stage that you can use to test video playback locally.

  6. Upload the following assets to the web server hosting your video:

    • The FLV encoded video clip (which is located in the same folder as the source video clip you selected with a .flv extension).

      Note: If the video clip is in FLV format, Flash uses a relative path to point to the FLV file (relative to the SWF), letting you use the same directory structure locally that you use on the server

    • The video skin SWF file (if you chose to use a skin).
      If you choose to use a predefined skin, Flash copies the skin SWF file into the same folder as the FLA file

    • The SWF file containing the video component.

You must edit the component's URL field to that of the web server to which you are uploading the video using the Component Inspector panel. For more information, see the Flash LiveDocs section, "Specifying the contentPath parameter." (Select Using Flash > Working with video > Using ActionScript to play external Flash video > Specifying the contentPath parameter.)

Note: The contentPath parameter as described in the section above is available when using the ActionScript 2.0 version of the FLVPlayback component. For more information on the source parameter in the ActionScript 3.0 version, see Flash LiveDocs section, "Specifying the source parameter." (Select Using ActionScript 3.0 Components > Using the FLVPlayback component > FLVPlayback component parameters > Specifying the source parameter.)

To import video for streaming with the Flash Video Streaming Service:

You can import a video file that is already deployed to a Flash Media Server or FVSS, or you can select a video file that is stored locally on your computer, and upload the video file to the server after importing it into your FLA file.

  1. To import the video clip into the current Flash document, select File > Import > Import Video. The Import Video wizard is displayed.
  2. Select the video clip you want to import. You can select either a video clip stored on you local computer, or you can enter the URL of a video already uploaded to your own Flash Media Server or a Flash Video Streaming Service (FVSS).
  3. Select Stream from Flash Video Streaming Service (FVSS) or Stream from Flash Media Server.

  4. (Optional) If the video you are deploying is not in FLV format, you can use the Encoding panel to select an encoding profile, and crop, trim and split the video clip.

    Note: This step only applies if you are uploading the video from your local computer. Video clips that are already deployed to a server must have previously been encoded in the FLV format, or a compatible MPEG-4 format.

    When the video you are deploying is not in FLV format, the Import Video wizard displays the Encoding panel. For information on encoding your video using the Import Video wizard, see "Selecting a video encoding profile" in Flash LiveDocs. (Select Using Flash > Working with video > Encoding video > Selecting a video encoding profile.)

  5. Select a skin for your video clip. You can choose to:
    • Not use a skin with the video.
    • Select one of the predefined skins.
    • Select a custom skin of your own design by entering the URL of the skin SWF file on the server.

    The Video Import wizard will encode your source video clip into the FLV format (if it isn't already in FLV format) and create a video component on the Stage that you can use to test video playback locally.

  6. Upload the following assets to the Flash Media Server or FVSS hosting your video:

    • The FLV encoded video clip (which is located in the same folder as the source video clip you selected with a .flv extension).

      Note: If the video you are working with has previously been deployed to your Flash Media Server or FVSS hosting your video, you can skip this step.

    • The video skin SWF file (if you chose to use a skin).
      If you choose to use a predefined skin, Flash copies the skin into the same folder as the FLA file.
    • The SWF file containing the video component
      You must change the FLVPlayback component URL field to specify the web server to which you are uploading the video.
Page 4 of 6
Previous Page
Next Page