CODEWITHSUNDEEP
flashactionscript-3
mheavers
mheavers

Reputation: 30178

flash as3 animated line drawing with lineTo and tweenmax

I'm trying to animate a line by drawing using tweenmax and lineTo, but flash seems a little confused about the coordinates of things. The lines are also drawn a little shaky. Here's my code:

var childArray:Array = new Array(sC0,sC1,sC2,sC3);
var curChild = 0;

function drawLines(){

    for (var i=0;i<childArray.length;i++){

        if (i == curChild){
            var line:Shape = new Shape();
            line.graphics.lineStyle(5, 0xFF1C30, 1, false, LineScaleMode.VERTICAL, CapsStyle.ROUND, JointStyle.ROUND, 10);
            addChild(line); 
            line.x = sP.x; 
            line.y = sP.y;

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

            TweenMax.to (drawer,1,{x:childArray[i].x,y:childArray[i].y,onUpdate:drawLine,ease:Expo.easeOut,onComplete:incChild});

            function drawLine():void {
               line.graphics.lineTo(int(drawer.x), int(drawer.y));
            }
        }       
    }
}

function incChild(){
    curChild++;
    drawLines();
}

drawLines();

But when I use this, it draws lines FROM the proper point, but it doesn't draw them to the actual X and Y coordinates of sC0, sC1, etc. everything seems offset, and the lines are slightly too long in the Y direction. Anybody have a good way of doing this, or see what might be going wrong in my code?

Thanks!

Upvotes: 1

Views: 4843

Answers (2)

mheavers
mheavers

Reputation: 30178

Ah - I see what I did. Instead of saying "line.x = sP.x" and "line.y=sP.y" - I should have said:

line.graphics.moveTo(sP.x, sP.y);

Upvotes: 0

Corey
Corey

Reputation: 5818

For the "shaky line" issue, you're converting the "drawer" points from Numbers to integers, so it's basically shifting your line to the nearest pixel. Not changing the type will help "solve" that issue: line.graphics.lineTo(drawer.x, drawer.y));

For the point offset, if the objects in "childArray" are in another container, you may need to use localToGlobal() to accurately convert the points. 

var mc:MovieClip = childArray[i];
var pt:Point = localToGlobal(new Point(mc.x, mc.y));

TweenMax.to (drawer,1,{x:pt.x,y:pt.y,onUpdate:drawLine,ease:Expo.easeOut,onComplete:incChild});

This is also assuming addChild() in your example is adding to the stage or another container whose position is (0,0). If not, you may need to use globalToLocal() or a combination of the two.

Upvotes: 2

Related Questions