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.

In this exercise, I am going to show you how a purely code-driven animation can be exported as a QuickTime movie and further enhanced in After Effects CS4.

Final Result

The movie below shows the final effect we’re going to work towards:

Introduction

The early days of Flash for broadcast were, to be gentle, a nightmare. Flash movies could only be output as QuickTime format if they were entirely on the timeline. We couldn’t use nested movieclips, ActionScript or Library content. If you were sending a cartoon feature for broadcast, Flash’s 16,000 frame limit meant that the longest cartoon you could produce was around 22 minutes if you stayed with the default rate of 12 fps. The solution was to break the animation into manageable chunks and stitch them together in a video editing program.

Flash CS3 changed the game. In this exercise, you’ll learn how to export a purely code-driven animation as a QuickTime movie which we’ll further enhance in After Effects CS4.

Step 1: Source

Download the source file and open it in Flash CS4.

The file we will be using might be familiar to those of you who visit this site on a regular basis. It’s from the tutorial, Create a Whimsical Animated Flash Background, written by my associate Carlos Yanez. In that project Carlos uses an external class file to create a series of randomly placed semi-transparent bubbles and to put them in motion following a sine wave.

Extract the source zip file to your hard drive, and open BlurryLights.fla.

Step 2: Save

Delete the background layer and save the file. The background isn’t needed because we will be adding our own in After Effects CS4.

Step 3: Export

Select File > Export > Export Movie to open the Export Movie dialog box. Select QuickTime from the Format list and click Save.

The QuickTime Export Settings dialog will appear.

Step 4: Export Settings

Determine your QuickTime Export settings.

This dialog box is not terribly mysterious.

Check Ignore stage color to create an Alpha Channel video. This will give the exported movie a transparent background, as you’ll see later.

The Stop exporting settings are where you may get tripped up. If you have a timeline based animation, choose “When last frame is reached”. If you have a code-based animation like we have here, set a duration. If you don’t you will create a single-frame QuickTime movie which is sort of useless. I set this example to run for 10 seconds.

Next, click QuickTime Settings… to bring up the Movie Settings dialog box.

Step 5: Select Your Codec

Use this area to determine your codec. If you do change things just be aware that the Animation codec with a color depth of Millions of Colors+ is the one that provides the Alpha channel.

Step 6: Compile

Click the Export button to compile the video.

You will see three progress bars showing you what is going on and, when it finishes, an Alert will appear telling you where you can find a Log file for the process. Click OK.

Step 7: Save, Quit and Open

Save the file, quit Flash and open the video in the QuickTime player. The black background you see is the alpha channel.

Over to After Effects CS4

I have an alpha channel video meaning I can toss something in to the background with a bit more jazz than the gradient in the original tutorial. Let’s open up After Effects and see what we can do..

Step 8: Composition

Create a new After Effects Composition.

The size was set to match the 600 by 300 dimensions of Carlos’ piece. I also chose square pixels because the project was to be output as an FLV. I increased the frame rate to 30 fps, named the file BlurryLights and set the duration to match the 10 seconds of the exported Flash file.

Note: If you are an After Effects user you are probably wondering why I even bothered with this rather than, instead, sticking the video on the timeline. That is normally my workflow, but for some unexplained reason the video kept coming in scaled down from 600 by 300.

Step 9: Import

Import the QuickTime video into After Effects and drag it on to the timeline.

Step 10: New Solid

Create new solid and apply a Fractal Noise effect.

Fractal Noise comes in as a grey cloud so I used the settings shown to make it a lot more interesting.

Step 11: Filter

Apply a Glow filter to the Fractal Noise effect.

Grey streaks are interesting but adding a bit of blue helped tone down the effect.

Step 12: Contrast and Evolution

Tween the Contrast and Evolution properties of the Fractal Noise effect.

These two slight adjustments also toned down the animation and added a bit of “randomness” to the effect.

Step 13: Add Some Text

I’ve picked “TutsPlus” in two different colors.

Step 14: Effect

Add the CC Light Rays Effect; it will look like a spotlight sweeping behind the text.

Step 15: Tween

Tween the Light Rays effect.

By moving the center point of the effect across the letters I could get the light rays shooting out of the text.

Step 16: Render

Render the comp as an FLV.

I was going back to Flash so it made sense to use FLV format. My other options were to render an F4V or an MP4 file that used the H.264 compression.

Step 17: Save the Project

Conclusion:

The ability to render out a QuickTime video from a code based Flash movie is a massive step towards solidifying the relationship between After Effects and Flash. In this tutorial you saw how a code-based Flash animation, with a custom document class, can be output as a QuickTime movie with or without an alpha channel. You also saw how a Flash QuickTime movie can be enhanced through the use of AE’s host of effects.

Bottom line: This stuff is fun!

How do I use it?

Step 1:

Copy the ReflectEffect.as file into the classpath of your Flash project (or the same directory as your FLA if you’re not using classpaths).

Step 2:

In your code, create a new instance of the ReflectEffect class, passing it the display object that you want it to reflect, like so:

var reflect:ReflectEffect = new ReflectEffect(movieClipToReflect);

Step 3:

Create a new variable for your reflected object and add it to the stage (or wherever you like):

var reflectedDown:Bitmap = reflect.down(length, fade, offset, blur, alpha);
reflectedDown.y = movieClipToReflect.y + movieClipToReflect.height;
addChild( reflectedDown );

The functions reflect.down(), reflect.up(), reflect.left() and reflect.right() will return a Bitmap of your object reflected in that direction. (Only the “length” parameter is required, the rest are optional.) As you see, you’ve got a few interesting options.

I think “length” is clear. So let’s take a look at “fade”. For example, if you put 40 for length and 30 for fade, the reflection is going to end 10px behind the actual reflection. Or, if you’d like you can set 40 for length and 50 for fade. This will make the reflection go from an alpha of 1.0 to something like 0.2.

The next is very interesting: “offset”. This basically moves your reflection up/down (or left/right) inside the Bitmap output. I use this option in the preview so that you can move your object around and see a Mac-like effect.

The last two parameters, “blur” and “alpha”, are pretty clear — take a look at the comments in the class for more info!

Enjoy, and let us know how you use this class

With its clear layout , intuitive structure and informative and useful report system, uBooks will make your freelancing career that little bit easier!

uBooks

Simple Desktop Invoicing. Take a look at the site!

How do I install it?
Open Adobe Flash CS4, go to Help > Manage extensions, then just click "install" and locate the .mxp file.

How do I use it?
Go to window > other panels > Custom actions. In the window which opens, click on the button "+" and select a custom class ActionScript file (.as) which you´ve made, or you´ve downloaded. When you’ve added all the classes you want, just restart Adobe Flash CS4 and test your code hints.

Important!
The component will list all public function keywords, so your custom class must have the public, protected, internal and private keywords with the function keywords. It also lists public constants, public variables and public functions setter and getter as properties.

I made this component for my own use, but am happy to share it with Tuts+ users. I hope you like it!

For web designers and developers who want to ensure they’re using the very latest, best-practice CSS techniques.

Everything You Know About CSS Is Wrong! is an eye-opening exposé on CSS as we know it today. You’ll discover a fresh approach to coding Cascading Style Sheets where old hacks and workarounds are just a distant memory. You’ll learn how to start taking full advantage of the very latest CSS techniques while still catering for older browsers and discover what’s put the final nail in the HTML table-based layout coffin.

Offered Free by: SitePoint

Free for any use other than reselling.

It’s a complete OOP Class, with Event Listeners built in and ready to go! (Unlimited use).

An easy-to-follow guide that reveals the secrets of how to build your own breathtaking web interfaces from scratch.

You’ll be guided through the entire process of creating a gorgeous, usable web site by applying the timeless principles of user-centered design. Even if you’re short on design skills, with this book you’ll be creating your own stunning web sites in no time at all.