Flex4學習_button change icon_flash做APP_Part5

系列文章：
1. Android學習_以WebView讀取SWF檔_flash做APP_Part1
2. Android學習_以Flash Builder 4.5製作Air放入Android_flash做APP_Part2
3. Android學習_為什麼Flash Builder 4.5做的APP可以跨平台_flash做APP_Part3
4. Android學習_頁面切換_flash做APP_Part4
5. Flex4學習_button change icon_flash做APP_Part5
6. Flex4學習_捲軸使用(Scroller)_flash做APP_Part6

因為Flex實在是太久沒用，之前學的Flex3已經有點忘記，這次用Flex4當然更是一直問人又Google，其中有一個很大的變化，就是在Flex3的時候，可以很簡單的設定icon的屬性就可以達成圖片按鈕的效果，但在Flex4把這個屬性拿掉了，轉而要利用skin的方式設定。

方法：
1. 建立一個skin檔案(右鍵新增一個Packge，再於新增MXML Skin)

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
alpha.disabled="0.5">

<fx:Metadata>
[HostComponent("components.ImageButton")]
</fx:Metadata>

<fx:Script>
<![CDATA[
static private const exclusions:Array = ["labelElement"];
override public function get colorizeExclusions():Array
{
return exclusions;
}
]]>
</fx:Script>

<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>

<!-- UP ICON -->
<s:BitmapImage source="{getStyle('icon')}"
verticalCenter="0" left="5" includeIn="disabled" />


<!-- UP ICON -->
<s:BitmapImage source="{getStyle('icon')}"
verticalCenter="0" left="5" includeIn="up" />

<!-- OVER ICON -->
<s:BitmapImage source="{getStyle('icon')}"
verticalCenter="0" left="5" includeIn="over" />

<!-- DOWN ICON -->
<s:BitmapImage source="{getStyle('icon')}"
verticalCenter="0" left="5" includeIn="down" />

<!-- Text SKIN-->
<s:Label id="labelDisplay" textAlign="center" verticalAlign="middle"
maxDisplayedLines="1" left="0" bottom="0" color="#FFA10A">
</s:Label>

</s:SparkSkin >

新建好以後，可以發現Builder已經幫我們加了很多程式碼，而因為我們要做圖片的變更所以必須將UP ICON後面的程式碼補上，重點有三個：
A. 建立了四個BitmapImage，皆有includeIn的屬性，分別代表了：disabled(預設)、up(拿起)、over(滑動)與down(按下)四個動作，所以我們可以針對這四個動作給予不同的圖片。
B. 放置了一個名為labelDisplay的Label，『labelDisplay』為規定的id名稱，Builder將會把文字放到該名稱的Label內。
C. BitmapImage的source可以在這邊直接指定(source=Embed('images/car_right.png'))，因為我們並不會希望一個按鈕就要建一個skin，會希望利用外面給定的方式，所以這邊source以關聯的方式指定(source="{getStyle('icon')})。

2. 於Button指定skin

<s:Button id="btn_Home1" label="A" skinClass="skin.button"/>

skin.button的skin是packge的名稱，button為剛剛建立的skin名稱

3. 指定圖片(利用Style)

<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
#btn_Home1 {
icon: Embed(source="images/car_left.png");
}
</fx:Style>

說明：
A. #btn_Home1表示指定id為btn_Home1的按鈕。
B. icon對應到skin內BitmapImage的source屬性。

效果：