第4回　マウスに対応してムービークリップを回転させる

Flashはバージョンアップを重ねて今やFlash8となり、ビデオ系の処理やビットマップ系の処理などさまざまな機能も充実し、ますます表現の幅も広がってきている。しかし一方、その習得に壁を感じ始めている人はいないだろうか？
このコーナーではアクションスクリプトの必要性を感じてはいるが、勉強の手が止まってしまっている初級・中級者を対象に、できるだけ汎用性のあるスクリプ ト手法を中心に解説していきたい。新機能を追求して新たな表現手法を研究するのも良いが、基本的で簡単なスクリプトでもまだまだいろいろな表現手法がある ことを感じて頂ければと思う。さまざまなFlash使いの方々のスキルアップの一助となれば幸いである。

(解説：茅原 伸幸)

「マウスに反応するキャッチーな表現」の最終回となる今回は、カメレオン君がマウスポインタを狙っている様子を演出するために、カメレオン君の顔をマウスポインタの方向に向けてみよう。これは言い換えると、顔のムービークリップをマウスポインタの座標に対応して回転させるということである【1】。

■Point　基準点とマウスポインタの座標から角度を求め、指定する

ムービークリップを回転させるには「_rotationプロパティ」に角度を指定すればよい。では、その角度はどうやって求めればよいだろうか。2つの座標による角度は「Math.atan2メソッド」を使えば簡単に求めることができる。ここでいう2つの座標とは、カメレオン君の顔の基準点の座標とマウスポインタの座標のことだ。

それでは実際の作業ファイルにスクリプトを記述する前に、まずは簡単なサンプルを作成してみよう。要点だけに絞ったシンプルなサンプルを制作しておくことは動作確認や実験がしやすいだけでなく、他に流用する場合にもとても役に立つ。

まず、新規ファイルを作成して右向きの矢印を描画しよう。そして、その矢印をシンボルに変換してムービークリップにする【2】。

最後に矢印のムービークリップのタイムラインのフレーム1に次のスクリプトを記述するだけだ。

this.onEnterFrame = function(){
var nMouseX = _root._xmouse-this._x;
var nMouseY = _root._ymouse-this._y;
if (nMouseX == 0 && nMouseY == 0) {
var nDegrees = 0;
} else {
var nDegrees = Math.atan2(nMouseY, nMouseX)*180/Math.PI;
}
this._rotation = nDegrees;
};

たったこれだけで【サンプル1】ができ上がるとともに、表現の引き出しがひとつ増えたことになる。このような極力シンプルなサンプルをひとつずつアーカイブし、身につけていくことによって表現の幅は乗算的に広がっていくだろう。

では次に、【サンプル1】のスクリプトの内容を見ていこう。

「nMouseX」は赤い矢印ムービークリップの中心（基準点）からマウスポインタまでのx方向の距離を表している。同様に「nMouseY」はy方向への距離だ。この2つの数値さえわかれば、「Math.atan2」メソッドを用いて赤い矢印の中心からマウスポインタへの角度を求めることができる。

Math.atan2(nMouseY,nMouseX)

スクリプトのこの部分だ。ここで重要なことはパラメータの順番がy座標からになっていることと、返される値がラジアン単位になっていることだ。ラジアンとは角度を表す単位の一つで、三角関数を扱うようになると必ず必要になってくる。苦手意識を感じやすいところだが、一度理解してしまえばもう恐れることはない。せっかくなのでこの機会に自分のものにしてしまおう。

ラジアンを理解するには、紙に十字と半径1の円を描いて、円周（円弧）の長さを基準に考えれば簡単だ【3】。

円周の長さは直径×3.14、つまり（半径+半径）×πで、2πとなる。これが円一周分で360°と考えると、例えば90°は4分の1周で2πを4で割ってπ/2ラジアンとなる計算だ。同様に、180°は2πを2で割ってπラジアンとなる。この角度とラジアンの関係を理解すれば、ラジアンから角度を求めるには、ラジアンを2πで割って360°を掛ければよいと気付くだろう。通分して180°/πを掛けても同じことだ。

また、πはFlashでは「Math.PI」を使う。これで次の行

var nDegrees = Math.atan2(nMouseY, nMouseX)*180/Math.PI;

は、変数nDegreesにラジアン値を度数の角度に変換した数値を代入していることがわかるだろう。その後、求められた度数の角度を「_rotation」プロパティに指定し、ムービークリップを回転させている。

前後するが、nMouseX,nMouseYがともに0の場合は、「Math.atan2」メソッドの戻り値がNaNになることがあるため条件分岐させている。詳細は「Flash TechNote」を参照してほしい。

この「Flash TechNote」には知らなければつまづくであろうと思われる点も数多く掲載されている。事前にチェックしておくことで「なぜだかうまく動作しない…。」と悩む時間を減らすことができるだろう。ぜひ一度は目を通しておきたい。

■Macromedia Flash テクニカルノート一覧
http://www.adobe.com/jp/support/flash/technotes.html

以上をふまえて、実際のカメレオン君の顔に設定されたアクションスクリプトを見てみよう【4】。

シンプル版のサンプルとちがう点は、カメレオン君の顔が後ろ向きに変な方向まで回転してしまわないように、マウスポインタのx座標が300未満のときにだけ、回転させるように条件付けしている点と、ラジアンを角度（度数）に変換したあと、180（°）を加えている点だ。カメレオン君は原画では左を向いているため、180（°）を加えて半周多く回転させ、ちょうど【サンプル1】とは逆を向かせるようにしている。また、口を開けた状態のフレーム2があるため、stop()で停止している。捕食時にはカメレオン君の顔のムービークリップ（chamereonHead）を口を開けた状態（フレーム2）にgotoAndStop(2)し、通常時には口を閉めた状態（フレーム1）にgotoAndStop(1)させている。

最後に、マウスを押下したときや、マウスを一定歩数動かしたときに捕食されるようマウスリスナーを設定しよう。_rootのタイムラインのフレーム1に次のアクションスクリプトを記述する【5】。

Mouse.onMouseMoveイベントリスナーにより、マウスが移動する度にnCountを1ずつ増加させ、設定した最大歩数（nMaxCount）を超えた場合にも捕食の動作を実行させている。これにより、マウスを押下したときだけでなくマウスポインタを移動させているときにも、急にマウスポインタを補食されてしまうよう演出することができる。最大歩数は捕食の度に毎回ランダムに設定し、次回いつ頃捕食されるか予測しづらくさせている。

以上、4回に渡り、カメレオン君の作品を通して、ポイントとなるスクリプトの解説を行ってきた。ほんの数行の簡単なスクリプトでもさまざまな動きが演出できることを、少しでも実感していただけたであろうか。タイムラインだけでは味わえない楽しさがアクションスクリプトにはある。アクションスクリプトを勉強すれば、さらにFlashが好きになるだろう。ぜひ続けてがんばってもらいたい。

次回Lesson2は、10月4日（水）からの掲載開始となります。