uzullaの日記

本家:about等:Twitter
 | 

2008-06-11

単なるflatなボタンが欲しいんだけど

| 07:49

ただ単に、一色で、ボーダーとかなく、グラデとかなく、プレーンなFlatボタンがほしいんだけど…。

(カッコイイとかじゃなく、デザイナーの指示がそうだったので…)


Buttonクラスは色々な設定ができるのだが(プロパティが数えられないほど)、

	<mx:Button label="text"   
		fillAlphas="[1.0, 1.0]" 
		fillColors="[#990000, #990000, #FF0000, #FF0000]" 
		color="0xFFFFFF"
		textRollOverColor="0xFFFFFF"
        	textSelectedColor="0xFFFFFF"
        	highlightAlphas="[0.0, 0.0]"
        	borderColor="0x00990000"
 		themeColor="#FF0000"/>

とか色々やっても完全にプレーンなものがつくれなかった。

何となくソレっぽいから俺的にはもうこれでいいんじゃね?とおもうけど、くおりてぃちぇっく通らないとめんどくさいな…。


…簡単なコンポーネント書くか…。


mx.skins.halo.ButtonSkin?

mx.skins.halo.ButtonSkin とかいうのと同等な物を用意すればできるんかなあ、

でもよくわからんし、自分で書いたほうが速いな…間違いなく。


よく考えれば(考えなくても)

静的な画像を用意して、RollOverで差し替えるっつうHTML的な手法でもいいよなー…w

デザイナーから上がってきた画像にできるだけ似せる、というだけの話だし。


書いた

Enable/Disable辺りが適当すぐる、単に消すだけってww

package jp.cfe.widget
{
	
	import flash.events.MouseEvent;
	
	import mx.controls.Label;
	import mx.core.UIComponent;
	import mx.events.ResizeEvent;
/*
 フラットなボタンを作成する

	btn = new FlatButton();
	btn.setupByText(genImg, 0x990000, 0xFF0000, "ボタンテキスト", 0xFFFFFF,10,10);
	btn.move(250, 390);
	this.addChild(btn);

	btn.enable = false; //ボタンを隠す
*/

	public class FlatButton extends UIComponent
	{
		private var elipseWidth:uint = 1;
		private var elipseHeight:uint = 1;
		private var color:uint = 0;
		private var roColor:uint = 0;
		private var text:Label = new Label();
		
		private var vPadding:uint = 3 * 2;
		private var hPadding:uint = 40 * 2;
				
		private var onClickFunction:Function;
		
		public function FlatButton()
		{
			super();
			this.addChild(text);
			//text.text = '';
		}
		
		public function setupByText(_onClickFunction:Function, //クリックされたときの関数
				_color:uint=0x990000, //ボタンボディの色
				_rocolor:uint=0xFF0000, //マウスオーバー時のボタンボディの色
				_text:String="", //テキスト
				_textColor:uint=0x000000, //テキストの色
				_ew:uint=10, _eh:uint=10 //カドの丸さ
				):void
		{
			color = _color;
			roColor = _rocolor;

			text.text = _text;
			text.setStyle("color", _textColor);
			text.setStyle("textAlign", "center");
			text.setStyle("fontWeight", "bold");
			text.setStyle("fontSize", 13 );
			elipseWidth = _ew;
			elipseHeight = _eh;
											
			onClickFunction = _onClickFunction;
			
			this.addEventListener(ResizeEvent.RESIZE, onResize);
			this.addEventListener(MouseEvent.CLICK, onClick);
			this.addEventListener(MouseEvent.MOUSE_OVER, onMouseIn);
			this.addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);
			
			draw();
		}
		
		//
		// ボタンを押せないように、消す
		//
		public function set enable(_enable:Boolean):void{
			if(_enable){
				this.visible = true;
				this.addEventListener(MouseEvent.CLICK, onClick);
			}else{
				this.visible = false;
				this.removeEventListener(MouseEvent.CLICK, onClick);				
			}
		}
		

		//
		//  ボタンの色を切り替える
		//
		private function drawBase(roFlag:Boolean):void{
				//再描画する
				this.graphics.clear();
				
				var _color:uint = (roFlag == true)? roColor: color;
				this.graphics.beginFill(_color);
				this.graphics.drawRoundRect(0,0,this.width,this.height,elipseWidth,elipseHeight);
		}

		//
		// 描画する
		//		
		private function draw():void
		{
			text.validateNow();

			this.width  = text.textWidth      + hPadding;
			this.height = text.textHeight + 1 + vPadding; //なぜか文字の下1ドットが切れるので

			drawBase(false);
			text.width = this.width;
			text.height = text.textHeight + 1;
			text.y = this.height/2 - text.height/2 - 2;

		}
		
		
		private function onClick(e:MouseEvent):void{
			onClickFunction();
		}	
		private function onResize(e:ResizeEvent):void{
			draw();
		}
		private function onMouseIn(e:MouseEvent):void{
			drawBase(true);
		}
		private function onMouseOut(e:MouseEvent):void
		{
			drawBase(false);
		}
		
	}
}

まあ、これくらいだと俺みたいなダサ坊でも数十分で書ける訳で、Flexは楽でイイですね。

 |