Animated line drawing using TweenLite in AS3

In this post I will show some examples of animated line drawing using TweenLite and the Drawing API in Actionscript 3. I will be using the lineTo() and moveTo() methods from the Drawing API to draw the lines. The first example draws lines to each of the movie clips on the stage. I have three movie clips with the instance names: mc1, mc2, and mc3. The registration points are in the centre.

import com.greensock.TweenLite;

var mcArray:Array = new Array(mc1, mc2, mc3);

mcDraw.x = mcArray[0].x;
mcDraw.y = mcArray[0].y;

var lineAnim:Shape = new Shape();
lineAnim.graphics.lineStyle(2);
lineAnim.graphics.moveTo(mcDraw.x, mcDraw.y);
addChild(lineAnim);


for(var i:uint = 0; i < mcArray.length; i++){
 TweenLite.to(mcDraw, 1, {x:mcArray[i].x, 
    y:mcArray[i].y,
    delay:i*1,
    overwrite:false,
    onUpdate:updateHandler});
        
}

function updateHandler():void{
 lineAnim.graphics.lineTo(mcDraw.x, mcDraw.y);
 lineAnim.graphics.moveTo(mcDraw.x, mcDraw.y);
}

The lines are drawn in the updateHandler() function where the lineAnim shape moves and draws to the position of the mcDraw movieclip. The next example uses an Array of points instead of movie clips to create the exact same effect.

import com.greensock.TweenLite;

var pointsArray:Array = new Array(new Point(31,34),
      new Point(31,277),
      new Point(367,277),
      new Point(367,34),
      new Point(31,34));
         
mcDraw.x = pointsArray[0].x;
mcDraw.y = pointsArray[0].y;

var lineAnim:Shape = new Shape();
lineAnim.graphics.lineStyle(2);
lineAnim.graphics.moveTo(mcDraw.x, mcDraw.y);
addChild(lineAnim);

 
for(var i:uint = 0; i < pointsArray.length; i++){
    TweenLite.to(mcDraw, 1, {x:pointsArray[i].x,
   y:pointsArray[i].y,
   delay:i*1,
   overwrite:false,
          onUpdate:updateHandler});
}

function updateHandler():void{
 lineAnim.graphics.lineTo(mcDraw.x, mcDraw.y);
 lineAnim.graphics.moveTo(mcDraw.x, mcDraw.y);
}