Mach3.laBlog

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

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

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

BitmapButton

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」

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*