5分で作るaction script3 サンプル 4(ボタンの作成)

第4回　ボタンの作成

ActionScript3で以下のように記述すると
画面上にボタンが表示されるようになります。
ただボタンといってもmousedown、
mouseup、mouseoverに応じて状態を
変えてくれるオブジェクトで
テキストも何も表示してくれないケチなやつです。

package {
	import flash.display.Sprite;
	import flash.display.SimpleButton;

	public class ASButton extends Sprite
	{
		
		[Embed(source='up.png')]
		private var upImg:Class;
		
		[Embed(source='down.png')]
		private var downImg:Class;
		
		[Embed(source='over.png')]
		private var overImg:Class;
		
		
		public function ASButton()
		{
			var btn:SimpleButton = new SimpleButton;
			
			
			var up:Sprite = new Sprite();
			up.addChild(new upImg());
			
			var down:Sprite = new Sprite();
			down.addChild(new downImg());
			
			var over:Sprite = new Sprite();
			over.addChild(new overImg());
			
			btn.upState = up;
			btn.downState = down;
			btn.overState = over;
			btn.hitTestState = up;
			
			addChild(btn);
			
		}
	}
}

解説

		[Embed(source='up.png')]
		private var upImg:Class;
		
		[Embed(source='down.png')]
		private var downImg:Class;
		
		[Embed(source='over.png')]
		private var overImg:Class;

とりあえず各種状態に応じた画像を
三枚用意してあげます。それぞれ
mouseUp、mouseDown、mouseOver状態の画像です。

	var btn:SimpleButton = new SimpleButton;

これがボタンの元となるSimpleButtonクラスです。
あまりにもSimple過ぎて使いづらいんですけどね…

			var up:Sprite = new Sprite();
			up.addChild(new upImg());
			
			var down:Sprite = new Sprite();
			down.addChild(new downImg());
			
			var over:Sprite = new Sprite();
			over.addChild(new overImg());
			
			btn.upState = up;
			btn.downState = down;
			btn.overState = over;
			
		

一度Spriteの中に画像を入れてますが
これはちょっと先で活用するのでこうしています。

で『btn.upState』はmouseUp状態に指定するDisplayオブジェクトを渡しています。
これによりmouseUp(つまりmouseOut)の状態のときはこれが表示されるようになります。

他の『downState』『overState』も同様です。

	btn.hitTestState = up;

これでSimpleButtonクラスの不思議なところ。
実はこのSimpleButtonクラスは、マウスのあたり判定を
自分とはまったく無関係のオブジェクトを指定することができたりもします。

まっ今回はいわゆるボタンとして使いたいので
upオブジェクトにmouseが当たるかどうかで
判断しろということにするので以上のように書きました。