Avoiding performance issues in Flash

Use the strategies described in this article to ensure that your Adobe Flash Professional projects play back smoothly and download quickly. Even the best designs and content cannot compensate for an application that is slow to load and seems unresponsive. Follow these suggestions to optimize your projects so that they provide a good user experience.

By default, Flash projects are set to play at 24 fps. However, depending on the project, you may find that the content is displayed acceptably at a slower rate. Try adjusting the fps settings and testing the movie repeatedly to discover the lowest acceptable frame rate.

If your application is mostly a static UI that includes an occasional animation, you can use ActionScript to programmatically change the frame rate of the project at runtime.

Whenever possible, avoid applying filters, effects, and blend modes to objects on the Stage in Flash and then animating those objects. Applying drop shadows, glows, blend modes, and other special effects cause Flash Player to perform more calculations, resulting in increased usage of system resources. When these elements are then animated, it causes the calculations to become even more processing-intensive.

Instead of applying effects, blend modes, and filters to objects in Flash, use an image-editing program (such as Adobe Fireworks, Adobe Photoshop, or Adobe Illustrator) to prepare image files. Add any special graphic effects to the bitmap graphics, optimize, and then export the PNG, JPEG, or GIF files at the same dimensions you'll use them in the Flash project. Import the prepared images into Flash and then convert the bitmap graphics to symbols before animating them.

When there is a section of the Stage that contains animation, this section is known as the redraw area. For example, if most of the Stage is static but there's a bouncing ball in the lower left corner, Flash Player only has to update that area of the Stage and the animation is fairly easy to process.

However, if there are four bouncing balls, and the path of the balls occasionally overlaps in the center of the Stage, it means that almost the entire Stage is the redraw area. This is more resource-intensive for Flash Player to render and can cause the movie to play back less smoothly—especially if the objects being animated are complex or nonoptimized bitmap graphics.

Whenever possible, keep the animations separated to reduce the redraw area that Flash Player will update, rather than allowing multiple animations to intersect during playback.

Flash Professional includes many features that help you achieve dramatic image effects, including masking images (so that only a portion of the image shows through) or applying a bitmap fill (so that the fill area of a vector shape uses the pixel data of a specified bitmap image). In both these cases, parts of the bitmap image are not visible. Even though portions of the bitmap images are hidden, these areas of pixels are still contributing to the overall file size of the published SWF file.

In some cases, masking techniques are necessary to animate a specific effect. But in most situations, the same graphic effects conveyed by masking and applying bitmap fills could also be achieved by using an image editing program to prepare the image files, optimize them, apply transparency settings, and export the files in the PNG format. Then, the flat PNG image file can be imported into Flash.

Whenever possible, try to prepare the graphics ahead of time and then bring them into Flash, rather than importing the full-size bitmaps into Flash and only displaying a smaller portion of the bitmap image.

In general, vector artwork can be less resource-intensive to be displayed in Flash than bitmap graphics. However, if you use gradient fills for shapes, the system resources needed to display (and especially animate) the vector artwork increase.

Use an image-editing program to prepare a PNG or JPEG graphic with the gradient effect. Optimize and export the file. Import the bitmap into Flash and compare the performance and file size difference with a version of the project using vector artwork with gradient fills. Choose the configuration that results in the best quality and the lowest file size possible to improve performance of applications and animations.

Frame-by-frame animations are not tweened. Instead, every frame in the Timeline contains a keyframe that contains new shapes or artwork that defines that particular frame of visual information. Tweened animations only require artwork in the beginning and end points, because Flash interpolates the changes based on the first and last keyframes and generates the frames in between.

Since frame-by-frame animations require new keyframes and new unique content on each frame in the Timeline that contains changes to the animation, this combined set of assets is much larger than the file size of a single symbol. Additionally, the numerous keyframes cause Flash Player to completely redraw each frame with the new content, rather than programmatically calculating and displaying the movement of a motion tween or shape tween.

Avoid creating frame-by-frame animations whenever possible to decrease the file size of projects and improve performance during playback. If necessary, you can alternate between using tween animations and smaller frame-by-frame animation sequences to minimize the processing and reduce the project's file size as much as possible.

Always create symbols when working with objects on the Stage. If you create motion tweens, Flash automatically reminds you to convert objects to symbols. However, you should strive to convert all project assets into symbols, even if they are not animated.

Flash excels at animation specifically because it uses a single symbol as a reference and then uses multiple symbol instances throughout the project (rather than duplicating reused objects multiple times). Any object on the Stage can be converted to a symbol, and should be, even if the object doesn't move and is not a button.For example, you can drag an instance of a symbol to use as a background image for the project, rather than using a bitmap file.

Take advantage of the built-in optimization that Flash offers. Always convert bitmaps and vector artwork to symbols and name them descriptively to keep them organized. As an added bonus, symbols make it much easier to update the project later, because if the client decides that the flowers should be orange, not blue, you can open a single symbol and edit it to update all of the instances in the project that are associated with that symbol.

To learn more about using symbols, read Working with symbol instances in the Flash Professional online documentation.

Be sure to prepare sound, graphics, and video files prior to importing them into Flash. Always strive to find the best balance of visual and audio quality with the lowest file size of the published SWF file. To get more suggestions and learn best practices for optimizing your Flash projects, see the following:

• Optimizing FLA files for SWF output (Flash documentation)
• Tips for using Flash efficiently
• Improving Flash Player performance

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