(Page 1 of 3 pages for this article  1 2 3 >)

Filed under: CS4 •Tips •Training •Web Video •

ADHD Guide to Flash Video for the Web

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 for this article  1 2 3 >)

                   

 

2D Footage with a Stereo 3D Rig in After Effects CS5.5 Jeff Foster | 02/10 Edit and Optimize 2D Stereo Pairs from a 3D Video Camera or Twin Cameras with a Modified Stereo 3D Rig in After Effects CS5.5 Adobe included a 1-step option to create a 3D Stereo Camera Rig in After Effects CS5.5, to everyone’s enthusiasm for a simpler workflow in 3D space. Great if you are working in 3D space in After Effects, but what about an easy option for 3D Stereo pairs captured by a 3D camera…

Adobe teases Prelude at the San Francisco Supermeet, FCPUG changes its name Scott Simmons | 01/28 The Adobe sneak looks intriguing. Makes me excited for CS6. From the looks of Twitter last night there were a couple of surprises at the Friday evening’s San Francisco Supermeet. First bit of news I saw was that Final Cut Pro User Group (FCPUG) has decided to drop the Final Cut Pro designation from their name to become the Creative Pro User Group. Second was a sneak peek from Adobe about a new application called Prelude.

3D Layers Overview with Photoshop CS4-CS5.5 Jeff Foster | 01/27 Part Three: Video Editing & Animation with Photoshop CS4/CS5 Extended Series Not only can you manipulate video layers in 3D space in Photoshop CS4 and later, but you can create 3D objects from primitives and import 3D models. In this FREE 12-minute tutorial from my Video Training DVD Photoshop CS4/CS5…

You must be registered to comment. This is an effort to reduce spam. Please REGISTER HERE.

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

Posted by MikeJ  on  10/29  at  06:57 PM

---

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?

Posted by Crish  on  10/29  at  09:11 PM

---

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

Posted by Wyld Stallyons  on  11/03  at  01:53 PM

---

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

Posted by DanConklin  on  11/09  at  09:10 AM

---

Name:

Email:

Location:

URL:

Smileys

Remember my personal information

Notify me of follow-up comments?

Submit the word you see below: