i've made a class out of your example. maybe you could create a plugin out of it if you have some spare time? i think it could be a nice feature.
create an instance:
var points:Array = new Array(new Point(0, 0), new Point(-150, -150), new Point(-150, 50), new Point(20, 20));
var style:GraphicsStroke = new GraphicsStroke(10, false, LineScaleMode.NORMAL,CapsStyle.NONE, JointStyle.MITER);
style.fill = new GraphicsSolidFill(0x000000, 1);
var stroke:ProgressiveStroke = new ProgressiveStroke(points, 6, style, Quint.easeInOut);
stroke.play();
addChild(stroke);
and the class:
////////////////////////////////////////////////////////////////////////////////
// Copyright 2010.
// All rights reserved.
////////////////////////////////////////////////////////////////////////////////
package ch.insofern.graphics
{
import __AS3__.vec.Vector;
import com.greensock.TimelineLite;
import com.greensock.TweenLite;
import com.greensock.easing.Linear;
import flash.display.Graphics;
import flash.display.GraphicsSolidFill;
import flash.display.GraphicsStroke;
import flash.display.IGraphicsData;
import flash.display.Shape;
import flash.events.Event;
import flash.geom.Point;
[Event(name="complete", type="flash.events.Event")]
/**
* Class description.
* @author negro
*/
public class ProgressiveStroke extends Shape
{
/**
* Creates an animated line.
* @param points
* @param duration
* @param style
* @param ease
*/
public function ProgressiveStroke(points:Array, duration:Number = 3, style:GraphicsStroke = null, ease:Function = null)
{
// set a default ease
if (ease == null)
{
ease = Linear.easeOut;
}
// set a default style
if (style == null)
{
style = new GraphicsStroke(1);
style.fill = new GraphicsSolidFill(0x000000);
}
// add the style to the graphics data
_style = new Vector.<IGraphicsData>();
_style.push(style);
// create a timeline that contains a tween for every line
var timeline:TimelineLite = new TimelineLite({paused: true});
var point:Point;
var pointPrevious:Point = points[0];
var passedPoints:Array = [];
var distance:Number;
var pen:Object;
for (var i:int = 1; i < points.length; i++)
{
point = points[i];
pointPrevious = points[i - 1];
passedPoints.push(pointPrevious);
pen = {x: pointPrevious.x, y: pointPrevious.y, passedPoints: passedPoints.slice()};
distance = Point.distance(point, pointPrevious);
timeline.append(new TweenLite(pen, distance, {x: point.x, y: point.y, ease: Linear.easeNone, onUpdate: update, onUpdateParams: [pen]}));
}
// tween the timeline progress, this actually creates the animation
_stroke = new TweenLite(timeline, duration, {currentProgress: 1, ease: ease, paused: true, onComplete: complete});
}
/**
* Play the drawing.
*/
public function pause():void
{
_stroke.pause();
}
/**
* Pause the drawing.
*/
public function play():void
{
_stroke.play();
}
/**
* Dispatch complete event when the stroke
* drawing is complete.
*/
private function complete():void
{
dispatchEvent(new Event(Event.COMPLETE));
}
/**
* Update the drawing od the stroke.
* @param pen
*/
private function update(pen:Object):void
{
// clear the old lines and redraw everything
var graph:Graphics = graphics;
graph.clear();
graph.drawGraphicsData(_style);
// draw the lines for all points that were already passed
var passedPoints:Array = pen.passedPoints;
graph.moveTo(passedPoints[0].x, passedPoints[0].y);
var l:uint = passedPoints.length;
for (var i:int = 1; i < l; i++)
{
graph.lineTo(passedPoints[i].x, passedPoints[i].y);
}
// draw the line for the current point
graph.lineTo(pen.x, pen.y);
}
//--------------------------------------
// Properties
//--------------------------------------
private var _stroke:TweenLite;
private var _style:Vector.<IGraphicsData>;
}
}