InteractivePNG
Like 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...!
January 20th, 2008 at 2:38 am
[...] View InteractivePNG Post [...]
March 18th, 2008 at 3:42 pm
[...] Moses Gunesch’s InteractivePNG for the arrow image hit [...]
June 12th, 2008 at 12:00 pm
[...] InteractivePNG is a very handy little utility class that allows you to disable the hit area of a PNG if the pixels are transparent. [...]
June 12th, 2008 at 1:18 pm
[...] http://blog.mosessupposes.com/?p=40 [...]
June 13th, 2008 at 7:13 am
[...] MosesSuposses blogpost with demo and sources [...]
June 13th, 2008 at 7:33 am
[...] mere om og download den her: InteractivePNG Tags: png Del:These icons link to social bookmarking sites where readers can share and discover [...]
June 14th, 2008 at 8:32 pm
[...] http://blog.mosessupposes.com/?p=40 [...]
June 30th, 2008 at 10:39 am
[...] so: http://dougmccune.com/blog/2007/02/03/using-hittestpoint-or-hittest-on-transparent-png-images/ http://blog.mosessupposes.com/?p=40 Auf diesen Beitrag antworten | Top [...]
September 27th, 2008 at 7:48 pm
[...] solution lies ahead! InteractivePNG is a class that ‘ignores’ mouse interactions on transparant pixels based on the [...]
November 13th, 2008 at 5:13 pm
[...] was to do a pixel hit test, which proved very frustrating. I consulted Matt who referred me to the InteractivePNG class, which very easily told the mouse to ignore the PNG’s alpha. The problem it didn’t [...]
January 21st, 2009 at 11:33 am
[...] check the demo and download the class here: InteractivePNG [...]
January 31st, 2009 at 5:47 pm
[...] search if someone did great job on some workaround and I have found really great AS3 class called InteractivePNG. You can set even alphaTolerance to tell class if your MouseEvent event should be catched on [...]
February 2nd, 2009 at 6:27 pm
[...] Blog post [...]
February 3rd, 2009 at 9:02 am
[...] InteractivePNG - useful as class for transparent hit states - http://blog.mosessupposes.com/?p=40 # Share and [...]
August 26th, 2009 at 3:55 am
[...] selbst programmieren wenns schon jemand gemacht hat? MosesSupposes Blog Archive InteractivePNG Diese Klasse macht genau das was du willst - du kannst durch die transparenten PNG-Bereiche [...]
December 4th, 2009 at 1:35 am
[...] This is a very cool utility class that allows you to ignore transparent pixels on rollover. Not only that, it also lets you set an alpha tolerance level so you can have complete control over how much transparency is needed to register a hit. It’s pretty cool, check it out! [...]