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(); = 'mc';,1);,0,6);;
circ.x = -10;
circ.y = 80;

mc = stage.getChildByName('mc');

var button:Sprite = new Sprite();,1);,0,30,30);;
button.x = 10;
button.y = 10;
button.width = 30;
button.height = 30;



Now we create the lines and the circles between them:
private function createNodes()
var circ = new Sprite();
for(var i=0;i {
circ = new Sprite(); = 'obj'+i;,1);,0,3);;
circ.x = i*100;
circ.y = 80;

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

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

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];
          bezierPoints[i] = {x:curPoint.x, y:curPoint.y};  
//updating the path as we drag the nodes.
    function updatePath(){
   , 0x0000);
   [0].x, point_mcs[0].y)
      var bezierObj:Object=BezierPlugin.parseBeziers({"x":xA,"y":yA},true);
      var pointCount:int=0;
      {[pointCount][1], bezierObj.y[pointCount][1],bezierObj.x[pointCount][2],bezierObj.y[pointCount][2]);

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


Download the project for Flash Builder here:

View Example here:

Tagged , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *