Flash

Flash Video is rapidly changing the landscape of video on the web. Developers will need a new set of skills and knowledge relating to video editing, encoding, and delivery. This article introduces the video encoding process using the Flash 8 Video Encoder, a simple yet powerful tool for Flash developers.

In this article I will explain some of the basics of video encoding and give a step-by-step tour of the new Flash 8 Video Encoder with the On2 VP6 codec. The On2 VP6 codec enables Flash Video encoding at lower bit rates and larger frame sizes. At the end of this article, you will find a wide range of recommended settings for VP6 encoding. These settings provide a reference point for you as you create your own custom projects.

A Short History of Video on the Web
In 1998 web video was all about Real Media, which provided the best codecs combined with the best server. Within a few years, Microsoft had moved to the forefront with Windows Media. Apple was also on the move with QuickTime. For many years, these three companies had cornered the web video market. All had their pluses and minuses depending on the type of projects and client requirements. What they all had in common were modern video and audio codecs and the ability to deliver video through progressive download or streaming technologies. What they lacked was an easy way to add rich media and interactivity to the audiovisual experience. Developers were learning to use HTML plus TIME for Windows Media, SMIL for Real, and all the various technologies for QuickTime. None of them provided a perfect solution for delivering web video.

Experience with Flash Video
During the same period Flash became the web standard for motion graphics and interactivity on the web. A painless plug-in installation process made Flash Player practically ubiquitous on desktop and laptop computers. Developers used various approaches to integrate video with Flash. Many used Flash to make players for Windows Media, Real, and QuickTime. Others vectorized video to create an early version of Flash Video. Some began creating the video as vectorized Flash, later exporting the contents to video formats. The need for a fully integrated Flash Video codec soon became apparent.

The Spark codec brought integrated video to Flash. It marked a tremendous first step and was instantly accepted as a new alternative for web video. Our clients now use it to display television promos, music videos, and educational clips.

The New On2 VP6 Codec and How It Differs
Spark had its limitations at first. The limiting factor on quality in web video is the wide variance in download bandwidth among clients. The most important quality for a video codec intended for the web is encoding efficiency‹the codec should be able to squeeze the most quality into the smallest possible bit rate. This is especially important when using streaming video. The new On2 VP6 codec brings Flash Video up to speed with the industry leaders in encoding efficiency so that Flash Video projects can keep the bit rate down and the quality up.

What You Should Know About Video
If you are a Flash developer but new to video, here are a few tips and pitfalls to avoid:

• Frame size: Standard-definition NTSC video‹the format most commonly used in the United States‹is usually digitized to 720 x 480 pixels. Ignore these dimensions. Before encoding the video, resize it to a 4 x 3 ratio‹for example, 640 x 480, 320 x 240, and so on (see the next section). Or else crop and resize it to a 16 x 9 ratio‹for example, 640 x 360, 320 x 180, and so on. In case you ever work with various wide-screen formats‹such as 2.35:1‹crop the letterboxing, assume a 640-pixel width, and get out the calculator.

  Although these ratios are standard, and should be used to avoid distorting the video, the size of the encoded video is not set in stone. The original web video sizes used heights and widths that were evenly divisible by 16. This was mandatory for many early codecs. Although this is not necessary for modern codecs, you should stick to even heights and widths.

• Interlacing: When video is intended for television, it is interlaced. Each frame is made up of two fields of interlaced lines. On a computer monitor this is seen as a comb effect because one field is 1/60 of a second ahead of the other. Interlaced video should be deinterlaced before encoding.

  If the original source was film, the interlacing may occur in a three-progressive-frames, two-interlaced-frames pattern. This common method of telecining converts the original 24 frames per second (fps) film frames to 29.97 fps video frames. It is possible to use inverse telecine to return the video to its original 24 frames.

• Frame rate: Your video projects will usually be at 30 fps or will have been inverse-telecined to 24 fps. If you want to lower the frame rate, you should use equal divisions of the source frame rate. For 30 fps, use 15 fps, 10 fps, 7.5 fps, and so on. For 24 fps, use 12 fps, 8 fps, 6 fps, and so on.

Converting Frame Sizes
Frame size (mentioned in the previous section) brings up a number of confusing issues. Most confusing is the concept of square and non-square pixels.

Television presents video as horizontal lines. Computers present video as a grid of pixels. Both use a 4 x 3 ratio for standard video playback. The digitized version is referred to as a "square pixel" resolution.

Video is often digitized at what's called a D1 resolution, which means 720 x 480 for NTSC and 720 x 576 for PAL. Within the world of the 4 x 3 standard, these are referred to as "non-square pixel" resolutions‹NTSC pixels are wider at a ratio of 1.1:1 or 11/10, while PAL pixels are slightly taller at a ratio of about 0.915:1 or 54/59.

So why convert your video to square pixels and take the 720 x 480 frame to 320 x 240 or other legacy format? On one hand, that's the way it's always been done. But there's also no reason to use the non-square pixel dimensions if the encoded file will be played on a computer screen.

Since the early days of video, D1 has been the "legal" resolution. However, these are not the resolutions at which the vast majority of people watch video. As I mentioned earlier, television presents video at a 4 x 3 ratio screen size. When computers came along, screen resolutions did the same. Early computer monitor resolutions were 480 x 360 and 640 x 480 pixels; my current favorite is 1280 x 960.

Practically speaking, you should use the D1 resolution for videotape and DVD; use a 4 x 3 ratio for computer playback. A standard conversion from D1 to 4 x 3 would begin as follows:

• Capture at 720 x 480 pixels.
• Deinterlace or inverse-telecine the video (see the previous section).
• Crop eight pixels from the left and right sides (so it's 704 x 480).
• Resize the video to 640 x 480 pixels.

From here you may crop out further edge noise, crop out letterboxing, do further resizing, and so on. Everything from Step 4 onward is based on a 4 x 3 ratio.

There are times when I want to capture and de-interlace on the fly. In that case, the process would be as follows:

• Capture at 360 x 240 pixels.
• Crop four pixels from the left and right sides (so it's 352 x 240).
• Resize to the video to 320 x 240 pixels.

Once again, the target is a 4 x 3 resolution and the 360 x 240 resolution is only an intermediary step.

When you compare 720 x 480 and 640 x 480 video side by side on a computer screen, you'll see the most practical answer of all as to why you want to make the conversion: "That one looks stretched out!"

Working with the Flash 8 Video Encoder
The Flash 8 Video Encoder is installed in a separate directory as part of your Flash 8 Professional installation. This section walks you through some of its capabilities and features. After you know where and how to change the settings, check out the tables at the end. They give you some recommended settings for various types of projects.

When you launch the Flash 8 Video Encoder (Figure 1), you are presented with a simple interface. You can add content to the encoding queue by clicking the Add button or by dragging content to the queue window. The default setting for encoding is Medium Quality 400 Kbps. If your source is 320 x 240 pixels or less, you may be ready to click the Start Queue button now. These default settings (Figure 2) will give you good-quality VP6 video at the same frame size and frame rate as the source.

If you need to change the settings or use more advanced settings (Figure 3), highlight one or more source files and click the Settings button.

Tip: If you want to encode the same source with different settings, highlight the source, click the Duplicate button, and then adjust the settings separately for each instance of the source.

Within this simple settings dialog box you can set your source to encode to any of the Flash 7 or Flash 8 presets. You can also rename the output file and adjust (or trim) the in/out points for the encoding process. If you need to adjust further, click the Show Advanced Settings button to reveal more encoding options.

The Crop and Trim tab gives you advanced options for cropping the frame as well as information on the trim settings.

Tip: To avoid any distortion when cropping video, crop according to the ratio of the source. For example, when cropping a 4 x 3 source (240 x 180, 320 x 240, and so on) crop three pixels from the height for every four pixels cropped from the width. For extremely accurate trim settings, click one of the trim tabs on the bottom of the scrubber and use the left and right keypad arrows to adjust the settings.

On the Encoding tab you can create a custom setting by making adjustments to the frame rate, keyframe interval, frame size, and the audio or video bit rate.

Tip: Never resize larger than the cropped frame size of the source.

The most important variable is the amount of movement in the clip. Fast-moving music videos need a higher bit rate. Talking-head videos can be encoded using the lower bit rate settings. Adjust audio settings according to how important the audio is to your project. Music should be in stereo and go higher than 64 Kbps. Speech clips can be in mono and go as low as 16 Kbps.

Where to Go from Here
Video for the web is an exciting field, and there's much more to learn about it. You may be shooting your own video or capturing from various sources. You may need to learn more about the preprocessing methods that yield a perfect encode from a raw capture. You may be ready to build your first Flash Video player.

Many of these subjects are covered in the Flash Video Developer Center, and much more information will be coming there. Start with the Flash Video Learning Guide, which introduces Flash Video and provides you with tools to develop your skills.