Transparant PNG mouse events

how InteractivePNG works

I was working on this Flex project last week, where the design consisted of multiple layers of transparant PNG graphics. Somewhere in between those layers, there were Flex UIcomponents that needed to be selectable. Mouse events didn’t come through though because of the PNG graphic that was above it.

Now, I thought that was pretty silly because who would ever want to perfom a mouse action on the transparant part of a graphic anyway, and even so it should not be the default behaviour. In the case of my project, the problem could easely be solved by setting mouseChildren to false on the PNG graphics that were covering my interactive Flex components, but it got me thinking: What if I wanted to stack transparant PNG graphics on top of eachother and still be able to press the bottom one if it shows through.

The solution lies ahead! InteractivePNG is a class that ‘ignores’ mouse interactions on transparant pixels based on the alphaTolerance property that is set. And that’s basicly all you need to know. Make sure your PNG graphic extends InteractivePNG, or let InteractivePNG extend the Image class instead of MovieClip to use it in Flex projects. see the demo and play with the alphaTolerance property to see the difference.

This entry was posted on Sunday, September 28th, 2008 at 1:47 am and is filed under Flash, Flex. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

7 Responses to “Transparant PNG mouse events”

  1. nuthell Says:
    December 10th, 2008 at 11:22 am

    nice~~

    I am meeting the same problems as u .

    Thanks for your post.

  2. learn Says:
    March 5th, 2009 at 9:41 am

    hi !
    can you give the source code to me ,thank you!

    my email: mymf1982@163.com

  3. Jovan Says:
    March 7th, 2009 at 11:15 am

    When you are viewing the demo, you can right click on the flash and view the source.

  4. Ljubisa Says:
    June 2nd, 2009 at 3:24 pm

    Great post. Thank you very much for sharing this. I’ve been strugling for a few days now how to solve this thing in Flex.
    Good job.

  5. Jovica Says:
    June 17th, 2009 at 1:03 pm

    Crazy. I am Jovica. Little Jovan so to say :D :D

    However: I hope it will work also when interactivePNG extends UIComponent itself - i need the functionality on Canvas elements..

    Will check asap.

  6. Migs Says:
    July 31st, 2009 at 11:57 am

    Thank you!

    I have a little remark though: This doesn’t work when the PNG file is not embeded. For example if you do:

    It works on the rollOver event but not on the rollOut event. And event on the rollOver event it detects some pixels on the edge of the png that shouldn’t be detected.

    Is that a bug? Any idea about how to fix this problem?

    Another remark: the version of the InteractivPNG class within your source seems to be older than the one of the author’s website. The new one inherits from a MovieClip and not an Image. But I had to use your version because I couldn’t get the new version to work on a Flex application. Even in a Flash application the author gave the example code only in Mac format but I have a PC so I have no idea how to implement the new version of the class… That’s a shame I was hoping the new version could solve the problem above.

  7. Migs Says:
    July 31st, 2009 at 12:00 pm

    My last comment wasn’t posted properly.

    I meant:

    For example if you do:
    interactive:InteractivePNG id=”interactive” source=”../assets/SmileCreature.png” …………

Leave a Reply