一起來玩鳥　Starling Framework（3）Button！

週末夜來介紹個簡單的DisplayObject就好。不論是在電腦上或行動裝置上，跟使用者互動次數最多的，大概就是按鈕了。因此，Starling有個Button類別，來做出這個常用的互動元件。

同樣是因為由Sparrow移植過來的影響，Button的行為完全是行動裝置上的按鈕。它只有一個一般狀態的Texture，按鈕上的文字，以及壓下狀態的Texture(也可以不要)。事件只有一個：Event.TRIGGERED。沒有mouse over的狀態，也沒有useHandCursor可用。

Document Class依然不需要更動，再新增一個Game3.as當做Starling的rootClass，程式碼如下

publicclassGame3extendsSprite
{
privatevar _container:Sprite;
privatevar _msgText:TextField;
[Embed(source ="/assets/btnBg.png")]
privatestaticconstBtnBitmap:Class;//embed一張圖片當做Button平常的狀態
[Embed(source ="/assets/btnDownBg.png")]
privatestaticconstBtnDownBitmap:Class;//embed一張圖片當做Button壓下的狀態

publicfunctionGame3()
{
super();
addEventListener(Event.ADDED_TO_STAGE, init);
}

privatefunction init(e:Event):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);

_container =newSprite();
addChild(_container);
addChild(newStats());
var menu:Sprite=newSprite();//新增一個Sprite當做所有Button的容器
menu.x =100;//設定menu座標
menu.y =30;//設定menu座標
_container.addChild(menu);//menu加到場景上
_msgText =newTextField(300,20,"No Button Triggered.","Arial",14,0xFF0000,true);//新增一個TextField來顯示Button的狀態
_msgText.x =100;//設定_msgText座標
_msgText.y =80;//設定_msgText座標
_msgText.hAlign =HAlign.LEFT;//設定_msgText文字靠左對齊
_container.addChild(_msgText);//將_msgText加到場景上

var btnTexture:Texture=Texture.fromBitmap(newBtnBitmap());//從embed圖片產生button平常狀態的Texture
var btnDownTexture:Texture=Texture.fromBitmap(newBtnDownBitmap());//從embed圖片產生button壓下狀態的Texture
var btnTexts:Vector.＜String＞=newVector.＜String＞();//用一個Vector先將Button的文字存放起來
btnTexts.push("About");//加入第一個Button文字
btnTexts.push("Works");//加入第二個Button文字
btnTexts.push("Video");//加入第三個Button文字
btnTexts.push("Contact");//加入第四個Button文字
var btnNum:uint= btnTexts.length;//Button個數
var button:Button;//button用來當參照
for(var i:int=0; i ＜ btnNum; i++)//用個迴圈設定四個button
{
button =newButton(btnTexture, btnTexts[i], btnDownTexture);//新增一個Button
button.x = i *150;//設定button座標
button.name ="btn"+ btnTexts[i];//設定button的name
button.alphaWhenDisabled =0.5;//如果button disable時alpha會自動變成0.5
menu.addChild(button);將button加到場景上
}
button.enabled =false;//寫在迴圈外，我們故意將最後一個button disable
menu.addEventListener(Event.TRIGGERED, buttonTriggered);//Event.TRIGGERED會bubble，所以只要對menu監聽就好
}

privatefunction buttonTriggered(e:Event):void
{
_msgText.text =Button(e.target).name +" triggered!";//顯示哪個Button被triggered
}
}

首先embed兩張圖分別當做Button的up state與down state時的Texture。然後先用一個Sprite menu當做容器，再將四個Button建立起來，放到這個容器裡面我們另外在場景上加了一個TextField用來顯示等等哪個Button被triggered的訊息。。Button有很多跟font有關的屬性可以設定文字的字型、字級、粗體等等來設定文字的樣式，如果配合BitmapFont就可以做出更多樣性的Button。關於BitmapFont之後再聊。加完四個Button後，我們故意將最後一個Button的enabled屬性設為false，用來觀察alphaWhenDisabled這個屬性的效果。這是當Button disable時，Button自動會改變自己的alpha值，直到恢復enable時，alpha會自動回到1。最後我們對加上menu加上Event.TRIGGERED監聽，因為這個事件預設是會bubble的，所以對外面的容器監聽就好。而事件發生時就會告訴我們哪個Button被triggered了。Event.TRIGGERED的發生跟MouseEvent.CLICK一樣，要在Button被按下，又在Button裡面放開時才會觸發。Demo如下：