Ok, I was just going to smack a little sample file into a post on the GreenSock forums but figured it would only take a few extra minutes to share it with all of you. Here are 2 fairly basic approaches to creating animated lines with ActionScript 3 Drawing API.
Simple: Smack an onUpdate onto a few simple TweenLite Tweens
The swf at the top of this page just uses 2 TweenLite tweens that call an onUpdate callback function that draws a line to wherever the mc happens to be. Hopefully you have a basic understanding of the ActionScript 3.0 Drawing API.
AS3 Code
import com.greensock.*;
import flash.events.MouseEvent;
var line:Shape = new Shape();
addChild(line);
var startX:Number = mc.x;
var startY:Number = mc.y;
play_btn.addEventListener(MouseEvent.CLICK, startAnimation);
function startAnimation(e:MouseEvent):void
{
mc.x = startX;
mc.y = startY;
TweenMax.to(mc,1,{x:400, y:20, onUpdate:drawLine});
TweenMax.to(mc,1,{y:250, delay:1, onUpdate:drawLine});
line.graphics.clear();
line.graphics.lineStyle(5, 0xFF1C30);
line.graphics.moveTo(mc.x, mc.y);
}
function drawLine():void
{
line.graphics.lineTo(mc.x, mc.y);
}
Advanced: Place some clips on stage to mark where you want the lines drawn to and use TimelineMax to sequence the tweens
This method takes a little more time to set up, but it is sooo easy to edit where the line goes as you can just move around some clips on the stage.
AS3 Code
import com.greensock.*;
import flash.events.MouseEvent;
//create line
var line:Shape = new Shape();
addChild(line);
//position mc at first point
mc.x = p1.x;
mc.y = p1.y;
var tl:TimelineMax = new TimelineMax({paused:true,onUpdate:drawLine});
tl.appendMultiple([
TweenLite.to(mc, 1, {x:p2.x, y:p2.y}),
TweenLite.to(mc, 1, {x:p3.x, y:p3.y}),
TweenLite.to(mc, 1, {x:p4.x, y:p4.y})
], 0, TweenAlign.SEQUENCE);
function drawLine():void
{
line.graphics.lineTo(mc.x, mc.y);
}
play_btn.addEventListener(MouseEvent.CLICK, playTl);
function playTl(e:MouseEvent):void
{
//kill existing line
line.graphics.clear();
//start new line at first point
line.graphics.lineStyle(5, 0xFFFF00, .5);
line.graphics.moveTo(p1.x, p1.y);
tl.restart();
}
**note if you are extra fancy you could use a loop to build your TimelineMax but I didn’t want to get too crazy.
Download Flash CS4 Source Files
BONUS
Thanks to X10′s comment below, I was motivated to try to figure out how to “erase” the line on reverse. I don’t know how well I can explain it, but the ambitious among you should check out the bonus file here:
Use TimelineMax to Draw and ERASE Animated Lines
