AlterLogic

The clipContent property of Flex component doesn't always work as it should, especially when the content which needs clipping is in the negative x and y range.

Drag and move the black box outside of the blue square, and you will see that the clipping doesn't come into play until you release the mouse. 

This was a big problem for my application UI so I figured I would use the mask property of the component. Well it works.... kinda. There are a couple of gotchas I would like to highlight here.

1) Make sure the DisplayObject which will act as a mask is a child, of the DisplayObject being masked

2) If you are using Flex component such as Canvas to do the masking, make sure it has a backgroundColor set otherwise the mask will not be applied properly.

Furthermore, if you simply want to emulate what clipContent does, it's best to use scrollRect. scrollRect will perform much quicker than setting a mask.

Click the "enable scrollRect" button in the example above and move the black box again to see the difference.