Newsletter: Learn More ||| Multimedia Presentation Software |||
Translating Your Flash animations to Video
Introduction
 This tutorial explains how to translate Flash animations to broadcast quality video.

Contents
Why translate your Flash animations to video?
Macromedia Flash has done a great thing. It has taken the idea of cartoons on the Web out of the broadband future of myth, and turned it into a right here, right now reality. In the process, it's spawned a whole new industry and a new generation of animators producing shows for the Internet. But the fact is, even though there are millions of people on the Internet and growing, the number of people looking to the web for entertainment doesn't come close to the number of people who watch television. And video tape is still a great way to distribute or show case your work. Just about everyone has a VCR, and, even if they can't set the clock on it, they don't have to worry about downloads, missing links or crashing computers to use it.

Fortunately, using Flash does not mean you're limited to producing for the Internet. Flash is genuinely resolution and platform independent. So the movies you create can be transferred to video, or even at high resolution to film or Hi Def video, and still look great. At FlickerLab we've used Flash to, animate shows for Cartoon Network, animate cell elements for the Disney Kid's broadcast package, and just recently, to create a 3 minute animation in Michael Moore's new film bowling for columbine. Not only is it a great animation tool for creating cartoons, if necessary, we're able to repurpose the same animation work for both television and the Internet.

So, whether you're hoping to use your animation for more than one medium, make a television deal, sell videos of your work, create a reel to get more work, or just show your mother what you stay up all night doing, there are a lot of reasons for wanting to get your Flash animations onto video tape.
But wanting and doing can be so far apart. The world of video presents a whole new set of technical requirements and limitations. FlickerLab has put together this FAQ to help demystify the process. It contains a fair amount of technical information, which is unavoidable. But we hope it both makes some sense of the alchemy of video and gives practical guidance on how to best build and prepare a Flash file that will some day live on video. And be seen by millions. And make you famous.

One thing we don't focus on is computer video hardware, as this is another topic unto itself. First, you need to decide whether you want to put your work to video yourself, or outsource it to a facility such as FlickerLab. If you decide to do it yourself, there are literally dozens of solutions. You need to figure which one best fits your budget and your needs. Certainly a cost efficient method is using a firewire card or built in firewire port and dv video compression. A good source to learn more about digital video is 2-Pop.com.
Broadcast Action/Title Safe (with Flash template)
TERMS
Action Safe: The video area in which important actions should take place.
Title Safe: The area in which all type must be placed.

Broadcast Action/Title Safe

The visible image on a computer monitor does not extend fully to the edge of the monitor screen, so even when a movie is played full screen, the entire image is visible. On a television set, however, the image extends beyond the edge of the screen, making a certain portion of the image not visible. While this amount varies from television set to television, there is a standard set of two guides you can use to make sure the important parts of your movie remain visible on any television set. The outer guide is called action safe. All important actions should take place within this area. The inner guide is called title safe. Any text on the screen should take place within this area.

We've included a Flash version of the broadcast action/title safe template. Bring it into your Flash movie and use it to determine the edges of your critical action and where to place your text. TIP: After placing the template as a layer in your flash file, you can turn it into a guide by double-clicking the layer and selecting the "guide" option. This should allow you to view the template from within your Flash file, but prevent it from showing up once you have published the movie.

Then, when you're ready to go to tape, you don't have to worry if everything you spent so long to animate will show up or not, and you won't have to resize or reposition your images within the movie.

Type Size
The general rule in broadcast is that all type should be at least 18 points in size. But keep in mind your original frame size. If you are scaling your movie up 200% to get it onto video, you can have 9 point type. If you are reducing it to 50%, you should use 36 point type or greater. And so on. You should also avoid type faces with very thin lines, as these will tend to break up on video. (See Line Weight.)
Line Weight
A single frame of video is actually made up of 2 sets of scan lines. Because of this, a horizontal line 1 point thick or less will flicker on video. It is visible as the first set of lines scan, then disappears as the next does. So all horizontal lines should be 2 points thick or greater to show up correctly on video. However, you can cheat this a bit by making a line that is 1.5 pixels thick. This results in one solid pixel line, with a second line at 50% opacity. This will appear smaller than 2 solid pixels.
Interlace Flicker
For the same reason that single pixel lines flicker on video (see Line Weight), objects with hard horizontal edges also tend to flicker. Applying a slight vertical blur of .5 or 1 can soften the edge, and reduce the appearance of flickering. We often add a 1 pixel blur to our animations, in any case, to soften the generally hard look of Flash vectors.
Broadcast Color Safe
Although computer monitors have the ability to display millions of colors, many of us are already used to designing within the Web palette. The Web palette helps ensure that colors created on one computer system will look the same on others. This has allowed a greater level consistency and predictability through out the world wide Web.

Broadcast imposes its own limitations on color, which are tied to the limits set by the NTSC video standard. It's an old standard (as old as color TV), and is unable to handle some colors, especially very saturated ones. Colors that fall outside these limits are considered not broadcast safe, or "illegal" colors. They will look terrible on TV--buzzing, bleeding and in general carrying on in a most unpleasant manner. In certain cases they can even damage older television transmission equipment. This will not endear you to any station that shows your work. In fact, when a station encounters a tape with non-legal colors, they will usually not run it, or they will desaturate the colors in an extreme way, often producing a different, but equally ugly, result.

The only way to be completely certain a video image contains only broadcast safe colors is to run it through a broadcast waveform monitor, a device designed for this purpose. However, software programs such as Final Cut Pro and Adobe Premiere include a software version of waveform monitors. While this is not 100% as dependable as hardware scopes, it should give you a pretty close idea of whether your colors are NTSC legal or not.

The other option is to color correct a movie after it's done. This makes the most sense if you want don't want to be limited by broadcast safe colors in the Internet version of your animation, or if are converting something you already created. This can be done by processing the entire movie or spot correcting individual illegal colors. We do our spot color corrections by running our Flash file out through a waveform monitor, and adjusting the colors individually untill they are legal. We color correct entire movies in Adobe After Effects.
With broadband coming, why bother?
When we see it--we'll believe it.

Broadband has been right around the corner for some time now. That might be the case, but until everyone in every home has a superfast Internet connection and an equally powerful computer, and watches tv on the computer, nothing is going to replace the beloved television. Even then, much of what is sent over broadband will be video signals and will need to be suitable for broadcast or webcast.

In any case, for your work to be seen anywhere but on a computer right now, you need to translate it into a video signal.
What frame rate should you build your Flash file at?
Every second of video has 30 frames. But Flash animations can be done at any frame rate, which raises a couple of important questions:what frame rate should you work at, and second, if you choose to work at a rate other than 30 frames per second (fps), how do you convert to 30 fps? I deal with the question of frame rate conversion below.

You can create a Flash movie at 30 fps. But if is going to be played back on a computer, a 30 fps .swf file will generally produce unacceptably high data rates, unless the image is very small and simple, or the computer it is playing on is very fast. It can also create a lot of extra animation work if you want to draw in-betweens for all 30 frames. Fortunately, there is no need to build your Flash movie at 30 fps, even if you are planning to transfer it to video.

At FlickerLab, we usually build animation that needs to work on the web or video at 12 fps. This gives us a good balance of lower data rates and smoother animation. When creating cartoon style animation, it also keeps our work consistent with the majority of broadcast animation. While some high end cel animation is done at 24 frames per second (the rate that film is projected at), much broadcast animation is created at 12 fps. This is because it is drawn on "2's." In other words, each image holds for 2 frames. Do the math and it becomes clear why--half the amount of frames to draw each second. While Disney and Dreamworks may have virtually unlimited budgets to create their epic animations, most broadcast (and even more so, Internet) productions are on very tight budgets. But even the big studios do a lot of character animation on 2's. It looks good that way, so why create twice the work?

If we are using flash to build a cartoon solely aimed at broadcast or film, however, we build it at 24 fps. That way we can animate on 2's for most of the character animation, but do animate on 1's for segments or particular motions that require smoother animation.

If we are using Flash to build graphics for broadcast use only, and so won't be hand drawing in betweens, we usually build the file at 30 fps. This will give us the smoothest motion, and data rate won't be an issue for you. It is also possible to even build it at 60 fps, and convert this to a 30 fps video with fields (see next section).

In the end, you can decide to build it at any rate you want. The lower the rate, the smaller the file size, data rate and number of frames to animate, but the less smooth the animation. Conversely, the higher the frame rate, the higher the file size, data rate and number of frames to animate, but with smoother animation.
Frame Rate Conversion/3:2 Pulldown/Fields
You can use any video application such as Adobe After Effects, Final Cut Pro or Adobe Premiere to re-render the animations to 30 fps. If your frame rate is divisible into 30, that is all you need to do. A 15 fps movie will just hold each image for 2 frames. A 10 fps movie will hold each frame for 3 frames. And so on.

But if the frame rate is not evenly divisible into 30, for instance 12 fps, you will not have a smooth result going to 30 fps. Some frames will hold for 2 frames and some will hold for three. This can be resolved by taking advantage of video interlacing.

Although video has 30 frames per second, each frame is actually split into two sets of scan lines, or fields. The video monitor draws first field one, the odd set of scan lines (lines 1,3,5,7,etc.), then field two, the even set (lines 2,4,6,8,etc.). For a single video frame of a circle moving horizontally, as illustrated below, the first field will show the circle in position A for 1/60th of a second, and the second field will show it in position B for 1/60th of a second, creating a final frame as shown in illustration 3 below. This is called interlaced video, and how a standard video camera records motion.

Frame Rate Conversion Pulldown Fields



For animation coming from Flash, which does not have fields, the fields are used to smooth out the uneven conversion rate. For a frame rate that doesn't go into 30 evenly, these fields frames are blended, with one field being made up of the frame before, and one being made up of the frame after. When converting from 24 fps, which most films are shot at, to 30 fps, this is called adding a 3:2 pulldown. This is because you end up with footage that has 3 whole frames, and then 2 split frames.

At FlickerLab, we add the 3:2 pulldown by rerendering our exported movies out in Adobe After Effects.
Movie Size/Aspect Ratio
TERMS
Aspect Ratio: The number of pixels an image is wide compared to the number of pixels high. NTSC video is 4:3.
Pixel Aspect Ratio: The shape of the pixel making up an image. On computers it is square. For NTSC video it is rectangular, with each pixel taller than it is wide.

Flash movies are resolution independent. This means they can be scaled as big or small as you want without any loss of image quality (as long as you are only using Flash vectors, and not pixel based images such as .png or .jpg files). So movie size is not an issue in going to video. What does matter, however, is the aspect ratio. NTSC video, or the standard video you see on TV, is built at a 4:3 pixel ratio. This means that for every four horizontal pixels, there are three vertical pixels. If you want to build your movie at a wider aspect ratio, for instance 16:9, to make it movie more cinematic looking, you will need to either crop off the left and right edges when you go to video, or letter box the image by adding black bars to the top and the bottom.

If you have built your movie at a 4:3 ratio, you can export it to the appropriate size, which depends on how you are going out to video. Some older compressed video systems require a 640X480 sized movie. But most broadcast quality solutions require a D1 sized image, which is 720X486 pixels. DV video is 720X480 pixels. This raises another question, because neither 720X486 nor 720X480 are actually a 4:3 ratio. This is because there are two kinds of pixels. Computers use square pixels. But video uses rectangular pixels. This means that a full video image will look squished on a computer monitor, but will be stretched taller with the rectangular pixels on a video screen.

What you need to know is this. If you are going to:

D1- This is 720X486 rectangular pixels. Start with a 720X540 movie and squish it down to 720X486. If you are adding fields, whether it is lower or upper field first depends on the specific hardware. You should test both. The wrong one will be obvious.

DV- This is 720X480 rectangular pixels. Start with a 720X540 movie, squish it down to 720X486, then crop off the top 2 and bottom 4 pixels. DV uses lower field first for field rendering.

Or you can call up FlickerLab, and we'll deal with all of this for you.
Embedded Movie Clips
Although Flash movie clips can be very useful, they do not play when you export to a time-based format, such as video. These must be converted to graphic files. If the movie clip was looping, you will need to manually set the number of times the graphic will play in the Instance panel. The general rule is that whatever animation plays down on your timeline will export to video. But things that don't play on the timeline (animation embedded in movie clips and scripted animation) will not export.
Exporting to QuickTime or AVI
In order to get a Flash movie to video, it must first go to a pixel based format, such as QuickTime, avi or a numbered bmp sequence. You access this through the Export Movie sub-menu on the File menu. One note regarding QuickTime. On a Macintosh you can export to QuickTime Video, which means it will be pixel based. On windows you can only export to QuickTime, which means it remains a Flash movie, but playable by the QuickTime player. In this case it will not be pixel based. When you go out, you want to choose 24 bit color and no compression on any option. This will give you the cleanest looking start point for your conversion to video.
Data Rates and Flash Animation
One major advantage that video has over the Internet is that you are not faced with the data rate constraints as you are in animations that must be played in real time on a computer. You can put in as much motion or as many complex images as you want. Once it is exported to a movie and put on tape, that complexity is irrelevant.

Sometimes you may want to go back and add in some smoother tweening and higher resolution images that you couldn't use when it was to be streamed.
Compressed vs. Uncompressed video
TERM
Codec: Short for compression/decompression. Any software or hardware device that lowers the data rate on video, most often so that it can play in real time.

In order for video to be sent over the Internet and played in real time on a computer, the image must first be compressed. The most common forms of compression for this purpose include Sorenson, Real Player and Cinepak. The general rule is that the smaller the file size and data rate, the more distorted or degraded the image will look.

But compression is also used in many professional video editing systems such as the Avid, Media 100 or Final Cut Pro stations. These are usually variable compression rates, where you can make a decision balancing smaller file size and better quality.

But when you are going to broadcast, it is ideal to have an uncompressed image. This means that there is no distortion or degradation of the image to reduce its size. This requires specialized hardware such as an uncompressed Avid system, an uncompressed disk recorder, or a Final Cut Pro station with an uncompressed video board. These systems combine specialized video hardware and extremely fast hard drives to sustain the high data rates needed to work with uncompressed video. FlickerLab uses uncompressed systems to put our Flash work to video.
Tape Formats
Here is a breakdown of some of the major formats of video tape.

D1: The standard for digital, uncompressed broadcast video. However, this format is largely being replaced by Digibeta, a cheaper and less expensive format.

Digibeta: Comparable in quality to a D1 tape. It is also a digital signal.

Beta SP: A common format for cable stations. It is an analog format, but still high quality.

DV: This is a digital format that is compressed 5:1, but it's convenience, generally good image quality and affordability are making it very popular as a shooting format.

3/4": An older, analog format. It is mainly used as a viewing format at places that haven't bothered to replace it.

1/2": The analog tape which most people are familiar with. This is the type which runs in a home VCR.
Hi Def Video and Film
Because Flash is resolution independent, it is possible to transfer at high resolution to both Hi Def video (a set of new, hi resolution video standards) or to film. We recently created a 3 minute animation for Michael Moore's new film "Bowling for Columbine" in Flash. This was transferred to Hi Def tape, then converted to 35 mm film with great success.

As there are a wide range of technical standards possible for each of these choices, we can't go into too much detail here. Contact FlickerLab if you are interested in this option.
What is broadcast quality?
Broadcast quality is a subjective standard. In general, it means good enough for someone to put on the air. For a show like "Cops," that standard includes low resolution black and white surveilance footage shot from a state troopers car during a high speed chase. For a prime time show, however, it is more likely to mean shooting on film or Hi Def tape, and laying it off to digital NTSC video tape with an uncompressed signal.

So what should it mean for Flash animation creators? Making it as high quality as your capable of. For FlickerLab, this means ensuring broadcast safe colors, D1 resolution images, uncompressed video and 3:2 pulldown, layed off to digi-beta or beta-sp tape.

The Flash to video transers we do are without any compromises.
What if I'm going to tape and do not plan to broadcast it?
Although you might not have any immediate plans to broadcast your animations, there are still many reasons for you to consider putting your work to digital video. First is for archiving purposes. By archiving your work you place it on a platform that is independent of the Internet technologies which change from day to day. Also, if you want to send your work out to prospective clients, having all the work on one video tape keeps the audience captive. You don't have to worry about download times, incorrect URLs, the playback rates on computers. Video is much more stable than the internet. All you need is a VCR and a TV. You don't have to worry about the million snafus one might encounter on the Web.

In this case, you do not need to be as concerned with using uncompressed video or precise broadcast safe colors, though you should avoid highly saturated colors as they still won't play well on an NTSC television. A good solution for non-broadcast purposes is DV video, which you can output from programs such as Final Cut Pro or Adobe Premiere using a firewire connection.
What is the difference between NTSC and PAL video standards?
NTSC stands for the National Television Systems Committee. It is a national standard for television broadcast in the United States and other countries. The video signal has 525 scan lines of information, revealed at 30 frames per second. PAL is the European, African and Asian standard. It stands for Phase Alternation by Line. It has more information per frame (625 lines) and runs at 25 frames per second. These two systems are not compatible, so you need to be aware of what your destination standard is before you start the process.
This tutorial was written by Harold Moss of FlickerLab.
 
©2007 Wildform, Inc | Policies | Contact Us | Newsletter Options
 
©2010 Wildform, Inc | Policies | Contact Us | Newsletter Options
 
Wildform provides a 100% satisfaction guarantee on all our Flash software. If you are not completely satisfied with our Flash multimedia software for any reason you may request a refund within 15 days of purchase.