# Animate Graphics.lineTo()

**URL:** https://forum.kirupa.com/t/animate-graphics-lineto/307608
**Category:** flash
**Created:** [April 6, 2010, 6:53pm UTC](https://forum.kirupa.com/t/animate-graphics-lineto/307608 "2010-04-06T18:53:13Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![rkalexander](https://avatars.discourse-cdn.com/v4/letter/r/919ad9/32.png) [@rkalexander](https://forum.kirupa.com/u/rkalexander)
#### Post date: [April 6, 2010, 6:53pm UTC](https://forum.kirupa.com/t/animate-graphics-lineto/307608/1 "2010-04-06T18:53:13Z")

</div>

The code below is taken directly from:

[http://actionsnippet.com/?p=890](http://actionsnippet.com/?p=890)

```auto
// line thickness, line color, start point, end point, divisor, callback
function animateLineTo( thick:Number, col:uint, sp:Point, ep:Point, div:Number=4, callback:Function=null):void {
     var s:Shape = Shape(addChild(new Shape()));
     var ap:Point = sp.clone();
     div = Math.max(2, div);
     setTimeout(runLineAnimation, 1000/stage.frameRate, s.graphics , thick , col , sp , ep , ap, div, callback);
}
 
function runLineAnimation(g:Graphics , thick:Number, col:uint, sp:Point, ep:Point, ap:Point, div:Number, callback:Function):void {
     ap.x += (ep.x - ap.x) / div;
     ap.y += (ep.y - ap.y) / div;
      with(g){
        clear();
        lineStyle(thick, col);
        moveTo(sp.x, sp.y);
        lineTo(ap.x, ap.y);
      }
       if (Math.abs(ap.x - ep.x) <1 && Math.abs(ap.y- ep.y) <1){
           // done
           if (callback!=null){
               callback();  
           }
       }else{
            setTimeout(runLineAnimation, 1000/stage.frameRate, g , thick , col , sp , ep , ap, div, callback);
       }
}
//
// test out the animateLineTo function:
//
var a:Point = new Point(100,100);
var b:Point = new Point(150, 200);
var c:Point = new Point(300, 190);
var d:Point = new Point(280, 90)
 
animateLineTo(0, 0xFF0000, a, b, 4, line2);
 
function line2():void{
    animateLineTo(0, 0xFF0000, b, c, 4, line3);
}
 
function line3():void{
    animateLineTo(0, 0xFF0000, c, d, 4, line4);
}
 
function line4():void{
    animateLineTo(0, 0xFF0000, d, a, 4);
}

```

The code works great for animating a line from point A to point B. I am trying to extend that a bit further, by making it so that once the line draws, it animates with point A and point B as the two points tween on their x,y properties. Any ideas?