第2回　アクションスクリプトを使って曲線を動かす1

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

(解説：茅原 伸幸)

今回はメインのアクションスクリプトを利用したカメレオン君の舌の動きについて解説していこう。概略を説明すると、舌には3つの点のムービークリップを用意し、その座標を元にcurveTo()メソッドを利用して曲線を描画している【1】。

赤点は舌先のターゲットとなるムービークリップ（インスタンス名「tPt_mc」としている）、青点は舌のたるみを表現するために用意したコントロールポイント（インスタンス名「cPt_mc」）、黄点は舌の根元に位置する起点となるスタートポイント（インスタンス名「sPt_mc」）としている。曲線は青点をコントロールポイントとして常に黄点から赤点を結ぶように描画し続けている。

作業手順であるが、まず、赤、青、黄の円を3つ描画し、それぞれシンボルに変換し、ムービークリップにしておく（この赤、青、黄の円は最終的には見えなくするが作業しやすいように色づけしている）。そして、それぞれの動作に合わせたアクションスクリプトを各ムービークリップ内のフレーム1のフレームアクションに記述する【2】。

それでは赤点の動きから見ていこう。赤点の動きは捕食時にはカメレオン君の口元（黄点）から、前回作成したマウスポインタの位置（指定位置）に減速しながら移動し、マウスポインタをキャッチした後、元の位置に戻るという動きだ。今回はキャッチした後、元に戻るという動作が加わった分、複雑になっているが、この指定位置に移動させるというアクションスクリプトはFlash制作において最も基本かつ実用的なスクリプトのひとつである。

今回の作品のマウスポインタを捕らえる舌先（赤点）の動きの実際のスクリプトは、【2】のように複雑になっているが、基本になっているのは下記の短いスクリプトだ。【3】を見てもらいたい。

【3】のスクリプトを動かした【サンプル1】では、クリックした場所に赤点が移動してくるはずだ。たったこれだけのことだが、これができるだけで“タイムライン系Flashデザイナー”から“スクリプト系Flashデザイナー”への大きな一歩となるのはまちがいない。大ゲサかもしれないが、このスクリプトとムービークリップ間のターゲットパスを理解し、gotoAndPlay()やstop()などの簡単なタイムラインスクリプトと簡単なボタンアクションのスクリプトを覚えれば、発想とデザイン次第でかなりのFlashコンテンツが制作できるようになるだろう。

以上をふまえた上で、【3】と先述の【2】と見比べてもらいたい。【2】では記述されているスクリプトの行数が増えているが、大まかに説明すると縦の動き（y軸）と捕食前後の分岐が増えたぐらいである。一行ずつコメント文を参照しながら見ていけばおおよそ理解していただけるのではないだろうか。

ちなみに今回の赤点の動きは減速移動のみだから、スクリプト中の変数nSpringに関する部分（【3】2行目）は本来必要ないが、値0として記述している。これは次に解説する青点のコントロールポイントの動きの部分（バネのような動き）との汎用性を持たせているためだ。たとえば【3】の変数nSpringの値を0.8に変更すると下の【サンプル2】ような動きになる。

値をたった少し変更するだけでさまざまな動き方を表現できるのがアクションスクリプト制御による利点でもある。タイムラインで似たような動きを表現することもできるが、修正の効率化といった点でもスクリプト制御には遠く及ばない。タイムラインで作り込んだ場合、飛び抜けた才能を持った人以外は、クライアントからの戻しや修正に戦々恐々となるか、こちらの意見を強く押し通せる営業担当者に期待するかしかないが、スクリプト制御だとちょこっと値を変更してA案とB案を作成するなど、複数案をクライアントに提示することもできるようになるだろう。

このスクリプトの変数nSpringとnEasingの値はある一定の範囲内でうまく動作するが、ここではあえてその範囲は記さない。実際に自分で値をさまざまに変更して動き方を実験することによって理解が増すとともに、予想外の動きもまたアクションスクリプトの楽しさのひとつだと思うからだ。また、変数だけではなくプロパティ（_x）を変更しても再利用できる。スムーズに拡大縮小したり、回転させたり…など、その用途はとても幅広い。

青点の基本的な動きは【サンプル2】と同じだが、移動させる指定座標に秘密がある。秘密というほどではないのだが、赤点（舌先）と黄点（口元）のちょうど中間から、y軸プラス方向（下）にnHang分“たるみ”をもたせた位置に指定座標を設定しているのだ。下記【5】のような関係になっている。

“たるみ”などというと厳密な根拠の元に計算しているようだが、実際はカメレオンを観察したわけでもなく、舌の動きがそれらしく見えるように調整しながら値を指定しただけだ。この図を参考にしながら青点（cPt_mc）に記述しているアクションスクリプト【4】の意味を考えてほしい。

二点間の距離を求めるためには「三平方の定理」が必要になってくるが、解説は次回に持ち越したい。これから若干数学的な要素も加わってきて、難易度も上がるがスキルアップのため、しっかりついて来ていただきたい。

次回へつづく