You're done designing, developing, and debugging. Your animation is ready for its audience. You've decided whether you want them to view it on a web page, a CD, or on their computers. The next step is to publish the animation, which means packaging it in a form your audience can play. Less often, you may export the animation, so you (or someone else) can further edit and develop it using another graphics or animation program (like Adobe Illustrator or Adobe Fireworks). In this chapter, you'll learn how to do both.
Using Flash's publishing settings (Figure 20-1), you'll see how to tell Flash to publish your animation as part of a web page, and as a standalone projector. You'll also see how to export the artwork in your animation as editable image files. But before you publish or export, you need to learn how to optimize your animation (reduce your animation's file size) so that it runs as quickly and efficiently as possible—a real concern if you're planning to publish your animation on the Web (see the box on The Importance of Being Optimized).
Figure 20-1. Flash lets you choose how to deliver your compiled animation. The options shown here produces a plain .swf that plays in most browsers. You can also publish it as a standalone projector file (a self-contained executable file you double-click to run, with no need for a web browser or a separate Flash Player), an image file, or embedded in a web page.
It's a fact of the World Wide Web—big files take longer to travel, and that creates a bottleneck for most Flash animations. The longer your audience waits, the more likely you are to lose them to another web page, a YouTube video, or a quick peek at Facebook. No one has the patience to wait for a stop-and-start animation. With that in mind, you should make every effort to keep your published .swf files small. The process is called optimization because you're seeking the optimal tradeoff between quality and file size. (If you're still tempted to skip this step, read the box on The Importance of Being Optimized.)
Ideally, you've kept file size in mind from the moment you start planning your project and throughout the entire production process. That's why there are tips scattered throughout this book about reducing file size. You can think of optimization as low-fat cooking for the animation set: The goal is to get rid of the fat without getting rid of the flavor. And, as with low-fat cooking, Flash doesn't have a single approach to optimization. Your animation may include graphics, sound, and video, and there are ways to optimize each element. On top of that, every animation and target audience is different—you need to experiment, tweak, and retest using the strategies outlined next.
As you check out the optimization strategies in this section, keep in mind that effective optimization is always a balancing act. You may decide some effects are worth the bloated file size they require, and some aren't. In still other cases, you'll want to compromise. For example, you might choose to remove half of the gradient effects you've applied to your images so that you reduce file size, but keep the other half. In Flash, you're the director, so you get to decide how much is enough.
Here are ten tried-and-true strategies for reducing file size. Apply as many as you can while you're developing your animation. You can use any of these techniques to trim down a completed animation. Better yet, keep them in mind as you create your next animation. That way, you'll end up with a streamlined animation without a lot of extra, after-the-fact work.
Flash stores data for every keyframe, which adds to the size of your .swf file. The regular and tweened frames add very little to file size, so creating an effect with a tween is more efficient than creating the same effect with frame-by-frame animation.
Brush tool fills are more complex than the lines you create with the Pencil tool, so brush strokes take up more file space. When you feel both strokes are equally acceptable, choose the Pencil.
Through the Property Inspector, Flash lets you apply a handful of dash-and-dot effects to the lines you draw on the stage using the Pencil, Pen, Line, and Shape tools (Drawing and Painting with Tools). But do so sparingly, because these line effects increase file size.
The fewer anchor points used to define curves and fills, the less information Flash has to track. Flash even gives you a special Optimize command to remove superfluous points from your shapes. Here's how to use it:
Select the curved line or fill outline you want to optimize, and then choose Modify→Shape→Optimize.
The Optimize Curves dialog box you see in Figure 20-2 (top) appears.
Type or scrub in a new number to tell Flash how much optimization to apply, from 0 to a maximum of 100, and then click OK.
Flash displays a message (Figure 20-2, bottom) letting you know what percentage of the selected line or outline it was able to dispense with.
Click OK.
On the stage, you see the (subtle) results of the optimization.
Figure 20-2. Top: Optimizing a line doesn't straighten it out or even smooth it the way that Modify→Shape→Advanced Straighten and Modify→Shape→Advanced Smooth do; instead, it ever-so-subtly shifts the points that make up the line. If you want to see how successful the optimization is, make sure you leave the "Show totals message" checkbox turned on. Bottom: Because optimization is a final tweak meant for you to do after your image already looks the way you want it to look, you don't see a huge reduction in size here. Still, depending on the number of curved lines and fill outlines your animation contains, the saved bytes can add up.
Creating a reusable symbol (Symbols and Instances) lets you add multiple instances of a shape or drawing to your animation without dramatically increasing file size. Even shrinking, rotating, or recoloring your instances costs less in file size than creating separate images. This strategy can result in big benefits.
Often bitmaps, especially photos, are expensive in terms of file size. If you can do without them, do so; if not, crop them (so that you use as little of them as possible) or optimize them by choosing a higher-than-standard compression option, as described below. However, in some cases, overly complicated vector graphics also use a lot of space. If in doubt, test both options and compare the sizes by generating a size report (Simulating Downloads).
You can also optimize bitmaps in the Publish Settings dialog box (Publishing as a Compiled Flash (.swf) File).
To optimize a bitmap:
Import the bitmap into your document's Library panel.
The steps, if you need a refresher, are in Chapter 10 (Importing Graphics).
In the Library, double-click the icon next to the imported bitmap's filename. (Or select the bitmap, and then, from the Options menu in the upper-right corner of the Library, choose Properties.)
Either way, the Bitmap Properties window you see in Figure 20-3 appears.
Figure 20-3. Everything in life is a tradeoff, and bitmap optimization in Flash is no exception. If you find you can't balance image quality with compression—for example, by the time you reach an acceptably high compression rate, your image appears nearly unrecognizable—consider cropping the bitmap or turning it into a vector drawing (page 353).
From the Compression drop-down list, choose either "Photo (JPEG)" or "Lossless (PNG/GIF)."
Choose the first option if your image contains a lot of different colors or transparent effects; choose the second if it contains a few solid lumps of color. Find out more about JPEGs, PNGs, and GIFs beginning on Importing Photoshop Graphic Files.
Flash calculates a percent compression rate and displays it near the bottom of the Bitmap Properties window.
If you chose Photo (JPEG), you can compress the image further. Click the Custom radio button, and then type a number into the box (Figure 20-3). A value of 100 is the highest quality and the least compression.
Flash starts you out with a quality rate of 50. You need to experiment to find out the lowest number that gives you an acceptable tradeoff between file size and quality, but one way to begin is to jot down the current file size (Flash displays it just below the Quality field), type 25, and then click OK. When you open the Bitmap Properties window again, Flash displays the new file size for the bitmap based on a file quality of 25. If the image looks OK, type a lower number; if not, type a higher number. The higher the number, the larger the file size; the lower the number, the lower the file size.
Take a look at your newly optimized image by clicking the Test button.
The preview area shows the way the image looks using the optimization settings you chose. Near the bottom of the Bitmap Properties window, you see the percent compression rate Flash has calculated based on the Quality setting you typed in. If the image quality looks horrible, repeat step 2 with a higher quality setting; if the quality looks okay but the compression rate doesn't seem low enough, try again with a lower quality setting. (Sometimes, depending on your image, a lower quality setting will look practically identical to a slightly higher-quality setting.)
When you're satisfied with the quality-vs.-file size tradeoff, click OK.
Flash hides the Bitmap Properties window and brings you back to your workspace.
Sound clips can quickly swell your animation size, so use them sparingly. Naturally, sound effects like a bell's ding or a thunderclap use less space than a high-quality music soundtrack. A narrator's voice also takes up less space than most music. As a rule, use the shortest clips you can and compress them as much as the quality can bear. Here are the steps to optimize a sound file that's already in your Library:
In the Library, double-click the icon next to the imported sound file's name.
This icon is the quickest of three ways to open the Properties for a symbol. You can also use the Options menu in the upper-right corner of the Library panel or right-click (Control-click) a symbol.
Either way, the Sound Properties dialog box you see in Figure 20-4 appears.
Figure 20-4. If you leave compression set to Default, Flash uses the Compression option you set in the Publish Settings dialog box (page 647) to figure out how to compress this sound clip. Otherwise, Flash applies the Compression option you set here (unless you've told Flash to override this compression setting; see page 650 for details).
Press Update, if you think the sound has been edited.
The file may have been trimmed or changed, using an editor like Soundbooth, since it was imported.
From the Compression drop-down list, choose a compression scheme.
Flash gives you several options. Choosing the right compression scheme gives you the best size/quality optimization:
The Default settings are defined in the panel that appears when you go to File→Publish Settings and click the Flash tab. There are separate settings for audio streams (longer sounds like music and narration) and events (like sound effects). You can change these settings by clicking the Set buttons.
ADPCM is good for short event sounds. You can reduce file size by checking the Preprocessing: Convert stereo to mono box. Sample rates range from a primitive 5kHz to CD-quality 44-kHz. You can also set the ADPCM bits from 2 to 5 bits, with larger numbers increasing file size. Below the menus you see the setting and the effect they have on reducing or increasing the file size.
MP3 is the familiar compression format for music. It has the ability to dramatically reduce the size of long streams of sound. You can choose the Bit rate (higher numbers, bigger files) and the Quality: Fast, Medium, or Best. (These options refer to the length of time it takes to compress the files.) In most cases, you'll want to choose Best because it achieves the best sound quality for the file size.
Raw provides no compression, so you'd normally not use it for a web-based animation. As with ADPCM, you can reduce the size of the sound file by selecting "Convert stereo to mono" and by reducing the "Sample rate".
Speech applies compression that's suitable for voice, but isn't full enough for a symphonic orchestra. You can further tweak the setting by changing the "Sample rate" (smaller numbers for smaller files).
As you experiment with the settings, click the Test button.
You hear the sound file with the compression applied. Click the Stop button when you've heard enough.
When you're satisfied with the quality-vs.-file size tradeoff, click OK.
Flash hides the Sound Properties dialog box and brings you back to your workspace.
To make sure Flash uses the Compression option you set in the Sound Properties dialog box, turn off the "Override sound settings" checkbox in the File→Publish Settings→Flash dialog box. Publishing as a Compiled Flash (.swf) File has details.
Grouping shapes, lines, and other portions of your drawings (by selecting them, and then choosing Modify→Group) cuts down on file size because Flash can streamline the information it needs to store. Chapter 5 (Converting Strokes to Fills) has full instructions.
The more you add to your animation, the larger your file size. If you absolutely, positively need to pare down your file, consider removing or simplifying some (or all) of your drawings, multimedia files, and graphic effects, paying particular attention to these space hogs:
Sound files, embedded video clips, and bitmaps
Gradient effects
Alpha (transparency) effects
Custom colors
Make sure your .swf files don't include any unnecessary symbols. Look in the Library panel. If it says Export under Linkage, the symbol is being exported for use with ActionScript and will definitely be added to the .swf. If the symbol isn't needed for the final animation, right-click the symbol, and then choose Properties from the shortcut menu. In the Symbol Properties dialog box, deselect Export for ActionScript.
If you can't bring yourself to do without media files altogether, go ahead and use them—but abbreviate them. For example, instead of using a long sound clip, loop a short one. Or use a single sound clip a bunch of different ways (soft, loud, the first half, the second half) to create multiple sound effects for minimal overhead. Instead of embedding a video clip as is, try adjusting the in and out points to clip off any nonessential intro or outro frames when you import it into Flash (Encoding Part of a Video Clip). And if you're using a mask layer, make sure you clip off every scrap of the background image not revealed by the mask.
One of the options you want to make sure you set when you're ready to publish your animation is the "Compress movie" option in the Publish Settings dialog box (Publishing as a Compiled Flash (.swf) File). (Out of the box, Flash turns on this option, but do double-check that you haven't inadvertently turned it off.) Choosing this option tells Flash to squeeze your animation file as much as it can without sacrificing content. How much Flash compresses your file depends on the specific elements and effects you've included in your animation; the more text and ActionScript code your animation contains, for example, the more "bloat" Flash can squeeze out of your file.