AS3実験室: 画像を読み込んでボタンにする

2010年05月02日 02:34 （2013年10月14日 02:25 更新）

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

これも意外と頻出する処理ではないでしょうか。
読み込んだビットマップデータをボタン化する処理を、面倒なのでクラス化してみました。

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」

コメントを書く