An optimization tutorial for animators

There was last week an interesting article on Flash Magazine which prompted a discussion about Flash Player’s rendering performance.

Lennart Rikk (an animator from Estonia) complained about the CPU occupancy of a banner he had done. There was indeed a problem, as it was averaging at 25% of my quad-core CPU (that means around 100% occupancy of an average single core CPU). This is bad.

The performance of Flash Player rendering is correct IMO, so I knew the problem was elsewhere. Lennart shared his source .fla and I promised it could be optimized by a factor of ten (actually I gave up after x8).

Here are the results:

before (takes 178 seconds of cpu time)

after (takes 22 seconds of cpu time)

(click the images to open)

Here’s what could have been done on this project without the help of a developer.

Update 26-10-2010: @16ames just told me about a whitepaper over at bytearray.org on optimizing for ads. Check it out!

1. measure the performance

you have to accurately monitor your progress. You can’t just look at the CPU occupancy and guess if that’s better or worse.

My method: make the first part of the animation loop 5 times before a blank screen (more accurate that a single run). Then launch the .swf in a standalone player (try not to use the computer to avoid performance drops). When finished look at the “CPU time” column in windows process manager. I also increse the framerate at times for a quicker -but less accurate- check.

(use Display>Select columns in windows process manager to add the ‘CPU time’ column)

2. locate the bottlenecks

Here’s how to find what consumes most CPU time: set some layers as guides, measure the new CPU time, repeat. This takes a while but then with a little common sense you’ll be able to find the problematic layers/movieclips.

3. know and solve common problems

a) masks

Masked objects need to be rendered before being masked. So anything that’s always outside the mask is a big waste of cpu time.

before –> after

Also know that masks are not very efficient. On the main timeline, there was a big mask of the size of the stage (468×468). Instead you can use the more efficient:

scrollRect = new Rectangle(0, 0, 468, 468);

scrollRect is a masking camera. It’s much more usable if your movieclip have a top-left origin (so it’s a good reason to always choose this origin).

b) invisible objects

Sometimes objects are not hidden with a mask but always masked under another opaque layer. Delete everything that’s never displayed.

only the green section of the bottom animation is actually visible after publish, the rest is wasted.

+++++ performance increase by the above tricks alone: around x3 +++++

c) cacheAsBitmap

when to tick cacheAsBitmap for a movieclip:

• it has static content. Avoid when the content changes each frame
• it’s moving
• it’s not rotating, nor scaling

They’re a few objects in this project that gain from the cacheAsBitmap optimization (the clouds …etc).

More on this:
DisplayObject.cacheAsBitmap property
cacheAsBitmap performance testing

d) blendModes

most blendModes use a lot of cpu time. The background is composed of a metal bitmap texture with a gradient using “multiply”. Merge these in photoshop and you’ll get a good boost.

e) alpha=0

invisibles objects with an alpha value of 0 are rendered. Prefer a blank keyframe if possible.