By Dmitriy Yukhanov
 
Dmitriy Yukhanov
Created
30 August 2011
 

Requirements

 
Prerequisite knowledge

A basic understanding of developing projects with Flash Professional and developing with ActionScript 3.
 

 
User level

Intermediate
 

 
Required products

When developing applications with Adobe Flash Professional CS5 or later, it's important to consider strategies that can increase your application's performance and also improve the user experience. Over the past few years I've collected a series of best practices and pitfalls by working with developers on a variety of projects and also by researching the Flash documentation.
 
This article offers some common Flash development rules that you may find useful in your own work. Feel free to follow these suggestions to create content more efficiently and optimize elements to ensure that your projects download quickly and run smoothly.
 
The tips descibed herein are useful not just for Flash developers but also for Flash animators and designers. Apply these approaches to your own projects to see how you can improve them.
 
Note: Throughout this article, screen shots with a red border show what to avoid; green indicates what to follow.
 

 
Improving performance

This section includes helpful suggestions for making content play more seamlessly in Adobe Flash Player and use fewer resources.
 
 
Deactivate interactivity of unused objects with mouseChildren and mouseEnabled
If you're absolutely sure that objects in your Flash project will never be interactive (and will not contain any interactive objects), you can add the following code on the first frame of the object's containers:
 
mouseEnabled = false; mouseChildren = false;
This code deactivates the container and all nested containers inside it. To keep a container activated and interactive, use mouseChildren = false; only. Decreasing the number of active containers in a project helps increase performance because the movie uses fewer resources (see Figure 1).
 
Figure 1. Use ActionScript to remove interactivity from objects on Stage.
Figure 1. Use ActionScript to remove interactivity from objects on Stage.
 
Evaluate whether bitmaps or vectors are the best choice for each graphic asset
If the graphics in your project contain a lot of gradients, details, and colors, you may find after testing that bitmap images are the best choice to display the images on the Stage. When you use bitmap images, they are resolution-dependent and can look bad when scaled, but you may not need to scale the graphics. If they do require scaling, try using traced vector shapes to see if they can convey enough detail. Always make tests and compare the project's performance when using vector shapes and bitmap images to discover the best option in each case (see Figure 2).
 
Figure 2. Try using both vector and bitmap graphics to see what works best.
Figure 2. Try using both vector and bitmap graphics to see what works best.
 
Convert outlines to fills using the Convert Lines to Fills option
Choose Modify > Shape > Convert Lines to Fills to convert shape outlines and vector lines to vector fills. Lines require more resources because they have two sides—compared to only one side in fills (see Figure 3).
 
Figure 3. Use the Convert Lines to Fills option to improve performance.
Figure 3. Use the Convert Lines to Fills option to improve performance.
 
Use non-solid line styles sparingly
Unless necessary, avoid adding dashed or dotted lines. Solid lines require fewer resources to draw (see Figure 4).
 
Figure 4. Use solid lines and strokes whenever possible.
Figure 4. Use solid lines and strokes whenever possible.
 
Use lines instead of curves
When editing vector shapes, use miter joins instead of round joins. Miter joins are lines that require fewer resources compared to rendering curves. You should also use miter joins when displaying small vector shapes because rounded joins are not so noticeable and waste unneccessary resources (see Figure 5).
 
Figure 5. Use square miter joins for corners instead of rounded joins.
Figure 5. Use square miter joins for corners instead of rounded joins.
 
Optimize vector shapes
Complex vector shapes often contain many control points between lines and curves. By removing unneeded points, you can save resources without affecting a graphic's appearance. Choose Modify > Shape > Optimize (or use the Smooth tool) to optimize vector graphics. Strike a balance between vector complexity (shape quality) and reduced line count (see Figure 6).
 
Figure 6. Reduce unnecessary points in vector artwork to save resources.
Figure 6. Reduce unnecessary points in vector artwork to save resources.
 
Avoid using vector gradient fills
Shapes filled with gradient fills require more resources compared to solid color fills. Whenever possible, replace gradient fills with solid fills. Although you only gain a small performance boost, this can be helpful when developing projects for mobile devices (see Figure 7).
 
Figure 7. Fill vector shapes with solid color fills.
Figure 7. Fill vector shapes with solid color fills.
 
Minimize the use of graphics with alpha transparencies
Alpha channel transparency really impacts performance, especially when applied to animated objects. Double-check PNG bitmap images to verify that they don't have unused alpha transparency settings when you imported them. Unless needed, don't set the alpha property on symbol instances as well—avoid creating fading animations in projects (see Figure 8).
 
Figure 8. Remove alpha transparency settings unless they are necessary.
Figure 8. Remove alpha transparency settings unless they are necessary.
 
Only use masks when necessary
Identify situations when you must use masks, and try to use them sparingly. Whenever possible, crop images and vector graphics using an image-editing program, such as Adobe Illustrator or Adobe Fireworks, rather than cropping images with masks.
 
Masks require additional resources and hidden parts of the graphic increase file size unnecessarily. In some cases, you can replace rectangle masks with code functions. Programming with the scrollRect property uses fewer resources, but is not always suitable; it depends on the goal you are trying to achieve. Look for strategic ways to avoid using masks in your projects and explore new options that result in a similar appearance (see Figure 9).
 
Figure 9. Avoid masks if you can achieve similar effects with shapes or bitmaps.
Figure 9. Avoid masks if you can achieve similar effects with shapes or bitmaps.
 
Try to reduce use of blending modes on graphic elements
When you apply blending, it decreases a project's performance. Use an image editing program to prepare images and graphics to avoid using blending as much as possible (see Figure 10).
 
Figure 10. Prepare images with blend effects before importing them into Flash.
Figure 10. Prepare images with blend effects before importing them into Flash.
 
Minimize use of filters in Flash
Try to avoid using filters unless it is necessary to achieve a specific effect. Prepare images with shadows in an image editing program instead of applying shadow filter to images in Flash. Filters impact the project's performance in some cases (see Figure 11).
 
Figure 11. Add filter effects, like dropshadows, before importing images.
Figure 11. Add filter effects, like dropshadows, before importing images.
 
Use the lowest filter quality setting that results in an acceptable appearance
If your project doesn't require the higher settings, don't use the High and Medium quality. Test the Low Quality setting to see if it works well enough for your requirements. When you use the higher quality settings, you increase resources consumption (see Figure 12).
 
Figure 12. Use the Low Quality setting if it looks acceptable in your projects.
Figure 12. Use the Low Quality setting if it looks acceptable in your projects.
 
Resize bitmap images using even numbers if they are going to be downscaled
When scaling and cropping images in an image-editing program, to prepare them to be imported in Flash for downscaling, crop them to square dimensions using even number values. See the section on Direct mipmapping in the Flash Platform online documentation for more details.
 
You can also use mipmapping to calculate the optimal dimensions of the bitmaps you are creating. Mipmapping doesn't work on cached bitmap images (or bitmaps with filters applied). If you don't plan on downscaling a bitmap image, use an image-editing program to resize the bitmap graphic to the actual size needed prior to importing it into Flash.
 
Here are some sample dimensions:
 
  • 1024 x 1024 pixels
  • 512 x 512 pixels
  • 256 x 256 pixels
 
Use lower frame rates
Test your project using different frame rates to find the lowest acceptable one. Many animations play smoothly at 24–30 fps. User interfaces for applications (that do not have animations) can often playback at 12 fps without noticeably affecting appearance. If your project plays intermittent animations and you want them to play smoothly, you can use ActionScript code to change the frame rate at runtime. When a project is set to use higher frame rates, Flash Player has less time to draw the elements on the Stage and process the code. Depending on the project, higher frame rates can result in decreased performance. Be sure to test the project to see what works best for your content (see Figure 13).
 
Figure 13. Adjust the frame rate in the Property inspector.
Figure 13. Adjust the frame rate in the Property inspector.
 
Avoid nesting movie clips
Use layers instead of movie clip containers to organize assets whenever possible. Decreasing the number of nested containers in a project increases its performance (see Figure 14).
 
Figure 14. Rather than nesting movie clips, organize assets in the layers of the Timeline.
Figure 14. Rather than nesting movie clips, organize assets in the layers of the Timeline.
 
Avoid animating objects with applied filters
When you apply filters to objects, they automatically adopt the cacheAsBitmap behavior. Animating filters, tweening filter properties, tweening transformations, and tweening color effects forces Flash Player to recache objects on every frame and reapply their filters—which leads to the extremely high consumption of resources (see Figure 15).
 
Figure 15. Animated filters, transformations, and color effects require more resources.
Figure 15. Animated filters, transformations, and color effects require more resources.
Note: You can animate the x and y properties of objects without recaching them.
 
 
Use powers of two when setting the Blur X and Blur Y filter properties
Calculate powers of two (21, 22, 23, etc.) when setting the Blur X and Blur Y filter properties in the Property inspector. Entering values like 2, 4, 8, or 16 can improve the speed that filters are applied by up to 20–30 percent (see Figure 16).
 
Figure 16. Enter powers of two when setting Blur X and Blur Y properties.
Figure 16. Enter powers of two when setting Blur X and Blur Y properties.
 
Cache complex vector graphics and text strategically
Use the Cache as Bitmap feature for complex vector graphics that do not contain nested animation. You can also apply it to static text fields. Use the Cache as Bitmap feature for objects that are not animated (or are animated only using the x and y properties)—including their parent containers.
 
If you are using ActionScript, you can also use cacheAsBitmapMatrix available in Adobe AIR only (starting with AIR 2). This enables you to scale and rotate cached objects without recaching so that the GPU (graphics card installed in the user's machine) composits and scales the transformations.
 
Additionally, you can use the Export as Bitmap feature introduced in Flash Professional CS5.5 to convert complex vector objects or nested objects into a bitmap graphic at the time the SWF file is compiled. Keep in mind that you have no control over the smoothing or compression settings applied to the exported bitmap images. Only use the Export as Bitmap feature on objects that do not contain nested animation. This mode has some added advantages over the classic Cache as Bitmap functionality. For example, exported images can be rotated, scaled, and animated as desired without incurring the same dramatic performance hit that occurs when working with cached objects. However, the exported bitmap images added to the SWF file do increase its file size.
 
If cached or exported bitmap objects have an opaque, continuous tone background fill, you should use the Opaque Bitmap background option and select a color to fill the background and gain even more performance improvements.
 
If a cached container includes a great deal of unused space between contained objects, make sure to cache each object individually to save extra bytes in memory. Try different strategies and compare the results to determine the best method to use (see Figure 17).
 
Figure 17. Choose the Display settings in the Property inspector.
Figure 17. Choose the Display settings in the Property inspector.
 
Avoid using tween animations when creating very simple animations
You can use a programmatic approach to make simple animations such as movement, rotation, color changes, alpha transparency fading, and more. Explore using third-party libraries like TweenLite developed by GreenSock. This results in animations that save more resources and are more flexible to update (see Figure 18).
 
Figure 18. Replace tween animations with animations controlled by ActionScript.
Figure 18. Replace tween animations with animations controlled by ActionScript.
 
Avoid using 2.5D in CPU mode
When you transform 3D objects using the user's computer's processor (CPU) instead of the graphics card (GPU), the project incurs the same performance issues as objects that use the Cached as Bitmap feature (see Figure 19).
 
Figure 19. Transformed 3D objects require greater processing resources.
Figure 19. Transformed 3D objects require greater processing resources.
 
Use redraw regions
You can use the option to show redraw regions in the context menu of the Debug Flash Player to see exactly which items are being drawn on the Stage (as well as when they appear). This strategy is helpful because you can find leftover invisible animations that are taking up unnecessary resources (see Figure 20).
 
Figure 20. Use the Show Redraw Regions option to see outlines of redrawn elements.
Figure 20. Use the Show Redraw Regions option to see outlines of redrawn elements.
 
Strive to keep redraw areas as small as possible
Whenever possible, prevent regions from overlapping. The redraw regions of overlapping objects can merged into one larger region, which results in more empty space being redrawn. Smaller regions draw faster (see Figure 21).
 
Figure 21. Overlapped elements can increase the size of redraw regions.
Figure 21. Overlapped elements can increase the size of redraw regions.
 
Always stop animations in hidden movie clips
If a movie clip contains animation that is played on demand (and not as the SWF loads) double-check that the animation is not running while the movie clip is hidden. Always stop animations when containers are hidden (or whenever you remove movie clips) to avoid using extra resources (see Figure 22).
 
Figure 22. Add a stop action to ensure that hidden animations do not continue to play.
Figure 22. Add a stop action to ensure that hidden animations do not continue to play.
 
Avoid placing objects off the visible area of the Stage
Try not to place objects off the Stage area. If you change the Stage size and forget to remove them, the unseen graphics in the background will continue to consume resources while the SWF file plays. Also avoid keeping objects off the Stage in order to bring them onto the Stage later. It is better to use ActionScript code to set the visible property of the object to false and then set it to true—or add the object with the addChild() method—at the time you want the object to appear. Objects that are placed off the Stage, although not seen during playback, still consume resources (see Figure 23).
 
Figure 23. Avoid placing objects off the Stage area.
Figure 23. Avoid placing objects off the Stage area.
 
Avoid using TLF text fields unless you need specific text functionality
Use Classic text fields instead of TLF text fields unless your project specifically requires TLF text functionality. TLF text renders more slowly and adds more bytes to the SWF file compared to Classic text fields.
 
If you wish to add text features that are not included with Classic text fields, try using third-party TLF equivalents, such as TinyTLF. By default, imported text fields are set as TLF text fields. If you are not working with TLF text, remember to set them as Classic text fields in the Property inspector after importing them.
 
 
Choose the appropriate Preview Mode for each project
Change the document rendering quality to speed up its display. You can choose the most appropriate mode for your project by selecting View > Preview Mode (see Figure 24).
 
Figure 24. Experiment with using different preview modes for your projects.
Figure 24. Experiment with using different preview modes for your projects.

 
Optimizing file size of project assets

Follow these suggestions to reduce the file size of the SWF files you create and improve their download times.
 
 
Set the appropriate compression on bitmap images
Carefully fine-tune the compression type and quality for every image in the Library using the Bitmap Properties dialog box, especially if you imported images created in Adobe Photoshop. This practice decreases the resources required and reduces the file size of the SWF file. If graphics contain many details, gradients, and colors, use JPEG compression; use PNG compression for less complex images to achieve a smaller SWF file size.
 
Avoid applying the Allow Smoothing option if possible because smoothing requires additional resources. Try to find a good balance between image quality and file size. Click the Test button to review the image's size and quality with the selected compression settings (see Figure 25); the quality is listed on the left side of the dialog box and the file size is listed at the bottom.
 
Figure 25. Click the Test button to see the quality and compression settings.
Figure 25. Click the Test button to see the quality and compression settings.
 
Consider when to fill shapes with bitmap images
You can break an image apart (Modify > Break Apart) or use the Color panel to set a shape's Color type to Bitmap fill. If you're only using part of the bitmap image to fill a shape, remember that the entire bitmap image will be compiled into SWF file when it is published.
 
Even though you're using only a few small pieces of the larger image, the entire image size will be added to the resulting SWF file. It's best to use an image editing program to prepare and import the smaller pieces as separate bitmap images and then use these smaller bitmap files as is, instead of to fill shapes.
 
Having said that, I think bitmap filling is a great strategy if you are using the entire bitmap image (or most of it) in multiple containers. In this case, you can use the bitmap fill feature to decrease the size of the SWF file because only one bitmap image will be compiled into the SWF file when it is published (see Figure 26).
 
Figure 26. Detemine when it is most efficient to use bitmap fills for shapes.
Figure 26. Detemine when it is most efficient to use bitmap fills for shapes.
 
Avoid scaling bitmap images
Whenever possible, use an image editing program to prepare images to avoid scaling them in Flash. Images that are scaled larger require additional resources. If you reduce the size of an imported image by scaling it down, you are adding unused bytes to the file size of the SWF file.
 
However, there are cases when you animate bitmap images in the Timeline to scale them smaller. In this situation, it is best to import the image at its largest size, prior to scaling (see Figure 27).
 
Figure 27. Resize images in an image editing program, and then import them.
Figure 27. Resize images in an image editing program, and then import them.
 
Replace simple bitmap graphics with traced vector shapes
Use traced vector graphics in place of images with fewer colors, gradients, or details. When displaying simple graphics, vector shapes require fewer resources and result in a smaller SWF file size. If the source image is a bitmap image, you can convert the bitmap image to a vector shape with Illustrator. You can also choose Modify > Bitmap > Trace Bitmap in Flash. Always make tests compare performance when swapping out vector shapes for bitmap images to achieve the most efficient results (see Figure 28).
 
Figure 28. Use the Trace Bitmap feature in Flash to create vector shapes.
Figure 28. Use the Trace Bitmap feature in Flash to create vector shapes.
 
Replace frame-by-frame animations with tween animations
Whenever possible, use tween animations instead of frame-by-frame animations. In addition to saving time, the resulting SWF file may use fewer resources and result in a smaller SWF file size (see Figure 29).
 
Figure 29. Use tween animations rather than frame-by-frame animations.
Figure 29. Use tween animations rather than frame-by-frame animations.
 
Check the size report to identify assets in the project with larger file sizes
In the Publish Settings dialog box, enable the Generate Size Report option to learn if some of the elements in a Flash file are larger than expected. Identify larger files and attempt to optimize them or swap them out with smaller files.
 
 
Use symbols whenever possible
Whenever possible, convert graphic objects to symbols. Always convert graphic elements to symbols if the graphic asset is used more than once in the project. You can scale and apply color effects to symbol instances to create variations of the original graphic file. This strategy reduces the file size of the published SWF file.
 
 
Embed only the characters of a font you need to display in text fields
When working with dynamic, input, or TLF text fields, don't embed the entire character set of a font. Instead, embed only the characters that are used in the Flash project. This strategy avoids adding extra bytes to the SWF file. To embed fonts, choose Text > Font Embedding and be sure to name the embedded fonts with descriptive names to make the project easy to edit later (see Figure 30).
 
Figure 30. Use the Font Embedding dialog box to select only the characters needed to display the text in a project.
Figure 30. Use the Font Embedding dialog box to select only the characters needed to display the text in a project.
 
Disable the option to include XMP metadata in the Publish Settings dialog box
In the Publish Settings dialog box, disable the Include XMP Metadata option if the project does not use XMP metadata. This removes a few bytes from the published SWF file (see Figure 31).
 
Figure 31. Deselect the Include XMP Metadata option.
Figure 31. Deselect the Include XMP Metadata option.

 
Developing Flash projects more elegantly

The suggestions described in this section improve the performance of your content. These practices facilitate changes, help you organize files, and make it easier to share your project files with other developers.
 
 
Avoid setting measurements to a twentieth of a pixel (twip)
Strive to set the x and y dimensions of every object rounded to whole integer values. This practice helps avoid various aliasing issues and also saves resources (see Figure 32).
 
Figure 32. Enter whole numbers for object property values.
Figure 32. Enter whole numbers for object property values.
 
Consider whether to use the Convert to Bitmap feature
The Convert to Bitmap feature (see Figure 33) enables you to convert vector elements and nested objects quickly into a single bitmap object. As it calculates the elements, it also takes into account any nested effects and masks. In some cases, it results in color loss or the addition of extra alpha during the conversion process. Always check the resulting bitmap after completing the conversion. If you are finding that the results are not as expected, you can also consider taking a screenshot or using external image editing products to combine the elements, and then reimport the compiled bitmap file. Bitmap images created using the Convert to Bitmap feature are set to Allow smoothing and Use PNG compression by default.
 
Figure 33. Always check images generated using the Convert to Bitmap option.
Figure 33. Always check images generated using the Convert to Bitmap option.
 
Use the Anti-alias for Animation font rendering option sparingly
Whenever possible, use the Anti-alias for Readability font rendering method unless you are animating a text field. The Anti-alias for Animation option results in fonts that are not as smooth as text using Anti-alias for Readability (see Figure 34).
 
Figure 34. Set the Anti-alias for Readability option whenever possible.
Figure 34. Set the Anti-alias for Readability option whenever possible.
 
Disable the Selectable option on text fields unless needed
The Selectable option on text fields is enabled by default. Disable this setting if it is not needed. It is a best practice to keep this setting enabled only if you think users will be copying the text in the text field, such as text fields that display error messages (see Figure 35).
 
Figure 35. Remember to disable the Selectable option unless it is absolutely necessary.
Figure 35. Remember to disable the Selectable option unless it is absolutely necessary.
 
Remove unused tween animations in the Timeline
Before publishing the final version of a project, review the Timeline to locate any tween animations that are not being used. Remove them using the "Remove tween" context menu and then publish the SWF file (see Figure 36).
 
Figure 36. Locate and delete any unused tween animations in the Timeline.
Figure 36. Locate and delete any unused tween animations in the Timeline.
 
Hide objects strategically
Depending on the project goals, you can set the visible property of an instance to false as well as setting the object's alpha property to 0. For example, if you are programmatically causing an object to fade out, you can set its alpha value to 0. But once the animation is completed, be sure to also set the the object's visible property to false. Visible objects are still clickable and could block underlying items from receiving the user's mouse clicks. Additionally, visible objects, regardless of their alpha setting, consume more resources.
If you simply want to hide an object without fading it out, set the visible property to false. In this case, it is not necessary to also change the object's alpha value.
 
To save more resources, completely remove objects from the DisplayList instead of hiding them. Programmatically show and hide them as needed, as long as the hide and show operations do not occur on every frame.
 
 
Avoid hiding objects under other objects on the Stage
If you wish to hide an object, set its visible property to false or remove it from the DisplayList. Objects hidden below other objects still wastes resources (see Figure 37).
 
Figure 37. Set an object's visibility to false or remove it entirely; don't hide the object from view by placing it below other elements on the Stage.
Figure 37. Set an object's visibility to false or remove it entirely; don't hide the object from view by placing it below other elements on the Stage.
 
Use custom UI components
Everything you can do to conserve resources and reduce file size improves the project— especially when developing for mobile devices. When you want to incorporate UI elements, such as a list menu, slider, or combo box, try using third-party components or develop custom UI elements yourself. Standard Flash components can consume too many resources to meet the requirements of some Flash applications (see Figure 38).
 
Figure 38. Create your own custom UI components built with ActionScript.
Figure 38. Create your own custom UI components built with ActionScript.
 
Name elements descriptively
Always enter meaningful, descriptive names to layers, fonts, and assets in the Library. This is a best practice because it helps you and other developers track bugs when debugging the project later (see Figure 39).
 
Figure 39. Don't use the default names assigned by Flash; enter names that describe each layer and element in the project.
Figure 39. Don't use the default names assigned by Flash; enter names that describe each layer and element in the project.
 
Use only alpha-numeric characters, dashes, and underscores in names
Do not use spaces, capitalization, or special characters (even accented letters), especially from your native language (if it uses characters not used in the English alphabet). This is important because special characters in names can cause issues, including version control when using external tools.
 
 
Use consistent instance names for animated objects in the Timeline
If you've entered a name in the Instance Name field to reference an object in a tween animation on the Timeline, make sure to use the same instance name for all other instances of that object throughout the animation on the same layer. Doing so avoids several different issues that can occur if you are referencing the object with ActionScript code (see Figure 40).
 
Figure 40. Ensure that a named instance uses the same instance name throughout the entire layer.
Figure 40. Ensure that a named instance uses the same instance name throughout the entire layer.
 
Convert objects to movie clips before animating them
Always convert objects to symbols before animating them. If you don't work with symbols, the objects are automatically converted into graphic symbols (which cannot be named in the Property inspector, so they are useless when using ActionScript code). If you see items in the Library panel named "Tween1", "Tween2", and so on, this means that Flash converted objects that were not symbols into graphic symbols at the time they were tweened (see Figure 41).
 
Figure 41. Always convert objects to symbols prior to animating them to avoid the automatic generation of graphic symbols.
Figure 41. Always convert objects to symbols prior to animating them to avoid the automatic generation of graphic symbols.
 
Use the right text field type required for each situation
Consider the project requirements before choosing the type of text field to use. Choose the Static Text option if the text field does not have to be editable by the user or dynamically populated (or accessed) with ActionScript code. Use the Dynamic Text option if the text field's contents will be controlled using ActionScript. Choose the Input Text option if the text field must be editable by both the user and ActionScript code (see Figure 42).
 
Figure 42. Choose the text field type that corresponds to your project requirements.
Figure 42. Choose the text field type that corresponds to your project requirements.
 
Choose the correct ActionScript type when creating and publishing files
If your project includes ActionScript 3 code, choose the ActionScript 3 option whenever you are creating new files or updating the Publish Settings. If you choose a different option (such as ActionScript 2) but the project contains ActionScript 3 code, it will not work and you may not immediately recognize why it appears to be broken (see Figure 43).
 
Figure 43. Choose the correct ActionScript type when creating and publishing files.
Figure 43. Choose the correct ActionScript type when creating and publishing files.
 
Use the publishing options that work best for each project
If a project uses an external library, consider using a SWC file instead of working with a set of AS files. Some Flash developers choose to publish their projects as both SWC and a folder of AS files.
 
You can configure the Publish Cache settings (introduced in Flash Professional CS5.5) to specify your hardware. To access the Publish Cache settings, choose Edit > Preferences > Publish Cache.
 
If your project contains a lot of code and takes a long time to compile, you can disable the Warnings Mode option in the Publish Settings. Select the Flash tab, and then click the Advanced ActionScript 3.0 Settings while ActionScript 3 is selected, and then deselect the Warnings Mode check box. This option can result in a faster publishing process. However, keep in mind that when you disable the warning messages, you won't see code tips that are helpful when debugging projects (see Figure 44).
 
Figure 44. Disable the Warnings Mode option in the Publish Settings dialog box.
Figure 44. Disable the Warnings Mode option in the Publish Settings dialog box.

 
Making project files easier to update

Consider applying these best practices as you develop applications in Flash Professional. You can organize projects and set up elements to ensure that you and other team members can quickly update them later.
 
 
Place ActionScript and frame labels on the first two layers in the Timeline
Don't write your code on layers that contain project assets. If you do, you are hiding it from other developers (and yourself) when the Flash file is edited later. Place all code on its own, separate layer and place all frame labels on their own layer. Both layers should be located at the top of the layers stack in the Timeline, and locked to avoid accidentally adding assets to the layers that contain ActionScript code or frame labels (see Figure 45).
 
Figure 45. Isolate ActionScript code and frame labels on the first two layers.
Figure 45. Isolate ActionScript code and frame labels on the first two layers.
 
Use frame labels rather than hard-coding frame numbers in scripts
Use labels with meaningful names instead of referring to frame numbers. This strategy helps avoid issues that can occur if an animation's length changes. It also makes it much easier to edit the Flash project later, and to help other developers understand how the project is set up (see Figure 46).
 
Figure 46. Use frame labels that describe the project, rather than referencing the frame by its number in the Timeline.
Figure 46. Use frame labels that describe the project, rather than referencing the frame by its number in the Timeline.
 
Avoid using bitmap images for text elements
It is much more difficult to edit text in bitmap files compared to editing text in text fields. When you import text, don't choose the Flattened Bitmap Image option; select the Editable Text option instead (see Figure 47).
 
Figure 47. Use text fields, rather than bitmap images, for text elements.
Figure 47. Use text fields, rather than bitmap images, for text elements.
 
Remove unnecessary keyframes from the Timeline
Keep track of unused keyframes and remove them from the Timeline. If you previously inserted keyframes, but they are no longer used to make any changes, you should remove them. In addition to wasting resources, empty keyframes can add confusion later when editing the project (see Figure 48).
 
Figure 48. Delete unneccesary keyframes in layers.
Figure 48. Delete unneccesary keyframes in layers.
 
Make all layers in the Timeline the same length
Press F5 to insert additional frames to shorter layers and make them the same length as the longest layer. This is a best practice and keeps the Timeline easier to read (see Figure 49).
 
Figure 49. Extend all layers to match the length of the longest layer in the Timeline.
Figure 49. Extend all layers to match the length of the longest layer in the Timeline.
 
Delete empty, unused layers
Delete layers that do not contain any assets, ActionScript code, frame labels, audio elements, or other project elements. Empty layers can cause confusion and make editing the Timeline unnecessarily difficult (see Figure 50).
 
Figure 50. If layers are not needed, delete them from the Timeline.
Figure 50. If layers are not needed, delete them from the Timeline.
 
Avoid using multiple scenes
Rather than working with scenes created in the Scenes panel, consider using movie clips or jumping to frames in the main Timeline instead. When you use multiple scenes, it can make the Flash file confusing to edit, particularly if you are sharing project files with other developers. Additionally, multiple scenes often cause increased size in published SWF files (see Figure 51).
 
Figure 51. Use frame labels and ActionScript to jump to sections in the main Timeline.
Figure 51. Use frame labels and ActionScript to jump to sections in the main Timeline.
 
Name and use groups consistently, and only when needed
Groups make it easy to work with multiple objects simultaneously. Grouping is helpful when achieving tasks, such as aligning a group of objects to the Stage. You can group objects without impacting the performance of projects because groups are ignored when the SWF file is published.
 
However, if you are working on a project with a team of developers, it is a best practice to avoid grouping objects unnecessarily. It is much more elegant to use movie clips as containers for a set of related objects, because the team members can access the elements in a movie clip more easily. Objects that are grouped together may be more difficult to edit (see Figure 52).
 
Figure 52. If you need to group objects to align them, ungroup them again after aligning the objects on the Stage.
Figure 52. If you need to group objects to align them, ungroup them again after aligning the objects on the Stage.
 
Periodically check the Timeline to ensure tween animations remain unbroken
If a tween animation looks different in the Timeline (the solid line is now displaying a dashed line between frames), it means that the tween is broken. Usually this occurs because the objects used to create the animation are no longer on the Stage and are missing from one of the keyframes. In this case, delete the animation and recreate it (see Figure 53).
 
Figure 53. If you see dashed lines in the tween spans, it means the tween animation is broken.
Figure 53. If you see dashed lines in the tween spans, it means the tween animation is broken.
 
Remove unused items from the Library panel
Make a backup copy of the FLA file and then remove all unused items (elements that are not used now and won't be used in future) to organize the Library panel and make the list of assets easier to read. This practice also ensures that the FLA project file is smaller.
 
In the Library panel, the Use Count feature is helpful for identifying unused elements. You can also choose Select Unused Items, but be careful when selecting this menu item because occasionally it includes files that are used in the project (see Figure 54).
 
Figure 54. Review the Use Count column to identify elements that are not used in the project.
Figure 54. Review the Use Count column to identify elements that are not used in the project.
 
Create folders in the Library to organize related asset files
You can use folders to manage the contents of the Library panel and keep it well structured. Projects that use folders to organize assets are easier and faster to update (see Figure 55).
 
Figure 55. Create folders in the Library panel to organize project assets.
Figure 55. Create folders in the Library panel to organize project assets.
 
Update text field properties to match the project's design
By default, text fields are set to use a line spacing of 2 and multiline behavior. If your project only requires a single line text field with a line spacing of 0, update the options in the Property inspector to match the text field settings for your project (see Figure 56).
 
Figure 56. Use the Property inspector settings to update the selected text field
Figure 56. Use the Property inspector settings to update the selected text field
 
Don't break text fields apart
After you break apart text fields, they are no longer editable. If you are using the break apart feature to animate characters in a text field, consider using ActionScript to achieve the same effect. If you programmatically animate the text characters, the text field remains editable and is much easier to change when needed (see Figure 57).
 
Figure 57. Avoid breaking apart text fields because they cannot be edited.
Figure 57. Avoid breaking apart text fields because they cannot be edited.
 
Maintain the editability of text fields during the import process
When you import text fields, always choose the option to import them as Editable text (see Figure 58).
 
Figure 58. Choose the Editable text option in the Import dialog box.
Figure 58. Choose the Editable text option in the Import dialog box.
 
Resize text field elements to match the size of their contents
Avoid leaving static text fields larger than the text contents inside them. Unless you have a specific reason—such as using text fields to display button labels—it's a best practice to use centered text alignment. It is much easier to edit text content later if the text is center-aligned and the text field's dimensions fit the text content inside.
 
To set the text field's dimensions to match the text content, click the white square icon in the top-right corner of the text field while editing the text. If a circle icon is displayed instead of a square icon, it means that the dimensions of the text field already match the text content that it contains (see Figure 59).
 
Figure 59. Resize the text field to match the text content and set the alignment of the text to align center.
Figure 59. Resize the text field to match the text content and set the alignment of the text to align center.
 
Never attach ActionScript 2 code to buttons and movie clips
If you're working with a project that uses ActionScript 2 code, avoid attaching the code to objects. Always add the code as frame scripts because it is much easier to locate later (see Figure 60). You can identify frames that contain code because they display a lowercase character in the Timeline.
 
Figure 60. Add ActionScript 2 code to frame scripts.
Figure 60. Add ActionScript 2 code to frame scripts.
Note: When you develop using ActionScript 3, you can only add the code to frames.
 
 
Organize project assets to keep font files easy to access
Always store font files in the project folder. When you need to share project files, be sure to include all the necessary files, including the font files used in the project.
 
 
Include all project libraries and third-party classes when you share a project
Don't forget to attach all external libraries and class files that are used in the project. Double-check that you are using global paths to link to external files.
 
 
Add ActionScript code to one centralized location in the project file
When adding ActionScript code to frames, try to organize all of the important scripts (needed for Stage resize handling, Stage setup, and more) in a location that is easy to access. This strategy makes it much easier to update the project file later. Generally speaking, it is a best practice to place important code on Frame 1 of the Actions layer so that any developer who works with the project in the future can quickly find it.
 
You can add the less important, isolated, or supplemental code in other locations that are controlled by this main script on Frame 1.
 
 
Use relative paths to external files
Use relative paths to classes, libraries, and output files. This makes your project portable and simple to share with other developers. If you always follow this rule, other team members won't have to change the paths later (see Figure 61).
 
Figure 61. Use relative paths when linking to external files.
Figure 61. Use relative paths when linking to external files.

 
Where to go from here

I hope that the tips provided in this article will help you create optimized Flash projects. By applying these suggestions to your development workflow, you can improve the performance of Flash animations and provide better user experiences on both desktop and mobile devices.
 
Additionally, by incorporating these best practices, you can ensure that your files are easier to update and manage in the future. This is especially helpful when working within a team.
 
If you have other Flash tips to share, especially if they solve a specific problem, please add them to the Flash cookbook.
 
Currently I am working on an XFLTool project (now in the early alpha stage) that contains a module-checking XFL project for following some of these rules. Let me know if you're using other rules in your work; I would be happy to add some of them to my list. Feel free to send me your comments, opinions, criticism, rules, and anything you want.
 
Check out the following resources to learn more about working with Flash Professional: