Flash rendering: optimisation tips and tricks

Question

I'm about to push out a website soon and so I've gotten in the last stages. Time to optimize the baby! The website performs pretty good overall, with an average framerate of 32fps. But at some heavy animation parts it likes to drop a couple of frames to about 22fps. Which is not that horrible. But I'm tweaking it as much as possible to keep it running at the highest speed possible.

I might overlooked some tips and tricks to make this baby run even smoother.

So hereby I open this thread to share whatever ninja tricks ever helped you in the past. A couple of mine which I can think of right now:

Sequencing the animation:

Let as less as possible transitions happen at the same time, try to make it act more as a transformer, one thing at a time. Next to gaining speed in animation, you probably end up gaining more flow.

Keep the animating objects as small as possible:

So flash has to calculate less pixels at the same time.

cacheAsBitmap = true:

Those big movieclips, vector shapes being moved around, are probably quicker moved when they are cached as a bitmap. Might take up some space in your memory, but anything for higher framerates ;)

Destroy everything you do not use:

Set those unused movieclips to null and then remove it as a child. So your garbage collector takes care of it.

Answer 1

Alpha transparency can be intensive to render...

From what I've heard, the glow filter will wreak havoc if you are animating it.

Use visible = false instead of alpha = 0 where possible.

Answer 2

Flash (8 - Actionscript 2 or below) will render a clip even if it's visibility is set to false - to stop it being rendered you need to move it off the 'visible' screen (i.e. x = -2000, provided the clips width is less than 2000).

Answer 3

Only use cacheAsBitmap = true: if you are not animating the transformation of the Sprite/MovieClip (e.g. scale/rotation etc), otherwise it will actually make it slower.

Where possible use PNGs instead of vector shapes.

Answer 4

Another consideration is what tween engine you're using. If you're using the one that comes with Flash you'll probably gain some performance by switching to something like TweenLite (there are multiple other good ones too).

Keep in mind that cacheAsBitmap can be very dangerous. If you're scaling, rotating or updating the clip itself (such as modifying the alpha of something inside it) flash will have to generate a new snapshot, which will slow everything down. As long as you're moving the clips on x and y only it's good to always have on (if you need to rotate, turn it off and then back on when you're done). Note also that if you're using filters cacheAsBitmap is always automatically on -> may be slow.

Answer 5

Keep things simple,

Flash renders graphics as vectors (and very well). The more complex an object is, the more time it will take to render.

Also try to track the graphics display tree. Every child of the stage has to be rendered separately, so if you have 1000 children this can make things really slow.

A solution is to render once in a single object, like a display handler. You can lose your 'objectyness' but you make it up in faster rendering. Keep this in mind when making tiles or many little 'additions' to a sprite.

Answer 6

You might want to make use of the scrollRect property of movieclips/sprites etc... It basically acts as a mask but with the bonus that you can scroll the masked clip by some offset.

Answer 7

Bitmap caching only gives you real returns when the DisplayObject you're caching has complex inner parts but tends to sit there without changing - such as a pulldown menu, which internally has all kinds of skinnable elements, but only needs to be re-rendered when it's opened or closed. Be careful of turning on caching just because objects are large.

Answer 8

Large chunks of text, if they don't change, can often be replaced with a bitmap (or transparent PNG). This makes the content a pain to maintain, but it can have significant impact on performance. (Note: this mainly applies for embedded fonts, especially curvy ones like Asian fonts, as such fonts are rendered as vector shapes. Device fonts are rendered by the OS and incur much less overhead.)

Answer 9

Profile, profile, profile.

If scripts are running slow, start tracing out timing reports to figure out which class, which function, which loop, which statement is making you slow. If graphical effects are slowing you down, trace out detailed time FPS reports and start tweaking. Does it speed up when you remove this or that layer? Or when you change that clip not to be transparent? And so on. Isolate what's slow before trying to fix it.

Just poking around and refactoring rarely gets you any real performance improvements.

Answer 10

thanks fenomas, these are great tips