3.5分2次元平面のインスタンスを任意の座標で回すにはMatrixTransformerクラスのメソッドでインスタンスを任意の座標で回すインスタンスを回しながらドラッグするまずは、お題をSWFムービーでお見せしよう。いうのは、今回では完結せず、残りを次回に持ち越すことになるからだ。目指すコンテンツの動きを、先に確かめてもらいたい。矩形のインスタンスをドラッグすると、回るように動く。マウスを振り回せば、インスタンスがくるくる回る。放すと、滑るように減速して、やがて止まる。どこかで見た動きだと感じる読者も少なくないかもしれない。インスタンスがドラッグで回り放すと滑る(SWF)課題は大きくふたつある。第1は、初めにマウスクリックした座標で、インスタンスを回すことだ。Matrix3Dクラスを使った3次元空間の回転は、第36回「Matrix3Dクラスの後から加える変換」で学習した。今回は2次元平面なので、Matrixクラスを使う。考え方は基本的に変わらない。課題の第2は、インスタンスを回す速さはどのように決めたらよいかだ。単純にマウスポインタを動かす速さだけでなく、インスタンスのどこをどの方向にドラッグするかによっても回り方は変わる。実は、ここでベクトルの外積が登場する。この課題については、次回のお楽しみということになる。2次元平面のインスタンスを任意の座標で回すにはということで、今回取組む課題は、クリックした座標でインスタンスを回しながらドラッグすることだ。Matrixクラスについて簡単に説明しよう。このクラスもMatrix3Dと同じく、行列によりインスタンスの座標を変換する。2次元なのでz軸はもたない。行列による座標変換で大切なのは、原点が親タイムラインの基準点になるということだ。すると、たとえばインスタンスの基準点を中心に変形したいときはどうするか。変換の中心にしたい点が親インスタンスの基準点になるように平行移動する。親インスタンスの基準点)が原点となって変換される。その後、インスタンスを改めてもとの位置に戻せばよい(図1⁠)⁠。親インスタンスの基準点に移動して変形したうえでもとの位置に戻す(1)親インスタンスの基準点に移動(2)変形(伸縮・回転)(3)もとの位置に戻すそれではドラッグは一旦脇に置いて、インスタンスをクリックした座標で回してみよう。使うメソッドは、平行移動がMatrix.translate()、回転はMatrix.rotate()になる。Matrix3Dクラスと違い、先に加える変換(prepend)のメソッドはないので、(⁠appendをあえてつける必要がなく)メソッド名は端的だ。Matrix.rotate()メソッドの引数に渡す角度は、度数でなくラジアンであることに気をつけてほしい。y座標)Matrixオブジェクト.rotate(ラジアン角)以下のスクリプト1を回したいMovieClipシンボルのフレームアクションに書くと、インスタンスはクリックした座標で回転を始め、マウスボタンを放すまで回り続ける(図2⁠)⁠。マウスポインタを動かしても、インスタンスの回転の中心はそのまま変わらない。Matrixオブジェクトを再設定}インスタンスをクリックする(InteractiveObject.mouseDownイベント)とリスナー関数(xMouseDown())が呼出され、親インスタンスから見たマウス座標を変数(nXとnY)に記録する。インスタンスのDisplayObject.enterFrameイベントに回転のアニメーション(xDrag()⁠)⁠、StageオブジェクトのInteractiveObject.mouseUpイベントにその停止(xMouseUp())のリスナー関数をそれぞれ登録している。回転のアニメーションを行うリスナー関数(xDrag())は、まずインスタンスのプロパティDisplayObject.transformからTransform.matrixを参照して、インスタンスに適用されているMatrixオブジェクト(myMatrix)を得る。つぎに、前述のとおり、インスタンスのクリック位置を一旦親インスタンスの基準点に平行移動(Matrix.translate())して、そこで回転(Matrix.rotate())してから、もとの位置に戻して(Matrix.translate())いる。この座標変換の手順は、基本的にMatrix3Dクラスと変わらない。最後にひとつ大きく異なる点がある。座標変換を加えたMatrixオブジェクトは、改めてインスタンスのtransform.matrixに設定し直さなければならないことだ。この設定を忘れると、インスタンスは何も変わらない。MatrixTransformerクラスのメソッドでインスタンスを任意の座標で回すMatrixTransformerクラスのメソッドを使うと、インスタンスが任意の座標で回せる。MatrixTransformerクラスはMatrixオブジェクトを扱う静的メソッドで成立ち、Matrixクラスを補うクラスだ。静的メソッドMatrixTransformer.rotateAroundExternalPoint()は、Matrixオブジェクトを親から見た指定座標で回す[1]⁠。度数角)第4引数に渡す角度が度数であることに注意してほしい。クラスによって角度の単位がまちまちなのはいただけない。自衛のためには、角度絡みの新しいプロパティやメソッドを使うときは、必ずヘルプを確かめることしかない。前掲スクリプト1の座標変換をMatrixTransformer.rotateAroundExternalPoint()メソッドで書替えたのがつぎのスクリプト2だ。アニメーションのリスナー関数(xDrag())の中身がすっきりした。フレームあたりの回転角(angularVelocity)は度数に直している。fl.motionパッケージはフレームアクションに自動的には読込まれないので、MatrixTransformerクラスのimport宣言が加えられた。myMatrix;}[1]インスタンス自身から見た座標で回す静的メソッドMatrixTransformer.rotateAroundInternalPoint()もある。詳しくはFumioNonaka.com「MatrixTransformerクラスによりインスタンスを任意の座標で回す」を参照してほしい。インスタンスを回しながらドラッグする今回の課題としては、あとインスタンスを回しながらドラッグできればよい。回す速さは一定のままで、マウスボタンを放したら直ちに止まってしまってよい。残りは次回に取組む第2の課題だ。手を加えるのは、前掲スクリプト2よりスクリプト1の方がやりやすい。ステートメント数が減るというのは、簡単になる反面、細かな調整はしにくくなりがちなのだ。スクリプト1のアニメーションのリスナー関数(xDrag)における座標変換は、(⁠1)インスタンスを都合の良い位置に移動し、(⁠2)回転の変換を加えてから、(⁠3)もとの位置に戻した。インスタンスをドラッグするには、(⁠3)で新たなマウスポインタの座標に移動すればよい。関数をつぎのように修正する。nNewY;}今回の課題かぎりであれば、この修正で差支えない。次回の課題ではベクトルの演算が中心になる。そこで、xy座標はPointオブジェクトで扱うように整理しておこう。前掲スクリプト1をそのように書替えた結果がつぎのスクリプト3だ。インスタンスは初めにクリックした座標を中心に回りながら、ドラッグできるようになる(図3⁠)⁠。インスタンスは初めにクリックした座標を中心に回りながらドラッグされる次回はいよいよ、インスタンスの回る速さをベクトルの外積から導く。tuned!」(⁠お見逃しなく!※2⁠)⁠。tuned」は、もともとTVやラジオなどで「チャンネルはそのまま」という意味で使われてきた。放送以外でも、さらに数週間先の話題にも使われるようになった。今回解説した次のサンプルファイルがダウンロードできます。Ltd.ページ内容の全部あるいは一部を無断で利用することを禁止します⁠。個別にライセンスが設定されている記事等はそのライセンスに従います。