InteractivePNG
January 19th, 2008 mosesoakLike magic, transparent parts of a PNG in your MovieClip are ignored during mouse interactions. Check it out!
Normally the clear areas of a PNG are treated as solid, which can be especially frustrating when dealing with a lot of images that overlap each other because they tend to block mouse interactions on the clips below them.
This utility fixes that so that mouse events don't occur until you bump against a solid pixel, or a pixel of any transparency value besides totally clear. InteractivePNG lets you set an alphaTolerance level to determine what transparency level will register as a hit.
This was surprisingly tricky to write, so I'm releasing it open source in hopes that it helps someone out there.
I chose not to use a mask, because that would mean managing the displaylist outside the movieclip, I wanted this to work for any freestanding movieclip without any complicated management within the program. I've also heard of people creating an overlay bitmap with all the parts and running hit detection on that, but that is a little clunky – it adds filesize and makes it hard to update your layout.
I know it looks extremely simple, but if you're curious, here's what goes into it. First I detect & suppress mouse interactions at which time I toggle the clip's mouseEnabled flag off, and use an ENTER_FRAME event to detect when the mouse bumps into the edge of the image and reenable the mouse, toggling it off again during roll out. It uses the native method BitmpaData.hitTest. Finally when the mouse leaves the bounds of the movieclip, the tracking is turned off and the system is reset to listen for the mouse to knock again. It was particularly tricky to keep the cursor hand from flickering when the edge of the image is passed when buttonMode is turned on, which is done by temporarily caching that property on the initial round of suppressed events. Like I said, it looks simple, but...!