まずは，お題をSWFムービーでお見せしよう。というのは，今回では完結せず，残りを次回に持ち越すことになるからだ。目指すコンテンツの動きを，先に確かめてもらいたい。矩形のインスタンスをドラッグすると，回るように動く。マウスを振り回せば，インスタンスがくるくる回る。そして放すと，滑るように減速して，やがて止まる。どこかで見た動きだと感じる読者も少なくないかもしれない。

課題は大きくふたつある。第1は，初めにマウスクリックした座標で，インスタンスを回すことだ。Matrix3Dクラスを使った3次元空間の回転は，第36回「Matrix3Dクラスの後から加える変換」で学習した。今回は2次元平面なので，Matrixクラスを使う。もっとも，考え方は基本的に変わらない。

課題の第2は，インスタンスを回す速さはどのように決めたらよいかだ。単純にマウスポインタを動かす速さだけでなく，インスタンスのどこをどの方向にドラッグするかによっても回り方は変わる。実は，ここでベクトルの外積が登場する。ただし，この課題については，次回のお楽しみということになる。

2次元平面のインスタンスを任意の座標で回すには

ということで，今回取組む課題は，クリックした座標でインスタンスを回しながらドラッグすることだ。まずは，Matrixクラスについて簡単に説明しよう。このクラスもMatrix3Dと同じく，行列によりインスタンスの座標を変換する。もちろん，2次元なのでz軸はもたない。行列による座標変換で大切なのは，原点が親タイムラインの基準点になるということだ。

すると，たとえばインスタンスの基準点を中心に変形したいときはどうするか。まず，変換の中心にしたい点が親インスタンスの基準点になるように平行移動する。そのうえでつぎに，変形（伸縮・拡大）を行えば，中心にしたい点（= 親インスタンスの基準点）が原点となって変換される。その後，インスタンスを改めてもとの位置に戻せばよい（図1）⁠。

それではドラッグは一旦脇に置いて，インスタンスをクリックした座標で回してみよう。使うメソッドは，平行移動がMatrix.translate()，回転はMatrix.rotate()になる。Matrix3Dクラスと違い，先に加える変換（prepend）のメソッドはないので，（⁠appendをあえてつける必要がなく）メソッド名は端的だ。なお，Matrix.rotate()メソッドの引数に渡す角度は，度数でなくラジアンであることに気をつけてほしい。

Matrixオブジェクト.translate(x座標, y座標)
Matrixオブジェクト.rotate(ラジアン角)

以下のスクリプト1を回したいMovieClipシンボルのフレームアクションに書くと，インスタンスはクリックした座標で回転を始め，マウスボタンを放すまで回り続ける（図2）⁠。なお，マウスポインタを動かしても，インスタンスの回転の中心はそのまま変わらない。

// フレームアクション: マウスプレスした座標で回すMovieClipシンボル
var nX:Number;
var nY:Number;
var angularVelocity:Number = 5 * Math.PI / 180;
addEventListener(MouseEvent.MOUSE_DOWN, xMouseDown);
function xMouseDown(eventObject:MouseEvent):void {
  nX = parent.mouseX;
  nY = parent.mouseY;
  addEventListener(Event.ENTER_FRAME, xDrag);
  stage.addEventListener(MouseEvent.MOUSE_UP, xMouseUp);
}
function xMouseUp(eventObject:MouseEvent):void {
  removeEventListener(Event.ENTER_FRAME, xDrag);
  stage.removeEventListener(MouseEvent.MOUSE_UP, xMouseUp);
}
function xDrag(eventObject:Event):void {
  var myMatrix:Matrix = transform.matrix;
  myMatrix.translate(-nX, -nY);
  myMatrix.rotate(angularVelocity);
  myMatrix.translate(nX, nY);
  transform.matrix = myMatrix;   // 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に設定し直さなければならないことだ。この設定を忘れると，インスタンスは何も変わらない。