lorennorman.com

I ran into performance issues while trying to use a filter on the DisplayList in ActionScript 3 this week. I wanted a nice, gradient dropshadow on a large UI component, but loading in a big, expensive Bitmap image to do the trick just didn’t seem appropriate.  So I decided to use the built-in GlowFilter class.

Then my framerate went to hell.

What I was doing wrong was adding the filter to a DisplayObject that had other interactive children: in my case, SimpleButtons.  SimpleButtons have over- and down-states, which apparently cause the GlowFilter to recalculate itself frequently while the mouse is over the buttons.

To illustrate, here’s the component:

See the subtle dropshadow around the curved surface? That’s our culprit!

The fix was to make a separate component with the filter applied to it, then add it as a child to the component, instead of applying the filter directly to the component itself.

The rule: Don’t apply BitmapFilters to objects with dynamic children!

(If you know more about what’s going on here, please leave comments. This is mostly educated guesswork on my part about what’s happening and Adobe seems to have a problem with documenting all of the strange quirks of their platform.)