Simple line extend animations

Question

I am working on a pretty straight-forward motion graphic, that requires lines to extend in various directions via animation. I made one attempt, but feel like my way of doing this – making a small square, then motion tweening it to extend can not be the best way to do this – as I am manually extending each square to make each line, but am running into a lot of alignment / shifts.
Any help, or direction to help would be appreciated. thanks.

Answer 1

One way to do this would be to use a tweening engine like TweenLite - it has an onUpdate feature that will call a function every time the tween is updated... so you can animate some invisible object from point a to point b - and use the graphics api to draw a line to the objects current position. If you have TweenLite give this bit of code a try - it will draw a red line from 0,0 to 550,400 over the course of 5 seconds:
import gs.TweenLite;
var ob:Sprite = new Sprite();
ob.x = 0;
ob.y = 0;
TweenLite.to(ob, 5, {x:550, y:400, onUpdate:drawLine});
function drawLine(){
    graphics.clear();
    graphics.lineStyle(1, 0xFF0000);
    graphics.moveTo(0,0);
    graphics.lineTo(ob.x, ob.y);