Migrating Flash Projects to Video

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.

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 bitmaps 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.

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.

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).

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).

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).

Next, change the behavior of the instance from Single Frame to either Loop or Play Once, depending on your needs (see Figure 12). Make sure there are enough frames on the main Timeline to accommodate the graphic symbol's length. To lengthen the timeline, choose a frame in the Timeline panel that represents the duration of the movie and select Insert > Timeline > Frame (or press F5). You will now be able to drag the playhead back and forth (or press Enter) to see your nested animation play.

In general, when you author content for video, avoid dynamic content completely. Flash documents that include ActionScript, buttons, and dynamically loaded content will fail during export. Even a simple stop(); action causes the export to fail. But if you do have dynamic content, read the later section on SWF2Video.

Your movie is now ready for exporting. You have the right aspect ratio, frame rate, and colors, and everything is on the main Timeline or set as Graphic symbols. You're good to go.

You have more than one option when you export your video, and there are slight differences depending on whether you are authoring in Mac OS or Windows.

Basically it comes down to three different options: AVI (Audio Video Interleave), Apple QuickTime, or an image sequence. Formerly your choice of platform dictated your format. Macintosh users exported to QuickTime and Windows users exported to AVI. Now both formats are compatible across platforms.

AVI and QuickTime Export Settings

Mac users have the option of exporting to QuickTime video, which results in a true pixel-based video file. Exporting to QuickTime on Windows produces just a Flash movie in QuickTime Player; it is not a pixel-based video file. The only way to export to a true pixel-based video format in Windows is to purchase QuickTime Pro (currently US$29.99 from Apple Computer), open the exported movie from Flash in QuickTime Pro, and then export it again as a QuickTime movie.

When you export from Flash to AVI or QuickTime, you will have a few options from which to choose. Typically it is a good practice to keep your movie as uncompressed as possible and at the highest color bit available.

QuickTime Export Settings

There are many settings you can make in the Export QuickTime dialog box (see Figure 13):

• Dimensions: Enter a width and height in pixels for the exported QuickTime video, or select Match Movie to make the QuickTime video the same size as the Flash SWF file and keep its aspect ratio.
• Alpha: Control the transparency mode of your movie, as follows:
  • Alpha Transparent makes the Flash background transparent, allowing content behind it to be visible
  • Copy makes the Flash track opaque and masks all content in tracks (layers within the QuickTime wrapper) behind the Flash track
  • Auto makes the Flash track transparent if it's on top of any other tracks and opaque if it's the bottom (or only) track in the SWF file
• Layer: Select where in the stacking order the Flash movie resides, as follows:
  • Top places the Flash track always on top of other tracks in the QuickTime video
  • Bottom positions the Flash track behind other tracks
  • Auto positions the Flash track in front of other tracks if any Flash objects are in front of video objects in the Flash application, and behind all other tracks if Flash objects are not in front
• Streaming Sound: Export all streaming audio used in the Flash project to a QuickTime soundtrack.
• Controller: Specify the QuickTime controller style used to play the exported video: None, Standard, or QuickTime VR.
• Loop: Repeat the video when it reaches the last frame.
• Paused at Start: Pause the video until some user interaction occurs.
• Play Every Frame: Play every frame of the movie without skipping (sound is disabled).
• File Flatten (Make Self-Contained): Combine the Flash content and imported video content into a single QuickTime video file, making it easy to distribute and archive.

  Deselecting this option links the QuickTime file to whatever external files compose it. This keeps the QuickTime file size consequently smaller. It's also useful if you ever want to edit one or more of the dependant files individually. Once you update them, the QuickTime movie reflects your changes because it references them externally. Of course, if you ever move, delete, or corrupt any referenced file, the QuickTime movie will not be able to show it.

AVI Export Settings

There are not as many settings to make in the Export Windows AVI dialog box as there are for QuickTime (see Figure 14):

• Dimensions: Enter a width and height in pixels for the exported AVI video. Check the Maintain Aspect Ratio option to keep the same aspect ratio as your Flash movie.
• Video Format: Select 18-bit, 16-bit, 24-bit color or 32-bit with Alpha format. An 18-, 16-, and 24-bit color represents eight bits for every RGB color value. A 32-bit color is the same, with the addition of eight more bits representing the transparency of the color value.
• Compress Video: Display a dialog box allowing you to select from a list of standard AVI compression options.
• Smooth: Apply anti-aliasing to the exported AVI movie.
• Sound Format: Set the sampling rate and size of the soundtrack (if sound is present) and whether to export it in mono or stereo.

If your Flash project contains any audio, there are some important technical details you need to consider. Quality is important, specifically sounds recorded in stereo at a 44.1 kHz sampling rate and 16-bit depth. When you develop a project for video output, it is always best to record at the highest quality whenever possible.

Working with Compressed Audio

In a situation where your sound file is relatively long, say five minutes or more, it may be best to convert it to a compressed format that Flash can import, such as MP3. Once you convert your audio file to a compressed format, the file size will be much easier to work with. Importing a compressed version of the sound into Flash also helps keep the movie file size manageable. Just make sure to retain a backup copy of the original high-quality sound file so you can reimport it into your Flash file for final export later.

Speaking of length, the actual running time of a half-hour television program is approximately 22 minutes. But working with a 22-minute Timeline in Flash is potentially problematic. At 30 frames per second, a 22-minute animation ends up being 39,600 frames long. Because Flash is not really capable of handling timelines of this length, instability can become a factor. To avoid crashing and the potential of a corrupt file, break up the audio into smaller chunks and import them into several different Flash files that you can later stitch together in your video editing program. I recommend that you work in smaller durations, somewhere between 30 and 60 seconds long.

There are a number of useful audio editing tools available to edit your sound files. My personal favorites are Sound Forge Audio Studio and Vegas, both from Sony. They run only in Windows. Adobe Audition is another choice for Windows users. For Mac users, there's Soundtrack Pro from Apple. If you are on a budget, try Audacity, a very capable and open-source (free) audio editing tool available for Mac OS, Windows, and Linux.

When your animation is complete and you are ready to export it to video, delete the compressed sound files from the Flash movie. Export only the animation to your chosen video format and then import this video file, along with the original high-quality sound files, into your video editing program of choice, such as Adobe Premiere or Apple Final Cut Pro. This method not only keeps your FLA sizes to a minimum but also provides some editing flexibility because both sound and animation are maintained on separate tracks for further editing.

Synchronizing Animation with Sound

To sync your animation with the imported audio in Flash, you must embed the audio in the main Timeline. Select File > Import and locate the audio file on your hard drive. Once it's imported, create a new layer on your main Timeline, select the first keyframe in this new layer, and locate the sound file in the Property inspector from the Sound pop-up menu.

By default, the sound behavior is set to Event. An Event sound plays in its entirety, independent of the Timeline, and does not ensure proper synchronization with the animation. You can change the behavior from Event to Stream by selecting the Sync pop-up menu in the Property inspector. When you set the sound to Stream, you will be able to grab the playhead and move it back and forth across the Timeline and hear the sound play. This is called scrubbing. Sound files, when set to Stream, are embedded in the Timeline and will be in sync with the animation that resides on the Timeline and any graphic symbols containing nested animation.

I know I said earlier that when you author content for video, avoid dynamic content completely, but when it comes to exporting a Flash movie with dynamic content—anything that requires user input or that goes beyond just time-based animation (for example, using ActionScript)—you do have solutions.

One such solution is SWF2Video by Flashants, a powerful utility that converts SWFs published from Flash to AVI format. This includes movie clips, ActionScript events, human interactions, and audio.

The SWF2Video interface is surprisingly simple. Select File > Open and navigate to the SWF movie published from Flash and choose File > Create AVI. After naming your AVI file, you will be presented with the AVI Export Setting dialog box. From here you can select how the sequence is exported as well as edit the dimensions, apply compression or leave as uncompressed, set audio options (if any), and more.

The SWF2Video IDE is amazingly simple. Upon launch there's little more than a window with the familiar File, Control, Options, and Help menus. Select File > Open and navigate to your SWF. Open the File menu again and select Create AVI (see Figure 15) or Create Image Sequence. SWF2Video even supports batch processing of files.

When you select Create AVI, the AVI Export Setting dialog box opens, allowing you to refine your movie considerably further (see Figure 16).

The Sequence settings are as follows:

• Skip "goto backward frame" in main timeline: If the Flash movie contains a loop in the main Timeline by using the gotoAndPlay(0); command, select this option to break the loop by ignoring the ActionScript code.
• Frame by frame in main timeline: Convert the main Timeline animation into a keyframe sequence.
• Normal: Convert with the movie's normal playback sequence, including movie clips and ActionScript events.

For the Duration setting, specify the start and end points during export by entering the exact frame numbers.

There are several Video settings to make as well:

• Frame rate: Default is the original setting of the movie. If you modify this value, the output video will be faster or slower than the original movie.
• Color Depth: Select 24 bits RGB or 32 bits RGB with Alpha format. The 24-bit color setting represents eight bits for every RGB color value. The 32-bit color setting is the same as 24 bits with the addition of eight more bits representing the transparency of the color value.

Clicking Select in the Video section opens the Video Compression dialog box (see Figure 17). Here you can choose the appropriate compressor to apply to your video. Leave this set to Full Frames (Uncompressed) because this is always best when working with high-quality video. People do not generally compress this because otherwise loss of quality will occur.

Other video compression settings are as follows:

• Compression quality: Select from 0 to 100 to adjust the amount of compression.
• Key frame interval: If you select a compressed format, you will have the option of setting a keyframe interval (see Figure 18). This setting determines how frequently a full frame of the source video is preserved in the Timeline. A smaller value results in more keyframes, and subsequently a larger file size. A greater value results in fewer keyframes and a smaller file size. Animation with little motion (such as a talking head) may be suitable with a larger keyframe interval value, while a movie with an abundance of animation may benefit from a smaller keyframe value.
• Data rate: Specify the data rate of the converted video.

If you have any audio in your Flash project, you'll want to make the following Audio settings:

• Record from current SWF file: Record audio from the current SWF file and then merge it with the video.
• Recording volume: Adjust the volume level of the waveform recording device.
• From WAVE file: Use an external WAVE file to create your audio by clicking Browse to choose the WAVE file. The audio data of this WAVE file is merged with the video data; the audio in the original SWF file is ignored.

The final two settings are important to consider too:

• Split file when exceeding: Specify the file size limit before the file is split into two different files.
• Play after creating: Open the output AVI file with your preferred default media player when export is complete.

SWF2Video is the perfect companion to Flash for anyone wanting to convert dynamic Flash files to a time-based video format.

Once you export your Flash project to your preferred video format, you can import it into a video editing program such as Premiere or Final Cut Pro, or a compositing and motion graphics program like Adobe After Effects, for further editing, special effects, and color correction.

Where to Go from Here

My Flash career began with authoring content for broadcast video. At the time I was the director of creative development for an animation studio in the Boston area. Part of my job was to research and implement graphics and animation software into the production process. We produced and animated content for Comedy Central, ABC, and The Cartoon Network, and were completely desperate to find the right tool to replace the animation program we were rapidly outgrowing.

When I discovered Flash, I knew right away that this tool would allow us to grow as an animation studio. It had all the features we were looking for, including support for QuickTime and AVI formats.

I hope this article successfully conveys some of my experience. It should help answer at least some of your Flash-to-video questions. Future articles will cover using After Effects to add some cool visual effects to your movies and burning video content to DVD using Adobe Premiere.

In the meantime, here are some other resources that address exporting Flash to video and creating broadcast-quality Flash projects:

• Taking Flash Animation to DVD Video (by Brooke Burgess)
• Flashants Forum (makers of SWF2Video)
• Flash to Video Tutorial (from FlickerLab)
• Flash to Video Encoder PRO 4.2 (from GeoVid)
• Flash MX Design for TV and Video (by Janet Galore and Todd Kelsey; Wiley, 2002)