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! [...]
February 4th, 2010 at 5:01 pm
[...] InteractivePNG is a nifty class that’s been around for a while. Instead of extending MovieClip, you can extend InteractivePNG and it will capture all the mouse events and figure out if the mouse event was actually set off by transparent (or semi-transparent) pixel in a PNG. If so, it will ignore the event and let anything behind the transparent pixel receive the mouse event instead. [...]
March 14th, 2010 at 9:44 am
[...] InteractivePNG [...]
August 28th, 2010 at 6:12 pm
[...] so far or are not dynamic enough for general use. The best workaround I’ve used so far is InteractivePNG created by Moses [...]
October 16th, 2010 at 7:29 am
[...] so far or are not dynamic enough for general use. The best workaround I’ve used so far is InteractivePNG created by Moses [...]
December 1st, 2010 at 11:46 am
[...] transparent areas, the events just don’t get through. Moses over at MosesSupposes created an InteractivePNG solution that does some interesting mouse handling and hit detection.In the above example (click [...]
December 21st, 2010 at 4:23 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 [...]
February 7th, 2011 at 10:55 pm
[...] 这个问题被提到过很多次了，这里是一种解决方案，http://l4cd.net/blog/post-ignore-the-events-of-png-transparency.html，是通过sprite的hitArea来解决的。可是经过测试Sprite的hitArea效率很低，而且还需要创建一个area对象，以提供响应鼠标的区域，增加了开销。google了一下，发现InteractivePNG在这方面做得很好。于是就模仿着写了一个更轻量级的类，这个类更方面于扩展。下载在这里。 [...]
June 9th, 2011 at 11:49 am
[...] [...]
October 29th, 2011 at 10:50 am
[...] [...]
January 2nd, 2012 at 5:01 am
Begnor BlackBerry Blog…
[...]MosesSupposes » Blog Archive » InteractivePNG[...]…
January 11th, 2012 at 7:47 am
[...] [...]
May 8th, 2012 at 3:13 am
[...] google了一下，发现InteracitvePNG在这方面做得很好。 [...]