ActionScript 3.0入門ノート CS4でタグ「Point」が付けられているもの

(section09-01 基本的な図形を描くから抜粋)

 BezierSegmentクラスを利用すると比較的簡単にベジェ曲線を描くことができます。ベジェ曲線を描くには線の始点aと終点dのアンカーポイントと曲線の向きを決める2個のコントロールポイントb、cが必要です。BezierSegmentクラスのコンストラクタではこれらの4点のPointオブジェクトをa、b、c、dの順で引数として与えます。

書式
var bezier:BezierSegment=new BezierSegment(a:Point, b:Point, c:Point, d:Point);

 a、b、c、dの各点を図で示すと次のようになります。
fig09-01-20_shiji.jpg
 BezierSegmentクラスのインスタンスを作ると、コンストラクタで指定したアンカーポイントとコントロールポイントをもったベジェ曲線が作られます。ただし、BezierSegmentクラスには曲線を描くメソッドはなく、ベジェ曲線の軌跡の座標が計算されるだけです。ベジェ曲線を線として描くためには、getValue()を利用して曲線の途中の点の座標を求めて直線でつないでいきます。
 getValue()はPointクラスのinterpolate()と同じようなメソッドで、曲線を始点の位置を0、終点の位置を1として比率で途中の点を示します。たとえば、全体をtCnt分割するならば、t番目の位置の座標はbezier.getValue(t/tCnt)になります。分割するtCntの数が多いほど曲線の途中の点を細かく取ることになり、より滑らかな曲線を描けますが、その分だけ処理は重くなります。
 次のサンプルではステージのb_mcとc_mcの座標をコントロールポイントに使って、a_mcとc_mcの間にベジェ曲線を描いてます。便宜上、a-b、d-cを結ぶ補助線も引いていますが、もちろんこの線がなくてもベジェ曲線は描かれます

fig09-01-21.jpg

[:script:]ベジェ曲線を描く
import fl.motion.BezierSegment;
//アンカーポイントa,b コントロールポイントb,c
var a:Point=new Point(a_mc.x,a_mc.y);
var b:Point=new Point(b_mc.x,b_mc.y);
var c:Point=new Point(c_mc.x,c_mc.y);
var d:Point=new Point(d_mc.x,d_mc.y);
//補助線を描く
graphics.lineStyle(1,0x666666);
graphics.moveTo(a.x,a.y);
graphics.lineTo(b.x,b.y);
graphics.moveTo(d.x,d.y);
graphics.lineTo(c.x,c.y);
//ベジェ曲線を描く
var bezier:BezierSegment=new BezierSegment(a,b,c,d);
var tCnt:int=100;//曲線上の点の個数
graphics.lineStyle(2);
graphics.moveTo(a.x,a.y);
for (var t=0; t<=tCnt; t++) {
	//曲線上の点
	var tmpPt:Point=bezier.getValue(t/tCnt);
	//前の点と直線で結ぶ
	graphics.lineTo(tmpPt.x,tmpPt.y);
}
(section06-03 衝突判定から抜粋)

 containsPoint()は点と領域を比較します。引数で指定した点が矩形領域の中に入っているときにtureになります。
 次のサンプルは写真の3つの部分を示すrect_1、rect_2、rect_3の矩形を作っておき、その領域にカーソルが入ったらその部分をインスタンスで囲んで示します。
 マウスカーソルが矩形の中に入っているかどうかをチェックするのは24行目です。矩形のrect_1、rect_2、rect_3は写真の左上角を座標の基準としているので、マウス座標と比較するために、20行目ではステージでの写真の左上角の頂点に合わせて座標をオフセットしています。このとき、矩形に対してoffset()を実行すると元の矩形が変化するので18行目のようにclone()で複製した矩形を使って比較を行います。
 ステージにはあらかじめ矩形を囲むインスタンスselectBox_mcを作っておきます。処理を簡単にするためにselectBox_mcは左上角に基準点があるように作ります。

fig06-03-01b.jpgswfを試す

[:script:]カーソルが領域に入ったならば領域を囲むインスタンスを表示する
//選択枠の初期化
selectBox_mc.visible=false;
selectBox_mc.alpha=0.5;
//ホット領域の矩形
var rect_1:Rectangle=new Rectangle(120,10,35,20);//江ノ島
var rect_2:Rectangle=new Rectangle(230,30,120,25);//サーファー
var rect_3:Rectangle=new Rectangle(170,75,120,70);//ボードキャリア
var rectList:Array=[rect_1,rect_2,rect_3];
//写真の矩形
var photoRect:Rectangle=photo_mc.getRect(stage);
//ロールオーバーのチェック
stage.addEventListener(MouseEvent.MOUSE_MOVE, rollCheck);
function rollCheck(eventObj:MouseEvent):void {
	for (var i:int=0; i<rectList.length; i++) {
		//チェックする矩形を取り出す
		var rect:Rectangle=rectList[i];
		//offset処理で変化しないように矩形の複製を作る
		var chkRect:Rectangle=rect.clone();
		//矩形をステージのグローバル座標に合わせる
		chkRect.offset(photoRect.left,photoRect.top);
		//マウス座標
		var mousePt:Point=new Point(stage.mouseX,stage.mouseY);
		//マウス座標がホット領域に入っているかチェックする
		if (chkRect.containsPoint(mousePt)) {
			//選択枠を表示する
			selectBox_mc.x=chkRect.x;
			selectBox_mc.y=chkRect.y;
			selectBox_mc.width=chkRect.width;
			selectBox_mc.height=chkRect.height;
			selectBox_mc.visible=true;
			//forによる無駄な繰り返しを抜ける
			break;
		} else {
			//選択枠を消す
			selectBox_mc.visible=false;
		}
	}
}
(section06-01 Pointクラスから抜粋)

 次のサンプルではインスタンスball_mcとマウスカーソルの距離を測り、距離が200ピクセル以内になったとき、マウスが近づくほどball_mcが速く回転するというものです。ball_mcとマウスカーソルの距離は8行目のPoint.distance(ballPt,mousePt)で計算しています。ball_mcとマウスカーソルの距離はマウスカーソルがball_mcの左右上下のどの方向にあっても正の値になります。また、11行目では回転速度が大きく成りすぎないように距離が10ピクセルより近づいたときには、計算では10ピクセルを最低値として使用しています。

fig06-01-06.jpgswfを試す

[:script:]マウスが近づくほど回転が速くなる
addEventListener(Event.ENTER_FRAME, onEnterframe);
function onEnterframe(eventObj:Event):void {
	//インスタンスの座標
	var ballPt:Point=new Point(ball_mc.x,ball_mc.y);
	//マウスの座標
	var mousePt:Point=new Point(stage.mouseX,stage.mouseY);
	//インスタンスとマウスの距離
	var distance:Number=Point.distance(ballPt,mousePt);
	//距離が200以下の時に回転する
	if(distance<200){
		ball_mc.rotation+=2000/Math.max(10,distance);
	}
}
まったく新しいAS3の世界!
694a.jpg
Adobe Flash CS4
詳細!ActionScript3.0入門ノート[完全改訂版](CD-ROM付)

楽しいActionScript。
新たなる1歩へと踏み出しましょう。
■内容は?→ 目次を見る
■評判は?→ 書評を読む
この本を書いたわけ

タグ

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

あわせて読みたいブログパーツ