unoh.github.com

オブジェクトをマウス操作で移動させる

2010-07-26 05:00:23 +0000

こんにちは、はじめまして!
goです。

6月からActionScriptのプログラマとして、ウノウに参画することになりました。
エンジニアとして経験がまだまだ浅いので、リファレンスを片手に日々奮闘しております。

Flashを扱うエンジニアとして、ここではインタラクションに関わる小ネタをActionScriptで披露していこうかと考えています。

ということで、今回はマウスを使ったオブジェクトの移動のお話です。

以下の方針に従って、作業を進めていきます。

1、画面全体でMOUSE_DOWNとMOUSE_MOVEのイベント監視
2、MOUSE_DOWNのイベントが発生したときに、マウスの座標、移動対象のオブジェクトの座標を取得します。
3、MOUSE_MOVE時に、移動前のマウス位置と、移動後のマウス位置の差(つまり移動量)を取得します。
4、移動前の円の座標に移動量を加算して、移動後の円の位置を取得します。

以下、ソースコードと実行結果です。

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;
		}
	}
}

flash on 2010-7-26 - wonderfl build flash online


MOUSE_MOVEイベント発生時にMOUSE_DOWNイベントが発生していない場合は、値を返すのがポイントです。
こうすることで、マウスカーソルが円の内側にある場合に限り円を移動することが出来ます。
簡単ですね!

次回は、もっといろんなモーションを加えていきたいと思います。
ではでは。