Tweenerライブラリをインポート後、Tweener動作中に呼び出される関数onUpdateと、線を描くmoveTo、lineToを使用してまずはシンプルなラインの描画。

import caurina.transitions.*;

var movePoint:Point = new Point(100,100);
var dummyShape:Shape;

Tweener.addTween(movePoint, { x:300, y:300, time:1, transition:"linear", onUpdate:lineDraw});
function lineDraw(){
	if(dummyShape != null)stage.removeChild(dummyShape);
	dummyShape = new Shape();
	stage.addChild(dummyShape);

	var g = dummyShape.graphics;
	g.lineStyle (5, 0xFF6600, 1.0);
	g.moveTo (100, 100);
	g.lineTo (movePoint.x, movePoint.y);
}

TweenerでmovePointを移動させて、動作中に毎フレームmovePointのx,yに向けて線を描画します。

→DEMO

Shapeを変形して線を描くのも考えたけれど、線の調整とか角丸もありlineToで進める事に。

//lineMake関数　 引数(ターゲット、時間、太さ、色、始点X、始点Y、終点X、終点Y)
lineMake(mc ,1.5 ,5 ,0xFF6600 ,0 ,0 ,100 ,100);

function lineMake(_targetMc,_time:Number,_vol:Number,_col,_startX:Number,_startY:Number,_endX:Number,_endY:Number){

	var movePoint:Point = new Point(_startX,_startY);
	var drawCount:Number = 0;
	var pointArr:Array = new Array();

	for(var i:int = 0;i < 4;i++){
		//始点終点中間2点の各ポイントを配列に格納
		pointArr[i] = new Point();
		switch(i){
			case 0:
				pointArr[i].x = _startX;
				pointArr[i].y = _startY;
			break;
			case 1:
				pointArr[i].x = _startX;
				pointArr[i].y = _startY + (_endY - _startY)/2;
			break;
			case 2:
				pointArr[i].x = _endX;
				pointArr[i].y = _startY + (_endY - _startY)/2;
			break;
			case 3:
				pointArr[i].x = _endX;
				pointArr[i].y = _endY;
			break;
		}
	}

	drawCount++;
	drawFunc();

	function drawFunc(){
		var dummyShape:Shape;
		Tweener.addTween(movePoint, { x:pointArr[drawCount].x, y:pointArr[drawCount].y,time:_time/3, transition:"linear",onUpdate:lineDraw,onComplete:nextFunc } );
		function lineDraw(){

			if(dummyShape != null)_targetMc.removeChild(dummyShape);
			dummyShape = new Shape();
			_targetMc.addChild(dummyShape);
			var g = dummyShape.graphics;

			g.lineStyle (_vol, _col, 1.0);
			g.moveTo (pointArr[drawCount-1].x, pointArr[drawCount-1].y);
			g.lineTo (movePoint.x, movePoint.y);
		}
		function nextFunc(){
			drawCount++;
			if(drawCount < 4)drawFunc();
		}
	}
}

上記関数を使ってデモではドラッグ＆ドロップできる2点間を折れ線で繋ぎました。

→DEMO

trick7 – sketchbookライブラリを使わせてもらう
にゃあプロジェクト – ウェブログ – [AS3.0] sketchbookを試すのだ！

はじめにライブラリをインポートして、初期化する。

import sketchbook.SketchBook;
import sketchbook.display.SpriteHelper;
import sketchbook.graphics.GraphicsHelper;

//初期化
SketchBook.init(stage);

ENTER_FRAMEイベントでダミーに描画して、完了後にダミーをremoveChildする。

//描画円グラフ半径
var inside:Number = 100;
//描画開始角度
var startNum:Number = 0;
//描画角度量
var volNum:Number = 120;
//描画アニメーション用数値
var drawNum:Number = 0;


//完成図までの表示用
var dummyMc:MovieClip = new MovieClip();

addEventListener( Event.ENTER_FRAME, Ef);
function Ef(e:Event):void {
	//描画角度を減衰で計算
	drawNum += (volNum - drawNum)/5;
	
	//Shapeクラス
	var pie:Shape = new Shape();
	//GraphicsHelperクラス
	var helper:GraphicsHelper = new GraphicsHelper(pie.graphics);
	helper.beginFill(0xFFCC00);
	
	if (drawNum >= (volNum - 1)) {
		//実行中のイベント、ムービークリップを破棄
		removeEventListener(Event.ENTER_FRAME, arguments.callee);
		removeChild(dummyMc);
		
		//完成の図形
		addChild(pie);
		helper.lineStyle (1, 0xFF6600, 1.0);
		helper.drawPie(0, 0, inside,volNum,(startNum - 90));
	}else {
		//途中経過の図形
		dummyMc.addChild(pie);
		helper.lineStyle (1, 0xFF6600, 1.0);
		helper.drawPie(0, 0, inside,drawNum,(startNum - 90));
	}
	helper.endFill();
}

GraphicsHelperのdrawPieメソッドの引数
drawPie(x位置 ,y位置 ,半径 ,描画角度 ,開始角度);

→DEMO

Tweenerみたいに細かく時間とかイージングとか設定出来る描画ライブラリとかないもんかなぁ。