ActionScript 3.0で始めるオブジェクト指向スクリプティング

第57回 インスタンスをクリックした点で回しながらドラッグする

この記事を読むのに必要な時間:およそ 4 分

MatrixTransformerクラスのメソッドでインスタンスを任意の座標で回す

MatrixTransformerクラスのメソッドを使うと,インスタンスが任意の座標で回せる。MatrixTransformerクラスはMatrixオブジェクトを扱う静的メソッドで成立ち,Matrixクラスを補うクラスだ。静的メソッドMatrixTransformer.rotateAroundExternalPoint()は,Matrixオブジェクトを親から見た指定座標で回す※1)⁠

MatrixTransformer.rotateAroundExternalPoint(Matrixオブジェクト, 親空間のx座標, 親空間のy座標, 度数角)

第4引数に渡す角度が度数であることに注意してほしい。クラスによって角度の単位がまちまちなのはいただけない。自衛のためには,角度絡みの新しいプロパティやメソッドを使うときは,必ずヘルプを確かめることしかない。

前掲スクリプト1の座標変換をMatrixTransformer.rotateAroundExternalPoint()メソッドで書替えたのがつぎのスクリプト2だ。アニメーションのリスナー関数(xDrag())の中身がすっきりした。また,フレームあたりの回転角(angularVelocity)は度数に直している。そして,fl.motionパッケージはフレームアクションに自動的には読込まれないので,MatrixTransformerクラスのimport宣言が加えられた。

スクリプト2 MatrixTransformer.rotateAroundExternalPoint()メソッドで指定座標を中心に回す

// フレームアクション: マウスプレスした座標で回すMovieClipシンボル
import fl.motion.MatrixTransformer;
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);
  */
  MatrixTransformer.rotateAroundExternalPoint(myMatrix, nX, nY, angularVelocity);
  transform.matrix = myMatrix;
}
※1)
インスタンス自身から見た座標で回す静的メソッドMatrixTransformer.rotateAroundInternalPoint()もある。詳しくはFumioNonaka.comMatrixTransformerクラスによりインスタンスを任意の座標で回すを参照してほしい。

インスタンスを回しながらドラッグする

今回の課題としては,あとインスタンスを回しながらドラッグできればよい。回す速さは一定のままで,マウスボタンを放したら直ちに止まってしまってよい。残りは次回に取組む第2の課題だ。

手を加えるのは,前掲スクリプト2よりスクリプト1の方がやりやすい。ステートメント数が減るというのは,簡単になる反面,細かな調整はしにくくなりがちなのだ。

スクリプト1のアニメーションのリスナー関数(xDrag)における座標変換は,⁠1)インスタンスを都合の良い位置に移動し,⁠2)回転の変換を加えてから,⁠3)もとの位置に戻した。インスタンスをドラッグするには,⁠3)で新たなマウスポインタの座標に移動すればよい。たとえば,関数をつぎのように修正する。

function xDrag(eventObject:Event):void {
  var nNewX:Number = parent.mouseX;
  var nNewY:Number = parent.mouseY;
  var myMatrix:Matrix = transform.matrix;
  myMatrix.translate(-nX, -nY);
  myMatrix.rotate(angularVelocity);
  // myMatrix.translate(nX, nY);
  myMatrix.translate(nNewX, nNewY);
  transform.matrix = myMatrix;
  nX = nNewX;
  nY = nNewY;
}

今回の課題かぎりであれば,この修正で差支えない。しかし,次回の課題ではベクトルの演算が中心になる。そこで,xy座標はPointオブジェクトで扱うように整理しておこう。前掲スクリプト1をそのように書替えた結果がつぎのスクリプト3だ。インスタンスは初めにクリックした座標を中心に回りながら,ドラッグできるようになる図3)⁠

スクリプト3 インスタンスをクリックした座標で回しながらドラッグする

// フレームアクション: クリックした座標で回しながらドラッグするMovieClipシンボル
// var nX:Number;
// var nY:Number;
var lastMouse:Point;
var angularVelocity:Number = 5 * Math.PI / 180;
addEventListener(MouseEvent.MOUSE_DOWN, xMouseDown);
function xMouseDown(eventObject:MouseEvent):void {
  // nX = parent.mouseX;
  // nY = parent.mouseY;
  lastMouse = new Point(parent.mouseX, 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 currentMouse:Point = new Point(parent.mouseX, parent.mouseY);
  var myMatrix:Matrix = transform.matrix;
  // myMatrix.translate(-nX, -nY);
  myMatrix.translate(-lastMouse.x, -lastMouse.y);
  myMatrix.rotate(angularVelocity);
  // myMatrix.translate(nX, nY);
  myMatrix.translate(currentMouse.x, currentMouse.y);
  transform.matrix = myMatrix;
  lastMouse = currentMouse.clone();
}

図3 インスタンスは初めにクリックした座標を中心に回りながらドラッグされる

図3 インスタンスは初めにクリックした座標を中心に回りながらドラッグされる

次回はいよいよ,インスタンスの回る速さをベクトルの外積から導く。⁠Stay tuned!」⁠お見逃しなく!※2)⁠

※2)
Stay tunedは,もともとTVやラジオなどで「チャンネルはそのまま」という意味で使われてきた。しかし,放送以外でも,さらに数週間先の話題にも使われるようになった。⁠乞うご期待」と訳されることもある(ミッキー・グレースの頑張れニッポン!英語でコーヒータイム(24)⁠ stay put参照)⁠

今回解説した次のサンプルファイルがダウンロードできます。

著者プロフィール

野中文雄(のなかふみお)

ソフトウェアトレーナー,テクニカルライター,オーサリングエンジニア。上智大学法学部卒,慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で,総務・人事,企画,外資系企業担当営業などに携わる。その後,マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング,コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入