ボタン

(サンプル一覧を表示する)

ボタンを表示してみました。
Adobe の Flash 開発環境と違って、FlashDevelop でボタンを作ろうとすると
ものすごく手間がかかります。

Flash CS3(CS4) を持っている人は、Flash の GUI 部品をステージに貼り付けた
コンパイル済み SWF ファイル (swc) を作って、
FlashDevelop にそのファイルのパスを通すと、
fl.controls の中に入っている GUI 部品がそのまま使えるようです。

Google で検索すると、このファイルを公開されている方がいらっしゃいますが、
Flash CS3(CS4) を持ってない人が使うと、ライセンス的に問題があると思います。
テスト用には良さそうですが、商用利用する時は Flash CS3(CS4) を買うか、
fl.controls 内の GUI 部品を使うことを諦めた方が良いと思います。

ボタンだけなら自力で作ってもそんなに時間はかかりません。
リストボックスとか、ツリービューを自力で作るとなると
途方もない労力がいりそうですが。。

GUI 部品中心のプロジェクトを作るときは、Flex の MXML を使うことを
検討してみてください。そちらも FlashDevelop で作ることができます。
Flash の実行画面
ボタン

Flashプレーヤーが入っていないか、JavaScriptが無効になっているようです。

Get Adobe Flash player

ボタン

ソースコード

package 
{
	import flash.display.SimpleButton;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.text.TextField;
	
	/**
	 * ボタンを表示するサンプル
	 * @author Hikipuro
	 */
	public class Main extends Sprite 
	{
		/**
		 * 画面上の枠で囲まれた表示領域
		 */
		private var text1:TextField;
		
		/**
		 * ボタン
		 */
		private var button1:SimpleButton;
	
		/**
		 * ボタンのラベル
		 */
		private var buttonText1:TextField;
		
		/**
		 * コンストラクタ
		 */
		public function Main():void 
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		/**
		 * 初期化メソッド
		 * @param	e
		 */
		private function init(e:Event = null):void 
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point
			
			// テキスト表示部分の作成
			text1 = new TextField();
			text1.text = "ボタンのテスト";
			text1.selectable = false;
			text1.width = 320 - 64;
			text1.height = 40;
			text1.x = 32;
			text1.y = 32;
			text1.border = true;
			text1.borderColor = 0x333333;
			addChild(text1);
			
			// ボタンのラベルの作成
			buttonText1 = new TextField();
			buttonText1.text = "ボタン";
			buttonText1.selectable = false;
			buttonText1.width = 40;
			buttonText1.height = 20;
			buttonText1.x = 135;
			buttonText1.y = 180;
			addChild(buttonText1);
			
			// ボタンの作成
			button1 = new SimpleButton();
			button1.upState = makeRoundRect(0xDDDDDD, 100, 20, 10);
			button1.overState = makeRoundRect(0xFFFFFF, 100, 20, 10);
			button1.downState = makeRoundRect(0xBBBBBB, 100, 20, 10);
			button1.hitTestState = button1.upState;
			button1.addEventListener(MouseEvent.MOUSE_DOWN, onButtonMouseDown);
			button1.addEventListener(MouseEvent.MOUSE_UP, onButtonMouseUp);
			button1.addEventListener(MouseEvent.MOUSE_OVER, onButtonMouseOver);
			button1.addEventListener(MouseEvent.MOUSE_OUT, onButtonMouseOut);
			button1.x = 105;
			button1.y = 180;
			addChild(button1);
		}

		/**
		 * ボタンが押された時のイベントハンドラ
		 * @param	event
		 */
		private function onButtonMouseDown(event:MouseEvent):void
		{
			text1.text = "ボタンが押されました";
		}

		/**
		 * ボタンが離された時のイベントハンドラ
		 * @param	event
		 */
		private function onButtonMouseUp(event:MouseEvent):void
		{
			text1.text = "ボタンが離されました";
		}

		/**
		 * マウスオーバー時のイベントハンドラ
		 * @param	event
		 */
		private function onButtonMouseOver(event:MouseEvent):void
		{
			text1.text = "カーソルがボタンの上に乗りました";
		}

		/**
		 * マウスアウト時のイベントハンドラ
		 * @param	event
		 */
		private function onButtonMouseOut(event:MouseEvent):void
		{
			text1.text = "カーソルがボタンから出ました";
		}
		
		/**
		 * 角丸の図形を描いたスプライトを作って返す
		 * @param	color	色
		 * @param	width	幅
		 * @param	height	高さ
		 * @param	round	角丸の大きさ
		 * @return	スプライト
		 */
		private function makeRoundRect(color:uint, width:int, height:int, round:int):Sprite
		{
			var s:Sprite = new Sprite();
			s.graphics.lineStyle(2);
			s.graphics.beginFill(color);
			s.graphics.drawRoundRect(0, 0, width, height, round);
			s.graphics.endFill();
			s.alpha = 0.3;
			return s;
		}
		
	}
	
}		

ボタンは、SimpleButton というクラスを使用して作成します。
名前に ”Button” と入っていますが、ただインスタンス化しただけでは全然ボタンとして機能しません…。
SimpleButton は、押されてない状態・押した状態・上にカーソルが来た時の状態、
それぞれに画像を設定することで、勝手に状態に合わせて画像を切り替えてくれるようなクラスです。
マウスのボタンが押された時・離された時の動作を設定する時は、
イベントハンドラと呼ばれるメソッド内に記述します。
このサンプルでは、名前付きのメソッドをイベントハンドラに設定していますが、
無名メソッドを直接 addEventListener の引数に入れてもかまいません。

SimpleButton は、ボタンのラベルを設定する機能が無いようなので、
TextField クラスに文字を書いて、それをボタンの「下側(裏側)」に入れています。
上側に乗せると、TextField のマウスハンドラが SimpleButton より優先されてしまい、
SimpleButton がきちんと機能しません。また、TextField をボタンの下側に入れる都合上、
ボタンの表面の色を半透明にしています。不透明にすると、下側に入れたものが見えなくなってしまいます。
SimpleButton でボタン機能を実現する場合は、文字のラベルも直接画像に描いた方が良いかもしれません。
ボタン表面の色を半透明にすると都合が悪い場合もあると思うので。

表示位置を調節するのが大変ですね。画像編集ソフトで事前に画面全体のイメージを作っておいて、
それに合わせるような形で座標の数値を設定するようにしないと試行錯誤の連続になります。
金銭的に余裕がある人は、素直に Adobe の Flash 開発ソフトを買う方が負担が少なくて済むと思います。

外部リンク