スポンサーサイト

Flash CS3でアフィン変換

以前エントリしたアフィン変換のFlash CS3バージョンです。

画像の左上／右上／左下にある丸のいずれかをドラッグすると、それにあわせて画像が変形します。

やってること自体は以前のエントリと同じで、対象のtransform.matrixプロパティに３つの丸の座標をモトに算出した値をセットしています。

フレームアクションはこんなカンジです。

// ポインタにイベントリスナを登録する
topleft_mc.addEventListener(MouseEvent.MOUSE_DOWN,
                            onPointMouseDown);
topleft_mc.addEventListener(MouseEvent.MOUSE_UP,
                            onPointMouseUp);
topright_mc.addEventListener(MouseEvent.MOUSE_DOWN,
                             onPointMouseDown);
topright_mc.addEventListener(MouseEvent.MOUSE_UP,
                             onPointMouseUp);
bottomleft_mc.addEventListener(MouseEvent.MOUSE_DOWN,
                               onPointMouseDown);
bottomleft_mc.addEventListener(MouseEvent.MOUSE_UP,
                               onPointMouseUp);
// 対象の幅と高さ
var w:Number = image_mc.width;
var h:Number = image_mc.height;
// ポインタをドラッグ可能にするイベントハンドラ
function onPointMouseDown(evt:Event) {
	evt.target.addEventListener(Event.ENTER_FRAME,
                                     onPointEnterFrame);
}
function onPointMouseUp(evt:Event) {
	evt.target.removeEventListener(Event.ENTER_FRAME,
                                        onPointEnterFrame);
}
// フレーム毎の処理
function onPointEnterFrame(evt:Event) {
  if (evt.target.x != stage.mouseX ||
      evt.target.y != stage.mouseY) {
    evt.target.x = stage.mouseX;
    evt.target.y = stage.mouseY;
    // アフィン変換
    image_mc.transform.matrix
      = new Matrix((topright_mc.x - topleft_mc.x) / w,
                   (topright_mc.y - topleft_mc.y) / w,
                   (bottomleft_mc.x - topleft_mc.x) / h,
                   (bottomleft_mc.y - topleft_mc.y) / h,
                   topleft_mc.x,
                   topleft_mc.y);
  }
}

topleft_mc、topright_mc、bottomleft_mcは左上／右上／左下の青い円で、MOUSE_DOWNイベントハンドラとしてonPointMouseDownメソッド、MOUSE_UPイベントハンドラとしてonPointMouseUpメソッドを登録しています。

onPointMouseDownメソッドでは、イベントターゲット（３つの青丸のいずれか。クリックしたヤツ）にonPointEnterFrameメソッドをENTER_FRAMEイベントハンドラとして登録しています。onPointMouseUpメソッドではソレを外してマス。なので、青丸のいずれかをドラッグしている間だけonPointEnterFrameメソッドは実行されます。

onPointEnterFrameメソッドにアフィン変換を行う処理を記述しています。イベントターゲットの座標としてマウスカーソル位置をセットし、image_mc.transform.matrixプロパティを設定しています。image_mcは画像のムービークリップです。