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

テクノロジー

2006.8.29 TUE

Lesson1　マウスに反応するキャッチーな表現

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

(解説：茅原伸幸)

基本的な概念となる“三平方の定理”

カメレオン君の舌の動きを示す3つの点

前回の宿題、三平方の定理を使って、カメレオン君の舌先のターゲットポイント（赤点）と舌の根元に位置するスタートポイント（黄点）、二点間の距離を求めてみよう。まずは参考例題として、下の図【1】を見ていただきたい。

■POINT　二点間の距離を三平方の定理で導き出す

【1】参考例題（三平方の定理）

赤点（A）と黄点（B）の距離を求めるためにはまず直角三角形を想定し、縦（y座標の距離：a）と横（x座標の距離：b）の距離を計算する。図を見ればわかりやすいと思うが、aは140-40で100、bは320-80で240となる。

そして、aとbをそれぞれ2乗し、三平方の定理の式に当てはめると
10,000+57,600=（cの2乗）
となる。左辺を合計すると67,600となるから、
67,600=（cの2乗）
となるわけだ。

ここでcを求めるためには平方根（square root）を計算する必要があるが、Flashにすでに用意されている平方根を計算する「Math.sqrtメソッド」を利用すると次の式になる（左辺、右辺を入れ替え）。
c=Math.sqrt(67600)
この計算によりc=260という最終的な解（二点間の距離）が求められることになる。

以上をふまえて、前回（第2回）の図【4】の青点のアクションスクリプトを再度確認していただくと、距離に比例して指定座標が移動する動きについてご理解いただけるのではないだろうか。

2点間の距離は「Point.distanceメソッド」でも求められるが…

三平方の定理を使って2点間の距離を求める方法をここまで説明してきたが、実はFlash player8からは「Point.distanceメソッド」によりポイント間の距離を直接求められるようになっている。しかし、基本的な概念をおさえておくことが非常に重要だろうと考え、今回はこの手法を採用した。基本を理解した上でより使いやすく、また、より処理の早い方法へと移行していくほうがいいだろうと思う。

もう一つ重要なことは、“イメージ図を描く”ということだ。上記の参考例題にしても図があることでわかりやすかったと思う。Flash制作の場においては常に手許に方眼のレポート用紙とペンを置いておくことをおすすめする。座標計算の作図から、レイヤーやムービークリップの構造、インスタンス名、外部ファイルのフォルダ構造等、なんでも手書きでメモしながらオーサリングすると一見アナログ的で手間なようだが、頭の中が整理され単純なミスも減り効率アップにつながるだろう。

アクションスクリプトで、カメレオン君の舌を描画

ここまでの作業により、舌先（赤点）、コントロールポイント（青点）の動きができた。（舌の根元のスタートポイント（黄点）は単にカメレオン君の口元に合わせるためだけのものでアクションスクリプトは記述していない。）それでは、この3つの点を元に、舌となる曲線をアクションスクリプトで描画しよう。

■Point　ラインを重ね合わせて立体的な曲線を描画する

まずはラインを描画するベースとなるダミーのムービークリップ（インスタンス名「lineBase_mc」）を作成する。このムービークリップはステージの原点（0,0）を基準点としておく【2】。

【2】曲線を描画するベースとなるムービークリップを作成する

このベースとなるムービークリップを作成することによってライン描画の管理がしやすくなり、また、レイヤーの重ね合わせにより描画の前後関係も把握しやすくなる。

次にlineBase_mc内のフレーム1のフレームアクションに【3】のアクションスクリプトを記述する。動く曲線の描画に必要なメソッドは下記の4つだ。描画の流れに沿って順番に見ていこう。

【3】曲線を描画するアクションスクリプト

●Method1: clear();
ラインが動いているように見せるため、描画する前にいったんすべての描画を削除している。このメソッドにより常に最新のラインのみが表示されるようになる。試しにこのメソッドを無効化して描画すると、【4】のようにすべての軌跡が残ってしまう。これはこれで使い方によってはおもしろいが、このままでは描画を重ねるにつれて処理が重くなってしまうので工夫が必要だろう。

【4】clear()メソッドを無効にした場合、軌跡がすべて残ってしまう

●Method2: lineStyle(ラインの太さ, 色, アルファ値);
ラインの太さや色、アルファ値（透明度）などのラインスタイルを指定する。

●Method3: moveTo(x座標,y座標);
描画の起点となる位置に移動する。今回の作例では黄点の位置に移動している。

●Method4: curveTo(コントロールポイントx座標, コントロールポイントy座標, ターゲットポイントx座標,ターゲットポイントy座標);
現在の描画位置（黄点）からコントロールポイント（青点）を使用して、ターゲット（赤点）となる位置まで曲線を描画する。

曲線の描画の基本的な流れは以上の通りだ。加えて、今回は舌を目立たせるためにラインの色や太さを変ながら重ね合わせ、立体感を表現している【5】。