Best Practices to optimize FLA files for Animate

As your document file size increases, so does its download time and playback speed. You can take several steps to prepare your document for optimal playback. As part of the publishing process, Animate automatically performs some optimization on documents. Before exporting a document, you can optimize it further by using various strategies to reduce the file size. You can also compress a SWF file as you publish it. As you make changes, test your document by running it on a variety of computers, operating systems, and Internet connections.

Optimize documents

• Use symbols, animated or otherwise, for every element that appears more than once.

• Use tweened animations whenever possible when creating animation sequences. Tweened animations use less file space than a series of keyframes.

• Use movie clips instead of graphic symbols for animation sequences.

• Limit the area of change in each keyframe; make the action take place in as small an area as possible.

• Avoid animating bitmap elements; use bitmap images as background or static elements.

• Use mp3, the smallest sound format, whenever possible.

Optimize elements and lines

• Group elements.

• Use layers to separate elements that change during the animation from elements that do not.

• Use Modify > Shape > Optimize to minimize the number of separate lines that are used to describe shapes.

• Limit the number of special line types, such as dashed, dotted, ragged, and so on. Solid lines require less memory. Lines created with the Pencil tool require less memory than brush strokes.

Optimize text and fonts

• Limit the number of fonts and font styles. Use embedded fonts sparingly because they increase file size.

• For Embed Fonts options, select only the characters needed instead of including the entire font.

Optimize colors

• Use the Color menu in the Symbol Property inspector to create many instances of a single symbol in different colors.

• Use the Color panel (Window > Color) to match the color palette of the document to a browser-specific palette.

• Use gradients sparingly. Filling an area with gradient color requires about 50 bytes more than filling it with solid color.

• Use alpha transparency sparingly because it can slow playback.

Speed up document display

To speed up the document display, use commands in the View menu to turn off rendering-quality features that require extra computing and slow down document display.

None of these commands have any effect on how Animate exports a document. To specify the display quality of Animate documents in a web browser, use the object and embed parameters. The Publish command can do this for you automatically.

Optimizing graphics and animation

Before you create optimized and streamlined animations or graphics, outline and plan your project. Make a target for the file size and length of the animation, and test throughout the development process.

Follow these guidelines to optimize graphics and animation:

• Avoid using gradients, because they require many colors and calculations to be processed, which is more difficult for a computer processor to render.

• For the same reason, keep the amount of alpha or transparency you use in a SWF file to a minimum.

  Animating objects that include transparency is processor-intensive and should be kept to a minimum. Animating transparent graphics over bitmaps is a particularly processor-intensive kind of animation, and must be kept to a minimum or avoided completely.

   The best bitmap format to import into Animate is PNG, which is the native file format of Macromedia Fireworks from Adobe. PNG files have RGB and alpha information for each pixel. If you import a Fireworks PNG file into Animate, you retain some ability to edit the graphic objects in the FLA file.

• Optimize bitmaps without overcompressing them. A 72‑dpi resolution is optimal for the web. Compressing a bitmap image reduces file size, but compressing it too much compromises the quality of the graphic. Check that the settings for JPEG quality in the Publish Settings dialog box do not overcompress the image. Representing an image as a vector graphic is preferable in most cases. Using vector images reduces file size, because the images are made from calculations instead of many pixels. Limit the number of colors in your image while still retaining quality.

   Avoid scaling bitmaps larger than their original dimensions, because it reduces the quality of the image and is processor intensive.

• Set the _visible property to false instead of changing the _alpha level to 0 or 1 in a SWF file. Calculating the _alpha level for an instance on the Stage is processor intensive. If you disable the instance’s visibility, it saves CPU cycles and memory, which can give your SWF files smoother animations. Instead of unloading and possibly reloading assets, set the _visible property to false, which is less processor-intensive.

• Reduce the number of lines and points you use in a SWF file. Use the Optimize Curves dialog box (Modify > Shape > Optimize) to reduce the number of vectors in a drawing. Select the Use Multiple Passes option for more optimization. Optimizing a graphic reduces file size, but compressing it too much compromises its quality. However, optimizing curves reduces your file size and improves SWF file performance. Third-party options are available for specialized optimization of curves and points that yield different results.

To get the best results, try different ways of producing animated content, and test each of the options.

A higher frame rate (measured in frames per second, or fps) produces smooth animation in a SWF file but it can be processor-intensive, particularly on older computers. Test your animations at different frame rates to find the lowest frame rate possible.

For a sample of scripted animation, see the Animate Samples web page at www.adobe.com/go/learn_fl_samples. Download and decompress the Samples zip file and navigate to the ActionScript2.0/Animation folder to access the sample.

Animation frame rate and performance

When you add animation to an application, consider the frame rate that you set your FLA file to. Frame rate can affect the performance of your SWF file and the computer that plays it. Setting a frame rate too high can lead to processor problems, especially when you use many assets or use ActionScript to create animation.

However, you also need to consider the frame rate setting, because it affects how smoothly your animation plays. For example, an animation set to 12 frames per second (fps) in the Property inspector plays 12 frames each second. If the document's frame rate is set to 24 fps, the animation appears to animate more smoothly than if it ran at 12 fps. However, your animation at 24 fps also plays faster than it does at 12 fps, so the total duration (in seconds) is shorter. Therefore, to make a 5‑second animation using a higher frame rate, you must add additional frames to fill those five seconds than at a lower frame rate (and thus, raises the total file size of your animation). A 5‑second animation at 24 fps typically has a higher file size than a 5‑second animation at 12 fps.

 When you use an onEnterFrame event handler to create scripted animations, the animation runs at the document's frame rate, similar to if you created a motion tween on a timeline. An alternative to the onEnterFrame event handler is setInterval (see ActionScript 2.0 Language Reference). Instead of depending on frame rate, you call functions at a specified interval. Like onEnterFrame, the more frequently you use setInterval to call a function, the more resource intensive the animation is on your processor.

Use the lowest possible frame rate that makes your animation appear to play smoothly at runtime, which helps reduce the strain on the end-user's processor. High frame rates (more than 30 to 40 fps) put a lot of stress on processors, and do not change the appearance of the animation much or at all at runtime.

Select a frame rate for your animation as early as possible in the development process. When you test the SWF file, check the duration, and the SWF file size, of your animation. The frame rate greatly affects the speed of the animation.

Filters and SWF file performance

If you use too many filters in an application, you can use large amounts of memory and cause Flash Player performance to suffer. Because a movie clip with filters attached has two bitmaps that are both 32‑bit, these bitmaps can cause your application to use a significant amount of memory if you use many bitmaps. The computer's operating system might generate an out-of-memory error. On a modern computer, out-of-memory errors should be rare, unless you are using filter effects extensively in an application (for example, you have thousands of bitmaps on the Stage).

However, if you do encounter an out-of-memory error, the following occurs:

• The filters array is ignored.

• The movie clip is drawn using the regular vector renderer.

• No bitmaps are cached for the movie clip.

  After an out-of-memory error occurs, a movie clip never attempts to use a filters array or a bitmap cache. Another factor that affects player performance is the value that you use for the quality parameter for each filter that you apply. Higher values require more CPU and memory for the effect to render, whereas setting the quality parameter to a lower value requires fewer computer resources. Avoid using an excessive number of filters, and use a lower quality setting when possible.

   If a 100 pixel by 100 pixel object is zoomed in once, it uses four times the memory since the content's dimensions are now 200 pixels by 200 pixels. If you zoom another two times, the shape is drawn as an 800 pixel by 800 pixel object which uses 64 times the memory as the original 100 pixel by 100 pixel object. Whenever you use filters in a SWF file, disable the zoom menu options from the SWF file's context menu.

  You can encounter errors if you use invalid parameter types. Some filter parameters also have a particular valid range. If you set a value that's outside of the valid range, the value changes to a valid value that's within the range. For example, quality should be a value from 1 to 3 for a standard operation, and can only be set to 0 to 15. Anything higher than 15 is set to 15.

  Some constructors have restrictions on the length of arrays required as input parameters. If a convolution filter or color matrix filter is created with an invalid array (not the right size), the constructor fails and the filter is not created successfully. If the filter object is then used as an entry on a movie clip's filters array, it is ignored.

  Tip: When using a blur filter, using values for blurX and blurY that are powers of 2 (such as 2, 4, 8, 16, and 32) can be computed faster and give a 20% to 30% performance improvement.

Bitmap caching and SWF file performance

Bitmap caching helps you enhance the performance of nonchanging movie clips in your applications. When you set the MovieClip.cacheAsBitmap or Button.cacheAsBitmap property to true, Flash Player caches an internal bitmap representation of the movie clip or button instance. This can improve performance for movie clips that contain complex vector content. All of the vector data for a movie clip that has a cached bitmap is drawn to the bitmap, instead of to the main Stage.

 The bitmap is copied to the main Stage as unstretched, unrotated pixels snapped to the nearest pixel boundaries. Pixels are mapped one-to-one with the parent object. If the bounds of the bitmap change, the bitmap is re‑created instead of being stretched.

For detailed information on caching button or movie clip instances see the following topics:

• About caching and scrolling movie clips with ActionScript in Learning ActionScript 2.0

• Caching a movie clip in Learning ActionScript 2.0

  Use the cacheAsBitmap property with movie clips with mostly static content and that do not scale and rotate frequently. With such movie clips, using the cacheAsBitmap property can lead to performance improvements when the movie clip is translated (when its x and y position is changed).

  Enabling caching for a movie clip creates a surface, which has several advantages, such as helping complex vector animations to render fast. In some situations, enabling caching does not improve performance, or even decrease it.

  Overall performance of cached data depends on how complex the vector data of your instances are, how much of the data you change, and whether or not you set the opaqueBackground property. If you are changing small regions, the difference between using a surface and using vector data might be negligible. Test both scenarios with your work before you deploy the application.

When to use bitmap caching

The following are typical scenarios in which you might see significant benefits when you enable bitmap caching by optimizing vector graphics.

An application that contains a detailed and complex background image of vector data. To improve performance, select the content, store it in a movie clip, and set the opaqueBackground property to true. The background is rendered as a bitmap and can be redrawn quickly, so that your animation plays faster.

An application that displays a large amount of text in a scrolling text field. Place the text field in a movie clip that you set as scrollable with scrolling bounds (the scrollRect property), enabling fast pixel scrolling for the specified instance. When a user scrolls the movie clip instance, the scrolled pixels shift up and generate the newly exposed region instead of regenerating the entire text field.

An application with a complex system of overlapping windows. Each window can be open or closed (for example, web browser windows). If you mark each window as a surface (set the cacheAsBitmap property to true), each window is isolated and cached. Users can drag the windows so that they overlap each other, and each window doesn't need to regenerate the vector content.

When to avoid using bitmap caching

Misusing bitmap caching can negatively affect your SWF file. When you develop a FLA file that uses surfaces, remember the following guidelines:

• Do not overuse surfaces (movie clips with caching enabled). Each surface uses more memory than a regular movie clip; only enable surfaces to improve rendering performance.

• A cached bitmap can use significantly more memory than a regular movie clip instance. For example, if the movie clip on the Stage is 250 pixels by 250 pixels, when cached it might use 250 KB instead of 1 KB when it's a regular (uncached) movie clip instance.

• Avoid zooming in on cached surfaces. If you overuse bitmap caching, a large amount of memory is consumed (see previous bullet), especially if you zoom in on the content.

• Use surfaces for movie clip instances that are largely static (nonanimating). You can drag or move the instance, but the contents of the instance should not animate or change a lot. For example, if you rotate or transform an instance, the instance changes between the surface and vector data, which is difficult to process and negatively affects your SWF file.

• If you mix surfaces with vector data, it increases the amount of processing that Flash Player (and sometimes the computer) needs to do. Group surfaces together; for example, when you create windowing applications.

Working with components in Flash Player

The component framework lets you add functionality to components, but it can potentially add considerable file size to an application. Components inherit from each other. One component adds size to your Animate document, but subsequent components that use the same framework do not necessarily add more size. As you add components to the Stage, the file size increases, but at some point, it levels off because components share classes and do not load new copies of those classes.

If you use multiple components that do not share the same framework, they might add substantial file size to the SWF file. For example, the XMLConnector component adds 17K to the SWF file, and TextInput components add 24K to your document. If you add the ComboBox component, it adds 28K, because it is not part of the framework of either previous component. Because the XMLConnector component uses data binding, the classes add 6K to the SWF file. A document that uses all these components has 77K before you add anything else to the file. Carefully consider your SWF file size when you add a new component to the document.

Components must exist in the parent SWF file’s library. For example, an application must have a copy of the components it uses in its library, even if those components are required only by child SWF files that are loaded at runtime. This is necessary to ensure that the components function properly, and slightly increases the download time of the parent SWF file. However, the parent library isn’t inherited or shared in the SWF files that you load into the parent. Each child SWF file must download to the application with its own copy of the same components.

When you are planning to publish a SWF file with backward compatibility, you must have a good understanding of which components have that capability. The following table provides information about component availability in different versions of Flash Player:

Deselect the Optimize for Flash Player 6r65 option in Publish Settings for the V2 UI components to work.

Optimizing component styles and performance

When using ActionScript 2.0, one of the most processor-intensive calls in a component framework is the setStyle call. The setStyle call executes efficiently, but the call is intensive because of the way it is implemented. The setStyle call is not always necessary in all applications, but if you use it, consider its performance effect.

To enhance performance, you can change styles before they are loaded, calculated, and applied to the objects in your SWF file. If you can change styles before the styles are loaded and calculated, you do not have to call setStyle.

To improve performance when using styles, set properties on each object as objects are instantiated. When you dynamically attach instances to the Stage, set properties in initObj in the call that you make to createClassObject(), as the following ActionScript shows:

For instances that you place directly on the Stage, you can use onClipEvent() for each instance, or you can use subclasses (recommended). For information on subclasses, see About writing a subclass in Learning ActionScript 2.0.

If you must restyle your components, you can improve efficiency in your application by using the Loader component. To implement several styles in different components, place each component in its own SWF file. If you change styles on the Loader component and reload the SWF file, the components in the SWF file are recreated. When the component is recreated, the cache of styles is emptied, and the style for the component is reset and referenced again.

 To apply a single style to all instances of a component in your SWF file, change the style globally using _global.styles.ComponentName.

Using runtime shared libraries

You can sometimes improve download time by using runtime shared libraries. These libraries are usually necessary for larger applications or when numerous applications on a site use the same components or symbols. By externalizing the common assets of your SWF files, you do not download classes repeatedly. The first SWF file that uses a shared library has a longer download time, because both the SWF file and the library load. The library caches on the user’s computer, and then all the subsequent SWF files use the library. This process can greatly improve download time for some larger applications.

Displaying special characters

Computer operating systems have a specific code page that is regional. For example, a computer in Japan has a different code page than a computer in England. Flash Player 5 and earlier versions relied on the code page to display text; Flash Player 6 and later versions use Unicode to display text. Unicode is more reliable and standardized for displaying text because it is a universal character set that contains characters for all languages. Most current applications use Unicode.

You can use Unicode escape sequences to display special characters in Flash Player 6 and later. However, not all your characters display correctly if you do not load text that is UTF‑8 or UTF‑16 encoded (Unicode) or if you do not use a Unicode escape sequence to display the special character. For a set of Unicode code charts, see the Unicode web site at Unicode.org. For a list of commonly used escape sequences, see the table that follows in this section.

A non-Unicode application uses the operating system’s code page to render characters on a page. In this case, the code page specifies the characters you see, so the characters appear correctly only when the code page on the user’s operating system matches the application’s code page. The code page that was used to create the SWF file needs to match the code page on the end user’s computer. Using code pages is not a good idea for applications that an international audience might use; in this case, use Unicode instead.

Using System.useCodepage in your code forces the SWF file to use the system’s code page instead of Unicode.

Only use this process when you are loading non-Unicode encoded text from an external location and when this text is encoded with the same code page as the user’s computer. If both these conditions are true, the text appears without a problem. If both of these conditions are not true, use Unicode and a Unicode escape sequence to format your text. To use an escape sequence, add the following ActionScript 2.0 on Frame 1 of the Timeline:

This ActionScript creates a text field, and enters text that includes a copyright symbol (©) into the text field.

You can make a SWF file use the operating system’s code page, which is controlled by the useCodepage property. When Animate exports a SWF file, it defaults to exporting Unicode text and System.useCodepage is set to false. You might encounter problems displaying special text, or text on international systems, where using the system’s code page can seem to solve the problem of text incorrectly displaying. However, using System.useCodePage is always a last resort.

To use the system’s code page, place the following line of ActionScript 2.0 code on Frame 1 of the Timeline:

 A special character can appear only if the user’s computer has the character included in the font that is being used. If you are not sure, embed the character or font in the SWF file.

The following table contains a number of commonly used Unicode escape sequences.

Test document download performance

Flash Player attempts to meet the frame rate you set; the actual frame rate during playback can vary on different computers. If a document that is downloading reaches a particular frame before the frame’s required data is downloaded, the document pauses until the data arrives.

To view downloading performance graphically, use the Bandwidth Profiler, which shows how much data is sent for each frame according to the modem speed you specify.

 (Animate only) Bandwidth Profiler is unavailable with Animate. You can choose to use Adobe Scout with Animate, instead. See Using Adobe Scout with Animate for more information.

In simulating the downloading speed, Animate uses estimates of typical Internet performance, not the exact modem speed. For example, if you select to simulate a modem speed of 28.8 Kbps, Animate sets the actual rate to 2.3 Kbps to reflect typical Internet performance. The profiler also compensates for the added compression support for SWF files, which reduces the file size and improves streaming performance.

When external SWF files, GIF and XML files, and variables are streamed into a player by using ActionScript calls such as loadMovie and getUrl, the data flows at the rate set for streaming. The stream rate for the main SWF file is reduced based on the reduction of bandwidth that the additional data requests cause. Test your document at each speed and on each computer that you plan to support to ensure that the document doesn’t overburden the slowest connection and computer for which it is designed.

You can also generate a report of frames that are slowing playback and then optimize or eliminate some of the content in those frames.

To change the settings for the SWF file created using the Test Movie and Test Scene commands, use File > Publish Settings.

Test download performance

Generate a final report