DORAG DROP | coconuz info processor

DORAG DROP

4.4 タイマーイベントの例

タイマーイベントは設定した時間間隔で発生するイベントです。ある時間間隔ごとに処理を繰り返し実行したい時にタイマーイベントを利用します。
以下の例は0.1秒ごとに円を描画していくプログラムです。

【TimerEventExample.as】

package {
	import flash.display.Sprite;
	import flash.events.TimerEvent;
	import flash.utils.Timer;

	public class TimerEventExample extends Sprite
	{
		private var circleX:int = 5;
		private var circleY:int = 5;
		
		public function TimerEventExample()
		{
			var timer:Timer = new Timer(100,0);
			timer.addEventListener(TimerEvent.TIMER,onTimer);
			timer.start();
		}
		
		private function onTimer( event:TimerEvent ):void
		{
			drawCircle();
			circleX += 10;
            
			if( circleX > 500 ) 
			{
				circleX = 5;
				circleY += 10;
			}
		}
		
		private function drawCircle():void
		{
			this.graphics.beginFill(0x000000,1);
			this.graphics.drawCircle(circleX,circleY,5);
			this.graphics.endFill();
		}
	}
}

タイマーイベントを扱うには、Timerクラスを使用します。

		public function TimerEventExample()
		{
			var timer:Timer = new Timer(100,0);
			timer.addEventListener(TimerEvent.TIMER,onTimer);
			timer.start();
		}

Timerクラスのコンストラクタには、2つの引数を渡しています。
			new Timer(delay,repeatCount);

delayには時間間隔をミリ秒単位で指定します。例えば、100ミリ秒は0.1秒です。
repeatCountは繰り返す回数です。これを0とすると無限に繰り返されます。

			timer.addEventListener(TimerEvent.TIMER,onTimer);

Timerクラスを生成したら、イベントリスナーを登録します。

			timer.start();

タイマーを開始するにはstart()メソッドを、反対に終了するにはstop()メソッドを実行します。


実はこのTimerEventの仕組みによってアニメーションを作成することができます。
アニメーションについては5章で詳しく扱います。

【DragAndDrop.as】

package {
	import flash.display.Sprite;
	import flash.events.MouseEvent;

	public class DragAndDrop extends Sprite
	{
		private var spr:Sprite;
		
		public function DragAndDrop()
		{
			spr = new Sprite();
			spr.graphics.lineStyle(1,0x000000);
			spr.graphics.beginFill(0xff0000,1);
			spr.graphics.drawCircle(0,0,10);
			spr.graphics.endFill();
			spr.x = spr.y = 10;
			this.addChild(spr);
			
			//イベントリスナーへの登録
			spr.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDown);
			spr.addEventListener(MouseEvent.MOUSE_UP,onMouseUp);
		}
		
		private function onMouseDown( event:MouseEvent ):void
		{
			spr.startDrag(); //ドラッグ開始
		}
		
		private function onMouseUp( event:MouseEvent ):void
		{
			spr.stopDrag(); //ドラッグ停止
		}
	}
}
MOUSE_DOWNとMOUSE_UPをイベントリスナーに登録します。マウスのボタンが押されたら、startDrag()メソッドを実行します。反対に、マウスのボタンが離されたらstopDrag()メソッドを実行します

4.6 手動によるイベントの送出

イベントはユーザが独自のイベントを作成して送出することができます。これまでに扱ったイベントはマウスやキーボードなど、ユーザーからの操作に対応するものをイベントとしていました。しかし、このような外部のユーザーからの操作だけでなく、「データを読み込みが完了した」、「ある処理が完了した」といったプロセスの完了もイベントと一種といえます。

以下のサンプルプログラムでは手動でイベントを送出させることで、複数のオブジェクトのイベントを結びつけています。

【CrossBlock.as】

package {
	import flash.display.Sprite;
	import flash.events.Event;
	
	public class CrossBlock extends Sprite
	{
		private var blocks:Array;
		
		public function CrossBlock()
		{
			blocks = new Array();
			
			for( var i:int = 0; i < 10; i++ )
			{
				var array:Array = new Array();
				for( var j:int = 0; j < 10; j++ )
				{
					var block:Block = new Block();
					block.x = i * Block.size;
					block.y = j * Block.size;
					block.i = i;
					block.j = j;
					this.addChild(block);
					array.push(block);
				}
				blocks.push(array);
			}
			
			stage.addEventListener("blockMouseOver",onBlockMouseOver);
			stage.addEventListener("blockMouseOut",onBlockMouseOut);
		}
		
		/* 全てのブロックを白く塗る*/
		private function clearAllBlocks():void
		{
			for( var i:int = 0; i < 10; i++ )
			{
				for( var j:int = 0; j < 10; j++ )
				{
					blocks[i][j].color = 0xffffff;
					blocks[i][j].draw();
				}
			}
		}
		
		//垂直、水平方向のブロックを赤く塗る
		private function highlightBlocks( i:int, j:int):void
		{
			for( var k:int = 0; k < 10; k++ ) 
			{
				blocks[k][j].color = 0xff0000;
				blocks[k][j].draw();
				blocks[i][k].color = 0xff0000;
				blocks[i][k].draw();
			}
		}
		
		/* イベントリスナー */
		private function onBlockMouseOver( event:Event ):void
		{
			clearAllBlocks();
			var block:Block = Block(event.target);
			highlightBlocks(block.i,block.j);
			
		}
		
		private function onBlockMouseOut( event:Event ):void
		{
			clearAllBlocks();
		}
		

	}
}

【Block.as】

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	
	public class Block extends Sprite
	{
		public static var size:int = 20;
		public var color:int;
		public var i,j:int;
		
		public var red:int = 0xff0000;
		public var white:int = 0xffffff;
		
		public function Block( color:int = 0xffffff )
		{
			this.color = color;
			draw();	
			
			this.addEventListener(MouseEvent.MOUSE_OVER,onMouseOver);
			this.addEventListener(MouseEvent.MOUSE_OUT,onMouseOut);
			
		}
		
		public function draw():void
		{
			this.graphics.clear();
			this.graphics.lineStyle(1,0x000000);
			this.graphics.beginFill(color,1);
			this.graphics.drawRect(0,0,size,size);
			this.graphics.endFill();
		}
		
		/* イベントリスナー */		
		private function onMouseOver( event:MouseEvent ):void
		{
			this.color = red;
			draw();
			this.dispatchEvent(new Event("blockMouseOver",true));
		}
		
		private function onMouseOut( event:MouseEvent ):void
		{
			this.color = white;
			draw();
			this.dispatchEvent(new Event("blockMouseOut",true));
		}

	}
}

このプログラムでは2つのイベントを手動で発生させています。以下がその一つの部分です。

		private function onMouseOver( event:MouseEvent ):void
		{
			this.color = red;
			draw();
			this.dispatchEvent(new Event("blockMouseOver",true)); //手動によるイベントの発生
		}

マウスカーソルが各ブロックの中に入るとBlockクラスのonMouseOver()イベントリスナーが実行されます。そして、このイベントリスナーの中でdispatchEvent()メソッドが手動でイベントを発生させている部分です。dispatchEvent()メソッドは発生させるイベントのインスタンスを引数にとります。

一方、メインクラスのCrossBlockクラスでは手動で作成したイベントをイベントリスナーに登録しています。

			stage.addEventListener("blockMouseOver",onBlockMouseOver);
			stage.addEventListener("blockMouseOut",onBlockMouseOut);

これによりCrossBlockクラスはブロックが送出する手動のイベントを受け取ることが可能になります。