Drawing With Tweener
October 6th, 2009
An AS3 script for drawing lines with Tweener. Create a line, add points, and set the time it takes tweener to draw. Will add additional more functionality soon. Below is an example.
This movie requires Flash Player 9
package
{
import flash.display.Sprite;
public class Main extends Sprite
{
public function Main():void
{
var line:DrawAnimatedLine = new DrawAnimatedLine();
line.startingPoint(10,10);
line.addPoint(110,10);
line.addPoint(110,110);
line.addPoint(10,110);
line.addPoint(10,10);
line.drawLine(1000); // time in milliseconds
addChild(line);
var line2:DrawAnimatedLine = new DrawAnimatedLine();
line2.startingPoint(300,110);
line2.addPoint(245,10);
line2.addPoint(190,110);
line2.addPoint(300,110);
line2.drawLine(3000);
addChild(line2);
}
}
}
package
{
import caurina.transitions.Tweener;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.geom.Point;
public class DrawAnimatedLine extends Sprite
{
private var startPoint:Point = new Point();
private var points:Array = [] ;
private var currentPointsIndex :int = 0;
private var times:Array = [];
public function DrawAnimatedLine()
{
}
public function startingPoint(sx:Number,sy:Number):void
{
startPoint.x = sx;
startPoint.y = sy;
}
public function addPoint(px,py):void
{
points.push(new Point(px,py));
}
public function drawLine(time:Number):void
{
var lastSegmentStartPoint:Point = startPoint;
var distances:Array = [];
var totalDistance:Number = 0;
for(var i:int = 0; i < points.length; i++)
{
var segmentStartPoint:Point = lastSegmentStartPoint;
var segmentEndPoint:Point = new Point(points[i].x,points[i].y);
var segmentLength:Number = getDistance(segmentStartPoint,segmentEndPoint);
distances.push(segmentLength);
totalDistance = totalDistance + segmentLength;
lastSegmentStartPoint = segmentEndPoint;
}
for(var j:int = 0; j < distances.length; j++)
{
times[j] = (distances[j] / totalDistance) * time;
}
drawSegment();
}
private function drawSegment():void
{
var line:Sprite = new Sprite();
line.graphics.moveTo(0,0);
line.graphics.lineStyle(2,0x000000);
// Object that will hold x/y position for the line segment as it's tweening
var lineObj:Object = {};
lineObj["x"] = 0;
lineObj["y"] = 0;
var tweenObj:Object = {};
tweenObj["x"] = points[currentPointsIndex].x - startPoint.x;
tweenObj["y"] = points[currentPointsIndex].y - startPoint.y;
tweenObj["onUpdate"] = drawPointOnLine;
tweenObj["onUpdateParams"] = [lineObj,line];
tweenObj["time"] = times[currentPointsIndex] / 1000;
tweenObj["transition"] = "linear";
Tweener.addTween(lineObj,tweenObj);
addChild(line);
line.x = startPoint.x;
line.y = startPoint.y;
}
protected function drawPointOnLine(lineObj:Object,line:Sprite):void
{
line.graphics.lineTo(lineObj.x,lineObj.y);
if(lineObj.x == points[currentPointsIndex].x - startPoint.x && lineObj.y == points[currentPointsIndex].y - startPoint.y && currentPointsIndex < points.length - 1)
{
currentPointsIndex++;
startPoint.x = points[currentPointsIndex - 1].x;
startPoint.y = points[currentPointsIndex - 1].y;
drawSegment();
}
}
private function getDistance(startPoint:Point,endPoint:Point):Number
{
return Math.sqrt(Math.pow(endPoint.x - startPoint.x,2) + Math.pow(endPoint.y - startPoint.y,2));
}
}
}