STEP 1: Use the PNG file format to import bitmaps into Flash
JPEG compression is the default compression for all bitmap images exported to Flash Player format, so using uncompressed PNGs gives you better control over the compression than would choosing the amount of JPG compression prior to importing it into Flash.
STEP 2: Vary your compression settigs on specific bitmaps if size is an issue
You might not always need to have the same compression settings for all the bitmaps in your project. For instance, we recently worked on a project that needed to use a 36-frame PNG sequence of a 360-degree spinning product- in this case, an audio speaker. This one element was 500k alone, way too big for this small section of the presentation. We went into the library and reduced the document default quality on the individual images to 25 on frames 2 to 35. You can do this by opening your library and right clicking on the bitmap, selecting Properties, unchecking Use Document Default Quality and setting the quality to what works for you. We found 25 worked fine for this project, as it was a dark speaker on a dark background. However, if you have a high-contrast object you might have to use a higher quality. The first and last frames (and any other frames your animation might stop on) should be kept at the Document Default Quality.
STEP 3: Turn off the smoothing option for bitmap images in a movie's library
Playback will be faster because the bitmaps will render more quickly.
STEP 4: Always bring your images into Flash at the actual size (pixel dimensions)
Any time you scale an image on the Flash Stage, it will be resampled and interpolated, so bring in your images at the same size you’ll use them in the final version.
STEP 5: When animating, avoid scaling bitmaps in Flash
This causes artificing. And don’t forget the age-old trick of setting the Alpha to all your bitmaps to 99 percent to avoid artifacts in your final output.
STEP 6: Optimize your music and sound effects as you would your image files
The same optimization principle also applies to audio. Trim your music and sound effects to their needed length, and adjust their individual file size in the same manner as we optimized bitmaps, above. If you’re using MP3 files, uncheck Use Imported MP3 Quality. Again, give higher bit-rate settings to more important sound effects, like a voiceover, or clearly audible background music, while lower-priority audio, like quick sound effects, should get lower settings. Try to avoid the 16 kbps setting entirely. It’s exceptionally low quality and sounds like you’re playing your effects underwater. Try to find a happy medium between quality and data size.
STEP 7: Don't forget about vector elements!
Flash’s strength is in its vector engine. Vector images are infinitely scalable with no resolution loss, unlike bitmaps, and can be animated smoothly. Since they are ultimately math coordinates to Flash, they take up very little memory. Any time you can import a vector, whether a company logo or a piece of artwork, always do it. But even vector images can be optimized. A recent example was a 2D vector animation that was shown online. The characters were fairly complex- several bands of color and traditional crosshatching were used- resulting in many individual little strokes of vector, which added up over a number of characters and elements. To bring down file size, we edited each symbol in the library by selecting the grouped vector object and going to Modify>Shape>Optimize. Make sure to keep Use Multiple Passes (slower) checked, and move the slider right to "simplify" the geometry in exchange for a smaller file size. The more to the right you go, the more the object will distort slightly, so this is not recommended on objects that need to stay pristine, like a corporate logo. Experiment (and Undo) with various settings for best individual results.
More Flash Performance Tips
- Use alpha transparency sparingly. Try using tint and choosing the same color as the background (if it’s a solid color).
- Use symbols, animated or otherwise, for every element that appears more than once. By creating a symbol, the symbol is stored in the Flash file's library, which you can grab and place for multiple uses. Symbols reduce file size because no matter how many times you make and place a symbol, Flash stores the symbol in the file only once.
- Limit the area of change in each keyframe; make the action take place in as small an area as possible.
- Limit the number of special line types, such as dashed, dotted, ragged, and so on. Solid lines require less memory.
- Limit the number of fonts and font styles. Use embedded fonts sparingly because they increase file size.
- For Embed Fonts options, select only the characters needed instead of including the entire font.
- Re-using your flash symbols cuts down on the file size. Why create three circles when one circle symbol and three instances of that symbol will do? If you need different colors, the Tint Effects pop-up menu in the Instance Properties dialog box will allow you to modify the properties of each instance.
- Always use whole pixel values for the X and Y position of your images because sometimes you can end up with weird "pixel-shifting" in the exported SWF file if your images are not aligned to the pixel grid in Flash.
- Use gradients sparingly. Each area of a gradient fill requires more data than a solid fill.
Nino Del Padre
Del Padre Visual Productions
Nino founded Del Padre Visual Productions in 1991. The facility now offers Web design, HD video production, motion graphics, 3D animation and interactive applications for companies such as Proficient Audio, BAE Systems, NASA and many others. DVP’s work has earned extensive industry acclaim.
NINO SAYS KEEP IN MIND…
Though some of these may seem like obvious tips, most are things we have come across by constantly trying different ways to make the perfect mousetrap. These optimization tips, as well as our Flash checklist (online at www.studiomonthly.com under "Current Issue"), help keep us on task and on budget during every Flash project. While it’s essential that you review a project when finished to make sure that you’ve trimmed every possible kilobyte, keeping all these techniques in mind while you’re building from the ground up is an even better strategy.
Del Padre Visual Productions
15 Benton Drive
East Longmeadow, MA 01028