ADHD Guide to Flash Video for the Web

How to get Flash video on the web, fast
Art Adams
By Art Adams 10.30.09

I hate reading manuals. They don't tell me what I want to know in the order I want to know it. I'd rather figure things out on my own, or if that learning curve is too steep, have someone show me in the basic concepts. I can usually figure out the rest later. For example, when I first sat down to learn DVD Studio Pro, the manual drove me insane. An editor explained the basic concepts to me in five minutes or less, after which building a DVD became intuitive and easy.

I sought out the same information for encoding and using Flash for the web, and Adobe was kind enough to school me in the basics. Now I get it. I know exactly what I need to do, no more and no less, to create Flash video for the web. Let me share with you what I learned:

This article assumes that you are using Adobe Media Encoder and Adobe Flash Pro. They are part of several Adobe software suite options, such as Adobe Web Premium.

First, let's encode some video. If you're familiar with media coding at all, the controls will look familiar:



The big box with the white and gold text is the file input window. I have one video file ready for processing, a 60 fps Quicktime encoded using the Animation codec. The format is FLV/F4V; preset is "custom"; and the file output is to a folder on my desktop. The fourth button down on the right is "settings", and clicking that brings up this window:



The F4V file is what finally made Flash relevant to my world. This is Adobe's implementation of the H.264 codec, employed by Apple since Quicktime 7 arrived, and as far as I'm concerned it is the best codec, by far, for high-quality small filesize web video encoding. Prior to using Adobe Media Encoder I played with On2 Pro's VP6 encoder, and the encoding quality never came close to what I could accomplish so easily encoding H.264 with either Apple's Compressor or Quicktime Pro. And, frankly, I refused to consider Flash as a viable alternative for web video encoding until H.264 Flash arrived.

This encoder has all the usual settings. I'm reducing a 1280x720 video clip to 720x404 (16x9, square pixel) using the MainConcept H.264 codec and VBR 2 pass encoding. VBR stands for "variable bit rate," meaning that the data stream expands or contracts depending on how much information changes in the image. A locked-off shot without much movement requires considerably less throughput than a handheld whip pan, for example. "2 pass" indicates that the encoder is going to look over the file first before encoding it, in order to best determine how to compress it.

The bottom setting, "level," is new to me. I looked it up and discovered that Adobe Media Encoder offers some settings that I've never seen in Quicktime: apparently it's possible to specify an H.264 "level" that tells Media Encoder how much firepower to use when encoding files. The higher the level, the higher resolution the intended playback device. Here I've gone with the default of 4.1, but apparently 3.1 would be fine for the frame rate and resolution that I've chosen. (For more about H.264 levels, see here.)

I've found that a target bitrate of 1.2 megs (1200kbps) works well for H.264 web encoding at SD sizes.

Once we've done our encoding, off we go to Adobe Flash Pro to build our Flash project:



The left column shows previous Flash projects. We're going to focus on the middle column, "Create New". Click on the top option, "Flash File (Action Script 3.0)". You should see the following screen:



The white box is the empty "stage" where I'll will build a Flash project. The "stage" defines the area in which my Flash movie will play. (All Flash projects are best thought of as moving picture files, as everything they contain will eventually be displayed as a moving picture.)

The column on the right is the Inspector, which will display pertinent information about whatever component of the Flash project is selected. At the bottom there are tabs for "timeline," "motion editor," and "output." As we're only focused on delivering a Flash video to the web we're not going to worry about those right now.

next page: importing the video and "skinning" it


Prev Next »