変数名とnameプロパティ

2010.11.16kickbaseActionScript3.0


今回は変数名とnameプロパティについての解説です。はじめのうちはこのふたつを混乱しがちなので、この機会にしっかりと違いをおさえておきましょう。特にnameプロパティをキーにした分岐処理を行う際、気をつけておく必要があります。

▼変数名

そのまんまですが、変数の名前です。「var 変数名 = 」という記述をすることで、「イコールの右側にあるものを今後この名前で呼びますよ」という決め事(宣言)をするのです。同じ変数名をつけてしまうとコンピューターはどれのことだか分からないので、同一スコープ※内では同じ変数名をつけることはできません。(オーバーロードはAS3には実装されていません)

※スコープという言葉が出てきましたが、解説に記事一本文かかるため今回は説明を省きます。重要な概念なので今後お話しするつもりですが、「変数をどこで宣言するか?」を決める際に必ず考えておくべき項目です。

▼nameプロパティ

nameプロパティはインスタンス名を表します。「変数で宣言したインスタンスが持つ、nameというプロパティ」になります。そのため「変数名.name」というかたちでアクセスする訳ですね。インスタンス名は明示的につけない場合、instance1、instance2・・・と勝手に連番でネーミングされます。nameプロパティをキーにして分岐処理を行う場合は、把握しやすいよう明示的に分かりやすい名前をつけておく方がいいでしょう。

※nameプロパティはDisplayObjectが持つプロパティです。

00 : Flash IDE上ではどのような処理になっているか

Flash IDEでは「ユーザーが付けたインスタンス名(nameプロパティ)と同名の変数を内部で自動的に宣言し、表示リストに加える」という作業を行ってくれています。フレームアクションでbtnを宣言していないのにいきなりイベントリスンできるのは、Flash IDEの内部処理のおかげなのです(下記画像参照)

01 : 変数とnameプロパティの違い

出力結果を参照し、変数名とnameプロパティが異なっている点を確認してください。

Main

package 
{
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
	
	/**
	 * ...
	 * @author kickbase
	 */
	[SWF(width = "640", height = "480", frameRate = "30", backgroundColor = "#ffffff")]
	 
	public class Main extends Sprite 
	{
		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);
			
			//"sp"は変数名です。nameプロパティではありません。
			var sp:Sprite = new Sprite();
			trace( "sp.name : " + sp.name );//[ 出力 ] sp.name : instance1
			
			//こちらも同様、"mc"は変数名です。
			var mc:MovieClip = new MovieClip();
			trace( "mc.name : " + mc.name );//[ 出力 ] mc.name : instance2
			
			var mc2:MovieClip = new MovieClip();
			mc2.name = "ムービークリップ";//nameプロパティを明示的につける
			trace( "mc2.name : " + mc2.name );//[ 出力 ] mc2.name : ムービークリップ
		}
	}
}

02 : nameプロパティをキーにした処理

今回はgetChildByNameメソッドを使ってnameプロパティを走査します。nameプロパティをキーにした分岐処理は様々な場面で利用でき、例えば同じマウスクリックイベントハンドラをセットしていても、この名前のときは○○と言う処理を、あの名前のときは▲▲を・・・といった分岐処理をかませることが可能になります。(その際は、if文やswitch文を使う方法が一般的です)

This movie requires Flash Player 9

※ステージをクリックしてください

Main

package 
{
	import caurina.transitions.Tweener;
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.MouseEvent;
	
	/**
	 * ...
	 * @author kickbase
	 */
	[SWF(width = "640", height = "480", frameRate = "30", backgroundColor = "#ffffff")]
	 
	public class Main extends Sprite 
	{
		private var num:int = 100;
		
		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;
			
			createBall();//円を生成するメソッド
			
			//ステージにマウスクリックイベントをリスン
			stage.addEventListener(MouseEvent.CLICK, onClick);
		}
		
		private function createBall():void
		{
			//for文を使って繰り返し処理
			for (var i: int = 0; i < num; i++)
			{
				var ball:Ball = new Ball();
				ball.x = Math.random() * stage.stageWidth;//ステージ上にランダム配置
				ball.y = Math.random() * stage.stageHeight;//ステージ上にランダム配置
				ball.name = "ball" + i;//nameプロパティを設定する
				addChild(ball);
			}
		}
		
		private function onClick(e:MouseEvent):void
		{
			//ステージのマウスクリックイベントをリスン解除
			stage.removeEventListener(MouseEvent.CLICK, onClick);
			
			for (var i: int = 0; i < num; i += 2)
			{
				/*
				 * getChildByNameメソッドを使って「指定された名前に一致する子表示オブジェクト」を参照します
				 * このfor文では、iは2個ずつ増えていきますから、nameプロパティが"ball0"、"ball2"、"ball4"・・・
				 * となるオブジェクトを参照するわけです
				 * 
				 * 逆に言うと"ball1"、"ball3"・・・という奇数番号のnameプロパティを持つオブジェクトはモーションせず
				 * そのまま停止し続けるという挙動になります
				*/
				var ball:Ball = getChildByName("ball" + i ) as Ball;
				
				//「ステージ中央に、少しずつ遅れながら0.8秒かけてトゥイーンする」という処理です
				Tweener.addTween(ball, { x:stage.stageWidth / 2, y:stage.stageHeight / 2, delay:i * 0.01, time:0.8 } );
			}
		}
	}
}

Ball

package
{
	import flash.display.Sprite;

	public class Ball extends Sprite
	{
		private var _radius:Number;
		private var _color:uint;
		
		/*--------------------------------------------------------------------------
		 * コンストラクタ
		 *---------------------------------------------------------------------*//**
		 * <p>円を描くクラス(引数を省略すると、半径20、ランダムカラーの円が描画される)</p> 
		 */
		public function Ball(radius:Number = 20, color:uint = 0x0)
		{
			color ||= Math.random() * 0xFFFFFF;
			this._radius = radius;
			this._color = color;
			draw();
		}

		private function draw():void
		{
			with (graphics)
			{
				beginFill(_color);
				drawCircle(0, 0, _radius);
				endFill();
			}
		}
	}
}

サンプルのダウンロード


ページトップへ