Life is beautiful: 習作UI：初めてのFlash その３

習作UI：初めてのFlash その３

2007.05.22

　「ソース公開希望」というコメントをいただいたので、さっそくソースを公開。なにしろ、ActionScriptをさわったのは今日が初めてなので、何かとんでもなくまとはずれなことをしている可能性もあるので、そこは御容赦のほどを。

　ソースコードを公開するだけでは十分ではないところがFlashの悩ましいところだが、とりあえず作り方を説明しておく。

１．移動用の丸を描き、Moverという名前のButton Symbolに変換する。そして、Overのkeyframeの時のみその丸を表示するようにしておく。ちなみに、アンカーが中心になるようにしておく。
２．回転用のドーナッツを描き、Rotatorという名前のButton Symbolに変換する。同じく、Overのkeyframeの時のみそのドーナッツを表示するようにしておく。やはり、アンカーが中心になるようにしておく。
３．Mover、Rotatorのインスタンスを一つづつ作り、それを二つ合わせてPicture Controlという名前のMovie Symbolにする。やはり、アンカーが中心になるように配置しておく。
４．Moverのインスタンスを"mover"、Rotatorのインスタンスを"rotator"という名前にしておく。
５．Picture Controlのインスタンスをダブルクリックして、Edit in Place状態にする。
６．Scriptという名前のレイヤーを追加し、下のソースコードをActionとして貼り付ける。
７．トップのステージに戻り、適当な大きさの画像をインポートする。
８．インポートした画像と、Picture Controlのインスタンスを合わせてMovie Symbolに変換する。
９．それ（インスタンス）をダブルクリックして、Edit in Place状態にし、アンカーが中心になるように配置する。
１０．他の画像も貼り付けたければ7～９をさらに繰り返す。

　これで完成である。アンカーの位置がちゃんと中心になっていないと、座標計算が狂うのでそこだけは注意していただきたい。ActionScript3.0で書かれているので、CS3以前のものでは動かない（はず）。私はAdobe Flash CS3 Professionalを使っているので、Basic版で同じことが可能かどうかは未確認である。

//----------------------------------------------------------------------
// Global variables for "Mover" (some of them are shared)
//----------------------------------------------------------------------
var dragging = false;
var anchorX, anchorY;
var relX, relY;
var pictureFrame;

//----------------------------------------------------------------------
// Event handlers for "Mover"
//----------------------------------------------------------------------
function dragBeginHandler(event:MouseEvent):void {
dragging = true;
anchorX = event.stageX;
anchorY = event.stageY;
pictureFrame = event.target.parent.parent;
relX = pictureFrame.x - anchorX;
relY = pictureFrame.y - anchorY;
stage.addEventListener(MouseEvent.MOUSE_UP, dragEndHandler);
stage.addEventListener(MouseEvent.MOUSE_MOVE, dragMoveHandler);
}

function dragEndHandler(event:MouseEvent):void {
dragging = false;
stage.removeEventListener(MouseEvent.MOUSE_UP, dragEndHandler);
stage.removeEventListener(MouseEvent.MOUSE_MOVE, dragMoveHandler);
}

function dragMoveHandler(event:MouseEvent):void {
if (dragging) {
pictureFrame.x = relX + event.stageX;
pictureFrame.y = relY + event.stageY;
}
}

mover.addEventListener(MouseEvent.MOUSE_DOWN, dragBeginHandler);

//----------------------------------------------------------------------
// Global variables for "Rotator"
//----------------------------------------------------------------------
var rotating = false;
var anchorA, offsetA;

//----------------------------------------------------------------------
// Event handlers for "Rotator"
//----------------------------------------------------------------------
function rotBeginHandler(event:MouseEvent):void {
rotating = true;
pictureFrame = event.target.parent.parent;
relX = event.stageX - pictureFrame.x;
relY = event.stageY - pictureFrame.y;
anchorA = - Math.atan2(relX, relY) / Math.PI * 180;
offsetA = pictureFrame.rotation;
stage.addEventListener(MouseEvent.MOUSE_UP, rotEndHandler);
stage.addEventListener(MouseEvent.MOUSE_MOVE, rotMoveHandler);
}

function rotEndHandler(event:MouseEvent):void {
rotating = false;
stage.removeEventListener(MouseEvent.MOUSE_UP, rotEndHandler);
stage.removeEventListener(MouseEvent.MOUSE_MOVE, rotMoveHandler);
}

function rotMoveHandler(event:MouseEvent):void {
if (rotating) {
      relX = event.stageX - pictureFrame.x;
      relY = event.stageY - pictureFrame.y;
      var rot = - Math.atan2(relX, relY) / Math.PI * 180;
      pictureFrame.rotation = offsetA + (rot - anchorA);
}
}

rotator.addEventListener(MouseEvent.MOUSE_DOWN, rotBeginHandler);

Satoshi in クリエイティビティが止まらない | Permalink | Comments (1)