初心者のためのフラッシュレベルアップ講座

ProcreoFlashDesign
初心者のためのFlashレベルアップ講座

■三角関数を使った円運動 （三角関数、角度とラジアン）
　

■概要

●青ボールを好きな位置にドラッグしてみてください。それに合わせて角度、ラジアンの数値が変化します。

本来FLASHの座標は左上が原点の0,0ですが、ステージの中心(300,200)を中心として計算しています。

■解説

サイン・コサインと聞くと、タンジェント！と反射的に言葉はでてきますが、意味や使い方は全然覚えていないという私みたいな人向けにフラッシュで使える三角関数をまとめてみました。できれば使いたくない三角関数なんですが、三角関数を使うといろいろおもしろそうなフラッシュを作れそうな気がします。では、いったいどういう時にサイン、コサインを使えば便利かというと、物体を円運動させる場合や、ななめのベクトルをxyの垂直な２方向に分解するときに威力を発揮します。その他にも諸々使い方はあるのでしょうが、簡単に思い浮かぶ円運動を今回は試してみます。

例として上図（初期値）のように半径（r）200の円周上にそって青いボールを回転させる場合を考えたいと思います。
角度30°で止まっている青いボールの現在位置xyは　_x　と　_y　を使って簡単に求められますが、例えばこの半径200の円周上を時計回りに10度回転させて角度20°に動かそうとした場合、青いボールのx座標、y座標はどうなっているでしょうか？

ここで、確か中学か高校の時の数学の教科書に載っていたような気がする・・・三角関数の定義を使います。
上図左下の式を使うと、半径（r）は200で一定ですから

　　　　　　x = 200 * cosθ
　　　　　　y = 200 * sinθ

このようになります。で、あとは角度のθに角度を代入するのですが、数学の場合はθに20°を入れればOKとなります。が！しかし！フラッシュの場合はsin,cosのパラメータには角度(degree)ではなくラジアン(radian)という単位を使わないといけません。（コンピュータの世界ではこのラジアンを使うのが一般的のようです。）
ラジアンとは、半径１の円弧の長さをもとにした単位みたいです。つまり半径１の円周は、直径×3.14・・・ですので、2πとなります。これを基に、　360°= 2π　　180°= π　　90°= π/2　　60°= π/3　　30°= π/6　　・・・　　1°= π/180　　という風に角度とラジアンが対応しています。

ここで、上記、cosθ、sinθ、πをアクションスクリプトで表すと下記のようになります。

cosθ　→　Math.cos(radian)
sinθ　 →　Math.sin(radian)
π　　　 →　Math.PI

◆角度（degree）→ラジアン（radian）に変換

　　　　radian = Math.PI/180 * degree

◆ラジアン（radian）→角度（degree）に変換

　　　　degree = radian / (Math.PI/180)

以上のことから、もう一度、上の式を記述すると下記のようになります。

　　　　　　x = 200 * Math.cos(Math.PI/180 * 20)
　　　　　　y = 200 * Math.sin(Math.PI/180 * 20)

上の式を計算するとおおよそ　x=188　y=68　となって、上図の半径200の円周上で20°のxy位置を求めることができます。
以上のことから半径と角度さえ判れば、その円周上のxy座標は上の式を使って求めることができるはずです。
そこで、円運動をさせる場合、上記の式において、角度をどんどん増やしながら、繰り返しxy座標を計算させ、その位置にボールのムービークリップを移動させてやればぐるぐると円を描く運動をするようになります。
詳しくは下のサンプルムービーの解説を参照してください。若干、変化を加えていますが、基本はまったく同じです。

以上の基本事項がわかれば、ちょっとしたアイデアで右下のサンプルムービーみたいなものは簡単に作れるようになります。

■サンプルムービー解説

下のアクションスクリプトは右下のサンプルムービーで回っているボールに記述されたムービークリップアクションです。基本は上の式と同じですが、角度にはdegreeという変数、半径には同じくｒ、回転の中心のx,y座標をそれぞれ、centerxとcenteryという変数に入れ、onClipEvent (load)で各初期値を指定しています。
onClipEvent (enterFrame)では、まず、角度（degree）をラジアン（radian）に変換し、その次の行では、ｘ座標の計算、その次の行ではｙ座標の計算をしています。y座標の計算で /2 をしているのは、右のサンプルのように上下に押しつぶした回転をさせるためです。/2をしなければ真円を描くように回転します。
その次の行では、xyの拡大率、透明度をy座標を基に変化させ、擬似３D的にちょっと立体感や奥行きをもたせてみました。
そして、最後に角度（degree）を5°増加させ、また同じ計算を繰り返させています。


onClipEvent (load) {
	degree = 0;
	r = 100;
	centerx = 150;
	centery = 100;
}
onClipEvent (enterFrame) {
	radian = Math.PI/180*degree;
	this._x = centerx+r*Math.cos(radian);
	this._y = centery+r*Math.sin(radian)/2
	this._xscale = this._yscale=this._alpha=this._y;
	degree += 5;
}

（Download：circle_motion.fla 18KB）

■注記

このページの解説では分かり易くするため、できるだけ直感的なスクリプトにしています。その為、最適化されたスクリプトとはいえませんので、悪しからずご了承ください。また、間違った言葉の使い方等しているかもしれませんので、参考程度にお考えください。間違いや不備のご指摘等ありましたら是非ご一報ください。
(June,2003 FlashMX)