Flash Pro CC, Starlingを使って回転するオブジェクトをマウスに追随させる

Flash Pro CC, Starlingを使って回転するオブジェクトをマウスに追随させる

Flash Pro CC, Starlingを使って回転するオブジェクトをマウスに追随させる : デモ

Flash Pro CC, Starlingを使ってオブジェクトを回転させる : ZIPファイル(133kb)

1.Main.fla

1. Flashコンテンツのパフォーマンスをグラフ化するstatsをダウンロードします。

statsサイト(外部サイト):http://github.com/mrdoob/Hi-ReS-Stats

2. Flash Professional CC にダウンロードしたstatsファイルを以下のように、Flashメニューから設定します。

Flash – 環境設定 – コンパイラー – ソースパス で、Hi-ReS-Stats-master/src を設定します。

3. Starlingファイルをダウンロードします。

Starlingサイト(外部サイト):http://gamua.com/starling/

4. Flash Professional CC にダウンロードしたstarlingファイルを以下のように、Flashメニューから設定します。

Flash – 環境設定 – コンパイラー – ソースパス で、starling/src を設定します。

Flash – 環境設定 – コンパイラー – ライブラリパス で、starling/bin を設定します。

5. プロパティのクラスに「StartUp」を記述します。

2.StartUp.as

プログラム言語は、ActionScript3.0です。

package
{
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import starling.core.Starling;
	import net.hires.debug.Stats;
	
	public class StartUp extends Sprite
	{
		private var mStarling:Starling;
		
		public function StartUp()
		{
			//fps計測用クラス
			addChild(new Stats());
			
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			
			//starlingインスタンスの作成
			mStarling = new Starling(FollowMouse, stage);//回転しながら、マウスに追随する四角形
			
			//アンチエイリアスの設定 0:アンチなし、2:最小限のアンチエイリアス、4:高品質、6:最高品質
			mStarling.antiAliasing = 2;
			
			//スタート
			mStarling.start();
		}
	}
}

3.FollowMouse.as

package
{
	import flash.geom.Point;
	
	import starling.display.DisplayObject;
	import starling.display.Sprite;
	import starling.events.Event;
	import starling.events.Touch;
	import starling.events.TouchEvent;
	import starling.events.TouchPhase;

	public class FollowMouse extends Sprite
	{
		private var custumSprite:CustumSprite;
		private var mouseX:Number = 0;
		private var mouseY:Number = 0;
		
		public function FollowMouse()
		{
			addEventListener(Event.ADDED_TO_STAGE, onAdded);
		}
		
		private function onAdded(e:Event):void
		{
			//カスタムスプライトを作る
			custumSprite = new CustumSprite(200, 200);
			//位置はデフォルトでステージ中央
			//カスタムスプライトの基準点はセンターにあるので、半分だけ追加する
			custumSprite.x = (stage.stageWidth - custumSprite.width >> 1) + (custumSprite.width >> 1);
			custumSprite.y = (stage.stageHeight - custumSprite.height >> 1) + (custumSprite.height >> 1);
			//表示
			addChild(custumSprite);
			//ステージ上でのマウスを監視
			stage.addEventListener(TouchEvent.TOUCH, onTouch);
			custumSprite.addEventListener(TouchEvent.TOUCH, onTouchedSprite);
			stage.addEventListener(Event.ENTER_FRAME, onFrame);
		}
		
		private function onFrame(e:Event):void
		{
			//カスタムスプライトの位置をイージング
			custumSprite.x -= (custumSprite.x - mouseX) * .1;
			custumSprite.y -= (custumSprite.y - mouseY) * .1;
			//カスタムスプライトの更新
			custumSprite.update();
		}
		
		private function onTouch(e:TouchEvent):void
		{
			//ステージを基準にしたマウスの位置を取得
			var touch:Touch = e.getTouch(stage);
			var pos:Point = touch.getLocation(stage);
			//マウス座標を保持
			mouseX = pos.x;
			mouseY = pos.y;
		}
		
		//四角形の削除
		private function onTouchedSprite(e:TouchEvent):void
		{
			//タッチポイントを取得(マルチタッチなので複数タッチも可)
			var touch:Touch = e.getTouch(stage);
			var clicked:DisplayObject = e.currentTarget as DisplayObject;
			//クリックかリリースかを判定
			if(touch.phase == TouchPhase.ENDED)
			{
				//クリックされたオブジェクトを削除
				removeChild(clicked, true);
			}
		}
	}
}

4.CustumSprite.as

package
{
	import starling.display.Quad;
	import starling.display.Sprite;
	import starling.events.Event;
	import starling.text.TextField;

	public class CustumSprite extends Sprite
	{
		private var quad:Quad;
		private var legend:TextField;
		private var r:Number = 0;
		private var g:Number = 0;
		private var b:Number = 0;
		private var rDest:Number = 0;
		private var gDest:Number = 0;
		private var bDest:Number = 0;
		private var quadWidth:uint = 0;
		private var quadHeight:uint = 0;
		
		public function CustumSprite(width:Number, height:Number, color:uint = 16777215)
		{
			//カラー成分の値をリセット
			resetColors();
			
			//幅と高さを設定
			quadWidth = width;
			quadHeight = height;
			
			//ステージが追加されたら有効化
			addEventListener(Event.ADDED_TO_STAGE, activate);
		}
		
		private function activate(e:Event):void
		{
			//指定サイズで四角形を作る
			quad = new Quad(quadWidth, quadHeight);
			//レジェンドの追加
			legend = new TextField(100, 20, "Hello Starling!", "Helvetica", 14, 0xffffff);
			//子を追加
			addChild(quad);
			addChild(legend);
			//基準点を変更
			pivotX = width >> 1;
			pivotY = height >> 1;
		}
		
		/*
		振る舞いの更新
		*/
		public function update():void
		{
			//成分のイージング
			r -= (r - rDest) * .01;
			g -= (g - gDest) * .01;
			b -= (b - bDest) * .01;
			
			//カラーを組み合わせる
			var color:uint = r << 16 | g << 8 | b;
			quad.color = color;
			
			//カラー値に届いたら、別のカラーに変える
			if(Math.abs(r - rDest) < 1 && Math.abs(g -gDest) < 1 && Math.abs(b -bDest) < 1)
			{
				resetColors();
			}
			
			//回転
			rotation += .01;
		}
		
		private function resetColors():void
		{
			rDest = Math.random() * 255;
			gDest = Math.random() * 255;
			bDest = Math.random() * 255;
		}
	}
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です