Macromedia Flash is everywhere. No seriously, it is everywhere. Not only is Flash used for online and offline movies, websites, games, and applications but it's also used for DVDs and broadcast television.

In fact, my first few years working with Flash (versions 3 and 4) were dedicated to authoring content for several broadcast animated series. Exporting from Flash to video formats so I could import and edit them on an Avid workstation was my only authoring requirement of Flash. I didn't need to know about Flash for the web, ActionScript, optimization, preloaders, or even buttons. It was analog Flash at its purest and that was the world of Flash that I lived in.

Eventually my Flash world expanded into the online realm of dynamic content when Shockwave.com asked me to develop an online animated series. I quickly learned how Flash was truly the Swiss army knife of design and development tools.

Today some of my clients request that their online content be repurposed for video, so the line between Flash for online and offline content occasionally becomes blurred.

You can do the same for your clients-or for yourself. What you need to do is learn how to set up the Stage so that your Flash project outputs optimally to video, use broadcast-safe colors in your project, and export your project to video.

Tip: If you are authoring several Flash movies that use the same properties, click the Make Default button before you click OK in the Document Properties dialog box. This ensures that every new Flash document you create will share these properties.

Setting Up the Stage for Video
Let's start with the basics. Open a new Flash document and then select Modify > Document (Control+J) to open the Document Properties dialog box (see Figure 1).

Here you determine the width and height of the Stage and its frame rate. But before you change anything, you need to decide what aspect ratio you are authoring to, so read on before you change anything.

NTSC (National Television Standards Commission), the video standard used in North America and most of South America, uses a 4:3 aspect ratio, which basically means a rectangular shape like a television set. To break it down in simpler terms, 4:3 means that for every four units wide, the picture is three units high. Apply this formula to a 16:9 screen and you'll get 16 units of width for every nine units of height. Simple arithmetic so far, but it's about to get tricky.

NTSC uses a pixel resolution of 720 x 480 pixels. But guess what? NTSC doesn't use square pixels; they are rectangular. (Why do they have to make everything so complicated?) A problem arises when you develop content for video on your computer because you are creating square pixels to be displayed as rectangular pixels. That means your image will no longer have the correct aspect ratio and will look slightly stretched. To compensate for this pixel chaos, you need to adjust the width of the movie so that the pixel resolution is now 720 x 540. Panic is now over.

NTSC uses a frame rate of 29.97 or 30 frames per second (fps). You can export Flash movies that have different frame rates such as 12, 15, or 24 fps without worry. These frame rates will be converted to 30 by your video editing software, although a movie authored at 12 fps and converted to 30 fps will not look as smooth as a movie originally authored at 30 fps.

PAL (Phase Alternating Line), the predominant video standard outside the Americas, also has a 4:3 aspect ratio but uses a 720 x 576 pixel resolution and a frame rate of 25 fps. PAL has a greater resolution than NTSC and therefore has a better picture quality. Its higher color gamut level produces higher contrast levels as well. But the lower frame rate, compared to NTSC's frame rate, will not be as smooth.

Film uses 24 fps, which is also a popular frame rate among animators. Although you can use 24 fps in your Flash project, when you export it to video you will need to convert the frame rate as well. This is easily done during the export process by specifying the appropriate frame rate for the video format to which you are authoring (PAL or NTSC). Keep in mind that this does not speed up your animation; rather, it simply makes your animation not appear as smooth. Because film and PAL have nearly the same frame rate (24 and 25, respectively), there will be hardly any visual difference.

Widescreen television, or HDTV, uses an aspect ratio of 16:9, which you can convert the same way by multiplying 16 and 9 by the same number. For example, 16 x 100 = 1600 and 9 x 100 = 900, for a total width and height of 1600 x 900 with which to author HDTV content. Depending on your display size and resolution, you may want to adjust the amount by which you multiply 16 and 9.

While resolution is important in video, Flash is resolution-free. As long as you are working in the correct aspect ratio, you can always resize your video when exporting. If you are using imported bi tmaps in your Flash movie, you will want to use a width and height that exactly matches your final output to prevent the images from becoming scaled in Flash. Back to Flash and your open Document Properties dialog box. Type in the width and height of your aspect ratio, enter the frame rate, and click OK.

Ensuring Title and Action Safety
Televisions do not generally display the entire width and height of your movie. They show a smaller portion of the true display size. Cropping a bit on all four sides will almost guarantee that what you create in Flash shows up in its entirety on a TV set.

Any good video editor will take this discrepancy into account. There's nothing worse than finding out too late that the title sequence you labored over for 10 hours appears on most TVs with several characters cropped, or is even completely invisible. To prevent this, you need to define which area is considered the safe zone within the dimensions of your movie.

There are two safe zones to consider: the action-safe zone and the title-safe zone. The action-safe zone lies 10 percent in from the absolute edge of the video. You can assume that everything falling within this zone will appear on a television screen.

The title-safe zone is smaller than the action-safe zone (see Figure 2) because it is much more important to ensure that all titles are clearly legible without any chance of a single letter being cropped. For this reason, the title-safe zone lies 20 percent in from the absolute edge of the video. When you add titles to your movie, make sure they are positioned entirely within this safer title-safe zone to avoid being cropped.

Place the title-safe zone in your Flash project on its own layer above all other content. This way when you are ready to export to video, you can delete this layer to prevent it from being included in the video file.

Tip: If you convert the safety layer to a guide layer, it will not be exported with the rest of the movie's contents. Because a guide layer is not included upon export, it's a cool way to retain the assets in your movie that you otherwise would not want to delete from the Stage. To convert a layer to a guide layer, right-click the area containing the layer name and select Guide in the context menu (see Figure 3).

Using Safe Colors
The computer monitor you are looking at as you read this article is designed to display the full range of 256 RGB color values (0-255). By contrast, television can display only a limited range of color values. There's a good chance that some colors you are using in your Flash movie fall outside the television value range, resulting in very noticeable color bleeding.

Open the Color Mixer tab in the Color panel and select pure white in the fill color swatch. The RGB values will update to reflect the values 255-255-255, where R = 255, G = 255, and B = 255 (see Figure 4).

Now select black in the color swatch and watch the RGB values update to show 0-0-0 (see Figure 5). This represents the full 256-color range of the RGB color value that is legal for computers to display.

For television, however, you must limit this range to between 16 and 235 colors. This means that the color value of black should be 16-16-16 and the color value of white should be 235-235-235 (see Figure 6).

The color red is one of the more usual suspects because it has a tendency to bleed more than any other color. To mix a television-safe value for red, open the Color Mixer tab in the Color panel and select the brightest red by clicking the fill color swatch and selecting the red color swatch on the far left side (see Figure 7).

Notice how the RGB color values are 255-0-0, which is far from the legal color gamut that television can display. Edit this color value by highlighting the R value of 255 and entering 235. Highlight the G value and enter 16 and do the same for the B value. You now have an NTSC-safe red color swatch with an RGB value of 235-16-16. Use the Type pop-up menu to add this swatch to your palette (see Figure 8).

If you apply this simple formula each time you mix colors in Flash, you will remain well inside the television color value range. The blue used for the pupils of my boy character, for example, are considered safe because they have an RGB value of 16-51-204 (see Figure 9).

Handling Movie Clips and Graphic Symbols
Exporting Flash projects to video format requires everything to be on the main Timeline. Graphic symbols are treated as part of the Timeline because, technically, they are in sync with it. So if you have nested animations, make sure to use the Graphic symbol type for all your symbols.

There is more than one way to create a symbol. If you have a vector drawing or imported image on the Stage, select it and choose Modify > Convert to Symbol. You will be presented with the Convert to Symbol dialog box (see Figure 10), where you can type in a symbol name, select its type, and determine its registration point.

Avoid movie clips. Avoid movie clips. Avoid movie clips! I can't emphasize enough the importance of avoiding the use of movie clip symbols containing content beyond the first frame. The movie clip in the exported movie will appear as a static image only. Did I say to avoid movie clips?

If any of your movie clips contain an animation, you must convert it to the Graphic symbol behavior. Movie clips are independent from the main Timeline and are not synchronized with other timelines. Graphic symbols play in sync with the main Timeline and other graphic symbols. They also render to video format, while movie clips do not. To convert a Movie Clip symbol to a Graphic symbol, select the movie clip instance on the Stage and, from the Property inspector (Window > Properties or press Control+F3), change its behavior from Movie Clip to Graphic (see Figure 11).

• 1
• 2
• 3
• next ›
• last »

Published May. 21, 2006— Reads 24,800 — Feedback 1
Copyright © 2006 SYS-CON Media, Inc. — All Rights Reserved.
Syndicated stories and blog feeds, all rights reserved by the author.

About Chris Georgenes
Chris Georgenes is a full-time freelance artist, animator, and all-around designer for the web, CD-ROM, and television. His clients include Pileated Pictures, LucasArts, Universal Records, Plot Developers, and AOL, among others. He maintains www.mudbubble.com as his online portfolio and www.keyframer.com as his Flash tutorial website. Chris is also a member of Team Macromedia.