2行のスクリプトで3次元の消失点をコントロールする
必要条件
Adobe Flash CS4 Professional (Flash Player 10)では、3次元の表現ができるようになりました。3次元空間の座標や設定は、オーサリング(ムービー作成)時だけでなく、もちろんスクリプトでもコントロールできます。今回は、いわば視線の方向が決まる「消失点」を、2行のスクリプトで動かしてみます。ActionScript 3.0の初級者向けの解説です。
![図001■インスタンスのz座標と3次元表現の変化([3D位置とビュー])](http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/jp/devnet/flash/articles/perspective_projectior/FA090501_002.gif) |
 |
[プロパティ]インスペクタの[3D位置とビュー]セクションで[Z]に正の値を設定すると 左図 、インスタンスが小さくなり、位置はステージ中央に向かって移動する 右図 。
3次元空間のイメージを2次元のスクリーンに表示することは「投影」といわれます。そのとき奥行き z座標 が遠いものほど小さく、また距離も縮めて表現するのが、「透視投影」または「遠近法投影」です。そして、かぎりなく遠ざかるにつれ、ある1点に向かって小さくなり、やがて消えていきます。この点を「消失点」と呼びます 図002左図 。
[消失点]は、[プロパティ]インスペクタの[3D位置とビュー]セクションで設定できます 図002右図 。その位置は、デフォルトではステージ中央です。なお、[プロパティ]インスペクタで[消失点]を変えるには、MovieClipインスタンスを選んでおかなければなりません[*1]。
図002■消失点の意味とプロパティ
 |
![図002■消失点の意味とプロパティ([3D位置とビュー])](http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/jp/devnet/flash/articles/perspective_projectior/FA090501_004.gif) |
奥行きが遠くなるにつれ、インスタンスの表示は消失点に向けて小さくなる。[消失点]は、[プロパティ]インスペクタの[3D位置とビュー]セクションで設定できる。
[*1] [プロパティ]インスペクタの[3D位置とビュー]セクションで設定する[消失点]は、ステージに対する設定です。その設定は、ステージを頂点としたタイムラインの階層に配置されるすべてのインスタンスに適用されます 「3Dグラフィック」参照 。
02 [ヘルプ]のサンプルクラス
消失点をスクリプトで制御するには、PerspectiveProjectionクラスのprojectionCenterプロパティを用います。[ヘルプ]の「例：遠近法投影」には、サンプルとなるクラスが紹介されています 図003 。
図003■消失点をコントロールするサンプルのProjectionDraggerクラス
このクラスProjectionDraggerを試すには、[ヘルプ]からスクリプトをコピーし、新規の[ActionScript AS ファイル]にペーストします[*2]。そして、ファイルはクラス名と同じProjectionDragger.asとして保存します。つぎに、新規[Flashファイル AS 3.0 ]をActionScriptファイルと同じ階層に保存します。そのうえで、Flash ムービー ファイルの[プロパティ]インスペクタで、[ドキュメント]の[クラス]に、ドキュメントクラスとしてProjectionDraggerを入力してください 図004 。
図004■[プロパティ]インスペクタでドキュメントクラスを設定
これで準備は済みました。[ムービープレビュー]を確かめると、消失点を示すインスタンスのドラッグによって、複数描かれた矩形の3次元空間における奥行きの方向が変化します 図005 。
図005■消失点がドラッグで移動できる
このサンプルのクラスProjectionDraggerは、100行近いスクリプトです。けれど、消失点のコントロールそのものは、数行のメソッドふたつで行っています。さらにいえば、消失点をコントロールするのは、projectionCenterプロパティを設定する1行のステートメントです 図006 。
図006■消失点をコントロールするのはわずか1行のステートメント
[*2] サンプルのファイルは、[ヘルプ]からダウンロードすることもできます。
03 消失点を移動する
クラスではなく、Flashムービー(FLA)ファイルのフレームアクションを使って、もっと簡単に試してみましょう。スクリプトで消失点を変えるには、PerspectiveProjectionクラスのprojectionCenterプロパティをPointインスタンスで設定します。Pointインスタンスは、new演算子でPoint()コンストラクタを呼出し、引数にxy座標を渡して生成します。
PerspectiveProjectionオブジェクトは、メインタイムライン(root)のtransform.perspectiveProjectionプロパティからアクセスします。したがって、フレームアクションでprojectionCenterプロパティを設定するには、rootを参照してつぎのようにステートメントを記述します(図007)。
root.transform.perspectiveProjection.projectionCenter = new Point(x座標値, y座標値);
図007■消失点をステージ右下隅に設定する
ここで、消失点を示す+印のMovieClipシンボルをつくりましょう。シンボルのフレームアクションには、以下のスクリプト001を記述します。このステートメントは、消失点 +印 のMovieClipインスタンスのxy座標にメインタイムライン root の消失点を設定します 図008 。
スクリプト001■インスタンスのxy座標に消失点を設定するフレームアクション
// MovieClip: 消失点を設定するシンボル
// 第1フレームアクション
root.transform.perspectiveProjection.projectionCenter = new Point(x, y);
図008■インスタンスのxy座標に消失点を設定する
この消失点となるMovieClipインスタンスを任意の場所に配置して[ムービープレビュー]で確かめると、前掲スクリプト001により消失点がインスタンスの座標に設定されます。
図009■消失点がインスタンスの位置に設定される
それではつぎに、この消失点のインスタンスを、マウスポインタの位置に合わせて動くようにしましょう。使うメソッドは、きわめてシンプルなstartDrag です[*3]。マウスポインタの座標にインスタンスの基準点を合わせるため、引数にはtrueを指定します スクリプト002 。
スクリプト002■マウスポインタの位置に合わせてインスタンスを動かす
// MovieClip: 消失点を設定するシンボル
// 第1フレームアクション
startDrag(true);
root.transform.perspectiveProjection.projectionCenter = new Point(x,y);
[ムービープレビュー]でマウスを動かすと、ポインタの位置にインスタンスは移動します。しかし、消失点はムービー開始時の設定のまま変わる様子がありません 図010 。というのは、startDrag は、ひとたびメソッドを呼出すと、マウスが動くたびにインスタンスをポインタの位置に移動します。しかし、projectionCenterプロパティは、設定したときに消失点が変わるだけで、再度設定し直されないかぎりその位置は動きません。
図010■インスタンスがマウスポインタに合わせて動いても消失点は変わらない
したがって、消失点を動かすには、projectionCenterプロパティを繰返し設定する必要があります。そのとき、ActionScript 3.0の定石は、繰返し発生するイベントにリスナーを登録して処理することです 後述05「もう一歩先へ」 。しかし、ここでは初級者向けにもっと手っ取り早いやり方をご紹介します。それは、スクリプトでなく、タイムラインを操作する手法です。
具体的には、消失点を示すMovieClipシンボルのフレームを、2フレームに延ばします 図011 。スクリプトのレイヤーは1フレームで構いませんので、消失点のシェイプを描いたレイヤーに1フレーム挿入するだけです。これで、作業は終了です。
図011■消失点を示すMovieClipシンボルのタイムラインを2フレームに延ばす
![図011■消失点を示すMovieClipシンボルのタイムラインを2フレームに延ばす([フレームを挿入])](http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/jp/devnet/flash/articles/perspective_projectior/FA090501_014.gif) |
| ↓ |
 |
タイムラインを2フレームに延ばしたので、第1フレームアクションが繰返し実行される。
[ムービープレビュー]を試すと、消失点のインスタンスがマウスポインタに合わせて動くとともに、消失点の位置も変わります 図012 。これは、MovieClipシンボルのタイムラインを2フレームに延ばしたことにより、再生ヘッドが2フレームをループして、第1フレームアクションが繰返し実行されるようになったからです。
図012■マウスポインタの動きに合わせて消失点の位置が変わる
[*3] メソッドの名前はstartDrag であっても、実際にドラッグつまりマウスボタンを押す必要はありません。ただマウスを動かせば、インスタンスはポインタの位置に合わせて移動します。
04 消失点のモーショントゥイーン
消失点はモーショントゥイーンさせることができません。けれど、前項で作成した消失点のMovieClipインスタンスを使えば、トゥイーンアニメーションの効果が得られます。まず、マウスポインタを追いかける必要はなくなりますので、前掲スクリプト002からstartDrag メソッドのステートメントは除きます。つまり、スクリプト001に戻す訳です。
// startDrag true ; // コメントアウトroot.transform.perspectiveProjection.projectionCenter = new Point x,y ;
つぎに、消失点のシンボルの編集は終え、メインタイムラインで消失点のインスタンスのモーショントゥイーンを作成します 図013 [*4]。
図013■消失点のインスタンスをモーショントゥイーンで動かす
消失点のMovieClipシンボルは、相変わらず2フレームの構成です。したがって、第1フレームアクションが繰返し実行されますので、消失点が1フレームおきに再設定されることになります。[ムービープレビュー]を確かめると、モーショントゥイーンさせたMovieClipインスタンスに合わせて消失点が移動します。
図014■インスタンスのモーショントゥイーンに合わせて消失点が動く
モーショントゥイーンさせたMovieClipインスタンスに合わせて消失点が移動する。
[*4] Flash CS4におけるモーショントゥイーンの作成の仕方は、以前のバージョンとは変わりました。詳しくは、マイコミジャーナル「『Adobe Flash CS4』でオブジェクトベースアニメーションを実際に作る! その1 」やThink IT「Flashの新トゥイーンモデルはコレ！」などの記事が参考になるでしょう。
05 もう一歩先へ
今回は初級者向けの簡便な記述をご紹介しました。しかし、もちろんこの書き方は、洗練されたスクリプトとはいえません。第1に、MovieClipシンボルの第1フレームアクションは、1フレームおきの実行になります。第2に、スクリプト002では、1度呼出せば済むstartDrag メソッドまで、繰返し処理されています。
ActionScript 3.0で、繰返す必要のある処理だけを毎フレーム実行するには、イベントリスナーを用いるのが定石です。その詳しい解説は他の記事に譲り[*5]、本稿ではイベントリスナー addEventListener メソッド を使ったスクリプト002の書替え結果だけ掲載します スクリプト003 。
スクリプト003■イベントリスナーを用いた消失点のアニメーション
// MovieClip: 消失点を設定するシンボル
// 第1フレームアクション
startDrag(true);
addEventListener(Event.ENTER_FRAME, setProjectionCenter);
function setProjectionCenter(eventObject:Event):void {
root.transform.perspectiveProjection.projectionCenter = new Point(x, y);
}
なお、PerspectiveProjectionクラスには、projectionCenterプロパティ以外にも、焦点距離を示すfocalLengthや、視野を定めるfieldOfViewなどのプロパティがあります。詳しくは、「2Dビューへの3Dオブジェクトの投影」をお読みください。
[*5]「ActionScript 3.0書き方教室」やgihyo.jp「イベントリスナーを使う」などをご参照ください。
