2010年8月14日

as3陣列按鈕


最近終於開始把自己更新到as3,雖然還是渾沌的狀態...
經過了一周的努力,有了一個小小的成果,就是我改出一支陣列的按鈕。
(我們這種沒程式背景的人,不敢說是用寫的,就按照書中所寫的,還有網路上尋找的各大偏方)


這一支的好處,就是設計師將你的按鈕做好之後放到flash舞台裡,再各自將元件命名,位置也隨你自由擺放...

//載入greensock TweenLite(註1)
import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*;
TweenPlugin.activate([TintPlugin]);
//設定陣列按鈕名稱(將舞台上的按鈕名稱寫在這裡即可)
var buttonsArray:Array = new Array(bt01,bt02,bt03,bt04);

//增加按鈕事件(滑過、滑出、按下按鈕...等等)
for (var i:uint = 0; i < buttonsArray.length; i++){
buttonsArray[i].addEventListener(MouseEvent.MOUSE_OVER, mouseOverButton);
buttonsArray[i].addEventListener(MouseEvent.CLICK, buttonClicked);
buttonsArray[i].addEventListener(MouseEvent.ROLL_OUT, mouseOutButton);
buttonsArray[i].buttonMode = true;
}

//按鈕背景啟始位置
TweenLite.to(buttonBackground, 0.5, {x: bt01.x-5, y: bt01.y-5, width:bt01.width+10, height:bt01.height+10,ease:Back.easeOut});

//滑鼠滑入按鈕的效果(在這邊有一塊黑色背景會出現在按鈕後方)
function mouseOverButton(e:Event):void{
var button:MovieClip = (MovieClip)(e.target);
var targetWidth:Number = button.width + 10;
var targetHeight:Number = button.height + 10;
TweenLite.to(buttonBackground, 0.5, {x: button.x-5, y: button.y-5, width:targetWidth, height:targetHeight, ease:Back.easeOut});
TweenLite.to((e.target), 0.2, {tint:0xffffff});

}


//按下按鈕的效果
function buttonClicked(e:Event):void{

switch (e.target){
//點選bt01要前往的連結
case bt01 :
trace("bt01");
var bt0:URLRequest = new URLRequest("http://www.google.com/");
navigateToURL(bt0, "_blank");
break;
//點選bt01要前往的連結
case bt02 :
trace("bt02");
var bt1:URLRequest = new URLRequest("http://tw.yahoo.com/");
navigateToURL(bt1, "_blank");
break;

}
}

//滑鼠滑出按鈕的效果
function mouseOutButton(e:Event):void{
TweenLite.to((e.target), 0.2, {tint:0x000000});

}




註1:TweenLite是一個可以讓你更方便製作flash動態的好物! 透過簡單的語法,設計師不用再拉漏漏長的時間軸,而且as2 as3都支援,作者還很佛心的製作模擬器,按一按就幫你跑出語法。

後記:目前發現有bug,所以還是不要拿去用比較好XD
facebook討論

0 意見:

 

One Design Copyright © 2009 BeMagazine Blogger Template is Designed by Blogger Template
In Collaboration with fifa