22 February 2011
You should have a basic knowledge of the Flash Professional user interface and a basic knowledge of working with FLA files. Certain features, such as H.264 codec support, are available only in Flash Player 9.0.115 and later.
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.
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.
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.
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.
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:
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.
Select a skin for your video clip. You can choose to do the following:
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.
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.
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:
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.