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が内部でどのように処理されているかがわからなかった為、
このようなスマートではない方法を取ることになりました。

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

途中までは前記事と似たような処理なのでちょっと割愛してるところもあるのでご注意。

1. 画像の読み込み

private var bl:BulkLoader = new BulkLoader("imageloader");

/* 中略 */

bl.add( "images/button_normal.png" );
bl.add( "images/button_over.png" );
bl.add( "images/button_down.png" );
bl.addEventListener( BulkProgressEvent.COMPLETE, initialize );
bl.start();

2. SimpleButtonをつくる

var btn:SimpleButton = new SimpleButton(
    new Bitmap(bl.getBitmapData("images/button_normal.png")),
    new Bitmap(bl.getBitmapData("images/button_over.png")),
    new Bitmap(bl.getBitmapData("images/button_down.png")),
    new Bitmap(bl.getBitmapData("images/button_normal.png"))
);
addChild(btn);

SimpleButton – ActionScript 3.0

使い方は上記リンク参照。余計なもの（!?）をimportしなくていい分心地よいです。

ただし、このままではBitmapButtonにはあった「選択時」の状態が使用できません。
この点は今頭を悩ましているところですね。

2010/05/17

さすがに端折りすぎたのでコードを追記

2010/05/24

フォロー記事書きました。
AS3実験室: SimpleButtonクラスをトグル出来るように拡張した「SimpleToggleButton」

BitmapButton

Download : BitmapButton

パブリック プロパティ

hitRect : Rectangle = null

ヒット領域をRectangleで設定。 nullの場合は画像にあわせたヒット領域になります。

selected : Boolean = false

ボタンの選択状態を示すBoolean値。

パブリック メソッド

render() : void

setImagesで渡されたBitmapDataを元にボタンを生成します。

setImages( _config : Object ) : void

normalImage（通常時）、overImage（マウスオーバー時）、downImage（マウスダウン時）、selectedImage（選択時）の画像をBitmapDataで格納したオブジェクトを渡します。

簡単な使い方

インポートをお忘れなく。

import jp.mach3.ui.BitmapButton

1. 画像の用意

こんな感じで画像を用意しましょう。

2. 画像の読み込み

以前記事で紹介したBulkLoaderを使ってみます。

private var bl:BulkLoader = new BulkLoader( "imageloader" );

/* 中略 */

bl.add( "images/button_normal.png" );
bl.add( "images/button_over.png" );
bl.add( "images/button_down.png" );
bl.add( "images/button_selected.png" );
bl.addEventListener( BulkProgressEvent.COMPLETE, initialize );
bl.start();

3. BitmapButtonインスタンスの生成

completeイベントに設定したinitializeでビットマップボタンを生成してみます。

private function initialize( e:Event ) : void {
    var btn:BitmapButton = new BitmapButton;
    btn.setImages( {
        normalImage: bl.getBitmapData( "images/button_normal.png" ),
        overImage: bl.getBitmapData( "images/button_over.png" ),
        downImage: bl.getBitmapData( "images/button_down.png" ),
        selectedImage: bl.getBitmapData( "images/button_selected.png" )
    } );
    btn.render();
    addChild( btn );
}

各ステータスの画像を設定するsetImages()は、
BitmapDataを格納したnormalImage, overImage,
downImage, selectedImageらをまとめたオブジェクトを引数として受け取ります。
あとはrender()でボタンイメージを生成し、addChild。

4. イベントなど

Spriteを継承しているので、イベントなどはよきにはからえ、で。

btn.addEventListener( MouseEvent.CLICK, myFunc );

5. 選択状態の変更

selectedプロパティをtrueにすることで、選択時の状態にする事ができます。
トグルボタンなどを作りたい時はこちらを利用します。

btn.selected = true

こんな感じで作ってみたわけですが、何かの役にたてば幸いです。
とりあえず自分で使おう。

2010/05/02

SimpleButtonを使えばもっと楽だという事に次の日気づきました

2010/05/03

フォロー記事書きました
AS3実験室: 画像を読み込んでボタンにする～SimpleButtonの巻

2010/05/24

フォロー記事書きました
AS3実験室: SimpleButtonクラスをトグル出来るように拡張した「SimpleToggleButton」