16 January 2012
This article contains tips and recommendations to optimize graphic assets and improve performance of Adobe Flash Professional projects. It's important to prepare the assets you bring into Flash Professional prior to importing them to ensure that you generate SWF files with the smallest file size possible. Use the best practices outlined below when working with asset files for your Flash projects.
Although it may be tempting to import bitmap graphic files at their original size, and then scale them as desired in Flash, this is not recommended. Larger files are larger in file size, which means they contribute to the overall size of the SWF file. If you import images at larger dimensions than needed, it causes users to wait longer to download and view the file online.
If you are not sure of the correct dimensions for your project, follow these steps:
Bitmap graphics come in a variety of file types, including PNG, JPEG, and GIF file formats. Each of these file types has benefits and limitations. As you prepare graphic files before importing them to use in Flash, review the content of each image and consider which file type is the best choice for each file. Here's a brief description:
After determining which file format to use for each image, use an image-editing program to export the file in the correct format before importing it into Flash.
The process of image optimization involves updating the export settings of an image to strike a balance between displaying acceptably while generating an image with the lowest file size.
The optimization settings change depending on the file format you are exporting:
After applying optimization settings, export the file to the correct format. Some image editing programs, such as Fireworks, include a split screen image preview that lets you compare multiple settings to visually choose the file that looks the best but exports at the lowest file size. After exporting the optimized files, return to Flash and import them.
Bitmap graphics in either PNG or GIF file formats can display transparent backgrounds. This is a helpful strategy when you want to stack objects above and below each other on the Stage. However, for the background to be transparent, you must first open the bitmap graphic file in an image-editing program. Export the file as either PNG or GIF and choose the alpha transparency option. Many programs, such as Fireworks and Photoshop, will display a checkerboard background to indicate the areas of the image that will be transparent. Be sure to export the file using alpha transparency settings, rather than no transparency or index transparency.
If you import a file in Flash and discover that the background is white, rather than transparent, delete the file you imported. Open the file in an image-editing program and re-export it with the correct alpha transparency settings, and then re-import it into Flash.
Flash Professional supports a wide variety of file types that you can import and use in your projects. However, there are unsupported file types. When importing files, you may encounter errors if you attempt to import a file type that is not supported by Flash.
The workaround is to open the file in the program where it was created and see if the program supports exporting the file into a format that is supported by Flash.
See the following TechNote for more information: Supported file formats in Flash Professional CS5.5.
Depending on the content of the graphics you are importing, you may find that vector artwork appears acceptably and has a much smaller file size than the bitmap graphic version of the same file. This is most often true of simple subjects that contain solid colors.
After importing a bitmap to the Stage, choose Modify > Bitmap > Trace Bitmap. The selected artwork is traced and converted into vector points, lines, and curves.
Alternatively, you can also open bitmap graphics in Illustrator and use the Live Trace feature to convert the bitmap art into vector art, and then import the traced vector artwork into Flash.
Keep in mind that the trade-off with vector graphics is increased CPU usage instead of the increased file size of bitmaps.
I hope that the suggestions provided in this article will help you choose which file formats to use in different situations and how to create assets that result in Flash projects having the highest quality and lowest file size.
Check out these resources to research further:
Refer to Avoiding common authoring mistakes to find links to other articles in this series.