I wanted to animate the line drawing between several points all at the same time. And, with a few tweaks of your above sample, I got it working I only had to comment out the graphics clear and change "progress" to the "currentProgress" property. Keeping the graphics clear would only draw one line instead of all the 40 points I wanted to connect at once.
I've included my solution if helps anyone else. In the below code, you can use drawConnection() in a loop to connect all the sprite dots you placed on the stage to whatever pattern you wish -- ie a spider web.
private function buildPathTimeline($points:Array, $graphics:Graphics):TimelineLite
{
var timeline:TimelineLite = new TimelineLite();
var p:Point //point
var pPrev:Point = $points[0];
var prevPoints:Array = []; //keep track of the points that come before each point in the sequence
var dx:Number; //distance on the x-axis
var dy:Number; //distance on the y-axis
var d:Number; //distance
var pen:Object; //stores information about the coordinates and previous points for each one in the Array
for (var i:int = 1; i < $points.length; i++) {
p = $points[i];
pPrev = $points[i - 1];
prevPoints.push(pPrev);
pen = {x:pPrev.x, y:pPrev.y, prevPoints:prevPoints.slice()};
dx = p.x - pPrev.x;
dy = p.y - pPrev.y;
d = Math.sqrt(dx * dx + dy * dy);
timeline.append(new TweenLite(pen, d, {x:p.x, y:p.y, ease:Linear.easeNone, onUpdate:updateLine, onUpdateParams:[$graphics, pen]}));
}
return timeline;
}
private function updateLine($graphics:Graphics, $pen:Object):void
{
// $graphics.clear();
$graphics.lineStyle(5, 0xFFD700, 1, false, LineScaleMode.VERTICAL, CapsStyle.ROUND, JointStyle.ROUND, 10);
var points:Array = $pen.prevPoints;
$graphics.moveTo(points[0].x, points[0].y);
var l:uint = points.length;
for (var i:int = 1; i < l; i++) {
$graphics.lineTo(points[i].x, points[i].y);
}
$graphics.lineTo($pen.x, $pen.y);
}
private function drawConnection( fromDot:Sprite, toDot:Sprite):void
{
var point_from:Point = new point(fromDot.x, fromDot.y);
var point_to:Point = new point(toDot.x, toDot.y);
var myPath:TimelineLite = buildPathTimeline([ point_from, point_to], this.graphics);
TweenLite.to(myPath, 0.5, {currentProgress:1}); //simply tween the progress property from 0 to 1 to draw the line.
}
Drawing with TweenMax [SOLVED]
in GSAP (Flash)
Posted
I wanted to animate the line drawing between several points all at the same time. And, with a few tweaks of your above sample, I got it working I only had to comment out the graphics clear and change "progress" to the "currentProgress" property. Keeping the graphics clear would only draw one line instead of all the 40 points I wanted to connect at once.
I've included my solution if helps anyone else. In the below code, you can use drawConnection() in a loop to connect all the sprite dots you placed on the stage to whatever pattern you wish -- ie a spider web.