Video Learning Guide for Flash: Overview

Adobe Flash Professional CS5 offers a range of tools and features that allows you to add video easily to web pages. To help you achieve best results, this learning guide will help you understand video development and deployment techniques.

This section of the Video Learning Guide for Flash provides an overview of key concepts and terminology related to web video and the video formats supported by Adobe Flash Player.

The following steps describe how to create web video content and publish it online. The procedures for creating and publishing on-demand (prerecorded) video are different from those for creating and publishing live video.

Note: To capture and publish live video, use Flash Player and Adobe Flash Media Server. For more information, see the Flash Media Server Developer Center. For higher-quality live video, you can also use Flash Media Live Encoder.

To create on-demand web video:

1. Plan and acquire some video—either your own or someone else's (respecting licensing rights).
2. Decide on a delivery mechanism.
3. Encode the video in the desired format (FLV, F4V, or compatible MPEG-4 format).
4. Add the video to your website and publish it to the web.

Video and the web seem ideally matched. Video is the medium that most closely echoes our day-to-day visual experiences, and the web is a boundless playground filled with interesting content. You might expect, therefore, that thousands of compelling websites would integrate video with data, content, and interactive controls to create rich experiences that go beyond what is possible with video on a television set.

Unfortunately, early video content on the web was often relegated to a simple rectangle of content playing back on a computer monitor, usually in a separate pop-up window covering the website page that spawned it. The video images were often small and ugly, and the overall experience was poor.

In the past, several technical challenges kept designers from using video content to its full potential, including the following:

Bandwidth limitations

Video is a data-intensive format, requiring megabytes of data to display even short video clips. The growth of broadband has greatly reduced this technical obstacle. Increasingly large numbers of site visitors have the bandwidth required to receive video content via the web, but file size can still present a problem for many visitors.

Complexity of authoring video for the web

The tool sets for creating interactivity, navigation control, and fusion of video with other rich media content had not been standardized. Furthermore, the majority of video playback clients were not pre-installed on most visitors' systems, so many visitors had to pause to download a plug-in or third-party application before they could view video.

Lack of compelling integration of video and other web content

Most video formats for the web offer no rich media capabilities beyond playback of video in a rectangular window. Fortunately, video created for Adobe Flash Player (which presents video content seamlessly and in context, in a form that site visitors can view using Flash Player) overcomes these issues. For more information, be sure to learn about NTSC and PAL video standards.

Video encoded for Adobe Flash Player comes in two "container" formats: FLV and F4V. F4V is the newer format, and the video that it contains is encoded with the H.264 codec. F4V playback is supported in Flash Player 9.0.115 and later. The FLV format supports the On2 VP6 codec for Flash Player 8 and later. Flash Player 9.0.115 and later can also play back any MPEG-4 compatible format including MP4, M4U, MOV, MP4V, 3GP, and 3G2.

The FLV and F4V video formats offer technological and creative benefits that allow designers to create immersive, rich experiences that fuse video together with data, graphics, sound, and dynamic interactive control. The advantages of using Flash Player to present video online appear below.

Ubiquity

Since the introduction of the FLV video format in 2002, Flash Player has become the most widely installed Internet video client, running on over 98% (Flash Player 9 ubiquity December 2010) of all Internet-connected personal computers. Also, Flash Player runs on a wide variety of platforms and operating systems. The ubiquity of Flash Player ensures that most visitors can view Flash video without downloading additional plug-ins, so you can reach more people with lower development, testing, and support costs.

Full creative control

Web-based video integrates seamlessly into your website, and you can add a new "skin" on your video content to customize your branding and design unique video playback controls. You can also set the size and aspect ratio of your video, and the video can dynamically change based on a data source.

Rich, interactive, contextual video

Video for Adobe Flash Player provides immersive and interactive experiences. Because Flash Player treats video as simply another media type, you can layer, script, and control video content just like any other object in a SWF file. Video is an integral part of the viewing experience, as opposed to a separate pop-up window that interrupts the experience.

The following image shows a sophisticated example of a web page containing web video synchronized to text and graphics. The superimposed dotted blue outline shows the boundary of the area where the SWF file is displayed; the dotted red outline shows the boundary of the area where the web video (FLV or MPEG-4) file is displayed, as part of the SWF content (see Figure 1). A SWF file can contain graphics, text, and client logic (for creating video controls, for example). It can refer to an external video file, and it plays in Flash Player. The video file contains primarily audio and video, and it plays inside a SWF file.

The following is a list of tools, features, servers, and services that you can use to create and deliver compelling web video experiences.

Adobe Flash Professional CS5 video features

Flash Professional CS5 is the primary tool used for producing the Flash video user interface:

• Video Import wizard: Simply choose File > Import > Import Video to import video into Flash. The Import Video dialog box guides you through configuring the look and feel of the video player and provides the option to launch Adobe Media Encoder for converting video files to FLV and F4V formats.
• Video encoding and cue point export to XML: You can export encoding options and cue point settings to an XML file using the Video Import Wizard or the Adobe Media Encoder utility. The XML settings can be imported through the same mechanism for consistency and ease of use across video production.
• FLVPlayback component: Use the latest FLVPlayback 2.5 component to play external FLV or MPEG-4 files and to connect to Flash Media Server for VOD streaming and DVR recording. Flash Professional CS5 includes an ActionScript 3 FLVPlayback component available when using an ActionScript 3 FLA file. The FLVPlayback from Flash Professional 8 is still available when using an ActionScript 2 FLA file, but it will play back only FLV video files; to play MPEG-4 video files, you must use the ActionScript 3 component.
• FLVPlayback Custom UI components: Use these components as an easy way to create your own configuration of controls for the FLVPlayback component. See the article Skinning the ActionScript 3.0 FLVPlayback component for more information.
• FLVPlaybackCaptioning component: This component allows you to display synchronized captioning for the FLVPlayback component in an ActionScript 3 file. See the Synchronization and captions section of the Video Learning Guide for Flash.
• Layout and sizing features: The ActionScript 3 FLVPlayback component features sizing and layout improvements including external video live preview, sizing control while viewing multiple videos, and hardware acceleration for HD scaling during full-screen mode.
• Improved authoring experience in Flash Professional: Improvements to the FLVPlayback's live preview features and the new cue points workflow allow content developers to view their work more easily.
• Dynamic streaming and live DVR functionality: The FLVPlayback 2.5 component can be used with the DynamicStream ActionScript classes and Flash Media Server to deliver optimized streaming and recording experiences.
• Video codecs: Flash Player can view FLV, F4V, and MPEG-4 codecs. Flash Player 8 introduced the On2 VP6 codec. Flash Player 9 Update 3 introduced the H.264 codec for video and the AAC-HE codec for audio. Learn more in H.264 for the rest of us.
• Encoding options: You can now encode FLV files in several ways: through the Video Import Wizard in Flash Professional, with the stand-alone Adobe Media Encoder, and with Adobe Premiere Pro and Adobe After Effects. To encode MPEG-4 videos using the H.264 codec, you can use the same options for FLV encoding, as well as numerous third-party tools. For more details about encoding video with the H.264 codec, see Exploring Flash Player support for high-definition H.264 and AAC audio.
• Adobe Media Encoder CS5: This stand-alone utility allows you to encode source video into FLV, F4V, and H.264 formats. Adobe Media Encoder is installed along with Flash Professional CS5, Adobe Premiere Pro CS5, and Adobe After Effects CS5. See Using Adobe Media Encoder CS5.
  Note: Adobe Media Encoder CS5 and Adobe CS5 products no longer support encoding FLV files with the Sorenson Spark codec.
• Adobe Flash Player 10: This high-performance, lightweight runtime plays web video and other SWF content. Learn more about Flash Player.

Additional applications, servers, and video service features

In addition to Flash CS4 Professional, you will most likely find that using some additional tools will greatly increase your video production and delivery options:

• Flash Media Server: Formerly called Flash Communication Server, Adobe's streaming media server streams audio and video to Flash Player 6 or later. The Flash Media Server is required for delivering streaming video. Flash Media Server 3 or later is required for delivering streaming MPEG-4 video.
• Flash Video Streaming Service: This subscription service from third parties uses Flash Media Server to provide hosted streaming video with high-performance requirements and worldwide scalability. If you cannot or do not want to set up Flash Media Server yourself, you can use a hosted service.
• Flash Media Live Encoder: Adobe's media encoding technology is designed to enable technical producers to capture audio and video while streaming it live to Flash Media Server (FMS) or the Flash Video Streaming Service (FVSS).
• Adobe Dreamweaver: This web design tool includes a web video import mechanism to put video onto a web page easily, with a more limited number of customization or "skinning" options for the video player. Note that you must have an encoded FLV file available before you can use it in Dreamweaver.
• Adobe After Effects and Premiere Pro: Adobe's industry-standard motion graphics and video production tools can export to MPEG-4 and FLV formats.

Before you can use video on your website, you need to decide how to deliver the video: either as a progressive download or as a streaming video. (One important distinction to note is that video files download progressively by default. Use of Flash Media Server is required to deliver streaming video.)

Note: A third option is to embed video in the Timeline of the Flash FLA file. However, this is recommended only for very short video clips with no audio track.

Table 1 can help you decide which delivery option to use. Find your situation in the left column and then see which delivery options are recommended. If two options are marked, then either one is recommended.

Table 1. Web video delivery options

For more information about delivery options, see the Progressive and streaming video section of the Video Learning Guide for Flash.

After choosing a delivery option, choose which authoring tool to use—Flash or Dreamweaver:

• Importing video directly into Dreamweaver is ideal for situations where you want to put video onto your site quickly and easily, with no interactive elements beyond simple video controls (play, stop, pause, skip ahead, and skip backward). The Dreamweaver solution offers an easy way to integrate web video into an HTML-based page layout.
• If you need to build a more interactive experience or need to heavily customize the look and feel of the video, you'll most likely use the video features in Flash. You'll need Adobe Media Encoder to encode FLV and F4V files if you're not using Premiere or After Effects to produce the video.
• You may also publish your After Effects compositions as XFL files that can be opened and edited in Flash Professional, as SWF files that can be viewed in a browser, or as FLV or F4V files which can be loaded into Flash Professional or Dreamweaver.

For more information about these authoring options, refer to the Adding video to a web page section of the Video Learning Guide for Flash.

For the latest articles and resources from Adobe related to video on the web, visit the Video Technology Center. The Capturing, digitizing, and importing section of the Using Adobe Premiere Pro CS5 online documentation may also be of help. Finally, be sure to check out other sections in the Video Learning Guide for Flash.