小峰峰的筆記本

前言：Flex可以簡單的創造一個內含有Ajax以及豐富UI的應用程式，你可以點看看上面的flash裡面的bar拉拉看，還有CheckBox的圖片顯示特效，在一般的Web App要呈現這些效果其實是蠻複雜跟麻煩的，但是在Flex中卻可以輕易的達成，小峰峰發現在台灣的Flex資源真的還蠻少的，所以我可能先寫幾個基礎的Flex教學給大家學習互相交流 ^^

1.先下載Adobe網站下載並安裝 Flex Builder 3

2.安裝完畢新增一個Flex Project, 打入Project Name 後按完成即可

新增一個Flex Project

3.程式會自動開啟MXML的Source Code畫面, 我們先切換至Design View

切換至Design View

4.從左下角的Components 拉一個Image跟兩個HSider、一個CheckBox到畫面上

拉入Compoents至畫面上

5.copy一個Jpg檔案，並且在左上角的src按貼上，就可以把圖檔貼入，現在可以在你剛剛拉好的Image中的Source中填入@Embed(‘mypicture.jpg’)，請注意把mypicture.jpg改成你上傳的圖檔名稱即可，改好後點選工具列上的存檔並Run，就可以看到初步的執行結果。

匯入圖檔

執行結果

6.我們可以看到HSlider跟CheckBox都跟圖檔重疊在一起了，但是沒關係我們拉一個Vbox把他們放在一起即可，方法很簡單，拉出一個VBox到圖片下方後，把兩個HSlider跟CheckBox都拉進去VBox裡面 (拉第一個HSlider的時候會有點不好拉，多練習幾下即可)。

把HSlider跟CheckBox拉進VBox中

7.調整一下位置之後，現在要開始做HSlider還有CheckBox跟Image之間的連結了，首先先做HSlider的控制，先給Image一個識別用的ID，只要在Image的ID中填入mypic即可。

8.第一個HSlider: On change中填入mypic.rotation=event.currentTarget.value並把Maximum跟Minimum填入30與-30

9.第二個HSlider: On change中填入mypic.height=event.currentTarget.value並把Maximum跟Minimum填入300與100

10.CheckBox的On click填入mypic.visible=event.currentTarget.selected，請且把Selected設為True

11.存檔並執行就可以看到初步完成的結果了，而且Slider跟CheckBox的功能都已經具備了，現在我們來新增一些效果。

12.把兩個HSlider的Live Dragging都設為True，這樣在拉HSlider bar的時候，圖形就會同時跟著變化了，改好之後就執行玩看看。

Live Dragging設為True

13.我們再從Components拉兩個Label給HSlider用，一個Label寫角度，另一個Label寫大小，並且也把CheckBox的Label改成顯示圖片/圖片消失，一樣存檔後執行程式看看。

14.接下來我們给圖片一個陰影的效果，這部份就要切回Source View寫code了，在Design View沒辦法加這段，在<mx:Image>與</mx:Image>中加入下面這一段，就可以呈現如下圖的陰影效果。
<mx:filters>
<mx:DropShadowFilter />
</mx:filters>

DropShadowFilter效果

15.一樣的我們再來加入漸漸顯示和漸漸消失的特效，一樣加在<mx:Image>與</mx:Image>中即可，加進去之後存檔並執行玩玩看。
<mx:showEffect>
<mx:Fade alphaFrom=』0″ alphaTo=』1″ duration=』1000″ />
</mx:showEffect>
<mx:hideEffect>
<mx:Fade alphaFrom=』1″ alphaTo=』0″ duration=』1000″ />
</mx:hideEffect>

16.你已經大功告成了，有不了解的地方可以接下來參考下面的Source Code或是Download Source Code。

完整Source Code：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Image x="36" y="26" source="@Embed('mypicture.jpg')" id="mypic" rotation="-10" height="200">
<mx:filters>
<mx:DropShadowFilter />
</mx:filters>
<mx:showEffect>
<mx:Fade alphaFrom="0" alphaTo="1" duration="1000" />
</mx:showEffect>
<mx:hideEffect>
<mx:Fade alphaFrom="1" alphaTo="0" duration="1000" />
</mx:hideEffect>
</mx:Image>
<mx:VBox x="36" y="234" height="123">
<mx:Label text="圖片角度"/>
<mx:HSlider change="mypic.rotation=event.currentTarget.value" minimum="-30" maximum="30" value="-10" liveDragging="true"/>
<mx:Label text="圖片大小"/>
<mx:HSlider change="mypic.height=event.currentTarget.value" minimum="100" maximum="300" value="200" liveDragging="true"/>
<mx:CheckBox label="圖片顯示/圖片消失" click="mypic.visible=event.currentTarget.selected" selected="true"/>
</mx:VBox>
</mx:Application>

小峰峰後記：因為把Source Code貼在WordPress會變得無法排版，所以Source Code會變得比較難閱讀，建議抓下面的Source Code Download連結下來看比較容易理解，有任何問題歡迎大家發問討論喔 ^^
小峰峰後記2：教學中我儘量都用IDE拉Components的方法來做，我是可以儘量可以不寫Code就不寫Code，當然你也可以不用我的方法，但是小峰峰認為人腦可以記憶的東西有限，善用Tool來寫程式，可以降低寫Code的負擔，我覺得是比較好的方法。
Source Code Download