AS3: InteractivePNG

View InteractivePNG Post

The maker of Fuse, Moses Gunesch, has created a VERY handy little utility class called InteractivePNG that allows you to disable the hit area of a PNG if the pixels are transparent. Simply put, when you save out a PNG that has transparency, rolling over the transparent part of the PNG will still register a roll over because its part of the image. With this class, that is no longer the case. You can read more about it at the link above which should provide you with a way to get the latest version if it is updated in the future.

If you found this post useful, please consider leaving a comment, subscribing to the feed, or making a small donation.

12 Comments

how do you use this if you want to plug a sprite into an InteractivePNG object? Can’t seem to get it to work

Hey Dan,
I think this is only for PNGs, not sprites, but you can verify that by posting on Moses’ blog and he can probably clear up any confusion for you.

How do I use InteractivePNG in Flex3?

E.g. I have a panel with code like this:

What should be the corresponding code with InteractivePNG?

Sorry, the form take less/greater signs from code. Here it is:
<mx:Image x=”117″ y=”358″ source=”@Embed(‘house.png’)”/>

How do I use InteractivePNG in Flex3?

E.g. I have a panel with code like this:
<mx:Image x=”117″ y=”358″ source=”@Embed(‘house.png’)”/>

What should be the corresponding code with InteractivePNG?

How should I use InteractivePNG in Flex3?

E.g. I have a panel with:
<mx:Image x=”117″ y=”358″ source=”@Embed(’house.png’)”/>

What should be the corresponding code with InteractivePNG?

tintin,
You’ll have to ask Moses on that as he is the person who released the class and could probably help you better. I don’t use MXML at all so I wouldn’t know, but my best guess would be that inside of a script tag you’d have to cast the image as an InteractivePNG.

Liking this so far, but having an issue with overlapping. I’ve got one clip with a PNG in it half way over another one. The top one is working fine, but I’m unable to get past the bounding box to the bottom one. I’ve messed with the alphaTolerance on both to no avail. Any ideas?

@Sean: it may have something to do with mouseChildren and how that is being handled. First guess would be to play around with that.

Hey man, thanks for the nice class. If I associate some symbol with inner bitmaps with InteractivePNG, and then put symbol instance onto the stage – works perfect.

But once I put the associated symbol into another wrapping one, and then put a wrapper instance onto the stage – it stops working.

While experimenting I realized that in order to keep transparent area clickable through – you need to set the associated class for every symbol on every level of nesting.

I guess this behavior is because of not overriding the draw() method of the MovieClip class. When the draw() is called, it goes to the display tree and draws with default behavior so transparency remains clickable.

Any ideas on how to modify a class so nesting does not spoil things?

Oops, I should have posted it to class author’s blog, sorry…

I try using the demo in Flash CS5, but the interactivePNG demo keeps crashing.

Also, is there any simple tutorial on how to use this class?

Leave a comment

(required)

(required)