習作UI:初めてのFlash その2
習作UI: 初めてのFlash その4

習作UI:初めてのFlash その3

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

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

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

 これで完成である。アンカーの位置がちゃんと中心になっていないと、座標計算が狂うのでそこだけは注意していただきたい。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);

Comments

Taichi

う~ん、真似したいですけど、丁寧に解説してくださってるのにやり方がよくわからないですね・・・
勉強しなおします・・・

「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「
Taichi Fujisawa
『Think!』
http://businessandit.blog105.fc2.com/
「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「

The comments to this entry are closed.