Simple line extend animations

[ralpala]

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.

[kglad]

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

[Guest]

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

[Andrew Payson Composer]

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.