Issues involving project assets in Flash

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:

1. Choose File > Import > Import to Stage to import the full-sized version of the file.
2. Press the Q key and use the transformation handles to resize the bitmap graphic file.
3. View the resized dimensions in the Property inspector and note the height and width.
4. Delete the imported file from the Library.
5. Use an image-editing program to create a copy of the bitmap graphic and resize it to fit.
6. Choose File > Import > Import to Stage again. This time, import the smaller, resized bitmap file that has been optimized to fit the dimensions of your project.

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:

• PNG: Supports transparency and displays crisp lines and text. Great for logos and photographic content that requires transparency. The PNG format is ideal for displaying glows and drop shadow effects.
• JPEG: Best for displaying photographs, photo-realistic artwork, and continuous tones, such as gradients. Does not support transparency.
• GIF: Supports transparency and animated GIF files. Ideal for screenshots and other content that displays solid colors, such as logos, cartoons, color block art, and stylized text. Check your output for quality, however, as GIF does not support full color depth the way PNG and JPEG do.

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:

• PNG files fall into three basic categories: 8-bit (256 colors), 24-bit (millions of colors) and 32-bit (millions of colors plus alpha transparency). Choose the appropriate option based on the image content, and then experiment with choosing fewer colors (8-bit) to achieve smaller file sizes.
• JPEG files display millions of colors. Try reducing the percentage level of quality to generate a smaller file size. Watch out for artifacts that occur when re-exporting an existing JPEG file, because JPEG uses a lossy compression model, which means at lower quality settings, its compression algorithm actually sacrifices original image detail for the sake of compression.
• GIF files are of two types: animated GIF and static GIF files. In most cases, you'll use the static GIF files, which are also displayed in 256 colors. In some cases you may be able to reduce the number of colors to lower the file size of the exported file; always double-check the output to make sure that essential quality is preserved.

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:

• Optimizing transparent images for projects in Flash using ActionScript 3
• Optimize Flash content for mobile browsers
• Scaling assets in Flash Professional CS5.5 (Adobe TV)
• Loading images and library assets with ActionScript 3

Refer to Avoiding common authoring mistakes to find links to other articles in this series.