FlashDevelopで使えるボタンクラス

FlashDevelopで使えるボタンクラスを書きました。

SimpleButtonって名前が良かったんですが、それだと被ってしまうのでEasyButtonに。ちょっと変ですが。

package  
{
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.text.TextField;
    
    /**
     * 簡易ボタンクラス
     * @author valinst
     */
    public class EasyButton 
    {
        /** このクラスの描画オブジェクトはすべてこの上に存在する */
        private var buttonBase:Sprite;
        
        /** 各状態のボタンスプライト */
        private var upState:Sprite;
        private var overState:Sprite;
        private var downState:Sprite;
        
        /** ボタンのラベル */
        private var buttonText:TextField;
        
        /** 透明のボタンスプライト */
        private var clearButton:Sprite;
        
        /** ユーザー定義の各イベントの関数を保持 */
        private var events:Array/*of Function*/;
        
        /** ボタンの動作状態 */
        private var isEnable:Boolean;

        /**
         * コンストラクタ
         * @param   base   ボタンを置くスプライト
         * @param   text   ボタンの表示文字
         * @param   x      ボタンの位置X
         * @param   y      ボタンの位置Y
         * @param   width  ボタンの幅(省略可)
         * @param   height ボタンの高さ(省略可)
         */
        public function EasyButton(base:Sprite, text:String, x:int, y:int, width:int = 100, height:int = 20) 
        {
            // ベースとなるスプライトをボタンモードで作成
            buttonBase = new Sprite();
            buttonBase.buttonMode = true;
            
            // ボタンの各状態のスプライトを作成
            upState = makeRoundRect(0xEEEEEE, width, height, 10);
            overState = makeRoundRect(0xFFFFFF, width, height, 10);
            downState = makeRoundRect(0xDDDDDD, width, height, 10);         
            upState.visible = true;
            overState.visible = false;
            downState.visible = false;
            
            buttonBase.addChild(upState);
            buttonBase.addChild(overState);
            buttonBase.addChild(downState);
            
            
            // テキストフィールドの設定
            buttonText = new TextField();
            buttonText.y = height / 2 - 10;
            buttonText.width = width;
            buttonText.height = height;
            buttonText.text = text;
            buttonText.autoSize = "center";
            buttonText.selectable = false;
            buttonBase.addChild(buttonText);
            
            // そのままだと、テキストフィールド上でマウスのイベントが上手く動作しないので、
            // すべてを設定した後で、最後に透明のスプライトを被せる
            clearButton = makeRoundRect(0x000000, width, height, 10, 0);
            buttonBase.addChild(clearButton);
            
            buttonBase.x = x;
            buttonBase.y = y;
            base.addChild(buttonBase);
            
            buttonBase.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
            buttonBase.addEventListener(MouseEvent.MOUSE_UP,   onMouseUp);          
            buttonBase.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
            buttonBase.addEventListener(MouseEvent.MOUSE_OUT,  onMouseOut);
            
            isEnable = false;
                        
            events = new Array;
        }
        
        /**
         * 各状態のときに呼び出される関数を設定
         * @param   event イベント
         * @param   func  設定する関数
         */
        public function addEventListener(event:String, func:Function):void
        {
            // 既にイベントが登録されていたら
            // event が MOUSE_DOWN, MOUSE_UP, MOUSE_OVER, MOUSE_OUT
            // という場合を想定
            if (buttonBase.hasEventListener(event)) {
                events[event] = func;
            }else {
                // ボタン側が処理する必要がないイベントも登録できるようにしておく
                buttonBase.addEventListener(event, func);
            }
        }
        
        /**
         * ボタンの表示文字を設定
         */
        public function set text(str:String):void
        {
            buttonText.text = str;
        }
        /**
         * ボタンの表示文字を取得
         */     
        public function get text():String
        {
            return buttonText.text;
        }
        
        /**
         * 表示状態を設定
         */
        public function set visible(flg:Boolean):void
        {
            buttonBase.visible = flg;
            if (flg && downState.visible) {
                downState.visible = false;
            }
        }       
        /**
         * 表示状態を取得
         */
        public function get visible():Boolean
        {
            return buttonBase.visible;
        }
        
        /**
         * ボタン動作状態を設定
         */
        public function set enable(flg:Boolean):void
        {
            isEnable = flg;
        }       
        /**
         * ボタン動作状態を取得
         */
        public function get enable():Boolean
        {
            return isEnable;
        }
        
        /**
         * ボタンが押されたとき
         * @param   event
         */
        private function onMouseDown(event:MouseEvent):void
        {
            if (isEnable) return;
            downState.visible = true;       
            if (events[MouseEvent.MOUSE_DOWN])
                events[MouseEvent.MOUSE_DOWN]();
        }
        /**
         * ボタンが離されたとき
         * @param   event
         */
        private function onMouseUp(event:MouseEvent):void
        {
            if (isEnable) return;
            downState.visible = false;
            if (events[MouseEvent.MOUSE_UP])
                events[MouseEvent.MOUSE_UP]();
        }
        /**
         * マウスが乗ったとき
         * @param   event
         */
        private function onMouseOver(event:MouseEvent):void
        {
            if (isEnable) return;
            overState.visible = true;
            if (events[MouseEvent.MOUSE_OVER])
                events[MouseEvent.MOUSE_OVER]();
        }
        /**
         * マウスが降りたとき
         * @param   event
         */
        private function onMouseOut(event:MouseEvent):void
        {
            if (isEnable) return;
            overState.visible = false;
            if (events[MouseEvent.MOUSE_OUT])
                events[MouseEvent.MOUSE_OUT]();
        }
        
        /**
         * 角丸の図形を描いたスプライトを作って返す
         * @param   color   色
         * @param   width   幅
         * @param   height  高さ
         * @param   round   角丸の大きさ
         * @return  スプライト
         */     
        private function makeRoundRect(color:uint, width:int, height:int, round:int, alpha:Number=1.0):Sprite
        {
            var s:Sprite = new Sprite();
            s.graphics.lineStyle(2, 0x888888, 1);
            s.graphics.beginFill(color);
            s.graphics.drawRoundRect(0, 0, width, height, round);
            s.graphics.endFill();
            s.alpha = alpha;
            return s;
        }
    }   
}

 
使い方サンプル

 

package 
{
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.MouseEvent;
    
    [SWF(width="300", height="300")]
    public class Main extends Sprite 
    {
        private var button:EasyButton;
        
        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          
            button = new EasyButton(this, "ボタン", 100, 30);
            
            var bigButton:EasyButton = new EasyButton(this, "大きいボタン", 50, 70, 200, 200);
            bigButton.addEventListener(MouseEvent.MOUSE_DOWN, function():void {
                bigButton.text = "マウスダウン";
            });     
            bigButton.addEventListener(MouseEvent.MOUSE_UP, function():void {
                bigButton.text = "マウスアップ";
            });         
            bigButton.addEventListener(MouseEvent.MOUSE_OVER, function():void {
                bigButton.text = "マウスオーバー";
            });
            bigButton.addEventListener(MouseEvent.MOUSE_OUT, function():void {
                bigButton.text = "マウスアウト";
            });
        }
        
    }
    
}

 
基本的な機能しかないですが、SimpleButtonよりも使いやすいんじゃないかと思います。
とりあえずボタンが欲しいなって思ったときにどうぞ。
 
このクラスを書く上で参考にさせていただきました。
ボタン - FlashDevelop 用 AS 3 サンプル集