goです。
6月からActionScriptのプログラマとして、ウノウに参画することになりました。
エンジニアとして経験がまだまだ浅いので、リファレンスを片手に日々奮闘しております。
Flashを扱うエンジニアとして、ここではインタラクションに関わる小ネタをActionScriptで披露していこうかと考えています。
ということで、今回はマウスを使ったオブジェクトの移動のお話です。
以下の方針に従って、作業を進めていきます。
１、画面全体でMOUSE_DOWNとMOUSE_MOVEのイベント監視
２、MOUSE_DOWNのイベントが発生したときに、マウスの座標、移動対象のオブジェクトの座標を取得します。
３、MOUSE_MOVE時に、移動前のマウス位置と、移動後のマウス位置の差（つまり移動量）を取得します。
４、移動前の円の座標に移動量を加算して、移動後の円の位置を取得します。
以下、ソースコードと実行結果です。
package {
import flash.display.Sprite;
import flash.events.MouseEvent;
public class ObjectMove extends Sprite {
/*円を描画されるオブジェクト*/
private var childSprite:Sprite;
/*マウスカーソルの位置*/
private var thisX:Number, thisY:Number;
/*円オブジェクトの位置*/
private var circleX:Number, circleY:Number;
public function ObjectMove() {
/*円を描画するchildSprite（Sprite)を表示リストに追加する*/
childSprite = new Sprite();
childSprite.x = 60;
childSprite.y = 60;
addChild(childSprite);
/*childSpriteに円を描画する*/
childSprite.graphics.beginFill(0x000000);
childSprite.graphics.drawCircle(0, 0, 40);
childSprite.graphics.endFill();
/*マウスダウン時のイベントハンドラーを設定*/
addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
/*マウスムーブ時のイベントハンドラーを設定*/
addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
}
/*マウスダウン時にマウスの位置と、円の位置を取得する。*/
private function mouseDownHandler(event:MouseEvent):void{
thisX = this.mouseX;
thisY = this.mouseY;
circleX = childSprite.x;
circleY = childSprite.y;
}
/*マウスが動いた時に、円を移動させる。*/
private function mouseMoveHandler(event:MouseEvent):void{
if(!event.buttonDown) return;
childSprite.x = this.mouseX - thisX + circleX;
childSprite.y = this.mouseY - thisY + circleY;
}
}
}
MOUSE_MOVEイベント発生時にMOUSE_DOWNイベントが発生していない場合は、値を返すのがポイントです。
こうすることで、マウスカーソルが円の内側にある場合に限り円を移動することが出来ます。
簡単ですね！
次回は、もっといろんなモーションを加えていきたいと思います。
ではでは。