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

Flash / Actionscript ,

  1.  
    No comments yet.
     
Post a Comment
  1. No trackbacks yet.
You must be logged in to post a comment.