How to Prepare Your Flash Documents for TV Broadcast

In my previous article I showed you how to export a code-driven animation for video playback. The problem with writing these things is that everything is wonderful because I get to focus on a single task – but everyone then thinks, “Cool, I can do that” and then discovers they have walked into a minefield because preparing Flash for broadcast requires a lot of work behind the scenes.

In this article, I am going to walk you through some of the more important things you need to know and do when preparing Flash projects for broadcast.

A Little Background

For many of you, it may come as a bit of a surprise to discover that almost from its first release about 15 years ago, Flash animations were quietly moving from computer screens to TV screens. Animations were exported from Flash to QuickTime or AVI videos and subsequently prepared for broadcast on Avid workstations and showing up on the Saturday morning cartoon shows.

This was a painful process because everything that had to be done on the main timeline and ActionScript, nested movieclips and so on simply weren’t able to be used.

There was also a Flash constraint that continues to this day: You are “limited” to 16,000 frames and any one frame can have a “maximum” of 16,000 layers. On the surface that may seem to be more than enough room but do the math: at 30 frames per second a 16,000-frame timeline represents 9 minutes of playback. Apart from the fact that trying to get this monster to export is similar to pushing a watermelon through a worm, the odds are almost 100% that you will bump up against the 2GB limit for AVI files. This explains why many Flash animators, preparing content for broadcast, preserve their sanity by breaking their projects into 20 – 30 section chunks.

With the introduction of HD video in Flash Player 9.0.115 and the ability to create and play HD video using the H.264 codec and the .mp4 format Flash became untethered. The same video can be just as easily played in a browser as it can on a Sony Playstation or the HD screen in your living room. On top of all of that, SmartPhone manufacturers have come to the realization that their products are mobile devices which are being used for more than simply reaching out and “touching someone”. Though it is still early days in this arena, video is going to play a huge role in the rise of the smartphone. The day is not far off where, thanks to Flash Player 10, Flash animators will be producing content, in Flash, that shows up, simultaneously, on 52-inch HD screens, computer monitors, gaming systems and SmartPhone screens. In this article I am only going to deal with preparing Flash animations for TV.

Setting up Your Flash Document

Before you start it is a really good idea to know which aspect ratio you will be developing for.

The NTSC standard (National Television Standards Commission) which is used throughout North America and most of South America has a 4:3 aspect ratio which means that for every four pixels of width there are 3 pixels of height. Flash stage sizes of 640 by 480, 800 by 600 or even 320 by 240 are examples of 4:3 aspect ratios.

If you are going widescreen, the aspect ratio changes to 16:9.

Even though you have picked the appropriate stage size don’t think things stop there. We are dealing with screen-based media here and when you move from your computer screen to the TV screen the shape of the pixels change from square (computer) to rectangular (TV). If you don’t compensate for this, distortions will be introduced into your work. To overcome this, a common stage size that reflects the adjustment is 720 by 540. Flash documents created for use in a PAL setting should have a stage size of 720 by 576.

Frame Rate is Critical

Flash movies, as you know, can have varying frame rates. When Flash first appeared 12 fps was the standard. Today it is up to 24 fps, the default, though many developers and designers bump it to 30 fps or higher. Broadcast is rather rigid. The NTSC standard is 29.97 fps though 30 fps is commonly used.
If you live in Europe you most likely use the PAL (Phase Alternating Line) standard which was adopted in in the early 1960′s. It too, uses the 4:3 aspect ratio used by its NTSC cousin but there are differences you need to be aware of.

First off, the PAL frame rate is 25fps. This standard has better resolution than NTSC meaning its picture quality is also higher. Flash documents created for use in a PAL setting should have a frame rate of 25 fps.

Quicktime Isn’t Your Only Export Option

Though I showed you how to export a Flash movie as a QuickTime movie, PNG sequences are the way to go when frame accuracy is critical. With this technique your Flash movie, for want of a better analogy, is treated as a Flip Book and each frame of your Flash movie is rendered out as a numbered PNG document.

In this example I have applied one of the Motion Presets (Window > Motion Presets) to a movieclip on the Flash stage. The animation results in a 75-frame timeline. I selected File > Export > Export Movie and chose PNG Sequence from the Format pop down menu. The key here is to create a folder to hold the resulting png files. I am expecting a minimum of 75 png images but this number can grow to hundreds and even thousands depending on the number of frames in the Flash movie.

Clicking the Save button opens the Export PNG dialog box. The settings chosen are self-explanatory. Clicking the OK button starts the process.

There are now 75 png images in the folder and you will note they are sequentially numbered. It is extremely important that you don’t change any file name or number.

I opened After Effects CS4 and selected File > Import. When the Import File dialog box opened, I navigated to the folder containing the PNG images and selected the first file in the sequence. After Effects recognizes this selection as being the first image of a PNG Sequence and selecting “Force alphabetical order” makes sure the images come into After Effects in order. The neat thing about this is when I click Open, the sequence arrives in the After Effects Project panel as a single document, not 75 individual images. From there a Video or Motion Graphics artist can further manipulate the files before outputting for broadcast.

Making a Safe Flash Stage

If there is one thing that hacks me off about watching television it’s that, on occasion, the titles or the motion will be clipped off around the edges of the screen. This is due to the fact that TVs are not computer screens and in almost all cases will actually show a smaller version of the stage size. This why video producers and Motion Graphics artists will use overlays that show them both the Title Safe and the Action Safe areas of the screen.

These can be easily created in Flash and, if saved as a template, can be reused or you can use Guide Layers for single use purposes. The neat thing about Guide Layers is they aren’t exported.

In the above image I am using a template of a 720 by 540 stage. I used the Rectangle tool to create a box with a stroke and no fill that matched the stage dimensions, tucking the box up against the 0,0 point of the stage. Having the box containing the stage dimensions is an invaluable visual aid when you have content, like the above photo, that bleeds onto the pasteboard and covers the stage.

To create the Action Safe area I copied the box, selected Edit > Paste In Place and then, using the Scale and Rotate menu found in Modify > Transform > Scale and Rotate, reduced the size of the box to 90 percent of its original size. All of the important motion in your Flash movie should take place within this area.

The next step was to create the Title Safe Area. Again I selected Edit > Paste In Place and this time, in the Scale and Rotate dialog box I reduced the box to 80%. The Tile safe area ensures that the all important titles are clearly legible and aren’t cropped. This is why this area lies 20% in from the absolute edge of the stage.

I then converted the layer containing the boxes to a Guide layer by right-clicking (Command-clicking if using a Mac) on the layer name and selecting Guide from the Context menu.

TV Color Isn’t Web Color

The last thing I want to get into is the issue of color. In my previous tutorial one of the commenters, Shaun, mentioned “Just have to watch the bright colors–seem to bleed sometimes.” Some of you may have read that and wondered, “Huh?”

The fact is that your TV displays less color than your computer monitor. Your monitor can display all of the RGB colors from 0 to 255. When it comes to TV your Flash palette needs to be reduced to a range from 16 and 235. Black, [0,0,0], actually gets shifted to [16,16,16] meaning the colors between 0 and 16 are clipped. Same thing for white, [255,255,255]; it gets downshifted to [235,235,235]. The color that really tends to bleed is red, you might want to reduce it from [255,0,0] to [200,16,16] and add the swatch to your color palette.

If creating custom colors is tedious you might want to head out to the web and pick up Warren Fuller’s FlashNTSC swatch palette.

Installing it isn’t difficult. Open the Flash Swatches panel and, from the panel pop down menu select Replace colors. When the Import Swatch Color dialog box opens navigate to the folder where you saved the .clr file, select the file and click Open.

When the dialog box closes, the NTSC Swatches will appear in the Swatch panel.

To return to the default set of Flash swatches click the Swatch panel’s pop down menu and select Load Default Colors.

Conclusion

In this article I dealt with preparing Flash files for broadcast display on a TV. I started by explaining how the Flash stage size must have a particular aspect ratio and gave you the stage sizes for NTSC and PAL broadcasts that accommodate the shift from the square pixels of a computer monitor to the rectangular pixels on a TV.

I also discussed the importance of frame rate and showed you another method of export to broadcast – PNG Sequence – which is more frame accurate than the usual QuickTime export out of Flash.

From there I moved into how to identify the Action safe and Title safe areas of a screen and explained how to create these areas through the use of a Guide layer. I finished up by briefly reviewing a couple of color issues, how to deal with them and where you can pick up a free NTSC swatch file.

I hope, if you have reached this point in the article, that you understand there is a lot more to the process than simply firing up Flash’s QuickTime Exporter. That is the last step in the process.