Video Learning Guide for Flash: Adding video to a web page

There are two tools at your disposal to add video to a web page: Adobe Dreamweaver CS5 and Adobe Flash Professional CS5. Use Dreamweaver to add video quickly to a 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 animation, and synchronizing the video with text and graphics, use Flash Professional. For video production workflows, use Adobe Premiere Pro CS5 to edit your video and Adobe After Effects CS5 to create compositions that can be published to a Flash file format (XFL or SWF), or to FLV or F4V formats.

This section of the Video Learning Guide for Flash describes both processes for adding video to a web page.

Before you can add video to your pages, you must decide which delivery mechanism to use: progressive download or streaming.

Whenever you add video to a web page, you should also add a behavior to the page that detects which version of Flash Player the viewer has. 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 an easy-to-use embed and detection method, see Detecting Flash Player versions and embedding SWF files with SWFObject 2.

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

To add video to a web page using Dreamweaver CS5:

1. Capture and/or encode an FLV file. For details, see Capturing and encoding video.
2. Select Insert > Media > FLV.
3. In the Insert FLV 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 FLV 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 web video, read Presenting video with the Flash video component in Dreamweaver CS3.

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

The following procedure describes how to use components to author a 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 Basics of video section of the Adobe Flash Platform documentation.

To import video for progressive download:

1. To import the video clip into the current FLA file, 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.

   Note: If you're working in an Adobe Flash Lite FLA file, you can import mobile device video bundled in a SWF file through the wizard.

3. If the video you are deploying is not in FLV, F4V, or MPEG-4 format, the Import Video Wizard displays a message stating that you should launch Adobe Media Encoder. If needed, click Launch Adobe Media Encoder, edit and encode the video as desired, and then return to the Video Import Wizard, where you can click Browse again to locate the new compressed video. For information on encoding your video using the Video Import Wizard, see the Encode and export video and audio section of the Using Adobe Media Encoder CS5 online documentation.
4. After selecting your FLV or F4V file, click the Next button.
5. Under the Skinning section, select a skin for your video clip. You can choose to do the following:
   • 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, read Skinning the ActionScript 3 FLVPlayback component or the Creating a new skin section of the Using ActionScript 3.0 Components online documentation.
6. Click Next and then Finish to complete the process. The Video Import Wizard will create a video component on the Stage configured so you can view the live preview on the Stage or test the video playback locally by exporting the SWF file (Control > Test Movie).
7. Upload the following assets to the web server hosting your video:
   • The FLV encoded video clip (which is located in the same folder
   • The video skin SWF file (if you chose to use a skin). If you choose to use a predefined skin, Flash
   • The SWF file containing the video component.
   • The HTML file that embeds the SWF and displays it in a browser.

Note: 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. If the video will be stored in a server path different from the local relative path, you must edit the component's source field (or contentPath field in the ActionScript 2 FLVPlayback component) to that of the web server to which you are uploading the video. In Flash Professional CS5 you can easily adjust the component's parameters using the Properties panel.

For more information about the FLVPlayback's parameters, see the FLVPlayback component parameters section of the Using ActionScript 3.0 Components online documentation.

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. If the video you are deploying is not in FLV format, you can launch Adobe Media Encoder 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.

4. Select a skin for your video clip. You can choose to do the following:

   • 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 create a video component on the Stage that you can use to test video playback locally. The component's live preview feature also allows you to view the video while authoring in Flash Professional.

5. Publish the file and 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 Flash Media Server or the 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 source field to specify the web server to which you are uploading the video.

Adobe Premiere Pro and Adobe After Effects are professional tools used for editing video and compositing graphics and special effects. Premiere Pro is used for frame-accurate video editing and optimization. After Effects is used to composite graphics, text, animation, and special effects with video. Both of these tools can export FLV and F4V video formats and have a close relationship with Flash Professional when it comes to producing web-based media.

As you saw in the previous steps, Flash Professional is used to incorporate video content with other data, graphics, sounds, and applications running in Flash Player. It can also be used to create animated content for use in Premiere Pro or After Effects, opening up many possibilities for creating engaging video. Generally the video production workflow starts in Premiere Pro by editing the size and format of the source video, and then moves to After Effects for further compositing and effects, and ends in Flash Professional where the video is displayed in a user interface.

After Effects CS5 offers three export options as integration points with Flash Professional:

• XFL: XFL files are representations of After Effects compositions that can be opened in Flash CS4 Professional or later
• SWF: SWF files can be used as stand-alone movies on web pages or loaded into other SWF files built in Flash Professional or the Flex framework
• FLV and F4V: FLV and F4V files are web-ready and can be embedded or linked in SWF files

Both Premiere Pro and After Effects support embedded cue points when exporting to FLV or F4V format. Embedded cue points are not supported for MPEG-4 formats.

Important: Some applications install a QuickTime export component that appears as an entry in the File > Export menu for Flash Video (FLV). Adobe recommends that you not use this command but instead render and export FLV and F4V files using the render queue.

For more information on the latest features in Premiere Pro, check out the Adobe Premiere Pro CS5 online documentation.

For more information on the latest features in After Effects, check out the Adobe After Effects CS5 online documentation.

For a tutorial on creating a project in Dreamweaver that includes video on the web, read Presenting video with the Flash video component in Dreamweaver.

For more information about working with After Effects and Flash Professional, check out Importing and exporting XFL files between Flash and After Effects.

Also be sure to check out other sections in the Video Learning Guide for Flash.