Back To Listings RSS Print

ADHD Guide to Flash Video for the Web

How to get Flash video on the web, fast

By Art Adams | October 29, 2009

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

Page 1 of 3 pages 1 2 3 Next »

Editor's Choice
PVC Exclusive
From our Sponsors

Share This

Back To Listings RSS Print

Get articles like this in your inbox: Sign Up

Comments

MikeJ: | October, 29, 2009

Good article art but one thing worth pointing out is that H.264, like On2, is a codec optimized with a bock size of 16. So your suggestion of a frame size of 720x404 for 16:9 frames would be better served by a frame of 768x432 (1024x576 if you wanna go bigger, 512x288 to go smaller).

If you dont work in even multiples of 16 you do trade off some encoding speed and decoding playback efficiency as well as some spatial quality.

Cheers

Mike

Crish: | October, 30, 2009

Thanks Art for that quick-start guide. I know just enough to be dangerous in Flash so this fits right in!

I find if you click on the Edit button to the right of the Size values in the Properties panel, that you can select the “Match size to Contents” option. Click ok, and the stage will be resized to the movie and the movie will be centered. Then add 37 px to the height to allow for the skin at the bottom. (Though why Flash doesn’t realize there’s a skin there when it’s looking for the size of the Contents escapes me.)

There must be a way to make the bottom corners transparent I would think. Anyone?

Wyld Stallyons: | November, 03, 2009

You will also save yourself a world of pain if you remove spaces from filenames for anything destined for a web server. Use dashes or underscores. Many web servers are not as smart as desktop and laptop machines and will interpret a space as ” ” so that “My File.mp4” becomes “My File.mp4”

Annoying at best, but you may find your combo or Flash file, Server and browser unable to resolve the file name correctly resulting in broken links!

Jason

DanConklin: | November, 09, 2009

Thanks for that walk-through. The video plays extremely smoothly too. Does PVC have a flash server?

Please login or register to comment