Question

I’m creating a mobile app in which I need to show a calendar with months at the top. The months are part of a component that extends from SkinnableDataContainer (and has some custom scrolling/behaviour – which is why I did’nt use a spark list). I need the months to be shown as a ‘trapezium’ shaped tab and so I’m using a png image as a mask in the item renderer for the component.

When the mask is not applied, it all works well – the months render, the list/data container selection works when I click on a month and so on.

When the mask is applied, it renders well, scrolling and everything else seems to work well – but when I click on a month, nothing happens visually. And from the trace statements in my code, it appears list item selection is not changing. Looks like mouse clicks are not working.

Any ideas on how to fix this?

I’ve looked for similar sounding questions (but ask the opposite thing) here on SO. (http://stackoverflow.com/questions/1741172/restrict-mouseevents-to-mask-in-flex-skin)

Regards,
Krishna

---

Code:

public class TopCalendarMonthRenderer extends LabelItemRenderer {

    [Embed(source="/assets/trapezium_alpha.png")]
    private static var TrapeziumMask:Class;
    private static var trapeziumMaskInstance:BitmapAsset;

            override protected function createChildren():void {

        super.createChildren();
        setLabelProperties();

        createMask();
    }

    private function createMask():void {

        if (!this.maskShape){

            if (!trapeziumMaskInstance){
                trapeziumMaskInstance = (new TrapeziumMask()) as BitmapAsset; 
            }

            maskShape = new Sprite();

            //maskShape.visible = false;
            //maskShape.mouseEnabled = false;

            maskShape.cacheAsBitmap = true;
            this.cacheAsBitmap = true;

            this.addChild(maskShape);
            //this.hitArea = maskShape;
        }
    }

    override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void {
        //don't call the parent's draw: because we draw our own background

        var bgColor:uint = 0x555555;
        if (this.selected)
            bgColor = backgroundColor;

        var g:Graphics = this.graphics;
        g.beginFill(bgColor);
        g.drawRoundRectComplex(0, 0, unscaledWidth, unscaledHeight, 3, 3, 0, 0);
        g.endFill();

        //TODO: make the mask a hitArea - so the user can interact with it - HOW?
        drawMask();

    }

    private function drawMask():void {
        var g:Graphics = maskShape.graphics;
        var img:BitmapData = trapeziumMaskInstance.bitmapData;
        g.beginBitmapFill(img, null, false, true);
        //g.beginGradientFill(GradientType.RADIAL, [0xffffff, 0xff0000], [1, 0], [0, 255]);
        //g.beginFill(0xff0000);
        g.drawRect(0, 0, img.width, img.height);
        g.endFill();

        this.mask = maskShape;

        //this.hitArea = maskShape;
    }

}

Answer 1

I finally found this:

http://aaronhardy.com/flex/displayobject-quirks-and-tips/

This explains how setting a PNG image as an alpha mask on a DisplayObject breaks mouse events.

A work around is also provided in that article – which worked for me 🙂