■Mailing List: ActionScript 3.0
FLASH OOP勉強会
数学的なベクトルと行列からMatrix/Matrix3Dクラスを理解する
| Date: 2008年12月11日 |
Product: Flash |
Platform: All |
Version: CS4/ActionScript 3.0 |
1. ベクトルと行列および変換行列
勉強会で用いたスライドは以下のとおり。
上記タイトルをクリックするとSWFが開く。
なお、今回の数学的な解説は「変換行列を数学的に捉える」に簡単な概略がまとめてある。
2. Matrixクラス
Matrixクラスの変換行列は、a、b、c、d、tx、tyの6つの要素(プロパティ)が操作できる。下図001をクリックすると、SWFが開いて各値の変更結果を確かめられる。「Matrix」または「Rotate」のラジオボタンを選択したうえで、UIのボタンを操作するかテキストボックスに数値を入力する。
図001■変換行列のシミュレーション
3つの角のポイントをドラッグすると、その位置に合わせて矩形のインスタンスが変形するサンプル(図002)のスクリプトは、Adobeデベロッパーセンターの「Matrixクラス − 変換行列」で解説した。
図002■3つの角のポイントをドラッグするとインスタンスが変形する
3. Matrix3Dクラス[*1]
Matrix3D.prependRotation()メソッドは、インスタンス自身の変換行列(transform.matrix3DプロパティのMatrix3Dインスタンス)よりも前に(prepend)回転行列を乗じる(スクリプト001)。なお、インスタンスに対して3次元座標の操作(たとえばDisplayObject.zプロパティの設定)を行わないと、インスタンスのMatrix3Dインスタンスが生成されないことに注意。
スクリプト001■Matrix3D.prependRotation()メソッドでインスタンスの基準点を中心に水平回転
|
// タイムライン: メイン
// 第1フレームアクション
// MovieClipインスタンスmy_mcを配置
var nRotationY:Number = 30;
my_mc.z = 0;
my_mc.transform.matrix3D.prependRotation(nRotationY, Vector3D.Y_AXIS);
|
Matrix3D.appendRotation()メソッドは、インスタンスの変換行列の後から(append)回転行列を乗じる。したがって、インスタンスの基準点で回転するには、一旦親タイムラインの基準点に平行移動してから回転し、その後位置を戻す必要がある(スクリプト002)。
スクリプト002■Matrix3D.appendRotation()メソッドでインスタンスの基準点を中心に水平回転
|
// タイムライン: メイン
// 第1フレームアクション
// MovieClipインスタンスmy_mcを配置
var nRotationY:Number = 30;
var nX:Number = my_mc.x;
var nY:Number = my_mc.y;
my_mc.z = 0;
my_mc.transform.matrix3D.appendTranslation(-nX, -nY, 0);
// my_mc.transform.matrix3D.prependRotation(nRotationY, Vector3D.Y_AXIS);
my_mc.transform.matrix3D.appendRotation(nRotationY, Vector3D.Y_AXIS);
my_mc.transform.matrix3D.appendTranslation(nX, nY, 0);
|
Matrix3D.prependRotation()メソッドは、インスタンス自身の変換行列がまだ適用される前(prepend)のデフォルト(単位行列)の状態に回転行列を乗じる。そして、その後にインスタンスの変換行列が掛合わせられることになる。この処理を後(append)に乗じるメソッドで行ったのが、以下のスクリプト003だ。変換行列のMatrix3Dインスタンスを後から乗じるメソッドは、Matrix3D.append()メソッドになる。
スクリプト003■Matrix3D.appendRotation()でMatrix3D.prependRotation()メソッドをシミュレート
|
// タイムライン: メイン
// 第1フレームアクション
// MovieClipインスタンスmy_mcを配置
var nRotationY:Number = 30;
var nX:Number = my_mc.x;
var nY:Number = my_mc.y;
my_mc.z = 0;
var myMatrix3D:Matrix3D = my_mc.transform.matrix3D;
my_mc.transform.matrix3D = new Matrix3D(); // 単位行列を設定
my_mc.transform.matrix3D.appendRotation(nRotationY, Vector3D.Y_AXIS);
my_mc.transform.matrix3D.append(myMatrix3D);
|
なお、Matrix3Dクラスを使ったスクリプトのサンプルを、Adobeデベロッパーセンターの「Matrix3Dクラス − 変換行列2」で解説した。
4. Graphics.drawTriangles()メソッド[*1]
Graphics.drawTriangles()メソッドは、画像を複数の三角形に分割して、それらを変形したうえで合成する。3つの引数には、分割する三角形の座標や頂点番号、変形の仕方などの情報を指定する。
drawTriangles(頂点座標:Vector., 頂点番号:Vector. = null, uvtデータ:Vector. = null):void
図003■4角をドラッグして任意の四角形に変形する
* 図をクリックすると、SWFが開く[*2]。
|
[*1] Matrix3DクラスとGraphics.drawTriangles()メソッドは、Flash Player 10から実装された。したがって、拙著にはその解説はない。
[*2] このサンプルスクリプトは、11月18日発売の「Web Designing」2008年12月号の「特集2：Adobe Creative Suite 4まるわかりガイド」で紹介した。スクリプトの解説およびソースファイルについては、本誌をご参照いただきたい。なお、年明けの2009年1月にGraphics.drawTriangles()メソッドについて解説した記事を、Adobeデベロッパーセンターに寄稿する予定である。
|
作成者: 野中文雄
作成日: 2008年12月16日
