最近由於種種緣故又要開(kāi)始做點(diǎn)教育訓(xùn)練的事，先趁現(xiàn)在有空把手邊的資料整理一下。

＊Flex 的基礎(chǔ)架構(gòu)

關(guān)於 flex 基本上常被問(wèn)到的不外乎就是「如何可以學(xué)好它？」，要瞭解這個(gè)問(wèn)題的答案基本上只要看懂下面這圖就ok了。



＊Actionscript 該學(xué)的重點(diǎn)

從最底層看起，最下面的 actionscript 3是一切的基礎(chǔ)，它是 flash/flex 編程使用的唯一程式語(yǔ)言，因此任何人想學(xué)好 flex 第一件事絕對(duì)是先摸熟 actionscript 這個(gè)語(yǔ)言，包含：

1. 它的基本語(yǔ)法與結(jié)構(gòu)(array, hash, loop, if else…)

2. DisplayList (DisplayObject, DisplayObjectContainer)與 Event system(bubbling, propagating…)

3. Sound, Video, NetConnection 與 Graphics class

掌握 as3 的精華後，接下來(lái)就可以進(jìn)入 flex framework。

＊Flex framework 的重點(diǎn)

基本上 flex framework 就是用 actionscript 寫(xiě)成的框架，因此也可以把它看成是 as3的最好示範(fàn)，看著 framework source 學(xué) actionscript 也是挺不錯(cuò)的，只是路會(huì)變很長(zhǎng)。

Flex Framework 整個(gè)體系非常博大精深，通常一般人不太可能完整把它學(xué)完，只需要針對(duì)最常用到的部份熟悉就好，圖中列出的那三塊(component, managers, style/skin)就是我個(gè)人認(rèn)為所有初學(xué)者最優(yōu)先該學(xué)會(huì)的。

＊Component 該學(xué)些什麼

Component 是整個(gè) flex framework 的基礎(chǔ)，幾乎80% 的元素都是由 UIComponent 繼承而來(lái)，例如最根本的的 它本身就是一個(gè) UIComponent，因此，熟悉 component 就成為學(xué)好 flex framework 最根本也最重要的基本功

Flex 內(nèi)建了 二十幾個(gè) UI controls, 例如 Button, DataGrid, HBox等，以種類(lèi)來(lái)分，這些 components 可以概分為三大類(lèi)：

-Controls: Button, DateChooser, Slider…
-Containers: Box, DividedBox, Panel…
-List: DataGrid, Tree, TileList…

初學(xué)者第一步至少該學(xué)會(huì)怎麼用這些元件，瞭解每個(gè)元件的 properties, events, styles, effects…，知道怎麼在手冊(cè)裏查它的 API 文件，以及何時(shí)該用何種元件。

進(jìn)階一點(diǎn)，則是學(xué)會(huì)怎麼修改這些元件，例如繼承一個(gè) Button 下來(lái)加上不同的功能，或是寫(xiě)不同的 skin border 來(lái)改變它的外觀。

再更進(jìn)階，則是開(kāi)始研究元件的生命週期，瞭解每個(gè)元件是何時(shí)初始化，元件內(nèi)部有那些關(guān)鍵指令與它們個(gè)別的功用，然後可以試著建立自已的 custom component。

這一關(guān)看起來(lái)容易但實(shí)際上最困難，因?yàn)?flex 的 component framework 寫(xiě)的非常龐大，雖然亂中有序但要在混沌中看出隱藏的架構(gòu)然後抓住重點(diǎn)整串提起，就非得有人帶著指引正確的途徑才比較可能達(dá)成。

＊manager 是什麼

圖中最上方的第二塊就是 manager。

flex 裏有很多的 managers，負(fù)責(zé)做各種不同的工作(廢話…)，幾個(gè)比較重要的包含：

-SystemManager:
它是每支 flex app 的根源，最先被下載，也最早啟動(dòng)，由它進(jìn)行一連串的 app boot流程

-StyleManager:
它負(fù)責(zé)整支app 的 css style 套用與 skin 生成，如果想玩動(dòng)態(tài) css 載換也靠它

-DragManager:
Flex最大的賣(mài)點(diǎn)就是 drag and drop，這個(gè) manager 就是背後的英雄，初學(xué)者至少要學(xué)會(huì)怎麼處理 drag 行為的五個(gè)事件，以及如何在不同元件間做拖放；進(jìn)階的玩家則應(yīng)該深入研究這支 manager 是怎麼寫(xiě)成的，詳細(xì)閱讀它的 source 會(huì)得到意想不到的無(wú)窮樂(lè)趣(如果你讀完卻沒(méi)有這種感覺(jué)，呃，那代表你該再多讀幾次，如果還是沒(méi)有，那請(qǐng)私下聯(lián)絡(luò)我 :D)

-ModuleManager:
使用 Flex 開(kāi)發(fā)大型應(yīng)用程式時(shí)，往往會(huì)將程式切割成許多小的 module, 這個(gè) manager 就是負(fù)責(zé)載入並管理所有的 module (包含它的 class partition)，初心者或許用不到，但有志深入的玩家一定要很熟。

-CursorManager:
這個(gè)用到的時(shí)機(jī)不是很多，但偶爾要換一下 cursor 時(shí)還是會(huì)用到，初學(xué)者至少要知道怎麼用指定的圖案去換掉系統(tǒng)cursor。

＊Style/Skin 的重點(diǎn)

CSS style 與 skinning 是 Flex 最大的賣(mài)點(diǎn)之一，也是開(kāi)發(fā)過(guò)程中較為麻煩也最耗時(shí)的部份。

初學(xué)者應(yīng)該要徹底瞭解如何使用 CSS style 來(lái)打點(diǎn)一支 flex app 的外觀，換顏色、素材，使用外部 assets 修飾介面。

中階玩家則應(yīng)該瞭解 skinning 的系統(tǒng)，包含 programmatic skinning 與 graphical skin，它們兩的差別？使用時(shí)機(jī)？如何客製化？

更高階的玩家則應(yīng)該熟悉整個(gè) Styling system 的運(yùn)作模式，外加如何動(dòng)態(tài)載入 css 在 runtime 換掉整個(gè)介面。

簡(jiǎn)而言之，flex app 寫(xiě)的好不好，外行人其實(shí)看不太出來(lái)，但一支 app UI 美不美則是一翻兩瞪眼，比較漂亮的那就先加十分

(當(dāng)然，有一種情況是刻意用心去美化了介面結(jié)果弄巧成拙搞的怨聲載道人人喊打，但那種比較不多見(jiàn)，也不是每家公司都會(huì)搞到這步田地，就先不討論)

＊學(xué)完基本功後下一步

在我的標(biāo)準(zhǔn)裏，當(dāng)一個(gè) developer 對(duì)上圖內(nèi)每一塊都有中等程度的瞭解後，就算是完成 flex 養(yǎng)成教育，可以邁向下一個(gè)階段。

也就是開(kāi)始熟悉 application 的製作手法，這包含

-瞭解至少一種以上的開(kāi)發(fā)框架，例如 Cairngorm，老實(shí)說(shuō)我對(duì)這個(gè)框架沒(méi)什麼好感(因?yàn)槭址ㄌ}雜，只適合超複雜登月計(jì)畫(huà)或火星探勘時(shí)使用)，但它結(jié)構(gòu)設(shè)計(jì)良好，又是業(yè)界公認(rèn)的聖盃，等於是專(zhuān)家們共通的語(yǔ)言，因此至少要先瞭解它在做什麼，將來(lái)在專(zhuān)業(yè)場(chǎng)合才好溝通(俗話說(shuō) know the rules so you know what you are breaking, 就是指這情況)

-接著可以看看比較簡(jiǎn)單的手法，像 Riawave, Model-Glue:Flex, PureMVC…等，基本上這些框架設(shè)計(jì)方式都大同小異，每個(gè)都有不同的應(yīng)用場(chǎng)合，可以挑一個(gè)喜歡的再自行修改。

-瞭解基本的概念，例如 Value Object, DAO, MVC 等，它們?cè)诖蟛糠莸某淌娇蚣苎Y都會(huì)出現(xiàn)，早點(diǎn)學(xué)會(huì)日子比較輕鬆。

接著就是開(kāi)始實(shí)際 coding，寫(xiě)一個(gè)中小型規(guī)模的app，不論是單純的 CRUD app，或是留言版、電話簿、進(jìn)銷(xiāo)存管理都可以，籍由多寫(xiě)來(lái)強(qiáng)化編程的概念，然後透過(guò)大量的 peer code review 來(lái)找出可改進(jìn)的地方。

＊結(jié)論

結(jié)論還是老話一句：要入門(mén) flex 超級(jí)簡(jiǎn)單，只要不是白癡應(yīng)該一小時(shí)就行，但要成為可獨(dú)當(dāng)一面的專(zhuān)業(yè)開(kāi)發(fā)者，路就很長(zhǎng)，如果沒(méi)有走對(duì)方向很容易就迷失甚至最後放棄。

換句話說(shuō)，要能成為職場(chǎng)上真正需要的 professional developer，並不如表面上想像的容易(其實(shí)我想每種技術(shù)領(lǐng)域跟產(chǎn)業(yè)都一樣吧)，這也是我過(guò)去半年來(lái)協(xié)助很多公司做 recruiting 後的感想。

     摘要:       做Flex做久了做大了，就會(huì)覺(jué)得之前寫(xiě)的的Flex代碼開(kāi)始有點(diǎn)亂，哪怕你寫(xiě)的規(guī)范了，但總覺(jué)得結(jié)構(gòu)松散，維護(hù)不方便，相信很多人剛開(kāi)始做Flex的時(shí)候，都是想到什么功能，就寫(xiě)什么功能，或者有些好點(diǎn)的，就先畫(huà)了個(gè)大體的流程圖之類(lèi)的，因?yàn)楝F(xiàn)在Flex普及得還不夠，很多人做Flex也是試探階段，不敢用作商業(yè)項(xiàng)目或其它大項(xiàng)目，只會(huì)用來(lái)試水技術(shù)層面的...  閱讀全文       在上一篇文章中，為大家介紹了Flex中皮膚的簡(jiǎn)單且基本也是最常用的用法，就是先在外部程序中做好皮膚樣式，之后再在Flex中加載這些皮膚資源，比如是PNG圖片，或者是SWF文件等，這些方法都是比較直接且方便簡(jiǎn)單的。不過(guò)靈活性還是不太好，而現(xiàn)在這篇文章中要講的，就是從程序里AS編寫(xiě)的皮膚，你可以更靈活自由地控制皮膚的樣式與表達(dá)方式等，而不用依賴(lài)于外部的圖片或SWF資源，不過(guò)這樣還是有些缺點(diǎn)的，就是擴(kuò)展或是改變時(shí)就比較不靈活，像圖片資源的皮膚的話，可以很輕易的改變不同的圖片的路徑資源等就可以修改了不同的皮膚模式，而用AS Graphics寫(xiě)的皮膚的話，要修改一下那些代碼，當(dāng)然，你也可以在AS代碼里寫(xiě)上動(dòng)態(tài)加載其它圖片資源又或者作一些更高級(jí)的效果等等。

      先在這里解析一下，要以代碼方式自定義一個(gè)皮膚的話，需要自已編寫(xiě)一個(gè)皮膚子類(lèi)，繼承ProgrammaticSkin這個(gè)類(lèi)，這個(gè)是所有編寫(xiě)自定義皮膚的基類(lèi)，該類(lèi)也派生了另外兩個(gè)類(lèi)：RectangularBorder 與 Border 類(lèi)，都是差不多的，如果你是寫(xiě)Icon之類(lèi)的小皮膚的話，比如CheckBox或者RadioButton這類(lèi)皮膚不需要太復(fù)雜的畫(huà)圖邏輯，而且大小固定，就像是一個(gè)小Icon吧，只是有幾個(gè)狀態(tài)而已，這類(lèi)小皮膚的話，繼承ProgrammaticSkin就可以了，而寫(xiě)一些復(fù)合的控件，背景大小可以調(diào)節(jié)之類(lèi)的皮膚（其實(shí)就是大部分皮膚）就用Border或者RectangularBorder類(lèi)。但都有一個(gè)相同點(diǎn)，就是繼承了那些類(lèi)之后，都必需覆蓋 updateDisplayList 這個(gè)方法，這個(gè)方法是由程序自動(dòng)調(diào)用，當(dāng)需要用到控件時(shí)，需要控件的皮膚進(jìn)行表現(xiàn)時(shí)，就會(huì)調(diào)用那個(gè)方法，所以你必需覆蓋它，并將你的畫(huà)圖邏輯代碼寫(xiě)在那個(gè)方法里面。還有要注意的是，這個(gè)皮膚類(lèi)會(huì)與你應(yīng)用這皮膚的控件的Style設(shè)置共享，也就是說(shuō)你可以在編寫(xiě)這個(gè)皮膚類(lèi)代碼里面，使用getStyle（）等等方法獲得設(shè)置在目標(biāo)控件中的風(fēng)格屬性，比如說(shuō)是<mx:Panel backgroundColor="0xffffff" borderSkin="MySkin"> 那么你可以在MySkin代碼里獲取這個(gè)顏色值來(lái)進(jìn)行畫(huà)出該顏色的圖片或其它操作，而直接將顏色值寫(xiě)死在代碼里是不規(guī)范的，就如我下面貼出來(lái)的的代碼，不過(guò)出于自已懶，快速代個(gè)示例代碼，所以犯這個(gè)錯(cuò)了。說(shuō)多了，下面看看代碼先。

好了，我們先看看看代碼，這份代碼是寫(xiě)了一個(gè)Panel的皮膚：


上面的代碼就是皮膚的代碼，之后你還要做的，就是將該皮膚應(yīng)用到Panel這個(gè)容器里：


      代碼很簡(jiǎn)單，這里要說(shuō)一下，viewMetrics 這個(gè)屬性是Container控件所獨(dú)有的屬性，是一個(gè)只讀屬性，編寫(xiě)Container子類(lèi)的時(shí)候都要覆蓋它，是用于定義這個(gè)容器正文區(qū)與邊界值的，比如Canvas的四周都是0，所以沒(méi)有標(biāo)題欄與邊條，而Panel就有四周的邊界，而Top邊界比較大，用作顯示title的，所以如果你要做容器的皮膚的話，注意一下這個(gè)值。還有就是，為什么獲取了皮膚應(yīng)用的控件引用（parent）后還要判斷它是否為空？因?yàn)楫?dāng)程序加載到這個(gè)控件時(shí)，是先加載那個(gè)皮膚的，所以parent的值未被設(shè)置，是空的，如果你不作判斷的話，將會(huì)出現(xiàn)空引用的錯(cuò)誤（parent.viewMetrics），當(dāng)加載完皮膚后，再加載控件并設(shè)置控件的屬性和設(shè)置皮膚，這時(shí)將會(huì)再次調(diào)用updateDisplayList的方法，這時(shí)parent才有值，就是那個(gè)控件的引用。當(dāng)改變了style或一些屬性后，又會(huì)自動(dòng)觸發(fā)調(diào)用updateDisplayList方法。

我們來(lái)看看最終運(yùn)行效果：



補(bǔ)充一下：
在第一篇文章里，說(shuō)了將皮膚做在SWF文件里再加載，想一下，可以將該皮膚做成動(dòng)畫(huà)MC的，而不單單只是一個(gè)畫(huà)面，可以做成一些動(dòng)畫(huà)作為皮膚，之后在Flex引用該SWF的Symbol，這樣皮膚就有了動(dòng)畫(huà)效果了，不只只是單純的不動(dòng)的平面圖！

      Flex中的皮膚教程就說(shuō)到這里，皮膚還有很多可探索的，只要大家有求知欲，多點(diǎn)看看英文文檔，看看別人的例子程序代碼，現(xiàn)在Flex也開(kāi)源了，也可以多看看Flex的源碼，會(huì)得到很多知識(shí)！



      好久沒(méi)有寫(xiě)文章了，一直用“忙”來(lái)為自已找籍口，其實(shí)是懶，不過(guò)這個(gè)月發(fā)生了這么大的事情 5.12 讓我們每個(gè)人都永記心中，看到中國(guó)人的團(tuán)結(jié)，看見(jiàn)解放軍們志愿者們這么努力地為災(zāi)區(qū)奉獻(xiàn)，我也不能再為自已找借口了，雖然我遠(yuǎn)在廣東，不能到現(xiàn)場(chǎng)去參與救緩，錢(qián)也捐過(guò)了，但想想，我還有事情可以做的，就是用我自已的知識(shí)，寫(xiě)點(diǎn)技術(shù)文章，雖則不能直接的幫助到災(zāi)區(qū)，但也為國(guó)民提高Flex技術(shù)知識(shí)出分力，做好本職工作。在這里哆嗦點(diǎn)也得說(shuō)句：為災(zāi)區(qū)遇難者祈禱，為災(zāi)區(qū)救緩不懈努力的軍民給與崇高的敬意!
.....................................................(三分鐘后)

      好了，我們轉(zhuǎn)入正題，之前我也寫(xiě)過(guò)Flex的動(dòng)畫(huà)與變換的文章，不知道大家有沒(méi)有看過(guò)。現(xiàn)在我要寫(xiě)的就是Flex中的皮膚樣式方面的，我技術(shù)不太好，算是自已學(xué)習(xí)Flex過(guò)程中的理解體會(huì)吧。
      這里是第一篇，將講述一下Flex中如何應(yīng)用UI的皮膚，其實(shí)應(yīng)用UI皮膚不難，你們?cè)谑褂肍lex的過(guò)程中是否覺(jué)得Flex中自帶的皮膚樣式不太好看？或者是想自已做個(gè)比較有特色的？下面就我們來(lái)說(shuō)說(shuō)皮膚吧，先來(lái)個(gè)簡(jiǎn)單的，你們?cè)谧鼍W(wǎng)頁(yè)時(shí)，做導(dǎo)航按鈕什么的很多人都是用一個(gè)圖片來(lái)作為一個(gè)按鈕吧？之后做幾個(gè)不同的顏色，之后就在CSS或者JS里設(shè)置一下當(dāng)鼠標(biāo)Over和Down和Out等等動(dòng)作時(shí)，就切換不同顏色的圖片，這樣實(shí)現(xiàn)動(dòng)態(tài)效果。在Flex里也可以如此簡(jiǎn)單的做皮膚。你可以先畫(huà)好一個(gè)UI的皮膚，之就就將該圖片應(yīng)用到Flex里面。
先來(lái)看看效果：


之后我們來(lái)看看代碼：


      怎么樣？很簡(jiǎn)單吧？大家需要注意一下的是在Embed標(biāo)簽里，我定義了一些scaleGridTop之類(lèi)的屬性，這是跟皮膚的縮放有關(guān)的，如果不定義那些屬性的話，那么圖片是多大的，就按多大來(lái)進(jìn)行縮放，當(dāng)你的按鈕很大時(shí)，那些皮膚圖片就會(huì)被拉大，出現(xiàn)馬賽克與變形等，這都是不好看的。加入了9格縮放模式后，當(dāng)你縮放按鈕時(shí)，九個(gè)格中的四個(gè)角的區(qū)域不會(huì)被縮放，保持原樣，中間格會(huì)寬高同時(shí)縮放，中間上下格會(huì)僅是寬度縮放，中間左右格只會(huì)高度縮放，這樣，那個(gè)皮膚的邊框無(wú)論你如何縮放，都是原來(lái)的大小比例，而不會(huì)將整個(gè)圖片一起拉申。
      現(xiàn)在的按鈕太單調(diào)了，只有一個(gè)外觀，現(xiàn)在大家可以再加多兩個(gè)不同顏色或者其它圖案的圖片作為不同狀態(tài)的皮膚就可以了，比如將overSkin改成紅色邊框的圖片等。

      其實(shí)大家有沒(méi)有發(fā)現(xiàn)，上面代碼的寫(xiě)法感覺(jué)比較麻煩的。我們可以用CSS來(lái)實(shí)現(xiàn)，我們可以直接點(diǎn)，將皮膚直接寫(xiě)在Button上，如下：

這樣也是同樣的效果。省事好多了吧。或者我們用CSS來(lái)寫(xiě)：

如果覺(jué)得加上CSS代碼會(huì)令程序代碼混亂的話，就將CSS代碼寫(xiě)在CSS文件里去，在程序里導(dǎo)入CSS文件就可以了。(至于CSS的用法，我就不說(shuō)了，反正Flex里的CSS方式與Html里的用法用樣。只是要注意一下CSS里面設(shè)置的屬性的名字就可以了)

<mx:Style source="styles/styles.css" />

      但有人可能會(huì)問(wèn)，這樣做的話，如果一個(gè)程序有很多不同的UI，并有不同的皮膚，那不就是要生成很多的圖片？這個(gè)問(wèn)得好，確實(shí)，如果以這種方式的話，就像一個(gè)網(wǎng)站里的images文件夾一樣，有很多的小圖片，這樣太麻煩了，而且也不好維護(hù)。既然有這樣的問(wèn)題，我們就將皮膚干脆做成在一個(gè)文件里面算了，方便快捷，維護(hù)又方便，而這個(gè)文件，就是SWF文件。我們?nèi)绻蠪lash基礎(chǔ)的話，基本對(duì)MC都不會(huì)陌生，對(duì)，這次我們的主角就是SWF里面的MC，我們可以將一個(gè)皮膚做成一個(gè)MC，在Flash里將所有用到的皮膚都做在一個(gè)SWF里，一個(gè)圖片就像是一個(gè)MC，之后發(fā)布該SWF文件，在Flex里加載這個(gè)SWF文件，再在需要的皮膚里調(diào)用SWF里面相應(yīng)皮膚的MC的名字就可以了。如下：
這個(gè)是在Flash里做好的皮膚SWF文件，里面有三個(gè)不同顏色的皮膚模式
[swf]attachments/month_0805/p2008518233635.swf[/swf]
這里要注意一下，在Flash里做這些皮膚時(shí)，要將MC加上鏈接，鏈接的名稱(chēng)，就是你在Flex里調(diào)用該皮膚的名稱(chēng)，圖片如下：




在做好皮膚的SWF后，讓我們回到Flex 里面，在Flex里寫(xiě)如下代碼：


注意一下的就是，在Embed標(biāo)簽里，要導(dǎo)入的資源文件不是PNG了，而是一個(gè)SWF，就是我們剛才在Flash里做好的皮膚文件，注意看，后面還跟著一個(gè)symbol屬性，該屬性就是指明你要調(diào)用哪一個(gè)MC，就是SWF里面的MC，記得，都要為每個(gè)MC做鏈接，并鏈接名字要與symbol里的名字致。至此，我們的皮膚就完成了。一個(gè)SWF文件就搞掂。這里是最終效果：


好了，這篇教程就到些結(jié)束，上面介紹的都是Skin的比較簡(jiǎn)單快捷的用法，不過(guò)靈活性就不是很大，但也是皮膚技術(shù)的最基礎(chǔ)的，大家也可以再擴(kuò)展一下其它用法等等的，在下篇文章，也就是Flex皮膚系列文章的（二）中，我會(huì)介紹一下用程序代碼來(lái)編寫(xiě)皮膚，這就是不依賴(lài)于外部的資源文件，直接用AS3代碼用Graphics來(lái)自已畫(huà)皮膚。下篇將會(huì)用到AS3的Draw API方面的知識(shí)，請(qǐng)大家做好準(zhǔn)備。

在此再次向我們的災(zāi)區(qū)戰(zhàn)士們給與崇高的敬意！
     摘要:       好久沒(méi)有發(fā)表文章了，這天寫(xiě)了一個(gè)Flash的一個(gè)動(dòng)畫(huà)菜單的效果，在之前看到一個(gè)站的一個(gè)菜單效果挺不錯(cuò)，就試著自已也用純AS3寫(xiě)一個(gè)出來(lái)試試。看了一下研究了一個(gè)算法，自已也寫(xiě)了個(gè)出來(lái)，寫(xiě)得比較粗糙，所以運(yùn)行時(shí)可能還會(huì)有點(diǎn)小問(wèn)題，有空要再優(yōu)化一下算法才行。 有點(diǎn)像 Apple 的菜單效果。原本是計(jì)劃用圖片的，不過(guò)后...  閱讀全文 用PV3D做的一個(gè)Flex效果，有時(shí)間會(huì)整理一下代碼與文檔貼出來(lái)！
以下是效果：
這篇文章是Flex動(dòng)畫(huà)效果變換的最后一編了，這篇將會(huì)講述Flex中的“變面”（我自已的理解）技術(shù)，即是Transitions！

如果看過(guò)Flex SDK里面的自帶的例子程序，有一個(gè)叫“Flex Store”的應(yīng)用，在里面的手機(jī)列表中看某一個(gè)手機(jī)的詳細(xì)時(shí)，就是這種效果，不多說(shuō)，這篇會(huì)比較簡(jiǎn)單，先看看效果：


看到了效果了吧，這種的變換不難實(shí)現(xiàn)，再來(lái)看看代碼再解析：


代碼會(huì)比較多，我們先看看<mx:states>標(biāo)簽，它是一個(gè)集合，就是你的程序有多少個(gè)狀態(tài)，什么是狀態(tài)呢？我自已理解就即是有多少個(gè)“面譜”，即是現(xiàn)在程序里面有四個(gè)顯示界面狀態(tài)，所以里面有四個(gè)<mx:State>標(biāo)簽，每個(gè)<mx:State>狀態(tài)都需要有一個(gè)名字name屬性，以區(qū)分是哪個(gè)界面狀態(tài)，在每個(gè)狀態(tài)里面都有很多<mx:SetProperty>的標(biāo)簽，看英文都知道了，該標(biāo)簽用于設(shè)置這個(gè)狀態(tài)下的所有界面元素的屬性（組件的屬性），因?yàn)槊總€(gè)界面狀態(tài)中各個(gè)組件的大小布局都不同，所以在狀態(tài)標(biāo)簽里就要預(yù)先設(shè)置好該狀態(tài)下的組件的位置與大小，那個(gè)target="{windowC}"屬性就是設(shè)置你要設(shè)置的哪個(gè)組件的名字拉，name="height"就是你要設(shè)置的屬性value="333"就是你要設(shè)置該屬性的值，我們細(xì)心看看的話，可能會(huì)發(fā)現(xiàn)，每個(gè)狀態(tài)里面設(shè)置的屬性，都是width,height,x,y這四個(gè)屬性，我們看看上面的最終效果就知道無(wú)論切換哪個(gè)狀態(tài)，組件間的變換來(lái)來(lái)去去都是移動(dòng)位置與大小改變，就是說(shuō)當(dāng)你變換狀態(tài)時(shí)，需要改動(dòng)哪些屬性的，就將它的目標(biāo)值設(shè)置在<mx:SetProperty>標(biāo)簽里。再看看下面的<mx:transitions>標(biāo)簽，這個(gè)也是個(gè)集合，里面放著不同的變換方法<mx:Transition>，我們來(lái)看看變換標(biāo)簽的代碼：

formState與toState屬性是要設(shè)置該狀態(tài)變換是怎樣觸發(fā)的，里面要填上狀態(tài)的名字，<mx:State name="C">   C就是狀態(tài)的名字，即是如果你formState="A",toState="C"的話，只有從A狀態(tài)切換到C狀態(tài)時(shí)，才會(huì)產(chǎn)生以上的變換動(dòng)畫(huà)效果，如果不附合該規(guī)則如A切換到B狀態(tài)的話，則只會(huì)按狀態(tài)的屬性設(shè)置值來(lái)直接生成視圖，而沒(méi)有動(dòng)畫(huà)漸變效果了。如果填上“*”的話，就是無(wú)論是哪個(gè)狀態(tài)切換到哪個(gè)，都會(huì)運(yùn)行動(dòng)畫(huà)效果，至于變換期間用到哪種動(dòng)畫(huà)效果來(lái)進(jìn)行漸變，就在它的下級(jí)標(biāo)簽里定義了，這里它用到了<mx:Parallel>并列播放移動(dòng)與重整大小的動(dòng)畫(huà)效果，之前文章講過(guò)，這里不多說(shuō)了。基本上，一個(gè)變換就做好了，但我們還需要觸發(fā)它，也就是去改變程序當(dāng)前的顯示狀態(tài)：click="currentState='A'" 在每個(gè)組件的click事件里，改變程序的currentState值，就是改變程序的當(dāng)前顯示狀態(tài)！之后動(dòng)畫(huà)效果就會(huì)觸發(fā)了！

遲點(diǎn)有時(shí)間，再做一個(gè)3D的動(dòng)畫(huà)效果，將會(huì)用到PV3D的框架，再整理一個(gè)代碼與教程也貼出來(lái)跟大家分享吧，不過(guò)不知道大家對(duì)PV3D這個(gè)東東熟悉不，不熟悉的話，可能看得痛苦點(diǎn)，至于PV3D方面的教程，我也看看抽點(diǎn)時(shí)間寫(xiě)寫(xiě)吧！先謝過(guò)大家的支持！
在上篇文章《Flex的動(dòng)畫(huà)效果與變換（一）》中講到了使用Flex系統(tǒng)里面自帶的一些動(dòng)來(lái)效果的使用，但很多開(kāi)發(fā)者都并不滿足Flex里提供的簡(jiǎn)單的漸變大小，透明，移動(dòng)，遮罩等的效果，如果是Flash的開(kāi)發(fā)者的話，更不用說(shuō)了，在Flash，多數(shù)人都是隨意的制作一些動(dòng)畫(huà)效果等，而且形態(tài)多變。但是不是Flex里就不能實(shí)現(xiàn)呢？肯定不是，在Flex里也可以自定義動(dòng)畫(huà)效果，只不過(guò)就是沒(méi)有Flash里面那么簡(jiǎn)單隨意了。不過(guò)熟悉了之后，也會(huì)覺(jué)得在Flex里制作動(dòng)畫(huà)也不是什么難事，不多說(shuō)了，轉(zhuǎn)入正題！

在這里我先介紹一下Flex里面的動(dòng)畫(huà)效果機(jī)制，在Flex里面要使用動(dòng)畫(huà)效果的話，先要?jiǎng)?chuàng)建一個(gè)效果標(biāo)簽，之后在組件里（如TextInput）寫(xiě)上效果觸發(fā)器，但可能會(huì)有人問(wèn)，如果程序里我就只定義一個(gè)移動(dòng)效果
<mx:Move>，之后我程序里面有5個(gè)組件，每個(gè)組件的動(dòng)畫(huà)效果都指向這個(gè)Move效果，那么它是不是組件一運(yùn)行了效果后，組件二再觸發(fā)效果，是不是組件一的效果會(huì)消失才會(huì)到組件二里播放？其它不是，雖然我們只定義了一個(gè)Move，但我們定義的只是Move效果的工廠，這里就用到了設(shè)計(jì)模式中的“工廠方法”模式，其實(shí)5個(gè)組件都可以同時(shí)運(yùn)行效果，而5個(gè)效果都是不同的一個(gè)實(shí)例，彼此獨(dú)立。所謂工廠方法模式，就好比是一家衣服制造工廠，A走進(jìn)這家工廠說(shuō)要一件衣服，工廠就制作一件合適A的Size的衣服，B進(jìn)去，就會(huì)生產(chǎn)合適B的衣服，但A與B的衣服都是一樣的。就好等于面向?qū)ο笾械念?lèi)與對(duì)象的關(guān)系一樣。（我可能說(shuō)多了-_-）
效果運(yùn)行的時(shí)候，其實(shí)運(yùn)行的不是Move這個(gè)對(duì)象，而是MoveInstance這個(gè)對(duì)象，Move只是工廠，既然一個(gè)動(dòng)畫(huà)效果就主要分這兩大部份，我們就先建造一個(gè)工廠吧！

在Flex里面所有的效果的工廠都是繼承自 mx.effects.Effect 這個(gè)類(lèi)，我們也不能搞特殊，我們自定義的效果也要繼承那個(gè)類(lèi)，先看以下整個(gè)工廠類(lèi)的代碼：


大家看看上面的代碼，其中先看構(gòu)造函數(shù)，構(gòu)造函數(shù)要接收一個(gè)默認(rèn)為空的Object對(duì)象
public function MyEffect(newTarget:Object = null)
之后在該構(gòu)造函數(shù)里面調(diào)用父類(lèi)的構(gòu)造函數(shù)，并且將instanceClass這個(gè)屬性設(shè)置為你的該效果的實(shí)例類(lèi)，因?yàn)檫@個(gè)類(lèi)是工廠類(lèi)，所以要知道你這個(gè)工廠生產(chǎn)什么產(chǎn)品，即上面說(shuō)的“衣服”，所以這里我們將其命名為MyEffectInstance，注意：在Flex中的所有效果實(shí)例類(lèi)都是在工廠類(lèi)后面加Instance，也不是一定，只是規(guī)范而已。還有注意，下面一會(huì)定義的實(shí)例類(lèi)的類(lèi)名一定要跟這里的一致。
大家還會(huì)看到，上面的代碼中，復(fù)寫(xiě)（override）了二個(gè)方法：getAffectedProperties( )與initInstance(instance:EffectInstance)
這兩個(gè)方法都是要復(fù)寫(xiě)的，先說(shuō)說(shuō)getAffectedProperties( )這個(gè)方法，這個(gè)方法是獲取被改變的屬性值，怎么說(shuō)呢，比如說(shuō)，你做的動(dòng)畫(huà)效果如果要用到組件對(duì)象的一些屬性的話，就要返回這些屬性的名字，如：你的效果是對(duì)組件做旋轉(zhuǎn)的話，則：

反正你做的效果需要對(duì)組件修改什么屬性的話，都在這個(gè)方法里返回名字，修改多個(gè)屬性的話就往數(shù)組里加就是了。
后面就是這個(gè)方法了initInstance，該方法接收一個(gè)instance:EffectInstance參數(shù)，也就是效果實(shí)例類(lèi)啦，因?yàn)槊總€(gè)效果實(shí)例類(lèi)都要繼承EffectInstance類(lèi)，所以這個(gè)方法里的參數(shù)寫(xiě)的是父類(lèi)，在里面要做其它的話，需要將 instance 轉(zhuǎn)換為你相應(yīng)的效果類(lèi)。在這個(gè)方法里面，也是要調(diào)用父類(lèi)的同名方法：super.initInstance(instance);
基本上，一個(gè)工廠類(lèi)就寫(xiě)好了，但這樣只是最簡(jiǎn)單的寫(xiě)法，試想想，每個(gè)人穿衣服的Size不同，喜歡的顏色也不同，所以，是不是可以由用戶(hù)來(lái)定義他們想要的效果的顏色等屬性呢？當(dāng)然，你對(duì)衣服有什么要求，都是向工廠提出的，沒(méi)有人會(huì)對(duì)衣服說(shuō)吧？所以，這些可設(shè)置的屬性也是定義在工廠類(lèi)里面，所以下面，我們?yōu)樵撘路啥ㄖ祁伾珵槔诠S類(lèi)里面加入如下代碼：

你想運(yùn)行時(shí)的效果可以設(shè)置不同的顏色的話，就可以直接設(shè)置MyEffect的color屬性，之后將這個(gè)屬性傳給效果實(shí)例類(lèi)：

這些對(duì)效果實(shí)例類(lèi)的設(shè)置，都是要定在initInstance方法里了，你想對(duì)運(yùn)行時(shí)的效果設(shè)置什么屬性的話，都要先告訴工廠類(lèi)，之后工廠類(lèi)在這個(gè)方法里面轉(zhuǎn)嫁給實(shí)例類(lèi)，這樣，同一個(gè)效果，可以運(yùn)行不同的顏色。但前提是你后面要寫(xiě)的實(shí)例類(lèi)要有color這個(gè)屬性。
現(xiàn)在已做好了工廠類(lèi)了，下面要做效果實(shí)例類(lèi)了，先貼出完整代碼：


我們看到，每一個(gè)動(dòng)畫(huà)效果實(shí)例類(lèi)，都要繼承自EffectInstance這個(gè)類(lèi)，構(gòu)造函數(shù)也是需要接收一個(gè)Object，這個(gè)Object其實(shí)就是你要應(yīng)用到的組件對(duì)象，這個(gè)會(huì)是系統(tǒng)自動(dòng)傳遞的，接收了Object后還要用該Object 調(diào)用父類(lèi)的構(gòu)造函數(shù)：super(newTarget);
之后還有一件必做的事，就是重寫(xiě)play()這個(gè)方法：override public function play( ):void
是不是對(duì)play()很熟悉？因?yàn)榈谝黄恼轮校陀玫竭@個(gè)方法來(lái)發(fā)動(dòng)效果的播放的，所以，你需要做的動(dòng)畫(huà)編程都是在這個(gè)方法里。但還是要先調(diào)用父類(lèi)的同名方法，super.play();之后的，就是你想怎么畫(huà)就怎么畫(huà)啦。我將畫(huà)一個(gè)與要應(yīng)用效果的組件一樣大小的矩型，之后該矩形會(huì)放大并透明，效果都寫(xiě)在drawShape()方法里了。看到這個(gè)方法里面的代碼，是不是跟Flash里的一樣了？
這里再貼上MXML代碼：

這里先看看最終效果：


在這里，我用了ENTER_FRAME的寫(xiě)法，但是如果不用ENTER_FRAME方式制作動(dòng)畫(huà)的話，還有另外一種方法的，那就是Tween了，Tween是以“時(shí)間”為準(zhǔn)，而ENTER_FRAME是以“幀”為準(zhǔn)，其實(shí)到這里，一個(gè)基本的Flex自定義動(dòng)畫(huà)效果就完成了，但擴(kuò)展一下的，還可以用Tween來(lái)實(shí)現(xiàn)，而且建議用Tween來(lái)寫(xiě)動(dòng)畫(huà)效果，易控制，清淅一點(diǎn)。用Tween實(shí)現(xiàn)的話，效果與寫(xiě)法都是差不多的，要用Tween就要將效果實(shí)例類(lèi)繼承自TweenEffectInstance這個(gè)類(lèi)，并重寫(xiě)它的onTweenUpdate( )方法與onTweenEnd( )方法，這種Tween效果的寫(xiě)法，將會(huì)比ENTER_FRAME的寫(xiě)法方便，因?yàn)樗鶕?jù)的是時(shí)間，所以，你可以指定效果播放的時(shí)間，并且當(dāng)播放完畢會(huì)自動(dòng)調(diào)用onTweenEnd()方法，你可以在該方法里寫(xiě)一些處理操作，如釋放資源等等
由于編幅關(guān)系，就不在這里詳細(xì)介紹TweenEffectInstence了，就簡(jiǎn)單貼出該類(lèi)的寫(xiě)法與注釋吧：


就寫(xiě)到這里吧，關(guān)于Tween其它的，就留作為作業(yè)，讓大家思考與探索吧！之后如果有時(shí)間的話，將會(huì)寫(xiě)完下篇文章介紹Flex的“變面”動(dòng)畫(huà)，即狀態(tài)變換！這里先謝謝大家支持！
在Flex里面不像在Flash里面隨意制作動(dòng)畫(huà)了，F(xiàn)lex更趨向于應(yīng)用程序，而不是動(dòng)畫(huà)制作了，所以沒(méi)有了時(shí)間軸的概念。在Flex中使用動(dòng)畫(huà)效果，可以用Flex自帶的Effect，或者自已定制Effect，因?yàn)楹芏嗳硕枷虢鐵lash里面的一樣操作Flex，比如在Flash里面做一個(gè)動(dòng)態(tài)按鈕很容易，當(dāng)鼠標(biāo)移動(dòng)到上面時(shí)，會(huì)有很多發(fā)光的點(diǎn)跑出來(lái)（熒火蟲(chóng)效果），這種效果在Flash十分容易實(shí)現(xiàn)，但在Flex里面要實(shí)現(xiàn)這種效果就不是那么簡(jiǎn)單的了，下面說(shuō)說(shuō)在Flex里的的動(dòng)務(wù)效果的使用與自定義制作。

首先介紹一下Flex里面的自帶的效果有以下幾種：
  Blur                            模糊效果
  Move                          移動(dòng)效果
  Fade                          淡入淡出效果            
  Glow                          發(fā)光效果
  Resize                       調(diào)整大小效果
  Rotate                       旋轉(zhuǎn)效果
  Zoom                         縮放效果
  WipeLeft                    用遮罩實(shí)現(xiàn)畫(huà)面收放效果，下同，分別為不同方向
  WipeRight
  WipeUp
  WipeDown

不同的效果所需要設(shè)置的屬性也不一樣，比如Blur效果需要設(shè)置它的X與Y軸的模糊像素
<mx:Blur id="blur" blurXFrom="0" blurXTo="10" />
而Move效果需要設(shè)置移動(dòng)的位置信息
<mx:Move id="moveEffect" xFrom="-100" />
其它設(shè)置可以參考Flex語(yǔ)言參考

下面說(shuō)說(shuō)如何使用這些效果。要運(yùn)行這些效果有兩種方法：一種是調(diào)用該效果的play()方法，另外一種是使用觸發(fā)器來(lái)觸發(fā)效果。
（1）使用play()方法：
先看效果：

以下代碼：


在代碼中看到，要使用效果，先定好一個(gè)效果，如上面的<mx:Blur ...>該標(biāo)簽就是模糊效果的MXML標(biāo)簽，定好效果后在Panel的點(diǎn)擊事件里再對(duì)該效果進(jìn)行一些設(shè)置，如be.target = event.currentTarget 設(shè)置該效果將要應(yīng)用到的目標(biāo)組件(Component)，之后再調(diào)用play()方法后，該效果就會(huì)應(yīng)用在Panel上面播放！

（2）使用觸發(fā)器播放效果：
使用觸發(fā)器播放效果的話，可以不用寫(xiě)ActionScript代碼，直接在組件的效果觸發(fā)器上指明使用哪個(gè)效果就可以了，比較簡(jiǎn)單明了，但就不能進(jìn)行更多的屬性定制，而用AS控制播放的話，可以對(duì)效果進(jìn)行很多的設(shè)置再相應(yīng)根據(jù)情況播放，先看看觸發(fā)器播放的代碼：


看以上代碼，先寫(xiě)好了Blur的效果并設(shè)置好屬性后，duration="2000"這個(gè)是播放的時(shí)間以毫秒為單位。
在Panel標(biāo)簽里有這樣一句：creationCompleteEffect="{be}" 這個(gè)就是觸發(fā)器，是該P(yáng)anel組件的效果觸發(fā)器，當(dāng)Panel組件加載完成時(shí)，會(huì)由系統(tǒng)自動(dòng)調(diào)用該效果觸發(fā)器，觸發(fā)器里面指了觸發(fā) be 這個(gè)Blur效果
在Flex里面還有很多觸發(fā)器如：
  addedEffect                                       被添加進(jìn)容器時(shí)觸發(fā)效果
  removedEffect                                   被從容器中移除時(shí)觸發(fā)效果
  creationCompleteEffect                     被創(chuàng)建成功時(shí)觸發(fā)效果
  focusInEffect                                     獲得焦點(diǎn)時(shí)觸發(fā)
  focusOutEffect                                   失去焦點(diǎn)時(shí)觸發(fā)
  hideEffect                                          被隱藏時(shí)(visible=false)觸發(fā)
  showEffect                                        被顯示時(shí)(visible=true)觸發(fā)
  rollOverEffect                                     鼠標(biāo)經(jīng)過(guò)時(shí)觸發(fā)
  rollOutEffect                                       鼠標(biāo)離開(kāi)時(shí)觸發(fā)
  mouseDownEffect                              鼠標(biāo)按下時(shí)觸發(fā)
  mouseUpEffect                                   鼠標(biāo)松開(kāi)時(shí)觸發(fā)
  moveEffect                                         被移動(dòng)時(shí)觸發(fā)
  resizeEffect                                       被重整大小時(shí)觸發(fā)

注意：這些都是效果觸發(fā)器，不要與事件觸發(fā)器混亂了。事件觸發(fā)器是rollOver，事件觸發(fā)器與效果觸發(fā)器差不多，事件觸發(fā)器是當(dāng)用戶(hù)執(zhí)行相就操作時(shí)觸發(fā)事件，將會(huì)調(diào)用自定的事件觸發(fā)處理函數(shù)，而效果觸發(fā)器是執(zhí)行相應(yīng)操作時(shí)被觸發(fā)并由系統(tǒng)自動(dòng)調(diào)用所定的效果的play()方法。

現(xiàn)在說(shuō)說(shuō)效果的一些其它屬性：
每個(gè)效果都有reverse( );方法，該方法是反向播放，原本由小到大的變化，而調(diào)用reverse( );后再運(yùn)行play()的話，效果將會(huì)從大到小進(jìn)行播放。
但要注意的一點(diǎn)是，reverse( );不會(huì)自動(dòng)播放，即是單單調(diào)用reverse( );的話，效果并不會(huì)播放，他只會(huì)記錄該效果為倒轉(zhuǎn)，而要再調(diào)用play()后倒轉(zhuǎn)效果才會(huì)開(kāi)始播放。而調(diào)用pause( )與resume( )就是暫停與繼續(xù)播放效果

startDelay這個(gè)屬性是設(shè)置效果的播放延時(shí)，以毫秒為單位，即要等待多少毫秒后效果才開(kāi)始播放，如：
<mx:Blur id="be" blurXTo="50" startDelay="3000" />
該模糊效果將會(huì)在調(diào)用play()之后3秒才開(kāi)始播放

repeatCount這個(gè)屬性是設(shè)置效果的重復(fù)次數(shù)，默認(rèn)為1，設(shè)置為0的話就是不停循環(huán)播放
<mx:Blur id="be" blurXTo="50" startDelay="3000" repeatCount="5" />

每個(gè)效果都有兩個(gè)事件：effectStart 與 effectEnd
你可以在該效果事件的處理函數(shù)里面對(duì)效果作相應(yīng)的操作，如：

當(dāng)效果播放完時(shí)，系統(tǒng)將會(huì)自動(dòng)觸發(fā)effectEnd事件，在處理函數(shù)里面，將該效果Instance即現(xiàn)時(shí)播放的效果實(shí)例進(jìn)行倒轉(zhuǎn)并播放，當(dāng)播放完，又會(huì)觸發(fā)effectEnd事伯，這樣一直循環(huán)！

現(xiàn)在再來(lái)說(shuō)說(shuō)效果的組合：
通常如果你覺(jué)得只應(yīng)用一個(gè)效果很單調(diào)的話，可以進(jìn)行效果組合應(yīng)用，即多個(gè)效果同時(shí)播放或者順序播放，
如，當(dāng)加載頁(yè)面時(shí)，你想Panel先模糊到一定程度，再將Panel移動(dòng)到某個(gè)位置，再把Panel還原成原來(lái)的清淅度（即消退模糊）。這樣分析一下，一共用了三個(gè)效果，一，先應(yīng)用Blur（由清至模）效果，當(dāng)Blur完成時(shí)，再應(yīng)用Move效果，當(dāng)Move完成時(shí)，再應(yīng)用另外一個(gè)Blur（由模至清）效果。這樣三個(gè)效果組合就是按順序組合，先后運(yùn)行。先來(lái)看看效果：

再來(lái)看看代碼：

看以上代碼，<mx:Sequence id="sequenceEffect">標(biāo)簽就是順序組合效果標(biāo)簽，當(dāng)應(yīng)用sequenceEffect效果的時(shí)候，它會(huì)按順序播放該標(biāo)簽里面的三個(gè)子效果。

另外的就是同時(shí)播放了，

這個(gè)標(biāo)簽就是同時(shí)播放的效果標(biāo)簽，放在它里面的子效果都會(huì)同時(shí)播放，即一邊模糊一邊移動(dòng)。這個(gè)都可以自由組合，<mx:Parallel>與<mx:Sequence>標(biāo)簽都可以自由組合，例如先按順序先播放模糊，再同時(shí)播放移動(dòng)與隱藏等。這里就不多說(shuō)了。

使用Flex自帶的效果基本用法就這些，下篇文章將討論自定義效果的制作，下篇將會(huì)詳細(xì)說(shuō)說(shuō)這篇文章上面說(shuō)到的 effectInstance 即實(shí)例與工廠的概念。



      近來(lái)在學(xué)習(xí)Flash的3D技術(shù)，現(xiàn)在我看過(guò)的就PV3D 與Away3D這兩個(gè)開(kāi)源框架，感覺(jué)還不錯(cuò)，好像Away3D的效果好點(diǎn)，但效率不如PV3D，PV3D算是亻為（不會(huì)用五筆打這個(gè)字-_-，我機(jī)子里又沒(méi)拼音輸入，將就下吧！）3D，不管這么多了，做個(gè)東西練練手，先看效果：



[url=http://www.jiangzone.com.cn/jiang/3dmusic/soundtest.swf]這里看看效果！[/url]

    這個(gè)程序很簡(jiǎn)單到?jīng)]無(wú)簡(jiǎn)單了，就只是用了PV3D框架中的Cube的3D對(duì)象，一口氣生成64個(gè)放在數(shù)組里待用，之后用Flash里的聲音類(lèi)加載并播放聲音，之后在ENTER_FRAME事件里檢測(cè)當(dāng)前聲音的頻譜，之后根據(jù)頻譜的高低來(lái)調(diào)整Cube格子的高低，在Flash里獲取的聲音頻譜有512個(gè)Float數(shù)據(jù)，代表512級(jí)頻譜，而前256級(jí)為L(zhǎng)eftChangle，后256級(jí)為RightChangle，由于如果生成256個(gè)3D對(duì)象的話，對(duì)CPU來(lái)說(shuō)是個(gè)考驗(yàn)，所以就折中間隔抽取64個(gè)頻段來(lái)顯示，由于懶于寫(xiě)代碼了，就只寫(xiě)了LeftChangle的頻譜。

    以下是代碼：