トップページ > Flash入門 > マウス・キーボード関係(2)

クリックを検出する

CLICKイベントを登録します

次のFlashでは,クリックされた回数をカウントしています。

マウスの入力を受け付けたいパーツに,addEventListener()関数を使ってマウスの動きを拾うように設定します。 今回は画面全体,拾うイベントはクリック:“MouseEvent.CLICK”なので, this.stage.addEventListener(MouseEvent.CLICK, onMouseClick) のように記述します。例のごとく,“onMouseClick()”はマウスがクリックされた時に呼ばれる関数として 自分で定義しておきます。 以下,全ソースです。

package 
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.TextEvent;
	import flash.text.*;	
	//Mouse関係のイベントクラスを読み込んでおく
	import flash.events.MouseEvent;
	
    //画面サイズと背景色,フレームレートを設定
    [SWF(width="300", height="300", frameRate = "60", backgroundColor="0xffffcc")]  	
	
	 public class Main extends Sprite 
	{	
		//================================================================
		//MOUSE_CLICK表示用TextField
		private var tf:TextField = new TextField();
		//クリックの回数をカウントする変数
		private var cnt:int = 0;
		//================================================================
		
		//main関数
		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);
			// entry point
			
			//TextFieldの位置を調節
			tf.x = 120;
			tf.y = 120;
			//TextFieldの寸法は自動調整
			tf.autoSize = TextFieldAutoSize.LEFT;
			//初期Text内容を表示する(cntをtoString()関数で文字列に直す必要あり)
			tf.text = cnt.toString();
			
			//フォント設定のためにTextFormatを用意
			var format:TextFormat = new TextFormat();
			format.size = 48
			//TextFieldにformatを登録
			tf.setTextFormat(format);
			//途中でテキストを変更するので,DefauldTextFormatに登録する必要がある
			tf.defaultTextFormat = format;

			//TextFieldを表示
			addChild(tf);
			
			//============================================================
			//stageにCLICKイベントを登録
			this.stage.addEventListener(MouseEvent.CLICK, onMouseClick);	
			//============================================================
		}
		
		//================================================================
		//クリックされた時に呼ばれる関数
		private function onMouseClick(e:MouseEvent):void
		{
			//変数cntを加算
			cnt++;
			//TextFieldに文字を表示
			tf.text = cnt.toString();	
		}
		//================================================================
	}
}

クリック関係のイベントいろいろ

マウスのボタンを操作した時に発生するイベントを色々使ってみます。 次のFlashは,左ボタンを押した時・離した時,クリック,ダブルクリックを受け付けるようになっています。 ゆっくりクリック操作をして,どのようなタイミングでイベントが発生するのかを確認することができます。 マウスを動かすと,表示がクリアされます。

以下,上のFlashの全ソースコードです。

package 
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.text.*;
	
    //画面サイズと背景色,フレームレートを設定
    [SWF(width="300", height="300", frameRate = "60", backgroundColor="0xffffcc")]  	
	
	 public class Main extends Sprite 
	{	
		//================================================================
		//MOUSE_DOWN表示用TextField
		private var tf1:TextField = new TextField();		
		//MOUSE_UP表示用TextField
		private var tf2:TextField = new TextField();
		//CLICK表示用TextField
		private var tf3:TextField = new TextField();
		//DOUBLE_CLICK表示用TextField
		private var tf4:TextField = new TextField();
		
		//main関数
		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);
			// entry point
			
			//フォント設定(サイズだけ)
			var format:TextFormat = new TextFormat();
			format.size = 20;
			format.font = "Arial";

			//tf1~tf4の設定をfor文で回して一括設定
			for (var i:int = 1; i < 5; i++)
			{
				//TextFieldの位置を決める
				this["tf" + i].y = 25 * (i - 1);
				//TextFieldの寸法は自動調整
				this["tf"+i].autoSize = TextFieldAutoSize.LEFT;
				//TextFieldを表示
				addChild(this["tf" + i]);
				
				//TextFieldにフォントを設定する
				//文字列をクリアすることがある場合は,setTextFormat()関数を使わずに,
				//defaultTextFormatパラメータを直接設定する。
				this["tf" + i].defaultTextFormat = format;
			}
			
			//stageにMOUSE_DOWNイベントを登録
			this.stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);

			//stageにMOUSE_UPイベントを登録
			this.stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
			
			//stageにCLICKイベントを登録
			this.stage.addEventListener(MouseEvent.CLICK, onMouseClick);
			
			//stageにDOUBLE_CLICKを登録(doubleClickEnabledをtrueにする必要あり)
			this.stage.doubleClickEnabled = true;
			this.stage.addEventListener(MouseEvent.DOUBLE_CLICK, onDoubleClick);
			
			//stageにMOUSE_MOVEイベントを登録
			this.stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);		
		}
		
		
		//左ボタンが押された時に呼ばれる関数
		private function  onMouseDown(e:MouseEvent ):void 
		{
			//1番目のTextFieldに文字を表示
			tf1.text = "左ボタンが押されました";
		}

		//左ボタンが離された時に呼ばれる関数
		private function onMouseUp(e:MouseEvent):void
		{
			//2番目のTextFieldに文字を表示
			tf2.text = "左ボタンが離されました";	
		}
		
		//クリックされた時に呼ばれる関数
		private function onMouseClick(e:MouseEvent):void
		{
			//3番目のTextFieldに文字を表示
			tf3.text = "クリックされました"	
		}
		
		//ダブルクリックされた時に呼ばれる関数
		private function onDoubleClick(e:MouseEvent):void 
		{
			//4番目のTextFieldに文字を表示
			tf4.text = "ダブルクリックされました"
		}
			
		//マウスが動かされたときに呼ばれる関数
		private function onMouseMove(e:MouseEvent):void
		{
			//すべてのテキストフィールドをクリアする
			for (var i:int = 1; i < 5; i++)
			{
				this["tf"+i].text = ""
			}
		}
	}
}



前へ  次へ