Flex: Smart way of Clipping Content

In flex, there are various situation where masking of a content is needed, but yet at the same time, rather than creating a separate Component to work as a mask, they is a property 'clipContent' that allows you to display part of a content too.

Rather than doing some crazy explanation, let us look at a simple demo.

The following would be the source code of the demo.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute"
    width="100%" height="100%"
    creationComplete="creationCompleteHandler(event)">
 
 <mx:Script>
  <![CDATA[
   import mx.events.FlexEvent;
   
   [Embed(source="../assets/image.jpeg")]
   [Bindable]
   public var imgCls:Class;
   
   //Here's the mouse Down handler for the red border box
   //at the same time allows it to be draggable around
   //the canvas
   protected function mouseDownHandler(event:MouseEvent):void
   {
    stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveEvent);
    stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
    dragger.startDrag(false,
     new Rectangle(0,0,
      dragCanvas.width - dragger.width, 
      dragCanvas.height - dragger.height));
   }
   
   //Here's the mouse Up handler for the red border box
   //stops all the crazy dragging.
   protected function mouseUpHandler(event:MouseEvent):void
   {
    stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveEvent);
    stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
    dragger.stopDrag();
   }
   
   //Function to update the position of the main Image
   //base on the position of the draggable red border
   //box.
   private function mouseMoveEvent(event:Event):void
   {
    var maxX:int = dragCanvas.width - dragger.width;
    var maxY:int = dragCanvas.height - dragger.height;
    var minX:int = dragger.width;
    var minY:int = dragger.height;
    var currX:int = (dragger.x + dragger.width - minX);
    var currY:int = (dragger.y + dragger.height - minY);
    currX = Math.ceil((currX / maxX) * 100);
    currY = Math.ceil((currY / maxY) * 100);
    
    maxX = mainImg.width - mainCanvas.width;
    maxY = mainImg.height - mainCanvas.height;
    minX = mainCanvas.width;
    minY = mainCanvas.height;
    mainImg.x = currX * (maxX/100) * -1;
    mainImg.y = currY * (maxY/100) * -1;
   }
   
   protected function creationCompleteHandler(event:FlexEvent):void
   {
    mouseMoveEvent(null);
   }
   
  ]]>
 </mx:Script>
 <mx:HBox width="100%" height="100%"
    verticalAlign="middle" 
    horizontalAlign="center">
  <mx:Spacer width="100%"/>
  <mx:VBox height="100%"
     width="100%" 
     verticalAlign="middle" 
     horizontalAlign="center">
   <mx:HBox width="100%" horizontalAlign="center">
    <mx:Label text="Drag the red box around..."/>
   </mx:HBox>
   <mx:Canvas width="150" height="100"
        id="dragCanvas"
        verticalScrollPolicy="off" 
        horizontalScrollPolicy="off">
    <mx:Image source="{imgCls}" 
        width="150" height="100" 
        scaleContent="true" 
        maintainAspectRatio="true"/>
    <mx:Canvas backgroundAlpha="0"
         id="dragger"
         width="20"
         height="20"
         x="0" y="0"
         borderThickness="1"
         borderColor="#FF0000"
         borderStyle="solid"
         backgroundColor="#000000"
         mouseDown="mouseDownHandler(event)"
         mouseUp="mouseUpHandler(event)"/>
   </mx:Canvas>
   <mx:HBox width="100%" horizontalAlign="center">
    <mx:Label text="Clip Main Content?"/>
    <!-- Checkbox used to toggle the clipContent
     property of the main Canvas-->
    <mx:CheckBox id="chkClipContent" 
        selected="true"/>
   </mx:HBox>
  </mx:VBox>
  <mx:VBox width="100%" height="100%"
     verticalAlign="middle" 
     horizontalAlign="center">
   <mx:HBox width="100%" horizontalAlign="center">
    <mx:Label text="Selection is shown here."/>
   </mx:HBox>
   <mx:Canvas id="mainCanvas"
        verticalScrollPolicy="off" 
        horizontalScrollPolicy="off"
        width="80"
        height="80"
        clipContent="{chkClipContent.selected}">
    <mx:Image source="{imgCls}"
        x="0" y="0" id="mainImg"
        scaleContent="false"/>
    <mx:Canvas width="80"
         height="80"
         borderThickness="1"
         borderColor="#FF0000"
         borderStyle="solid"/>
   </mx:Canvas>
  </mx:VBox>
  <mx:Spacer width="100%"/>
 </mx:HBox>
</mx:Application>

* Click here to view the demo of this example.
^ Click here for the source files of this demo.

By the way the following URLs are pretty good in generating dummy contents.

• Lorum Ipsum
• Dynamic Dummy Image Generator