Jump to content
Search Community

headwinds

Members
  • Posts

    1
  • Joined

  • Last visited

Contact Methods

Profile Information

  • Location
    toronto
  • Interests
    art, illustration, gaming, playing with code and eco-tech ideas

headwinds's Achievements

0

Reputation

  1. 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. }
×
×
  • Create New...