Tween animating - using lineTo()

[knottyDJ]

I have a series of dots on the screen and would simply like to draw a line between the dots sequentially and have the line animate over time from one dot to the other.

I'm using the lineTo and moveTo methods but that simply draws the image out entirely on publish rather than line segment by line segment. any suggestions would be great.

I have this working to simply draw the line but am thinking that setting up an array of points for the dots and using the if/else statement here to check when those dot coordinates are reached would be best... any input would be sweet.

var drawLayer:Sprite = new Sprite();
addChild(drawLayer);

var xspeed:uint; 
var yspeed:uint; 
var i:uint = 0;


drawLayer.graphics.lineStyle(0, 0x000000, 1, false, "normal", null, null, 0);
drawLayer.graphics.moveTo(10, 20);

addEventListener(Event.ENTER_FRAME, runEvent);

function runEvent(e:Event){
    if (i < 10 ){
    i++;
    xspeed += 8;
    yspeed += 8;
    drawLayer.graphics.lineTo(xspeed, yspeed);
    }
    else{
        removeEventListener(Event.ENTER_FRAME, runEvent);
        }
    
    } 

It would be awesome if I could use something similar to the caurina tweener class and listen for the onComplete Event to start the next segment rather than a big long procedural if/else/or/&& type of scenario... uggh

[knottyDJ]

pushing this back up in the hopes that someone has had some experience animating the drawing of lines via the lineTo method and is willing to offer up a suggestion

[neznein9]

There are a lot of ways to do it but none of them are really simple/automatic...the first question is whether you want each segment to draw in a set amount of time or at a set speed (eg. is it a problem if a 200px line and a 100px line both draw in 1 second)?

[knottyDJ]

Thanks. Yeah, I've resorted to simply having a shape in the library and positioning it then tweening its scaleX property, but that's not quite there either... but waaaay closer. The challenge is calculating the position of the next line segment based on a % scale width of the previous line segment and making sure they connect smoothly - oh and there's rotation angles in there too and my algebra/trig ain't all that.

Essentially what I am trying to achieve is a gracefully animated graph showing peaks and valleys based on "potentially variable data". and would like that graph to transition/animate in by drawing each point sequentially.

So lets say i have 3 dots and tweening from one to other can all use the same duration or speed

dot1.x = 100;
dot1.y = 50;

dot2.x = 200;
dot2.y = 150;

dot3.x = 400;
dot3.y = 50;



// I'm thinking the lineTo would be something like:

...{
xspeed += 8;
yspeed += 8;

drawLayer.graphics.lineTo(dot1.x+xspeed, dot1.y+yspeed);
// or
//drawLayer.graphics.lineTo((dot1.x+xspeed)+(dot2.x -dot1.x), (dot1.y+yspeed)+(dot2.y -dot1.y));
}...