Archive for the ‘Flex’ Category

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