Æliens

     private var item:Sprite;
     [Bindable] private var drawing:Boolean = false;
     [Bindable] private var mode:uint = 0;
     private var beginX:Number = 0;
     private var beginY:Number = 0;
     
     private var hold:UIComponent = null;
     
  

     private function init():void{
     canvas.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
              canvas.addEventListener(MouseEvent.MOUSE_UP, onMouseUp)  
              canvas.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);         
              }
                    
  

              private function onMouseDown(event:MouseEvent):void
              {
                   drawing = true;
                   hold = null;
                   beginX = event.localX; beginY = event.localY;
                   if (mode == 0) {
                       item = new Sprite();
                       var c:UIComponent = new UIComponent();
                       c.addChild(item);
                       item.graphics.lineStyle(lineWidth_ns.value, line_cp.selectedColor);
                       item.graphics.moveTo(event.localX, event.localY);
                       canvas.addChild(c);
                   }
              }
  

                    
              private function onMouseUp(event:MouseEvent):void
              {
                   drawing = false;
                   trace("stop:" + event.localX + "/" + event.localY);
              }
              
  

              private function onMouseMove(event:MouseEvent):void
              {
                    if (drawing){
                    if (mode == 0)  item.graphics.lineTo(event.localX, event.localY);
                    else if (mode == 1) {
                    if (hold) canvas.removeChild(hold);
                    draw(beginX,beginY, event.localX - beginX, event.localY-beginY);
                    update(event.localX, event.localY);
                    }
                    }
                    trace("move:" // + mouseX + "/" + mouseY + "  :" 
                          + event.localX + "/" + event.localY );
              }
  

              
  private function update(x:Number, y:Number):void {
       x_ns.value = beginX;
       y_ns.value = beginY;
       width_ns.value = x - beginX;
       height_ns.value = y - beginY;
       }
  
  

  private function trace(s:String):void{
              debug.text = s;
      }
     
  

     private function draw(x:Number, y: Number, w:Number, h: Number):UIComponent {
      var aBox:Shape = new Shape();
      var c:UIComponent = new UIComponent();
      
      aBox.graphics.lineStyle(lineWidth_ns.value, line_cp.selectedColor);
      aBox.graphics.beginFill(fill_cp.selectedColor, 1);
     
      aBox.graphics.drawRect(x, y, w, h);
      aBox.graphics.endFill();
      c.addChild(aBox);
      canvas.addChild(c);
      return c;
     }
  

     
     private function drawBox():void{
      var aBox:Shape = new Shape();
      var c:UIComponent = new UIComponent();
      
      aBox.graphics.lineStyle(lineWidth_ns.value, line_cp.selectedColor);
      aBox.graphics.beginFill(fill_cp.selectedColor, 1);
     
      aBox.graphics.drawRect(x_ns.value, y_ns.value, width_ns.value, height_ns.value);
      aBox.graphics.endFill();
      c.addChild(aBox);
      canvas.addChild(c);
     }
    ]]>
   </mx:Script>
  

   <mx:HBox width="100%" height="100%">
    <mx:VBox paddingLeft="10">
     <mx:Label text="Box Attributes:" fontWeight="bold"/>
     <mx:Label text="x:"/>
     <mx:NumericStepper id="x_ns" value="50" maximum="{canvas.width}"/>
     <mx:Label text="y:"/>
     <mx:NumericStepper id="y_ns" value="50" maximum="{canvas.height}"/>
     <mx:Label text="width:" />
     <mx:NumericStepper id="width_ns" value="50" maximum="{canvas.width}"/>
     <mx:Label text="height:" />
     <mx:NumericStepper id="height_ns" value="50" maximum="{canvas.height}"/>
     <mx:Label text="line width:" />
     <mx:NumericStepper id="lineWidth_ns" value="1"/>
     <mx:Label text="line color:" />
     <mx:ColorPicker id="line_cp" selectedColor="#000000"/>
     <mx:Label text="fill color:" />
     <mx:ColorPicker id="fill_cp" selectedColor="#FFFFFF"/>
     <mx:Button label="Box" click="drawBox()"/>
     <mx:Button label="FreeHand" click="mode=0;"/>
     <mx:Button label="DrawBox" click="mode=1;"/>
        <mx:Label text="drawing = {drawing}" />
        <mx:Label text="mode = {mode}" />
    </mx:VBox>  
  

    <mx:VBox width="100%" height="100%">
     <mx:Label text="Drawing Area:" fontWeight="bold"/>
     <mx:Canvas id="canvas" backgroundColor="#FFFFFF" width="500" height="500"/>
     <mx:TextArea id="debug" />         
    </mx:VBox>
   </mx:HBox>
   
  </mx:Application>