イージング2 マウスチェイサー

2010.11.14kickbaseActionScript3.0


前回に引き続きイージングの解説を行います。今回はより実案件に近い実装と言うことで、マウスチェイサーについてお話をします。マウスチェイサーの自体は昨今あまり見ないようになりましたが、マウスを追跡するメニューなど、アイデアしだいで様々な表現に対応できるでしょう。また、Mac SafariにおけるFlash Playerのバグを回避する方法についても触れます。

This movie requires Flash Player 9

01 : Mac Safariのバグ未対応

非常に素直な実装です。目的地となるx,y座標にマウスのx,y座標を代入し、イージングの公式を適応させています。本来ロジックとしてはこれで正しいのですが、Mac Safariの旧バージョンFlash Playerには「swf外にマウスポインタが移動した際、mouseX/mouseYが異常に大きい値をとってしまう」というバグがありました。

この問題はFlash Player ver.10.1において修正されたバグですが、低いバージョン対策として実装しておきましょう。これは02にて解説します。

Main

package 
{
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	
	/**
	 * ...
	 * @author kickbase
	 */
	[SWF(width = "640", height = "480", frameRate = "30", backgroundColor = "#ffffff")]
	 
	public class Main extends Sprite 
	{
		private var ball:Ball = new Ball();
		private var friction:Number = 0.1;//摩擦係数
		
		public function Main():void 
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		private function init(e:Event = null):void 
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			
			//ステージ設定
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			
			addChild(ball);
			addEventListener(Event.ENTER_FRAME, loop);
		}
		
		private function loop(e:Event):void 
		{
			//目的地のx,y座標にマウスのx,y座標を代入します
			var targetX:Number = mouseX;
			var targetY:Number = mouseY;
			
			//イージングの公式をx,y座標共に適応します
			ball.x += (targetX - ball.x) * friction;
			ball.y += (targetY - ball.y) * friction;
		}
	}
}

02 : Mac Safariにおけるバグ対応

mouseX/mouseYの値を取得して、stageサイズよりも大きかったら値を押さえ込む処理を入れます。実案件でも必ず行うようにしましょう。
※弊社ではstageに関する処理を一括して行うユーティリティクラスを自作し、その内部で上記処理を行っています。ユーティリティクラスについての解説は煩雑になるため今回は省かせていただきます。

Main

package 
{
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	
	/**
	 * ...
	 * @author kickbase
	 */
	[SWF(width = "640", height = "480", frameRate = "30", backgroundColor = "#ffffff")]
	 
	public class Main extends Sprite 
	{
		private var ball:Ball = new Ball();
		private var friction:Number = 0.1;//摩擦係数
		
		public function Main():void 
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		private function init(e:Event = null):void 
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			
			//ステージ設定
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			
			addChild(ball);
			addEventListener(Event.ENTER_FRAME, loop);
		}
		
		private function loop(e:Event):void 
		{
			//目的地のx,y座標にマウスのx,y座標を代入します
			var targetX:Number = mouseX;
			var targetY:Number = mouseY;
			
			/*--------------------------------------------------------------------------
			 * Mac SafariにおけるFlash Playerのバグ対策(mouseX/mouseYが異常に大きい値をとってしまう)
			 *---------------------------------------------------------------------*//**
			 * 
			 * ここでtargetX、targetYの押さえ込みを行いますともに0より小さければ0に、
			 * ステージサイズよりも大きければステージサイズにフィットさせます
			 */
			if (targetX < 0)
			{
				targetX = 0;
			}
			else if (targetX > stage.stageWidth)
			{
				targetX = stage.stageWidth;
			}
			
			if (targetY < 0)
			{
				targetY = 0;
			}
			else if (targetY > stage.stageHeight)
			{
				targetY = stage.stageHeight;
			}
			
			//イージングの公式をx,y座標共に適応します
			ball.x += (targetX - ball.x) * friction;
			ball.y += (targetY - ball.y) * friction;
		}
	}
}

サンプルのダウンロード


ページトップへ