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

第4回　ボタンの作成(応用編)

前回作ったActionScript版のボタンは
Flex2版のボタンと違って
ラベルの設定ができない寂しいものでした。
なので今回はActionScriptでも
ラベルのつけれるボタンのサンプルです。

package {
	import flash.display.Sprite;
	import flash.display.SimpleButton;
	import flash.text.TextField;
	import flash.display.StageScaleMode;
	import flash.display.StageAlign;
	import flash.text.TextFieldAutoSize;

	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;
		
		
		private const paddingLeft:int = 3;
		private const paddingRight:int =3;
		private const paddingTop:int =3;
		private const paddingBottom:int =3;
		
		
		public function ASButton()
		{
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;

			var btn:SimpleButton = createBtn("文章を読む",upImg,downImg,overImg);
			
			addChild(btn);
			
		}
		
		private function createBtn(label:String,upSkin:Class,downSkin:Class,overSkin:Class):SimpleButton{
			var btn:SimpleButton = new SimpleButton;
			
			
			var up:Sprite = withLabelSkin(label,upSkin);
			var down:Sprite = withLabelSkin(label,downSkin);
			var over:Sprite = withLabelSkin(label,overSkin);
			
			btn.upState = up;
			btn.downState = down;
			btn.overState = over;
			btn.hitTestState = up;
			
			return btn;
			
			
		}
		
		
		private function withLabelSkin(labelStr:String,imageClass:Class):Sprite{
			var canvas:Sprite = new Sprite();
			var label:TextField = new TextField();
			var image:* = new imageClass();
			label.text =labelStr;
			label.autoSize = TextFieldAutoSize.LEFT;
			
			label.x = paddingLeft;//真ん中にしたいならこっち(label.width -label.textWidth)/2;
			label.y = paddingTop;//真ん中にしたいならこっち(label.height-label.textHeight)/2; 
			image.width = label.width + paddingLeft + paddingRight;
			image.height = label.height + paddingTop + paddingBottom;
			
			canvas.addChild(image);
			canvas.addChild(label);
			
			return canvas;			
		}
	}
}

解説

		private const paddingLeft:int = 3;
		private const paddingRight:int =3;
		private const paddingTop:int =3;
		private const paddingBottom:int =3;

ボタンですので各種部分に
paddingを用意してみました。

		private function createBtn(label:String,upSkin:Class,downSkin:Class,overSkin:Class):SimpleButton{

こいつは前回のボタン作成のときに使ったソースを
ラップして呼びやすくしただけで
前回と中身は一緒です。

		private function withLabelSkin(labelStr:String,imageClass:Class):Sprite{
			var canvas:Sprite = new Sprite();
			var label:TextField = new TextField();
			var image:* = new imageClass();
			label.text =labelStr;
			label.autoSize = TextFieldAutoSize.LEFT;
			
			label.x = paddingLeft;//真ん中にしたいならこっち(label.width -label.textWidth)/2;
			label.y = paddingTop;//真ん中にしたいならこっち(label.height-label.textHeight)/2; 
			image.width = label.width + paddingLeft + paddingRight;
			image.height = label.height + paddingTop + paddingBottom;
			
			canvas.addChild(image);
			canvas.addChild(label);
			
			return canvas;			
		}
			
		

ここで各状態に応じたボタンを作成します。
『label.autoSize = TextFieldAutoSize.LEFT;』を使うことに
よってTextFieldが中のデータに応じたサイズにリサイズしてくれます。
ちなみにTextFieldにこれを設定しない場合は、
高さ50px 幅も実際のテキストの幅より大きいサイズと
いうかなり適当なサイズになっているので特に問題なければ必ず設定しましょう。

あとimageは背景ですが、今回は、ラベルがあるので
背景のサイズをlabelのサイズに準じたサイズにしてあげます。

以上で終わりです。