Flex Lesson Learned #1: Preventing mouseOver flash

Say you've got this situation:

• A complex Flex component you want to act as a button
• Too complex to implement as a button with skins
• MouseOver/Out behavior involves redrawing/resizing parts of the component

I was working on something like this, and couldn't get rid of multiple rapid mouseOver and mouseOut events when mousing over the component. Eventually I found what looks like a pretty good solution.

Make the top-level subcomponent (in z-order) of the component a button component with alpha of 0. Make it cover the precise bounding box you want to be sensitive to mouse events. (It may be possible to mask the button to achieve non-rectangular mouse regions, but I haven't tried this.) Put the mouse event listeners on the button only, not the whole component. Then making the component mouseEnabled="true", mouseChildren="true", and making other subcomponents mouseEnabled="false" will cause the button subcomponent to catch all the mouseEvents, without the underlying redraws affecting it.