converting-Flash-to-HD-video

Flash is great for web presentations, but what if you wanted to convert that nifty Flash logo animation into a video intro? You can. In fact, it’s pretty simple.

Here’s part one of a step-by-step tut on turning Flash animations into HD video intros using several recent projects at our studio. Whenever we develop Flash logo animations for clients, the question invariably comes up – “can I use this in my video?” And as a matter of fact they can. Converting Flash animations is relatively simple (once you know what you’re doing) and despite some tweaky stuff (that we’ll cover in part two) with some time, and the right tools anyone can be cranking out HD video animations, using Flash, pretty well right away. The following tutorial assumes that you have a working knowledge of Flash and understand the basic concepts of tweening, symbols, movie clips and creating .SWF files. If that’s you, read on..

Software you’ll need.

The software that I use to get decent video results? Flash (any version – I often use Flash MX, featured in this tutorial, because it’s pared down and faster to use without Action Script), QuickTime Pro (the Flash render engine doesn’t seem to like the H.264 codec, which we’ll need) and Fireworks for any bitmap graphics (we use the .PNG format for a multitude of reasons, most importantly the ability to feature transparent backgrounds without any image quality loss). Naturally, all our logo material will be vector based and come from Illustrator. If you want to add sound or music to Flash or the final video, that’s another matter entirely, and will require an application like Final Cut or its companion Soundtrack. For the sake of this tutorial, we’re going silent. If you want to add 3D to your Flash animation, you’ll need to get acquainted with Swift 3D by Electric Rain (the PixelWurx animation at the bottom of the page was created using the Swift 3D render engine). You’ll also need a fairly hefty hard drive as video files (especially raw QuickTime files) are huge. You won’t want to run out of storage half-way through a project.

Frame rate

Flash video frame rate
The most important part of this exercise is to start the Flash animation with video in mind. Flash is notoriously difficult to edit complex animations once they’re completed, so it’s best to get as many ducks in a row as possible from the get-go. The first is frame speed of your Flash document. Set that at thirty frames a second (30 FPS) so that the Flash animation will be compatible with QuickTime later on (Flash’s default frame speed is a tortoise-like 12 FPS.) Keep in mind that animations set-up with slower frame speeds will really rip if they’re just dumped into a 30 FPS video and you may have to expand the original timeline.

Movie image size.

The size of the image, or stage, area of your Flash animation depends completely on the size you’ll need the video version to be. As a QuickTime movie is basically a series of rasterized frames, the rules that apply to pixel-based bitmap graphics also apply here. You can always reduce your final version, but you should never enlarge it. There are some work-arounds (Flash uses vector based graphics) but we’ll not confuse the issue at this point. Also keep this in mind – the larger the image size of your final video, the larger (sometimes monstrously so) all your files will be. And the amount of rendering and saving time you’ll need goes way up. Bottom line – weight the image size of your video carefully, hopefully striking a happy medium. The sizes you should work at are as follows – 1980px x 1020px or 1280px × 720 px (the recommended size for YouTube). Keep in mind that you can set up videos at any size (for web use) but these are the sizes you have to use for HD video insertion.

Exporting Flash to QuickTime.

exporting video from flash
Once you’re ready to export your Flash animation to video, simply export it as a Movie file. Flash’s integration with some video codecs is a but hinky, so we want to export the animation as a raw QuickTime file, using the highest quality possible. This will become our video source file, from which, using QuickTime Pro, we can export videos six ways to Sunday. The file size of these puppies will be fairly large (a raw, seven second HD QuickTime video at 1920px × 1080px will weigh in at just over 2 GBS. Yes, gigabytes). While a file of that size will show off any logo animation in all its glory, it’s pretty impractical for firing things around to remote clients over the interwebs. Thankfully, we can compress the movie using QuickTime Pro without any appreciable loss in quality.

Using QuickTime Pro to compress movie.

quicktime pro settings
When you open a raw QT video in QuickTime, you’ll be presented with all sorts of different export options. For ease, compatibility and a decent size/quality trade-off we use the H.264 codec. There’s a couple of newer, better ones, but this is pretty well an industry standard and any video editor will be able to add your videos to his or hers. We want the logos in the video to really sparkle, so we’ll crank all our settings to the highest quality available. The image reduction is remarkable – a 2 GB raw QuickTime file will compress down to about 2 MBS (higher if there’s a lot of bitmap graphics incorporated into the movie). And that’s it. You’re now on your way to creating HD video from those lovely Flash animated logos.

Caveats.

The QuickTime render engine that comes with Flash doesn’t like embedded movie clips when outputting a video file from Flash. In fact, most of the time, QuickTime will ignore the clip and simply render a still frame for the duration of the clip. In order to get around that, you’ll need to break clips into frame-by-frame animations. We’ll cover that tomorrow, as well as show you how to resize old Flash animations into the larger aspect ratios of High-Definition video. In the meantime, check out this nifty little video (and logo) we produced for PixelWurx, our sister startup multimedia company.