29 August 2011
A basic understanding of developing projects with Flash Professional and developing with ActionScript 3.
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.
This section includes helpful suggestions for making content play more seamlessly in Adobe Flash Player and use fewer resources.
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).
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).
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).
Unless necessary, avoid adding dashed or dotted lines. Solid lines require fewer resources to draw (see Figure 4).
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).
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).
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).
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).
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).
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).
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).
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).
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:
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).
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).
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).
Note: You can animate the x and y properties of objects without recaching them.
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).
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).
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).
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).
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).
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).
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).
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).
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.
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).
Follow these suggestions to reduce the file size of the SWF files you create and improve their download times.
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.
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).
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).
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).
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).
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.
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.
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).
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).
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.
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).
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.
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).
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).
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).
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
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.
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).
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).
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).
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.
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).
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).
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).
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).
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).
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.
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).
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).
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).
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).
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).
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).
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).
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).
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).
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).
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).
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).
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).
When you import text fields, always choose the option to import them as Editable text (see Figure 58).
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).
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.
Note: When you develop using ActionScript 3, you can only add the code to frames.
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.
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.
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 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).
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: