この記事は賞味期限切れです。（更新から1年が経過しています）

AS3実験室: 画像を読み込んでボタンにする～SimpleButtonの巻
AS3実験室: 画像を読み込んでボタンにするに続いて、
もういい加減にしなさいというテーマですが、書いてみちゃいました。
今回は、SimpleButtonクラスを拡張してselectedプロパティを追加してトグル出来るようにしました。

Download : simpletogglebutton.as3.zip

大した行数はないので貼りつけておきます。

package jp.mach3.ui
{
    import flash.display.DisplayObject;
    import flash.display.SimpleButton;

    public class SimpleToggleButton extends SimpleButton
    {
        private var _upState:DisplayObject;
        private var _selectedState:DisplayObject;
        private var _selected:Boolean = false;

        public function SimpleToggleButton( upState:DisplayObject = null, 
        overState:DisplayObject = null, downState:DisplayObject = null, 
        hitTestState:DisplayObject = null, selectedState:DisplayObject = null )
        {
            super(upState, overState, downState, hitTestState);
            _selectedState = selectedState;
            render();
        }

        public function render(n:* = null):void
        {
            _upState = upState;
        }

        public function set selected( selected:Boolean ):void
        {
            if (selected) {
                upState = _selectedState;
                mouseEnabled = false;
            } else {
                upState = _upState;
                mouseEnabled = true;
            }
            _selected = selected;
        }

        public function get selected():Boolean
        {
            return _selected;
        }

        public function set selectedState( selectedState:DisplayObject ):void
        {
            _selectedState = selectedState;
        }

        public function get selectedState():DisplayObject
        {
            return _selectedState;
        }

    }
}

SimpleButtonと違う点

SimpleButton – ActionScript 3.0 コンポーネントリファレンスガイド
基本的な使い方はSimpleButtonと同じですが、
SimpleToggleButtonクラスには以下の二つのメンバが追加されています。

selectedState : DisplayObject

選択状態を表示する為のDisplayObjectを、upStateやoverState等と同様に設定します。

selected : Boolean

トグルに使用するBool値。trueにする事でselectedStateが表示され、マウスイベントが効かなくなります。falseにすると元に戻ります。

render()

コンストラクタではなく、プロパティアクセスでDisplayObjectを設定した場合に、これを呼ぶ必要があります。苦し紛れのメソッド。後述。

また、コンストラクタの引数が一つ追加されています。

SimpleToggleButton( upState:DisplayObject = null, overState:DisplayObject = null, downState:DisplayObject = null, hitTestState:DisplayObject = null, selectedState:DisplayObject = null )

selectedState

選択状態のDisplayObjectを格納します。

簡単な使い方(1)

myUpState、myOverState、myDownState、myHitTestState、mySelectedStateには
それぞれの状態に使用するDisplayObjectが格納されていると想定します。

var myButton:SimpleToggleButton = new SimpleToggleButton();

myButton.upState = myUpState;
myButton.overState = myOverState
myButton.downState = myDownState;
myButton.hitTestState = myHitTestState;
myButton.selectedState = mySelectedState;
myButton.render(); // Don't miss it !

addChild( myButton );

選択状態にトグルする場合は、プロパティアクセスでselectedをtrueにします。

myButton.selected = true;

簡単な使い方(2)

SimpleButton同様、プロパティアクセスでDisplayObjectを設定する事も出来ますが、
その場合、格納し終えた後にrender()を呼ぶ必要があります。

var myButton:SimpleToggleButton = new SimpleToggleButton();

myButton.upState = myUpState;
myButton.overState = myOverState
myButton.downState = myDownState;
myButton.hitTestState = myHitTestState;
myButton.selectedState = mySelectedState;
myButton.render(); // Don't miss it !

addChild( myButton );

render()は、upStateをプライベートメンバの_upStateにコピーするだけのメソッドです。
このクラスは、upStateをselectedStateで上書きする事でトグルを実現しているので
この処理がないとselectedが再びtrueにされた場合に表示するためのDisplayObjectが見つからなくなります。

本来であれば、upStateのセッターで記述すべきものなのですが…
元祖SimpleButtonのupStateが内部でどのように処理されているかがわからなかった為、
このようなスマートではない方法を取ることになりました。

もっと良い方法はないだろうか…
（え、まだつづくの！？）