INDEX

• 01 3次元空間の表現と消失点
• 02 [ヘルプ]のサンプルクラス
• 03 消失点を移動する
• 04 消失点のモーショントゥイーン
• 05 もう一歩先へ

サンプルファイル

• サンプルファイル(Flash CS4形式/約28KB)

Adobe Flash CS4 Professional (Flash Player 10)では、3次元の表現ができるようになりました。3次元空間の座標や設定は、オーサリング(ムービー作成)時だけでなく、もちろんスクリプトでもコントロールできます。今回は、いわば視線の方向が決まる「消失点」を、2行のスクリプトで動かしてみます。ActionScript 3.0の初級者向けの解説です。

01 3次元空間の表現と消失点

Flash CS4では、[プロパティ]インスペクタで、奥行きを定めるz座標が設定できます。[3D位置とビュー]セクションで[Z]に正の値を設定すると(図001左図)、3次元空間の奥行きを表現するためインスタンスが小さくなります。また、同時に位置もステージ中央に向かって移動します(図001右図)。

図001■インスタンスのz座標と3次元表現の変化

[プロパティ]インスペクタの[3D位置とビュー]セクションで[Z]に正の値を設定すると(左図)、インスタンスが小さくなり、位置はステージ中央に向かって移動する(右図)。

3次元空間のイメージを2次元のスクリーンに表示することは「投影」といわれます。そのとき奥行き(z座標)が遠いものほど小さく、また距離も縮めて表現するのが、「透視投影」または「遠近法投影」です。そして、かぎりなく遠ざかるにつれ、ある1点に向かって小さくなり、やがて消えていきます。この点を「消失点」と呼びます(図002左図)。

[消失点]は、[プロパティ]インスペクタの[3D位置とビュー]セクションで設定できます(図002右図)。その位置は、デフォルトではステージ中央です。なお、[プロパティ]インスペクタで[消失点]を変えるには、MovieClipインスタンスを選んでおかなければなりません^[*1]。

図002■消失点の意味とプロパティ

奥行きが遠くなるにつれ、インスタンスの表示は消失点に向けて小さくなる。[消失点]は、[プロパティ]インスペクタの[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■[プロパティ]インスペクタでドキュメントクラスを設定

[プロパティ]インスペクタの[ドキュメント]の設定で、[クラス]にドキュメントクラスとしてProjectionDraggerを入力

これで準備は済みました。[ムービープレビュー]を確かめると、消失点を示すインスタンスのドラッグによって、複数描かれた矩形の3次元空間における奥行きの方向が変化します(図005)。

図005■消失点がドラッグで移動できる

消失点のインスタンスをドラッグすると、3次元の奥行きを表す方向が変わる。

このサンプルのクラスProjectionDraggerは、100行近いスクリプトです。けれど、消失点のコントロールそのものは、数行のメソッドふたつで行っています。さらにいえば、消失点をコントロールするのは、projectionCenterプロパティを設定する1行のステートメントです(図006)。

図006■消失点をコントロールするのはわずか1行のステートメント

消失点をコントロールするのはふたつのメソッドで、しかも具体的にはprojectionCenterプロパティを設定する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■消失点をステージ右下隅に設定する

メインタイムラインであるrootを参照して、transform.perspectiveProjectionからprojectionCenterプロパティを設定する。

ここで、消失点を示す+印のMovieClipシンボルをつくりましょう。シンボルのフレームアクションには、以下のスクリプト001を記述します。このステートメントは、消失点(+印)のMovieClipインスタンスのxy座標にメインタイムライン(root)の消失点を設定します(図008)。

スクリプト001■インスタンスのxy座標に消失点を設定するフレームアクション

// MovieClip: 消失点を設定するシンボル
// 第1フレームアクション
root.transform.perspectiveProjection.projectionCenter = new Point(x, y);

図008■インスタンスのxy座標に消失点を設定する

MovieClipインスタンスのxy座標を、メインタイムライン(root)のprojectionCenterプロパティに設定する。

この消失点となるMovieClipインスタンスを任意の場所に配置して[ムービープレビュー]で確かめると、前掲スクリプト001により消失点がインスタンスの座標に設定されます。

図009■消失点がインスタンスの位置に設定される

スクリプト001により、+印のMovieClipインスタンスの座標に、消失点が設定される。

それではつぎに、この消失点のインスタンスを、マウスポインタの位置に合わせて動くようにしましょう。使うメソッドは、きわめてシンプルなstartDrag()です^[*3]。マウスポインタの座標にインスタンスの基準点を合わせるため、引数にはtrueを指定します(スクリプト002)。

スクリプト002■マウスポインタの位置に合わせてインスタンスを動かす

// MovieClip: 消失点を設定するシンボル
// 第1フレームアクション
startDrag(true);
root.transform.perspectiveProjection.projectionCenter = new Point(x,y);

[ムービープレビュー]でマウスを動かすと、ポインタの位置にインスタンスは移動します。しかし、消失点はムービー開始時の設定のまま変わる様子がありません(図010)。というのは、startDrag()は、ひとたびメソッドを呼出すと、マウスが動くたびにインスタンスをポインタの位置に移動します。しかし、projectionCenterプロパティは、設定したときに消失点が変わるだけで、再度設定し直されないかぎりその位置は動きません。

図010■インスタンスがマウスポインタに合わせて動いても消失点は変わらない

startDrag()メソッドでインスタンスがマウスポインタに合わせて動いても、消失点の位置は最初のまま変わらない。

したがって、消失点を動かすには、projectionCenterプロパティを繰返し設定する必要があります。そのとき、ActionScript 3.0の定石は、繰返し発生するイベントにリスナーを登録して処理することです(後述05「もう一歩先へ」)。しかし、ここでは初級者向けにもっと手っ取り早いやり方をご紹介します。それは、スクリプトでなく、タイムラインを操作する手法です。

具体的には、消失点を示すMovieClipシンボルのフレームを、2フレームに延ばします(図011)。スクリプトのレイヤーは1フレームで構いませんので、消失点のシェイプを描いたレイヤーに1フレーム挿入するだけです。これで、作業は終了です。

図011■消失点を示すMovieClipシンボルのタイムラインを2フレームに延ばす

↓

タイムラインを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「イベントリスナーを使う」などをご参照ください。

著者について