Flash CS3 9.0.2 update with FLVPlayback that uses H.264 Video

Released this week, the new Flash CS3 Professional Update (to version 9.0.2) includes updates to the FLVPlayback component to support H.264 video, and provides support for Flash Lite 3 Update inFlash CS3 Professional, and all Debug and Release versions of this new Adobe Flash Player.

So here is my little tutorial on using the new FLVPlayback Component with H.264 video. This assumes that you downloaded the updates mentioned above (available at http://www.adobe.com/support/flash/downloads.html if your Adobe Updater does not notify you automatically)

1. Launch Flash CS3 Professional. Choose New Flash AS3 document from the Start Page.

2. Create two new layers in the Timeline Panel. Call the top layer actions and call the bottom layer flvPlayBack.

3. Open the Components Panel (Window > Components). Drag and drop an instance of the new FLVPlayback Component.

4. Name your FLVPlayback Component in the Properties Panel/Inspector. I called it myFLVPlayback for simplicity. Set the height and width of the component to an appropriate percentage size based on your video. For example, 1080P means (roughly) 1080 wide by 1920 high. I used a percentage value (75) of the original size to fit reasonably on the screen.

5. Grab a sample video that is H.264 encoded. I used a sample from the movie Pirates of the Carribean: Dead Man's Chest that supports 1080p.

The file was a whopping 126,807 KB (just to say I can do it).

Flash CS3 might pop up an error dialog box indicating that it cannot import the file, but you can ignore it (unless there is an encoding issue with the video, of course).

6. Select Frame 1 of the actions layer, and launch the Actions Panel (Window > Actions).


7. Save your Flash authoring file with a straight-forward filename, like FLVPlayback_H264_test.fla.

8. To test your movie, simply preview it in Flash CS3 (ctrl-enter for windows, cmd-enter for Macs).


9. Voila! Publish Preview your movie (File > Publish Preview > Default (HTML) )


Bonus...Play around with the fullScreenSkin.swf as well to test full screen capability!