AS3 アニメーション No.2

private function moveArrow_handler( event:Event ):void
{
	// 座標取得
	mousePoint.x = mouseX;
	mousePoint.y = mouseY;
	arrowPoint.x = arrow.x;
	arrowPoint.y = arrow.y;
	
	// 矢印 回転
	var angle:Number = Utils.getRadian( mousePoint, arrowPoint );
	arrow.rotation = Utils.RadianToDegree( angle );
	
	// 加速度 算出
	arrow.vx = Math.cos( angle ) * speed;
	arrow.vy = Math.sin( angle ) * speed;
	
	// 矢印 移動
	arrow.x += arrow.vx;
	arrow.y += arrow.vy;
}

public static function getRadian( tp:Point, cp:Point ):Number
{
	var dx:Number = tp.x - cp.x;
	var dy:Number = tp.y - cp.y;
	// var radian:Number = Math.atan2( dy, dx );
	return Math.atan2( dy, dx );
}

public static function RadianToDegree( radian:Number ):Number
{
	return radian * 180 / Math.PI;
}

二つめはアニメーションではなく描画ですね。
クリックした位置にコントロールポイントを作成し、graphics.curveTo() を利用して曲線を描きます。

AS の curveTo() で描けるのは2次ベジェ曲線と呼ばれるもので、当然、コントロールポイント（クリックしたポイント）を通る曲線を描くわけではありません。
クリックしたポイントを通る2次ベジェ曲線を描くためには、始点・終点・通したい点（クリックポイント）をもとに、

var controlX:Number = targetX * 2 - ( startX + endX ) / 2;
var controlY:Number = targetY * 2 - ( startY + endY ) / 2;

として、コントロールポイントを算出すればいいらしいのですが、どうも上手くいかず断念・・・ とりあえず、クリックしたポイントをそのままコントロールポイントとして利用しています。

stage をクリックしたタイミングで、points:Array にクリックされた座標を push() し、ポイント間を curveTo() で繋いでいます。

注意するのは、points[]（クリックしたポイント）をコントロールポイントに利用している点です。points[] を始点や終点にして curveTo() を実行すると、綺麗な曲線が描けない恐れがあります。
そのため、隣り合うポイントの中間に新たなポイントを作成し、その座標を始点・終点として利用しています。

private function drawCurve():void
{
	graphics.clear();
	graphics.lineStyle( 1, 0xcccccc );
	
	if ( points.length == 2 )
	{
		graphics.moveTo( points[0].x, points[0].y );
		graphics.lineTo( points[1].x, points[1].y );
	}
	else if ( points.length > 2 )
	{
		graphics.moveTo( points[0].x, points[0].y );
		for ( var i:int = 1; i < points.length - 2; i++ )
		{
			// 2点間の中心座標を算出
			var cx:Number = ( points[i].x + points[i+1].x ) / 2;
			var cy:Number = ( points[i].y + points[i+1].y ) / 2;
			
			graphics.curveTo( points[i].x, points[i].y, cx, cy );
		}
		graphics.curveTo( points[i].x, points[i].y, points[i+1].x, points[i+1].y );
	}
}

これにもう少し手を加えて、points の最初と最後を繋げば閉じた曲線を描くことが出来ます。

private function drawCurve():void
{
	graphics.clear();
	graphics.lineStyle( 1, 0xcccccc );
	
	if ( points.length == 2 )
	{
		graphics.moveTo( points[0].x, points[0].y );
		graphics.lineTo( points[1].x, points[1].y );
	}
	else if ( points.length > 2 )
	{
		graphics.beginFill( 0x333333 );
		
		// 始点・終点間の中心座標を算出
		var loop_cx:Number = ( points[0].x + points[points.length - 1].x ) / 2;
		var loop_cy:Number = ( points[0].y + points[points.length - 1].y ) / 2;
		graphics.moveTo( loop_cx, loop_cy );
		
		for ( var i:int = 0; i < points.length - 1; i++ )
		{
			// 2点間の中心座標を算出
			var cx:Number = ( points[i].x + points[i+1].x ) / 2;
			var cy:Number = ( points[i].y + points[i+1].y ) / 2;
			graphics.curveTo( points[i].x, points[i].y, cx, cy );
		}
		graphics.curveTo( points[i].x, points[i].y, loop_cx, loop_cy );
		graphics.endFill();
	}
}

AS3 アニメーションを見て作ったのですが、入門ノート2に BezierSegment クラスを利用したサンプルが載ってました。
BezierSegment を使えば3次ベジェ曲線が描けるし、実用的なサンプルも掲載されているので興味のある方は是非！ 僕もそのうち、入門ノート2に取り掛かります。