17.SimpleButtonクラスを使ってみる

ボタンの上でハンドカーソルにならない?

FLASHを作成すると、ゲームじゃなくてもムービーのスタートボタンなどのボタンが欲しい時があります。

当然AS3でも同じようにボタンを設置したくなったのですが、やってみると少々不都合が、、、

Flex 2 SDKを使用していますので、ボタンの画像もLoaderクラスを使い外部から読み込みます。

すると、その画像にaddEventListenerでイベントリスナを設定することはできるのですが、マウスのカーソルがその画像の上に行ってもマウスの形が変わらないんです。

自分の好みではありますが、やっぱりクリックできるところにマウスのカーソルが行くと、矢印から手の形(ハンドカーソルと言うそうな)に変わって欲しいわけです(^^;

でないとユーザーさんはどこをクリックしたらいいの?となってしまいますから。

Spriteで作成したエリアだと、

var mybutton:Sprite=new Sprite();
mybutton.buttonMode = true;
mybutton.useHandCursor = true;

という感じで意図する通りに矢印はハンドカーソルに変わってくれます。

ただ、外部からLoaderクラスにより読んだ画像だとこのようにはなってくれないようです。

Spriteでいいのなら、、、

Spriteで反応してくれるのなら、ひとつ長方形でもSpriteで作成して、そこにボタンの画像をaddChildして、、、なんて考えたのですが、それだと長方形の大きさを設定をする必要がありますよね。

なんだか面倒だしなぁ、、、どうしようもなかったらそれで行くか、ということで後回し。

ということで、前々から気になっていたSimpleButtonクラスというのを見てみました。

SimpleButtonクラスでボタンを作成

Flex 2 リファレンスガイドのSimpleButtonクラスを見ると、非常にわかりやすいサンプルがかかれています。

これを流用し、Spreiteの部分に通常時の画像やマウスが乗った時の画像などをaddChildしてみると、、、

お〜!それらしく、なったではありませんか!

なかなかいいじゃないか!SimpleButtonクラス!!

もっと凝ったボタンが欲しい人には不足かもしれませんが、今までにそんなの作ったこともないし、私にはこれで十分なのでした(^^)v

実行結果を見てみる

ボタン設定部分だけですが、下にスクリプト例を示します。

ちなみに、retArr[0].mcなどはお手製の画像読み込みクラスによるものです(前頁参照下さい)。

//ボタン設定
var myButton:SimpleButton = new SimpleButton();
var upSprite:Sprite = new Sprite();
upSprite.addChild(retArr[0].mc);//通常時

var overSprite:Sprite = new Sprite();
overSprite.addChild(retArr[1].mc);//マウスオーバー時

myButton.upState = upSprite;
myButton.overState = overSprite;
myButton.downState = overSprite;
myButton.useHandCursor = true;
myButton.hitTestState = upSprite;

addChild(myButton);
myButton.x=250;
myButton.y=150;

myButton.addEventListener(MouseEvent.CLICK, clickbutton);

function clickbutton(evt:MouseEvent):void {
tf.appendText("クリック! \n");//テキストフィールドに表示
}

→18.ガウス・ジョルダン法のクラス

16.外部画像をまとめて読み込むクラス2←