TweenMax Bezier example

Hello all,

I haven’t post in a while but I have been quite busy creating some exciting stuff that I will be posting in the coming months.

For starters I thought to post an example of a bezier line as explained in the greensock forums. This is not entirelly my code but rather a re-creation from the .fla

So lets begin:

Here we create the main circle that will tween along the bezier path.


public function createMC()
{
var circ = new Sprite();
circ = new Sprite();
circ.name = 'mc';
circ.graphics.beginFill(0xff00ff,1);
circ.graphics.drawCircle(0,0,6);
circ.graphics.endFill();
circ.x = -10;
circ.y = 80;
stage.addChild(circ);

mc = stage.getChildByName('mc');

var button:Sprite = new Sprite();

button.graphics.beginFill(0xffeecc,1);
button.graphics.drawRect(0,0,30,30);
button.graphics.endFill();
button.x = 10;
button.y = 10;
button.width = 30;
button.height = 30;

button.addEventListener(MouseEvent.CLICK,resetLines,false,0,true);

createNodes();
}

Now we create the lines and the circles between them:
<code>
private function createNodes()
{
var circ = new Sprite();
for(var i=0;i {
circ = new Sprite();
circ.name = 'obj'+i;
circ.graphics.beginFill(0xff0000,1);
circ.graphics.drawCircle(0,0,3);
circ.graphics.endFill();
circ.x = i*100;
circ.y = 80;
stage.addChild(circ);
point_mcs.push(circ);
}

Now that we have created the lines and circles, we create the functions for the drag events:


function dragMe(e:Event){
      TweenMax.killAll();
      var object = e.target;
      object.startDrag();
      stage.addEventListener(MouseEvent.MOUSE_MOVE, update)
    }
    
    function stopDragMe(e:Event):void{
      TweenMax.killAll();
      stage.removeEventListener(MouseEvent.MOUSE_MOVE, update)
      stopDrag();
      mc.x = point_mcs[0].x;
      mc.y = point_mcs[0].y;
      TweenMax.to(mc,5,{bezierThrough:bezierPoints});
    }  
    
    function update(e:Event):void{
      mc.x = point_mcs[0].x;
      mc.y = point_mcs[0].y;
      createBezierPointsObject();
      updatePath();
    }

At this point we should have circles that are draggable but the path does not update properly. Now we will exactly that:


function createBezierPointsObject(){
      bezierPoints = [];
      xA = []
      yA = []
      var max:int = point_mcs.length;
      for(var i:int = 0; i < max; i++){
        var curPoint = point_mcs[i];
        if(i!=0){
          bezierPoints[i] = {x:curPoint.x, y:curPoint.y};  
        }
        xA.push(curPoint.x);
        yA.push(curPoint.y);
      }
    }
    
//updating the path as we drag the nodes.
    function updatePath(){
      
      this.graphics.clear();  
      
      this.graphics.lineStyle(1, 0x0000);
      
      this.graphics.moveTo(point_mcs[0].x, point_mcs[0].y)
      var bezierObj:Object=BezierPlugin.parseBeziers({"x":xA,"y":yA},true);
      
      var pointCount:int=0;
      while(pointCount<bezierObj["x"].length)
      {
        this.graphics.curveTo(bezierObj.x[pointCount][1], bezierObj.y[pointCount][1],bezierObj.x[pointCount][2],bezierObj.y[pointCount][2]);
        pointCount++
      }
      
    }

for(var i:Number = 0; ipoint_mcs[i].mouseChildren = false;
point_mcs[i].addEventListener(MouseEvent.MOUSE_DOWN, dragMe)
stage.addEventListener(MouseEvent.MOUSE_UP, stopDragMe)
}

createBezierPointsObject();
updatePath();
}

Download the project for Flash Builder here:
Bezier

View Example here:
DEMO

Facebooktwittergoogle_pluspinterestlinkedin
linkedin