PR

 ムービー上のインスタンスの位置を指定するには,行列(マトリクス)を使う方法があります。マトリクスを管理する「Matrix(マトリクス)クラス」を使用すると,位置や角度,拡大率などの情報をスナップショット的に扱えます。さらに,個々のマトリクスを合成して移動・回転・拡大/縮小するなど,柔軟な処理が可能になります。

 Flashムービーでは,同じシンボルのインスタンスでも,位置・角度・拡大率を変化させることによって,見た目の印象を変化させることができます(図1)。また,位置・角度・拡大率を連続して変化させると,簡単なアニメーションをしているような動きを作ることもできます。

図1●位置・角度・拡大率の変化
図1●位置・角度・拡大率の変化
[画像のクリックでサンプルを表示]

 インスタンスの位置・角度・拡大率はそれぞれ,「xプロパティ」「yプロパティ」「rotationプロパティ」「scaleXプロパティ」「scaleYプロパティ」で管理されていることは前回に説明しましたね。Flashには実は,この位置・角度・拡大率の情報を,ひとまとめにして扱うことのできる仕組みが用意されています。それが,今回ご紹介するMatrixクラスを使った処理です。

マトリックスは位置,角度,拡大率のスナップショット情報

 マトリクスとはいったい何なのでしょう? 初めてこの言葉や仕組みを耳にする方もいらっしゃるでしょう。まずは,実際にどんな風に扱われているのかを見てみましょう。

 新規Flashドキュメントを作成し,任意の名前で保存します。さらに,ステージ上に適当な絵を一つ描き,[F8]キーを押して,シンボル化します。ここまではOKですか? 今,ステージ上には,一つのインスタンスが配置されている状態となっていますね。次に,このインスタンスにインスタンス名を付けます。今回は「targetMC」と名前を付けておきましょう。(図2

図2●シンボル化し,インスタンス名を付ける
図2●シンボル化し,インスタンス名を付ける

 さて,一つのインスタンスがステージ上に存在しているわけですが,実はこのインスタンスには,すでに「マトリクス」が設定されているのです。実際に確かめてみましょう。タイムラインの1フレーム目を選択し,次のようにコードを記述してください。

trace(targetMC.transform.matrix);

 このコードは,「インスタンスtargetMCの持つ,変形情報(transform)のうち,マトリクスに関する情報(matrix)を表示しなさい」という意味です。[ムービープレビュー]で結果を確かめてみましょう。図3のように,六つのパラメータらしきものと,数値が列記されていることが確認できますね。

図3●マトリクス情報を表示したところ
図3●マトリクス情報を表示したところ

 このように,

インスタンス名.transform.matrix

というステートメントで,そのインスタンスの「マトリクス」情報を取得できます。このとき,[出力]ウィンドウに表示された,六つのパラメータが「マトリクス」の情報になります。詳しい解説は後ほどしますのでしばしお待ちを。ここではもう少し,検証を続けてみましょう。

 ムービープレビューを閉じたら,今度は,ステージ上のインスタンス「targetMC」に対して[自由変形ツール]などを使って,位置や角度を変えたり,拡大・縮小してみましょう(図4)。

図4●インスタンスの位置などを変更
図4●インスタンスの位置などを変更

 変更がすんだら,再び[ムービープレビュー]を実行し,先ほど記述しておいたコードを実行します。すると,六つのパラメータの値は,先ほどと違う値になっていますね(図5)。

図5●マトリクスの情報が更新されている
図5●マトリクスの情報が更新されている

 手作業で移動したり,回転したため,微妙な値の小数が表示されていますが,ともあれ,ステージ上のインスタンスの位置を移動したり変形すると,マトリクスの情報が更新されることが確認できました。

 このようにマトリクスは,インスタンスの数ある情報の中から,位置,回転,拡大率の情報のみを,独立して扱えるような仕組みとなっています。ちょうど,インスタンスの位置や変形の状態の「スナップショット」のような仕組みと言えます。