習作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);
う～ん、真似したいですけど、丁寧に解説してくださってるのにやり方がよくわからないですね・・・
勉強しなおします・・・
「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「
Taichi Fujisawa
『Think！』
http://businessandit.blog105.fc2.com/
「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「「
Posted by: Taichi | 2007.05.23 at 01:06