Wednesday, April 11, 2007

Tutorial: Alpha Video in Flash

Somewhat quietly delivered in Flash 8, was the ability to support alpha masks created in After Effects, Motion, etc in the FLV video file. This is wicked cool if you need to incorporate a video element to lay atop dynamic animation inside of Flash and a flattened square video won't suffice. Reading about it when Macrodobe when released it I was stoked to incorporate it. Tutorial and crap anecdotal project story about alpha video after the jump. Check that. Crap Story. Great Project.

There's always been some way of shoe-horning video into Flash. Hillman's now six year old book detailed a real simple method to export frames from an NLE, clean them up in Photoshop, import into Flash, vectorize and animate. The goal then was the same as it is now. Create the illusion of elements animated to appear to exist in the same space.

A typical video window (4:3) looks just like that... a video window. You can't shake a visitor's perception that they're just looking at a video. Alpha video in Flash blurs that in a cool way to create a unique experience by deleting the square borders of traditional video.

I finally got an opportunity to do some alpha video work with Flash when I was brought on by the outstanding gang at Gastronaut Studios to develop the website for their latest Xbox 360 game, Small Arms.

They had all these great, high-def characters for the game and offered to provide me 3D renders of most anything I could think of. I really wanted a quasi-bio piece on each character and weapon in the game. But I wanted more than just an image, and I didn't want a stupid square of video. So I collaborated with the guys - three of whom made the ENTIRE game - and they provided me sequential frame renders for each character and weapon. About a 100 frames for each, which on my 20fps timeline came out to 5 seconds of animation.

Anywho, here's how you do it...

Step 1: Compiling the Source Material
The first component you obviously need is a keyed video or frame sequence that has transparency applied to it. If you want to work with a test piece, you can download the frames I was given for Small Arms. If you already have a video clip that has the transparency properly encoded you can skip step 2, or would prefer to deal with just the sample video clip and go to step 3.

Step 2: Exporting for Flash Video Exporting
I'm an Apple Motion guy and apologize for a lack of instruction for After Effects, but I suspect that user base can translate the concepts we talk about in Motion for their use...

Now that you have your keyed movie or image sequence together, crack open Motion. Select 'Start with a New Project', the select 'Custom...' from the preset menu in the resulting pop-up menu. Set the height and width to 512. Because we're not dealing with NTSB interlacing, set the Field Order to none (i.e. progressive). The frame rate for FLV video is independent of the Flash (.fla) you create, so you don't need to match the two. For this we'll just go with 15 fps, because that's what they were created at. We have 84 PNG frames, which means our duration should be in turn set to 84. Note that the background is automatically set to black at 0%, thus a transparent background. We want to keep that. Hit 'Okay'.

In the timeline we have an empty stage, so let's import some frames. Go to File - Import... (CMD + i). Select all of the frames in the animation. Fortunately in motion there's a nifty check box to tell it that we're importing sequential images. Check 'Image Sequence' hit 'Import', and Motion will seam the frames in order for us.

Once our flaming shithead friend (hey - they made him having a flaming bag of poop for a head) is loaded up, we're actually ready to export him right out. Go to File - 'Export...' and select the 'Options...' chicklet.

The preset is for DV Video, which is interlaced, heavily compressed, looks like shit, and is oh-yeah, not lossless. So in the 'Kind' pull-down menu select 'Quicktime Movie'. For 'Compressor' select 'Animation' with quality set at 100%.

Click the 'Advanced...' chicklet. Make sure the Depth pull-down is set to 'Millions of Colors+'. It's the default when you open the box, but before that it's just 'Millions of Colors' (no '+'). Hit okay out of the advanced options. And hit 'Export' on the main pop-up. You'll see motion compressing out our video. If you play you're video in Quicktime you'll still see a black background. Don't worry, it's soon good. Now we're ready to take this to the Flash Video Exporter.

Step 3: Using the Flash 8 Video Encoder
Using either the video you just created from motion or the sample .mov you downloaded, open the Flash 8 Video Encoder. Select 'Add...' to add a new clip to the queue and select our alpha Quicktime clip. By default it will set the FLV quality to medium. We want to change that.

Select the .mov clip in the queue then hit 'Settings...' so we can change it's parameters. Right off the bat you should see our guy, Von Brown, sitting all smokey transparent like on the window.

Click 'Show Advanced Settings' so we can make sure he keeps that transparency. Under 'Encode Video', make sure 'Video codec' is set to 'On2 VP6' (Sorenson Squeeze can't do transparency) and be sure to CHECK 'Encode alpha channel'. As for quality that's up to you. 'Medium' does a surprisingly serviceable job, even 'Low' isn't awful. Obviously, high is perfect-o if you can afford the bandwidth. With those settings in place, select 'OK', which will bring you back to the main queue. From there hit 'Start Queue' and our video will process. With our rendered .FLV we are finally ready to take the piece into Flash.

Step 4: Placing the Alpha-Masked FLV in Flash
Payoff time.

Crack open Flash and create a new movie. For a quick and dirty, create a new movie 512px by 512px with a 30fps timeline. At this point you can either drag in FLVPlayback from the components palette and set the parameters manually or use the 'Video Wizard'. We'll be lazy and let Flash figure it out for us today.

Go to File - Import (CMD+r) and select the FLV. When the 'Import Video' pop-up comes up, confirm the path you just selected and select 'Continue'. On the next screen, we're just going to do a simple progressive download, so select the first radio option for 'Progressive download from a web server', then select continue. Now the whole point of this was to make our video not look like some square video player, so select 'None' from the Skin pull down menu, so we don't end up with video controls and click 'continue'. Click 'Finish' and you've now imported your video into Flash. Publish and watch our flaming guy, well, flame.

Going farther
Using Von Brown from Small Arms is a really intense application of the Flash video. His flaming head adds a tremendous amount of mask detail. But the point is it works and Flash supports it. With a little optimization and smarts you can pull off some great alpha video mask movies AND still keep the file sizes in check.


Post a Comment

<< Home