How To Make Your Animation Smaller In Animate

Optimize Animate documents

Every bit your document file size increases, so does its download time and playback speed. You can have several steps to set your document for optimal playback. Equally part of the publishing process, Animate automatically performs some optimization on documents. Earlier exporting a document, yous can optimize it further by using diverse strategies to reduce the file size. You lot can as well shrink a SWF file as you publish it. Every bit y'all brand changes, exam your document by running it on a variety of computers, operating systems, and Internet connections.

Optimize documents

Utilise symbols, animated or otherwise, for every element that appears more than once.
Use tweened animations whenever possible when creating blitheness sequences. Tweened animations use less file space than a series of keyframes.
Use moving picture clips instead of graphic symbols for blitheness sequences.
Limit the area of change in each keyframe; make the activity take place in as small an area as possible.
Avoid animative bitmap elements; use bitmap images as background or static elements.
Use mp3, the smallest sound format, whenever possible.

Optimize elements and lines

Grouping 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 divide lines that are used to describe shapes.
Limit the number of special line types, such as dashed, dotted, ragged, and then on. Solid lines require less memory. Lines created with the Pencil tool crave less retentiveness 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 simply 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 dissimilar colors.
Use the Colour console (Window > Colour) to friction match the color palette of the document to a browser-specific palette.
Use gradients sparingly. Filling an area with gradient color requires near 50 bytes more than filling it with solid color.
Apply alpha transparency sparingly considering it can boring playback.

Speed up certificate display

To speed upwards the certificate brandish, use commands in the View carte to plough off rendering-quality features that require extra computing and slow downwardly document display.

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

Select View > Preview Way, and select from the following options:

Outlines

Displays only the outlines of the shapes in your scene and causes all lines to announced every bit thin lines. This makes it easier to reshape your graphic elements and to brandish complex scenes quickly.

Fast

Turns off anti-aliasing and displays all the colors and line styles of your cartoon.

Antialias

Turns on anti-aliasing for lines, shapes, and bitmaps and displays shapes and lines so that their edges appear smoother on the screen. Draws more slowly than the Fast option. Anti-aliasing works best on video cards that provide thousands (16‑chip) or millions (24‑bit) of colors. In 16‑ or 256‑color manner, black lines are smoothed, just colors might await improve in Fast mode.

Antialias Text

Smooths the edges of any text. Works best with large font sizes and can be slow with large amounts of text. This is the most common mode in which to piece of work.

Full

Renders all content on the Stage fully. Might slow downwardly display.

Optimizing graphics and animation

Before yous 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 exist processed, which is more than 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 blitheness, and must be kept to a minimum or avoided completely.

The all-time bitmap format to import into Breathing 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 paradigm 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 non overcompress the image. Representing an image as a vector graphic is preferable in well-nigh 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 paradigm while withal retaining quality.

Avert scaling bitmaps larger than their original dimensions, because it reduces the quality of the paradigm and is processor intensive.
Prepare the _visible holding 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'southward visibility, it saves CPU cycles and memory, which can give your SWF files smoother animations. Instead of unloading and peradventure reloading assets, set the _visible property to false, which is less processor-intensive.
Reduce the number of lines and points y'all employ in a SWF file. Use the Optimize Curves dialog box (Change > Shape > Optimize) to reduce the number of vectors in a drawing. Select the Use Multiple Passes option for more than optimization. Optimizing a graphic reduces file size, but compressing it also much compromises its quality. All the same, 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 dissimilar results.

To get the all-time results, try unlike ways of producing animated content, and test each of the options.

A higher frame rate (measured in frames per 2d, or fps) produces polish animation in a SWF file but it can exist processor-intensive, particularly on older computers. Test your animations at different frame rates to observe the lowest frame charge per unit possible.

For a sample of scripted animation, come across the Animate Samples web page at world wide web.adobe.com/go/learn_fl_samples. Download and decompress the Samples zippo file and navigate to the ActionScript2.0/Animation folder to admission the sample.

Animation frame rate and performance

When y'all add animation to an application, consider the frame charge per unit that y'all set your FLA file to. Frame rate can touch on the performance of your SWF file and the calculator that plays information technology. Setting a frame rate as well high can lead to processor problems, peculiarly when you use many assets or use ActionScript to create animation.

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

When you utilise an onEnterFrame event handler to create scripted animations, the animation runs at the document's frame charge per unit, similar to if you created a motion tween on a timeline. An alternative to the onEnterFrame issue handler is setInterval (meet ActionScript two.0 Language Reference). Instead of depending on frame charge per unit, you phone call functions at a specified interval. Like onEnterFrame, the more oftentimes you lot utilise setInterval to call a function, the more resource intensive the animation is on your processor.

Utilise the everyman possible frame charge per unit that makes your animation appear to play smoothly at runtime, which helps reduce the strain on the stop-user's processor. High frame rates (more 30 to forty fps) put a lot of stress on processors, and do not alter the appearance of the animation much or at all at runtime.

Select a frame charge per unit for your animation as early equally possible in the development procedure. When you exam 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 utilise besides many filters in an application, you tin can utilise large amounts of memory and cause Wink Actor performance to endure. Considering a picture prune with filters attached has two bitmaps that are both 32‑fleck, these bitmaps can crusade your awarding to apply a meaning amount of retention if you lot utilise many bitmaps. The computer's operating organization might generate an out-of-retention error. On a modern computer, out-of-retention errors should be rare, unless you are using filter furnishings extensively in an application (for example, you have thousands of bitmaps on the Stage).

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

The filters assortment is ignored.
The motion-picture show clip is fatigued using the regular vector renderer.
No bitmaps are cached for the movie clip.

Afterwards an out-of-memory error occurs, a movie prune never attempts to use a filters array or a bitmap cache. Another gene that affects role player functioning is the value that you utilise for the quality parameter for each filter that you utilize. Higher values require more CPU and memory for the consequence to render, whereas setting the quality parameter to a lower value requires fewer calculator resources. Avoid using an excessive number of filters, and utilize a lower quality setting when possible.

If a 100 pixel by 100 pixel object is zoomed in once, it uses four times the retention since the content'south dimensions are at present 200 pixels past 200 pixels. If yous zoom another ii times, the shape is drawn equally 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 bill of fare options from the SWF file's context menu.

You can see errors if yous use invalid parameter types. Some filter parameters also accept a item valid range. If yous gear up a value that'south outside of the valid range, the value changes to a valid value that's within the range. For example, quality should exist a value from 1 to iii for a standard operation, and can just be set to 0 to fifteen. Anything higher than 15 is set to 15.

Some constructors accept restrictions on the length of arrays required every bit input parameters. If a convolution filter or color matrix filter is created with an invalid assortment (not the right size), the constructor fails and the filter is not created successfully. If the filter object is and so used equally an entry on a picture prune's filters array, information technology is ignored.

Tip: When using a mistiness filter, using values for blurX and blurY that are powers of 2 (such as ii, 4, 8, 16, and 32) can be computed faster and give a xx% to thirty% performance comeback.

Bitmap caching and SWF file performance

Bitmap caching helps you raise the performance of nonchanging motion-picture show clips in your applications. When you lot set the MovieClip.cacheAsBitmap or Button.cacheAsBitmap property to true, Flash Actor caches an internal bitmap representation of the movie clip or button instance. This can improve performance for motion-picture show clips that comprise complex vector content. All of the vector data for a movie clip that has a cached bitmap is fatigued to the bitmap, instead of to the principal Phase.

The bitmap is copied to the master Stage every bit unstretched, unrotated pixels snapped to the nearest pixel boundaries. Pixels are mapped one-to-one with the parent object. If the premises of the bitmap alter, the bitmap is re‑created instead of being stretched.

For detailed information on caching push button or movie prune instances run into the post-obit topics:

Most caching and scrolling moving-picture show clips with ActionScript in Learning ActionScript 2.0
Caching a film clip in Learning ActionScript ii.0

Utilise the cacheAsBitmap property with flick clips with by and large static content and that do not scale and rotate oftentimes. With such movie clips, using the cacheAsBitmap property can atomic number 82 to functioning improvements when the picture show clip is translated (when its x and y position is inverse).

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 fifty-fifty decrease it.

Overall functioning of cached information depends on how complex the vector data of your instances are, how much of the data you modify, and whether or not you lot set the opaqueBackground property. If you are irresolute small regions, the departure between using a surface and using vector data might be negligible. Test both scenarios with your work before y'all deploy the application.

When to utilize bitmap caching

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

Circuitous background prototype

An application that contains a detailed and complex background image of vector data. To better operation, select the content, store it in a movie clip, and ready the opaqueBackground property to truthful. The background is rendered as a bitmap and tin can be redrawn chop-chop, so that your animation plays faster.

Scrolling text field

An application that displays a big corporeality of text in a scrolling text field. Place the text field in a picture prune that you fix as scrollable with scrolling premises (the scrollRect property), enabling fast pixel scrolling for the specified example. When a user scrolls the movie clip instance, the scrolled pixels shift upward and generate the newly exposed region instead of regenerating the entire text field.

Windowing organization

An application with a circuitous system of overlapping windows. Each window tin be open or closed (for example, web browser windows). If you marker each window as a surface (fix 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 avert using bitmap caching

Misusing bitmap caching can negatively affect your SWF file. When you lot 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 prune; just enable surfaces to better rendering performance.
A cached bitmap tin can use significantly more memory than a regular picture clip example. For instance, if the movie clip on the Stage is 250 pixels by 250 pixels, when cached information technology might employ 250 KB instead of 1 KB when it's a regular (uncached) movie clip instance.
Avert zooming in on cached surfaces. If you overuse bitmap caching, a large amount of retentivity is consumed (meet previous bullet), especially if you zoom in on the content.
Use surfaces for movie clip instances that are largely static (nonanimating). Yous can elevate or move the case, only the contents of the instance should not animate or change a lot. For example, if you rotate or transform an example, the instance changes betwixt the surface and vector data, which is hard to process and negatively affects your SWF file.
If you mix surfaces with vector data, information technology increases the corporeality of processing that Wink Role player (and sometimes the computer) needs to do. Grouping surfaces together; for example, when you create windowing applications.

Working with components in Flash Player

The component framework lets yous 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, simply subsequent components that utilize the same framework do not necessarily add more size. As you add components to the Stage, the file size increases, simply at some indicate, it levels off considering components share classes and do not load new copies of those classes.

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

Components must exist in the parent SWF file'southward library. For example, an application must have a copy of the components it uses in its library, even if those components are required simply past kid 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 yous load into the parent. Each kid SWF file must download to the application with its own re-create of the same components.

When y'all are planning to publish a SWF file with backward compatibility, you must take a good agreement of which components take that capability. The following table provides information about component availability in dissimilar versions of Wink Player:

Components	Flash Histrion half dozen (six.0.65.0) and earlier	Flash Thespian 6 (half-dozen.0.65.0)	Wink Player 7 and 8	Flash Role player 9
ActionScript iii.0	Not supported	Not supported	Non supported	Supported
ActionScript 2.0	Supported	Supported	Supported	Supported
V2 UI component set	Not supported	Supported	Supported	Supported
Media components	Not supported	Not supported	Supported	Supported
Data components	Not supported	Not supported	Supported	Supported

Deselect the Optimize for Flash Thespian 6r65 choice in Publish Settings for the V2 UI components to piece of 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 telephone call. The setStyle call executes efficiently, but the telephone call is intensive because of the way it is implemented. The setStyle phone call is not ever necessary in all applications, merely if you utilise it, consider its performance upshot.

To heighten performance, you can change styles before they are loaded, calculated, and applied to the objects in your SWF file. If yous tin modify styles before the styles are loaded and calculated, yous do not take to call setStyle.

To improve functioning when using styles, fix backdrop on each object as objects are instantiated. When you dynamically attach instances to the Phase, prepare backdrop in initObj in the call that you make to createClassObject(), as the post-obit ActionScript shows:

createClassObject(ComponentClass, "myInstance", 0, {styleName:"myStyle", color:0x99CCFF});

For instances that you place direct on the Phase, you can utilize onClipEvent() for each instance, or you tin can use subclasses (recommended). For information on subclasses, run across About writing a bracket in Learning ActionScript 2.0.

If you must restyle your components, you tin improve efficiency in your awarding by using the Loader component. To implement several styles in different components, place each component in its ain 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 mode for the component is reset and referenced again.

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

You can sometimes improve download fourth dimension by using runtime shared libraries. These libraries are usually necessary for larger applications or when numerous applications on a site utilize the aforementioned components or symbols. By externalizing the common assets of your SWF files, y'all do not download classes repeatedly. The first SWF file that uses a shared library has a longer download fourth dimension, considering 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 tin can greatly better download time for some larger applications.

Displaying special characters

Calculator operating systems accept a specific code page that is regional. For case, a computer in Japan has a unlike code folio than a computer in England. Flash Player 5 and before versions relied on the code page to brandish text; Flash Player 6 and afterward versions use Unicode to brandish text. Unicode is more reliable and standardized for displaying text considering it is a universal character ready that contains characters for all languages. Most current applications use Unicode.

You tin use Unicode escape sequences to display special characters in Flash Player vi and subsequently. Notwithstanding, not all your characters display correctly if you lot do non load text that is UTF‑8 or UTF‑16 encoded (Unicode) or if you lot practice not use a Unicode escape sequence to display the special character. For a set of Unicode lawmaking charts, see the Unicode spider web site at Unicode.org. For a list of ordinarily used escape sequences, see the table that follows in this department.

A non-Unicode application uses the operating system'due south code page to return characters on a folio. In this case, the lawmaking page specifies the characters you lot run into, and 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 friction match the code page on the stop user'south figurer. Using code pages is not a proficient idea for applications that an international audition might utilise; in this example, apply Unicode instead.

Using Organization.useCodepage in your lawmaking forces the SWF file to utilise the system's code folio instead of Unicode.

Only utilise this process when you are loading non-Unicode encoded text from an external location and when this text is encoded with the aforementioned code page every bit the user's calculator. If both these conditions are true, the text appears without a trouble. If both of these conditions are non true, use Unicode and a Unicode escape sequence to format your text. To use an escape sequence, add the post-obit ActionScript ii.0 on Frame 1 of the Timeline:

this.createTextField("myText_txt", 99, 10, 10, 200, 25);  myText_txt.text = "this is my text, \u00A9 2004";

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

You lot can make a SWF file utilize the operating system'due south code folio, which is controlled past the useCodepage property. When Animate exports a SWF file, it defaults to exporting Unicode text and Arrangement.useCodepage is set to fake. Yous might encounter bug displaying special text, or text on international systems, where using the system's code folio can seem to solve the problem of text incorrectly displaying. However, using System.useCodePage is ever a final resort.

To utilize the system'southward code folio, identify the following line of ActionScript 2.0 lawmaking on Frame ane of the Timeline:

Organization.useCodepage = true; << need an AS3 example here as well. See dev/qa. >>

A special graphic symbol can appear only if the user's figurer has the character included in the font that is being used. If you are not certain, embed the character or font in the SWF file.

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

Character description	Unicode escape sequence
em-dash (—)	\u2014
registered sign (®)	\u00AE
copyright sign (©)	\u00A9
trademark sign (™)	\u2122
Euro sign (€)	\u20AC
backslash (\)	\u005C
forrard slash (/)	\u002F
open curly brace ({)	\u007B
close curly brace (})	\u007D
greater than (<)	\u003C
less than (>)	\u003E
asterisk (*)	\u002A

Test document download operation

Flash Player attempts to meet the frame rate you fix; the bodily frame rate during playback tin vary on unlike computers. If a document that is downloading reaches a particular frame before the frame's required data is downloaded, the document pauses until the information 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 just) Bandwidth Profiler is unavailable with Animate. You tin can cull to apply Adobe Scout with Breathing, instead. Encounter Using Adobe Sentry 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, Breathing sets the bodily rate to 2.3 Kbps to reverberate typical Internet performance. The profiler also compensates for the added compression support for SWF files, which reduces the file size and improves streaming functioning.

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

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

To alter the settings for the SWF file created using the Examination Movie and Test Scene commands, employ File > Publish Settings.

Test download performance

Select Command > Examination Scene or Control > Test.

If you test a scene or document, Animate publishes the electric current selection equally a SWF file using the settings in the Publish Settings dialog box. The SWF file opens in a new window and begins playing immediately.
Select File > Open up, and select a SWF file.

Select View > Download Settings, and select a download speed to determine the streaming rate that Animate simulates. To enter a custom user setting, select Customize.

When viewing the SWF file, select View > Bandwidth Profiler to show a graph of the downloading performance.

The left side of the profiler displays data most the document, its settings, its state, and streams, if whatsoever are included in the certificate.

The correct section of the profiler shows the Timeline header and graph. In the graph, each bar represents an individual frame of the document. The size of the bar corresponds to that frame's size in bytes. The ruby line beneath the Timeline header indicates whether a given frame streams in existent time with the current modem speed set up in the Control menu. If a bar extends above the blood-red line, the document must expect for that frame to load.

(Animate CC but) Bandwidth Profiler is unavailable with Animate CC. You tin can choose to use Adobe Watch with Animate, instead. See Using Adobe Scout with Breathing for more information.

Select View > Simulate Download to plow streaming off or on.

If y'all turn streaming off, the document starts over without simulating a spider web connectedness.

note: (Animate only) The Simulate Download choice is unavailable with Animate.

Click a bar on the graph to evidence settings for the respective frame in the left window and cease the document.

If necessary, arrange the view of the graph by taking ane of the following actions:

Select View > Streaming Graph to bear witness which frames crusade pauses.

This default view displays alternating light and dark gray blocks that represent each frame. The side of each block indicates its relative byte size. The beginning frame stores a symbol'due south contents, so it is often larger than other frames.
Select View > Frame by Frame Graph to display the size of each frame.

This view helps you see which frames contribute to streaming delays. If any frame block extends above the ruddy line in the graph, Flash Thespian stops playback until the unabridged frame downloads.

Close the test window to return to the authoring surround.

Afterwards you set up a examination environment using the Bandwidth Profiler, you can open any SWF file directly in the test surroundings. The file opens in a Flash Histrion window, using the Bandwidth Profiler and other selected viewing options.

(Animate just) Bandwidth Profiler is unavailable with Animate. You tin choose to use Adobe Scout with Breathing, instead. Run into Using Adobe Lookout with Animate for more than information.

Generate a final report

Select File > Publish Settings, and click the Animate tab.

Select Generate Size Study.

Animate generates a text file with the .txt extension. (If the document file is myMovie.fla, the text file is myMovie Report.txt.) The report lists the size of each frame, shape, text, sound, video and ActionScript script by frame.

Source: https://helpx.adobe.com/animate/using/best-practices-optimizing-fla-files.html

Posted by: trudeauthersece.blogspot.com