Flex 3 - Issues retrieving mouse events when using masks and filters

Question

Here's the component I'm working on:

enter image description here

And here's the component's class:

public class PromoPanel extends Canvas
{
    private var corner:PromoCorner;
    private var text:Text;
    private var roundedMask:Sprite;
    private var cornerUpdated:Boolean = false;
    private var textUpdated:Boolean = false;

    private var container:Canvas;

    public function PromoPanel()
    {
        super();


        // Defining corner's properties
        corner.addEventListener(MouseEvent.Roll_Over, objectHandler);
        corner.addEventListener(MouseEvent.Roll_Out, objectHandler); 

        // Defining text's properties

        roundedMask = new Sprite;
        roundedMask.mouseChildren = false;
        roundedMask.mouseEnabled = false

        container = new Canvas; 
        container.percentWidth = 100; 
        container.minHeight = 100;
        container.maxHeight = 345;
        container.setStyle('backgroundColor', 0xffffff);
        container.addChild(corner);
        container.addChild(text);  
        container.horizontalScrollPolicy = 'off'; 
        this.addChild(container);
    }

    public function update():void{
        var s:String = 'blabla'; 

        text.addEventListener(FlexEvent.UPDATE_COMPLETE, updateHandler);
        text.text = s;

        corner.addEventListener(MyEvent.CORNER_UPDATED, updateHandler);
        corner.build();
    }

    private function updateHandler(e:Event):void{
        switch(e.type){
            case MyEvent.CORNER_UPDATED:
                cornerUpdated = true;
                corner.removeEventListener(MyEvent.CORNER_UPDATED, updateHandler);
                break;
            case FlexEvent.UPDATE_COMPLETE:
                textUpdated = true;
                text.removeEventListener(FlexEvent.UPDATE_COMPLETE, updateHandler);
                break;
        }

        if(cornerUpdated && textUpdated){
                roundedMask.graphics.clear();
                roundedMask.graphics.beginFill(0xFFFFFF);
                roundedMask.graphics.drawRoundRect(0, 0, container.width, container.height, 20, 20);
                roundedMask.graphics.endFill();  
                this.mask = roundedMask;  

                dispatchEvent(new MyEvent(MyEvent.PROMO_UPDATED));
            } 
        var glow:DropShadowFilter = new DropShadowFilter(0,0,0x2E2E2E,0.6,10,10,0.5,1);
        this.filters = [glow]; 
    }

    private function objectHandler(e:Event):void{
        switch(e.type){
            case MouseEvent.ROLL_OUT:
                trace('out' + mouseX + '/' + mouseY);
                break;
            case MouseEvent.ROLL_OVER:
                trace('on' + mouseX + '/' + mouseY);
                break;
        }
    }       
...
}

For more detailed comprehension: corner is the black corner with the (i) and 'Promotion', text is some random text that can be displayed in the white remaining space, container contains corner and text, and finally this class contains container!

What do I need to do?
I need to retrieve the event mouseevent.rollover/rollout from corner .

And what's wrong?
1. When I put the mask on container (container.rawchildren.addchildren + container.mask = mask) and the dropshadowfilter on container (container.filters = [glow]), I cannot detect the mouse events.
2. When I put the mask on the promopanel (this.rawchildren.addchildren + this.mask = mask) and the dropshadowfilter on promopanel (this.filters = [glow]), I cannot detect the mouse events.
3. When I put the mask in a component and the filter in another, it does not work either.
4. If I remove the mask OR the filter, it works!! But I need them both...

So, does anyone has an idea on how to make this work? I've been trying to look for issues with filters, masks and mouseevents but haven't found anything that could enlighten this issue...

Anything would be helpful and feel free to ask questions if something's not clear enough.

Thx!
Regards,
BS_C3

BS_C3 BS_C3 · Accepted Answer · 2011-04-07T08:09:22

Well, I feel kinda akward answering my own question :)
A combination that I was sure I did (certainly not) works: if I put the mask on container and the filter on promopanel, it works....

After some thinking, it makes sense.
I noticed that putting both mask and filter in the same component, somehow, made it deaf to the mouseevents. But when only using one or another everything worked fine.
However, putting the mask on the promopanel and the filter in the container did not work. Also, in that way, the mask would hide the filter (which I need!).
Putting the mask on the container without the filter worked for me, and the listeners could receive the mouseevents. Then adding the filter to the promopanel did not keep container to listen to the corner's events...

Hope this may help somebody :)
Regards.
BS_C3

Flex 3 - Issues retrieving mouse events when using masks and filters

1 Answers