In Flex, masking is an easy thing to do. All you need to do is set a display object’s mask property to another display object and you have a mask. However, doing a reverse mask is a bit trickier.

A reverse mask is simply the opposite of a mask. If I have an red canvas and I want to assign it’s mask property to a  white Circle sprite, then the outline of the circle would remain, but the circle would be red instead of white. Doing a reverse mask on this example would reveal that red canvas with a circular hole cut out of it that exposes the layer beneath.

While this is not the ideal solution for performing a reverse mask on an image component, it works great for punching holes through the display of basic components. For a particular project I am working on, I wanted to select some lines of music. While the user is selecting the music, the selected portion needed to be gray and transparent. Then when the user releases the mouse, the other segments of the music that were not selected would be covered up with a slightly transparent white area. The selected area, on the other hand, would no longer be a gray transparent layer, but it would reveal the music underneath it.

Here is the code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void 
{
    super.updateDisplayList(unscaledWidth, unscaledHeight);
    var g:Graphics = maskCanvas.graphics;
    g.clear();
 
    if (!showWhiteOut) 
    {
        g.beginFill(0x000000, 0.4);
        g.drawRect(x1, 0, x2 - x1, unscaledHeight);
        g.endFill();
    }
 
    else 
    {
        g.beginFill(0xFFFFFF, 0.9);
 
        // Draw the outer portion of the "frame"
        g.drawRect(0, 0, unscaledWidth, unscaledHeight);
        
        // Draw a reverse rectangle for the inner portion of
        // the "frame"
        g.moveTo(x1, 0);
        g.lineTo(x1, unscaledHeight);
        g.lineTo(x2, unscaledHeight);
        g.lineTo(x2, 0);
        g.lineTo(x1, 0);
        g.endFill();
    }
}

In this example, I am overriding the updateDisplayList function for an image of a line of music. The maskCanvas object is just a transparent canvas positioned over the top of the music, and showWhiteOut is just a boolean flag that tells me whether or not I am in selection mode, or in white out mode.

By doing a fill on the border of a rectangular “frame”, I can achieve the same effects of a reverse mask and effectively punch a hole through my outside layer.  While this could be done in other ways, I found it to be quick and inexpensive.