Flex

Flex教學-自定togger=true的Button樣式

梅干2009/01/13
  最近正在開發VideoDisplayer,當然裡面則會包含了播放暫停停止...等按鈕,由於FlexButton元件提供了toggle開關功能,如此一來就可以將播放暫停製作在同一個按鈕裡,但怪現象又出現了,當把按鈕的顏色邊框都設成白色了,但從上圖中,卻可清楚看到最右邊的按鈕,下方還會出現1像素淡淡的灰色漸層框,真是令梅干桑百思不得其解,都已設白色了為何還會出現那漸層框,上網找了好多資料,總算解決了此問題,當Button把toggle設為true時,樣式設定有些不太一樣,接下來梅干桑就把程式碼放在下方,供各位引用參照。

ButtonStyle.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" viewSourceURL="srcview/index.html">
<mx:Style>
Application {
 backgroundColor: #ffffff;
 backgroundGradientColors: #ffffff, #ffffff;
}
.myButton1{
 borderColor: #cccccc;
 themeColor:#eb1212;
}

.myButton2{
 skin: ClassReference(null);/*把預設skin設為null*/
 upSkin: Embed(source="upbtn.png");
 overSkin: Embed(source="overbtn.png");
 downSkin: Embed(source="downbtn.png");
 disabledSkin: Embed(source="disbtn.png");
 skin: Embed(source="downbtn.png");/*select後的skin*/
}
.myButton3{
 fillAlphas: 1, 1, 1, 1;
 fillColors: #ffffff, #ffffff, #ffffff, #ffffff;
 borderColor: #ffffff;
 themeColor:#ffffff;
}

</mx:Style>
<mx:Script>
<![CDATA[
 [Embed(source="play.png")]
 [Bindable]
 public var playIcon:Class;

 [Embed(source="pause.png")]
 [Bindable]
 public var pauseIcon:Class;

 private function clickHanlder(event:MouseEvent):void{
  if(event.currentTarget.selected){
   event.currentTarget.setStyle("icon",pauseIcon);
   //this.mybtn.setStyle("icon",pauseIcon);
  }else{
   event.currentTarget.setStyle("icon",playIcon);
   //this.mybtn.setStyle("icon",playIcon);
  }
 }
]]>
</mx:Script>
<mx:Button id="mybtn1" width="100" height="100"
toggle="true" buttonMode="true"
icon="{playIcon}"
styleName="myButton1"
click="clickHanlder(event)"/>

<mx:Button id="mybtn2" width="100" height="100"
toggle="true" buttonMode="true"
icon="{playIcon}"
styleName="myButton2"
click="clickHanlder(event)"/>

<mx:Button id="mybtn3" width="100" height="100"
toggle="true" buttonMode="true"
icon="{playIcon}"
styleName="myButton3"
click="clickHanlder(event)"/>
</mx:Application>


範例預覽:


[範例下載]


UAG軍規iPhone防摔殼