Flash Performance Tips Part I
Optimizing Flash sites to run efficiently is 93% perspiration, 6% electricity, 4% evaporation, and 2% butterscotch ripple. Despite many coders’ frustrations over the performance of the player, there are ways you can make your site run more efficiently.
Here’s a couple of tricks we use on a daily basis to keep things running smooth. Nothing fancy or complicated, but guaranteed success.
UPDATE: Tera at trick7 posted a Japanese translation for our fine friends on the other side of the Pacific. We think that’s pretty cool. Check it out here.
Masks Are Bad
Well, they’re not all bad. Masks can be exceptionally useful, as we all know by now. They’re the #1 performance killer though. When you mask something, you force the player to decide what needs to be rendered and hidden every single frame. So how do you get around without masks? With a little bit of patience and tricky layering (such as making the background the foreground with a giant hole cut out for where your viewable area is) you’ll be able to get the same end result without the performance hit.
Alpha PNGs and Video
Same deal as the masks. Sometimes its unavoidable, but you’re still asking the player to figure out what to render under the alpha. Sometimes we’ll make an alpha video at half size and then scale it in Flash. You’d be surprised how good it still looks.
Oh, and with regards to alpha video: Try experimenting with PNG sequences in place of the alpha video. Video usually performs a little better, but its always worth looking into.
Frame Rate
Despite all discussions otherwise, there is no magic framerate. We use 25 or 30 because (as far as I know) we like it best. At some point we tested and determined one was slightly better than the other, but generally speaking this is not going to be the primary cause of a site running slow. I wouldn’t generally advise going higher than 30 though, just because you’re asking the player to render an awful lot awfully fast…
cacheAsBitmap and BitmapData
Where possible use cacheAsBitmap to rasterize vector items. You’ll force Flash to draw the symbol one time and then never again. On the flip side, if you’re scaling or rotating a symbol NEVER set it to cacheAsBitmap. Then you force Flash to render AND recapture the raster every frame, making the process slower instead of faster.
With sites like the Da Vinci Code and Nike Air, we would take a dynamic screenshot of the section, draw it into an empty movieclip and then manipulate the screenshot to animate it out. This is far, far faster than animating many elements out, or animating over top of many elements. I highly recommend this practice.
_visible is better than _alpha
_alpha = 0 and _visible = false are totally different things. Alpha determines the opacity of a clip. Visible determines whether or not the clip should actually be rendered by the player. If you’re setting something all the way invisible, use the _visible property.
onEnterFrame and setInterval
When you’re through with these processes, clear them from memory with onEnterFrame = null; and clearInterval(myInterval); respectively. Leaving these around when you’re not using them is like leaving the telephone off the hook when you’re done with a call.
Pre-define your math
Got a sine wave you’re about to draw? Is it the same sine wave every time? Hard code the numbers into an array. By doing the math for Flash, you’re saving some complex processes in advance. I even experiment with using a Tween that I nextFrame() thru to get all of the entries into an array before hand.
Silent Sound
We use this as a last resort, but its a trick worth mentioning. By putting a silent sound file on a seperate layer for the duration of your timeline, setting it to stream and looping it, the player will automatically drop frames to keep up with the sound.
Got any other good ones? I’m sure I didn’t list them all here.
December 8th, 2006 by Stephen / 93 Comments
