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 do you mean you're 'not happy' with it even though 'it works great'. What other functionality are you looking for? Does it flicker or something, or is it turning off when you rollover a child of the canvas and you want to prevent that?

Answer 2

You could do this:

import flash.event.MouseEvent;
...
canvas.addEventListener(MouseEvent.ROLL_OVER,function(event:MouseEvent):void {
    ...
});

where "canvas" is the ID of the canvas in your mxml.

Answer 3

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!

Answer 4

What about ignoring transparency sections of an image? In my case I would like the roll over effect to occur only if the visible section of an image is rolled over, not the transparent part. Is this possible?

Answer 5

Same problem, but with Sprites... how can I get the MOUSE_MOVE event to always fire (on the full area) in a Sprite, even if there is no background? (I'm trying to implement a marquee- or rubberband-selection for a graphical editor.)

Thanks in advance!