Flash Article

Flash video learning guide

Note: This learning guide introduces core concepts of video on the web, and provides you with tools for developing your skills. The Flash product documentation is the source of many of these materials; always consult Flash Help (also available in Flash LiveDocs) first when learning to use new features.

Flash video lets you easily put video on a web page in a format that almost anyone can view. This guide provides an introduction to web video, including information on how to create and publish web video.

Requirements

To follow along with this learning guide, you will need to install the following software:

Flash CS3 Professional

• Try
• Buy

Note: This learning guide covers video in Flash CS3, as well as Flash 8. Be sure to note that certain features, such as H.264 codec support, are available only in Flash CS3 with Flash Player 9 and later.

Checklist for creating web video

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

For information on live video, see the Flash Media Server Developer Center.

To create on-demand web video:

1. Acquire some video. Either capture it yourself with a digital video camera or obtain it from someone else. The Video Technology Center contains articles about planning your video.
2. Decide on a delivery mechanism. See Delivery options for Flash video in this guide for more details.
3. Encode the video in a format compatible with Flash (FLV or MPEG-4). See Capturing and encoding video.
4. Add the video to your web pages, and publish the pages to the web. See Adding Flash video to your web page.

About video and the web

Video and the Internet seem ideally matched. Video is the medium that most closely echoes our day-to-day visual experiences, and the Internet 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 have not been standardized. Furthermore, the majority of video playback clients are not pre-installed on most visitors' systems, so many visitors must pause to download a plug-in or third-party application before they can 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, Flash video (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 about video, see Overview of video standards.

About Flash video

Flash video offers 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 to present video online include:

Ubiquity

Since the introduction of Flash video in 2002, Flash Player has become the most widely installed Internet video client, running on over 96% 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

Flash video provides immersive and interactive experiences. Because Flash treats video as simply another media type, you can layer, script, and control video content just like any other object in a SWF file. Flash 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. 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. A Flash video file contains primarily audio and video, and it plays inside a SWF file (see Figure 1).

Figure 1. Flash video file playing inside a SWF file

About Flash video features and production tools

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 CS3 Professional video features:

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

• Flash Video Import wizard: Simply choose File > Import > Import Video to import video into Flash. The Import Video dialog guides you through converting video files to FLV format and configuring the FLVPlayback component.
• Video encoding and cue point export to XML: You can export encoding options and cue point settings to an XML file using the Flash Video Import Wizard or the Flash CS3 Video Encoder utility. The XML settings can be imported through the same mechanism for consistency and ease of use across video production.
• FLVPlayback component: Use this component to play external FLV or MPEG-4 files and to connect to Flash Media Server. Flash CS3 Professional includes an ActionScript 3.0 FLVPlayback component that has been updated to the ActionScript 3.0 component structure. The FLVPlayback from Flash Professional 8 is still available when using an ActionScript 2.0 file, but it will play back only FLV video files; to play MPEG-4 video files, you must use the Flash CS3 component. (See Using the FLVPlayback component with Flash Player 9 Update 3 to take advantage of high-definition video format support and optimize full-screen mode with the FLVPlayback component in the updated version of Flash Player 9.)
• 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 FLVPlayback for more information.
• FLVPlaybackCaptioning component: New to Flash CS3 Professional, this component allows you to display synchronized captioning for the FLVPlayback component in an ActionScript 3.0 file. See Adding video synchronization and captioning.
• New layout and sizing features: The ActionScript 3.0 FLVPlayback component features sizing and layout improvements including external video preview, sizing control while viewing multiple videos, and full screen mode.
• Video codecs: Flash Player 7 introduced the Sorenson Spark codec. 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.
• Encoding options: You can now encode FLV files in three ways: through the Flash Video Import wizard, with the stand-alone Flash 8 Video Encoder and through the Flash Video QuickTime Export plug-in, which lets you encode audio and video into the FLV file format when exporting from third-party video editing applications that support QuickTime exporter plug-ins. To encode MPEG-4 videos using the H.264 codec, you have many options such as Adobe Premiere Pro and Adobe After Effects, 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 Flash CS3 Video Encoder: This stand-alone utility allows you to encode source video into FLV format. The Flash CS3 Video Encoder is installed along with Flash CS3 Professional.
• Adobe Flash Player 9: This high-performance, lightweight runtime plays web video and other Flash content.

Additional applications, servers, and video service features

In addition to Flash CS3 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 can't or don't want to set up your own Flash Media Server, you can use a hosted service. For more information on Flash Video Streaming Service (FVSS), see Delivering high-quality video with Flash Video Streaming Service.
• Flash Media Encoder: Adobe's latest 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 CS3: This web design tool includes a web video import mechanism to put Flash 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 CS3 Professional and Premiere Pro CS3: Adobe's industry-standard motion graphics and video production tools can export to MPEG-4 format, and to FLV format if Flash CS3 Professional is installed.

About web video delivery options

Before you can use Flash video on your site, you need to decide how to deliver the video; the two primary options are to deliver it as a progressive download or as a streaming video. (One important distinction to note is that Flash video files download progressively by default. Use of the Flash Media Server is required to deliver streaming video.)

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

For help deciding which delivery option to use, see Table 1. 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. Flash video delivery options

	Embedded	Progressive	Streaming
Clip is under 5 seconds long
Clip is 5 to 30 seconds long
Clip is over 30 seconds long
Low viewership expected
Medium to high viewership expected
Instant start
Intellectual property protection
Live video streams
Variable streaming rates based on visitor's bandwidth
SMIL usage to control file selection

For more information about delivery options, see Delivery options for Flash video.

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 must use the video features in Flash CS3. You also need Flash CS3 Professional to encode FLV files.

For more information about authoring options, see Adding Flash video to your web page.

Page 1 of 6

Next Page

About the author