Simple line extend animations

Use a series of shape tweens.

1. Create a short line or square in the first frame.

2. Copy and paste this frame to another frame.

3. Extend the line or shape in the end frame using the transform tool. To keep one end of the shape from moving, while using the transform tool move the white dot in the shape to the end at should not move. Now drag the opposite end of the shape.

4. Repeat this for each direction of the line

I was going crazy trying to use classic tweens. Shape tweens are a million times easier to use for this. I think masking would work but is more complicated and would take longer.

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);
}

you can use the drawing api to animate lines and curves.  check the graphic's class lineTo(), moveTo() and possibly curveTo() methods.