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.used water slide for sale

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.United States

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. Both comments and pings are currently closed.

8 Responses to “Transparant PNG mouse events”

  1. nuthell Says:

    nice~~

    I am meeting the same problems as u .

    Thanks for your post.

  2. learn Says:

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

    my email: mymf1982@163.com

  3. Jovan Says:

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

  4. Ljubisa Says:

    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:

    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:

    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:

    My last comment wasn’t posted properly.

    I meant:

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

  8. Chris Says:

    Nice one! Should have seen that sooner :-) Another way to reach the same effect is to assign a sprite as a custom hit area to the image. I wrote a simple method that calculates a sprite out of a PNG image with alpha transparency: http://www.webverwirklichung.com/en/blog/programming/flex/creating-hitarea-png-image-transparent-alpha-regions-flex Maybe you wanna take a look at this solution.