Friday, 13 January 2012

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 (three red circles). The registration points are in the centre. I also have a movie clip called mcDraw (black circle) which is the used to tween to the different points.



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

4 comments:

planetpush 3 February 2012 at 07:55  

Hi - this is a helpful tutorial. What exactly is mcDraw though?

iliketo 4 February 2012 at 03:32  

@planetpush

mcDraw is the movie clip that tweens to the different points.

planetpush 4 February 2012 at 09:36  

Just for novice AS3 developers that may be confused - be aware that when you read "I have three movie clips with the instance names: mc1, mc2, and mc3" what you actually see when you visit the page for the first time is mcDraw (the black circle), mc2 and mc3 (red circles). mc1 is hidden beneath mcDraw.

iliketo 11 February 2012 at 02:01  

@planetpush

I have updated the text.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP