topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

sample-flex-draw-manual.mx

sample-flex-draw-manual.mx [swf] [flash] flex


  <?xml version="1.0" encoding="utf-8"?>
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
  initialize="init();">
   <mx:Script>
    <![CDATA[
  
 tdotblog.info/?q=node/19


     import mx.containers.GridRow;
     import mx.core.UIComponent;

variable(s)


     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;

init(s)


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

mouse down


              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);
                   }
              }

mouse up


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

mouse move


              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 );
              }

update(s)


              
  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;
       }

trace(s)


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

draw box 


     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;
     }

raw box (original)


     
     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>

button(s) / label(s)


   <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>

canvas / debug


    <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>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.