0 Replies Latest reply on Oct 27, 2007 9:53 AM by Domnic_Savio

    Custom animation

    Domnic_Savio
      Hi there,
      I created a UIComponent called node1 which is a circle. I try to move it from "Node 2" to "Node 1" but the circle moves somewhere else.

      Here I have posted the swf
      http://www.benya.de/el/DynamicCircles.swf

      Can someone help me find the error I made..?

      here is the code

      thanks
      Domnic

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute"
      creationComplete="doCircle()" >

      <mx:Script>
      <![CDATA[
      import mx.core.UIComponent;
      import flash.display.Graphics;
      import mx.effects.Resize;
      import mx.effects.Move;

      private var size:uint = 80;
      private var bgColor:uint = 0x000000;
      private var borderColor:uint = 0x000000;
      private var borderSize:uint = 2;
      private var cornerRadius:uint = 9;
      private var gutter:uint = 5;


      private var mv:Move;
      private var rs:Resize;

      [Bindable]
      private var line2:UIComponent = drawLine(220, 200, 365, 120);
      [Bindable]
      private var line3:UIComponent = drawLine(220, 200, 330, 73);
      [Bindable]
      private var line4:UIComponent = drawLine(220, 200, 296, 30);
      [Bindable]
      private var node1:UIComponent = createCircle(220, 200, 10);
      [Bindable]
      private var node2:UIComponent = createCircle(365, 120, 10);
      [Bindable]
      private var node3:UIComponent = createCircle(330, 73, 10);
      [Bindable]
      private var node4:UIComponent = createCircle(296, 30, 10);

      private function createCircle(x, y, radius):UIComponent
      {
      var child:UIComponent = new UIComponent();
      child.graphics.beginFill(bgColor);
      child.graphics.lineStyle(borderSize, borderColor);
      child.graphics.drawCircle(x, y, radius);
      child.graphics.endFill();
      return child;
      }
      private function drawLine(x1, y1, x2, y2):UIComponent
      {
      var line:UIComponent = new UIComponent();
      line.graphics.lineStyle(1, 0x000000);
      line.graphics.moveTo(x1, y1);
      line.graphics.lineTo(x2, y2);
      line.alpha=.2;
      return line;
      }
      private function doCircle():void
      {
      node2.addEventListener(MouseEvent.CLICK, node2Pressed);
      node3.addEventListener(MouseEvent.CLICK, node3Pressed);
      node4.addEventListener(MouseEvent.CLICK, node4Pressed);

      this.addChild(node1);
      this.addChild(node2);
      this.addChild(node3);
      this.addChild(node4);

      this.addChild(line2);
      this.addChild(line3);
      this.addChild(line4);
      }

      private function node2Pressed(event:Event):void
      {
      shuffleUIComponents(2);
      //drawDashedLine(cvs, 220, 200, 365, 120, 100, 1, 0x000000);
      }
      private function node3Pressed(event:Event):void
      {
      //debugTxt.text = "Node 3 pressed";
      shuffleUIComponents(3);
      }
      private function node4Pressed(event:Event):void
      {
      //debugTxt.text = "Node 4 pressed";
      shuffleUIComponents(4);
      }



      private function shuffleUIComponents(num):void
      {
      //this.removeAllChildren();

      //this.addChild(node1);

      switch(num){
      case 2:
      this.addChild(line2);
      this.addChild(node2);
      mv = new Move(node2);
      //node2.graphics.moveTo(220, 200);
      moveCircle(node2.x, node2.y, node1.x, node1.y);

      break;
      case 3:
      this.addChild(line3);
      this.addChild(node3);
      mv = new Move(node3);
      //node3.graphics.moveTo(node1.x, node1.y);
      moveCircle(node3.x, node3.y, 220, 200);
      break;
      case 4:
      this.addChild(line4);
      this.addChild(node4);
      mv = new Move(node4);
      //node4.graphics.moveTo(node1.x, node1.y);
      moveCircle(node4.x, node4.y, 220, 200);
      break;
      }

      }

      private function moveCircle(x1, y1, x2, y2):void
      {
      mv.xFrom = x1;
      mv.yFrom = y1;
      mv.xTo = x2;
      mv.yTo = y2;
      mv.duration = 3000;
      mv.end();
      mv.play();
      }
      ]]>
      </mx:Script>

      <mx:Label id="node1Lab" text="Node 1" x="160" y="175" />
      <mx:Label id="node2Lab" text="Node 2" x="307" y="20" />
      <mx:Label id="node3Lab" text="Node 3" x="340" y="65" />
      <mx:Label id="node4Lab" text="Node 4" x="377" y="112" />
      <mx:Canvas id="can" height="600" width="600"/>
      </mx:Application>