プログラミングとイラストレーション » Flash Pro CC, StarlingでLeft KeyとRight Keyでアニメーションを左右反転にする
プログラミングとイラストレーション > Flash > Flash Pro CC, StarlingでLeft KeyとRight Keyでアニメーションを左右反転にする

Flash Pro CC, StarlingでLeft KeyとRight Keyでアニメーションを左右反転にする

Flash Pro CC, StarlingでLeft KeyとRight Keyでアニメーションを左右反転にする

PC上のキーボードにあるLeft KeyとRight Keyで、アニメーションの方向を左右逆にします。これは、Starling技術に伴った、キーボード操作のためのコンテンツです。

Flash Pro CC, StarlingでLeft KeyとRight Keyでアニメーションを左右反転にする : デモ

Flash Pro CC, StarlingでLeft KeyとRight Keyでアニメーションを左右反転にする : ZIPファイル(151kb)

参考資料:Introducing Starling」の日本語版

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(KeyDown, stage); //PC上のキーボードのレフト・キーとライト・キーで、アニメーションの向きを左右逆にする
			
			//アンチエイリアスの設定 0:アンチなし、2:最小限のアンチエイリアス、4:高品質、6:最高品質
			mStarling.antiAliasing = 2;
			
			//スタート
			mStarling.start();
		}
	}
}

3.KeyDown.as

package
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.net.*;
	import flash.ui.Keyboard;
	import flash.events.Event;
	
	import starling.animation.Juggler;
	import starling.core.Starling;
	import starling.display.MovieClip;
	import starling.display.Sprite;
	//import starling.events.Event;
	import starling.events.KeyboardEvent;
	import starling.textures.Texture;
	import starling.textures.TextureAtlas;
	
	public class KeyDown extends Sprite
	{
		private var mMovie: MovieClip;
		private var j: Juggler;
		
		/*FlashBuilderの場合
		[Embed(source = "walk.xml",
		mimeType = "application/octet-stream")]
		public static const SpriteSheetXML: Class;
		
		[Embed(source = "walk.png")]
		private static const SpriteSheet: Class;
		*/
		
		private var xml:XML;
		private var urlLoader:URLLoader;
		private var texture: Texture;
		private var state: int = 1;
		
		public function KeyDown()
		{
			//Starlingのイベントは使わない
			//addEventListener(Event.ADDED_TO_STAGE, onAdded);
			
			//Flash IDEのライブラリ画像を使う場合
			var walkBitmapData:BitmapData = new Walk(0, 0);
			var walkBitmap:Bitmap = new Bitmap(walkBitmapData);
			// ビットマップからテクスチャを作成
			texture = Texture.fromBitmap(walkBitmap);
			
			var urlRequest:URLRequest = new URLRequest("walk.xml");
			urlLoader = new URLLoader();
			urlLoader.addEventListener(Event.COMPLETE, completeListener);
			urlLoader.load(urlRequest);
		}
		
		/*private function onAdded(e: Event): void
		{
			var bitmap: Bitmap = new SpriteSheet();
			var texture: Texture = Texture.fromBitmap(bitmap);
			var xml: XML = XML(new SpriteSheetXML());
		}*/
		
		private function completeListener(e:Event):void
		{
			xml = new XML(urlLoader.data);
			
			var sTextureAtlas: TextureAtlas = new TextureAtlas(texture, xml);
			var frames: Vector.<Texture> = sTextureAtlas.getTextures("walkman_");
			mMovie = new MovieClip(frames, 8);
			mMovie.x = stage.stageWidth - mMovie.width >> 1;
			mMovie.y = stage.stageHeight - mMovie.height >> 1;
			addChild(mMovie);
			Starling.juggler.add(mMovie);
			// キーダウン時
			
			stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
			
		}
		
		private function onKeyDown(e: KeyboardEvent): void
		{
			// 状態に応じて再配置
			if (mMovie.scaleX == -1)
			{
				mMovie.x -= mMovie.width;
			}
				
			// 右キーか左キーなら
			
			if (e.keyCode == Keyboard.RIGHT)
			{
				state = state * -1;
			}
			else 
			if (e.keyCode == Keyboard.LEFT)
			{
				state = state * -1;
			}
			
				
			// 左右反転
			mMovie.scaleX = state;
			// 状態に応じて再配置
			if (mMovie.scaleX == -1)
			{
				mMovie.x = mMovie.x + mMovie.width;
			}
		}
	}
}

コメントを残す

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

コメントフィード

トラックバック URL : http://www.htmlcode.jp/flash-pro-cc-starling%e3%81%a7left-key%e3%81%a8right-key%e3%81%a7%e3%82%a2%e3%83%8b%e3%83%a1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e5%b7%a6%e5%8f%b3%e5%8f%8d%e8%bb%a2%e3%81%ab%e3%81%99/trackback/