Archive for September, 2009

Flex transparency with PNG on mouse over and mouse click

Sunday, September 20th, 2009

If you have tried using a PNG image in Flex and getting the transparency to work with on RollOver or Click events you might have noticed the transparency IS recognized as a valid mouse area. Therefore your rollOver or click events get called even when the user click on the transparent area of the image.

Well this happened to me in a project and was very frustrating. Here you can see a more detailed explanation of what’s going on with the hitTest in PNGs.  The ideal solution would be to have the image vectorized. This could be accomplished using Flash’s Trace Bitmap feature. However sometimes this method ends with a very heavy shape that it’s hard to render and to drag around the screen.   The good thing about it is that you can scale it as far as you want without loosing too much quality depending on how good your tracing was.

Here I leave a little guile of how it could be accomplished without vectorizing the image, just removing the transparency. Here I assume you already know how to embed flash symbols in Flex converting them in ActionScrip exportable components. If you don’t know how to then Adobe has great documentation on it.

  • First put your PNG image in Flash
  • Right click on it and select Break Appart
  • Select the Magic Wand (you have to select the lazo first) and then select all the transparent area of your image
  • Delete the selected area and repeat until all the transparent areas are deleted
  • Convert your image to a new actionscript exportable symbol (and all the rest to make it available in Flex)
  • Use the new symbol in Flex as an image source.

After doing it I reazlied the process isn’t a big deal, anyone could have done it but well for us it took  us a while to think about it so I’m posting it here hoping someone could save some time or get more ideas.  Feel free to comment and tell me what you think, or even better tell me if there is a better way to do it :D

My First Blog Post

Sunday, September 13th, 2009

So after a few new followers on my tweeter account (@ivanmreys) and some thoughts about sharing some of my ideas I decided to start my own blog. This blog will be about coding standards, tricks, methods, solutions, and anything else I can think that would be useful for somebody somewhere.  If something here helps you save a couple of mins or hours with some problem then please leave a comment and if it doesn’t then also please leave a comment.

I’m an engineer and as most of them my aesthetic sense is screwed up. If anyone can help with some logo then please leave me a comment or contact me on tweeter.

So far this is all I have to say, but hopefully pretty soon I’ll start posting more info in here. Oh I almost forgot… my name is Ivan Rey but I’ll post here under my favorite nickname Trak :D