Correct way in Flex to make a transparent panel respond to rollOver() events

Question

I have a Canvas in a Flex application which has items inside it that cover only about 50% of the area of the main canvas.

i want the canvas to respond to rollOver events for the full area, and not just the area that is covered by the items inside.

I have been setting the following attributes to achieve this :

<mx:Canvas backgroundColor="white"
backgroundAlpha=".01"
rollOver="rollOver(event)">...

This causes the entire canvas to respond to rollOver events. It works great - I'm just not happy with it and figure there must be a better way to achieve it.

Is there a way to force mouse events to act on the entire area of a UIComponent?

Answer 1

What you are doing is perfectly acceptable, although using the arbitrary alpha value of 0.01 is unnecessary, you can set it's backgroundAlpha to a simple 0.

I routinely use Canvases for complicated multi layered UI's and set up my default Canvas style via css to have a backgroundAlpha of 0 and a backgroundColor of #ffffff, then, if I need a canvas to actually be visible I adjust it's individual backgroundAlpha and backgroundColor properties.

There's nothing wrong with setting a graphic object's alpha to 0 so that it still responds to events but hasn't been 'turned off' entirely, us AS coders do it all the time!