AS3.0教程(11): 視覺元件精要(1)

完全瞭解AS3視覺元件架構

DisplayObject，直譯爲視覺對象，意爲能夠被看到的對象。

視覺是Flash 成功的主要基石。當我賞析ActionScript 3 的全部視覺元件類型和其總體構架時，感到很是滿意。能夠看出，此次總體的架構設計是深思熟慮的結果。與其餘語言，好比C#，相比有本身強烈的特點，是對Flash視覺行爲貼身定作的結果。

ActionScript 3的架構乍一看很複雜，不包括UIComponent的子類，就有7到8個層，20多個莫名奇妙的類。頭疼！但實際上，它的設計是很是的簡潔優雅，遠遠比ActionScript 2一個MovieClip打天下強太多了。實際上，只要真正弄清了它的設計思路，就能夠高屋建瓴，盡收眼底，會發現這個架構邏輯清晰，很是的易懂易記。因此，先拋開ActionScript 3 的幫助文件，咱們一塊兒來看看爲何要設計這樣一個架構，搞出20多個怪胎出來。

（如蒙轉載，請留下個人Blog連接：www.kingda.org， thx）

先來追憶一把ActionScript 2中無所不能的先賢: MovieClip（影片剪輯）。 這位兄臺無所不能：可在其中畫矢量圖，可在其中貼位圖；可在其中作影片，也可嵌套子影片；偶爾用來加載，閒來客串按鈕；三教九流皆可放，肚皮天下第一廣。它的父親何人，原來是元始天尊Object。

這樣的玩意兒，新手用起來很爽，大大節約了腦細胞。但任何一個有過大型OOP項目經驗的老手，都會絕不猶豫的指出，這樣的架構設計是失敗和混亂的。代價是巨大的。MovieClip類公開的屬性和方法共有一百多個（本身數數）！竟然直接繼承根類！竟然擁有這樣多公開(public)屬性和功能的類！竟然應用範圍如此普遍！

首當其衝，其第一弱點就是系統資源的浪費。

舉個例子， 我新建一個空MovieClip A，只是想讓它作個容器，好在裏面放幾個有內容子MC。這樣我操做A的位置和漸變時，子MC會統一變化。這樣的經驗你們都有吧。可就是這麼一個簡單的純容器A，ActionScript 2&1都會絕不猶豫的把MovieClip全部的屬性和方法都賦給A。誰讓A是MovieＣlip類的實例呢？可在這個應用上，咱們要A的其餘90多個功能幹什麼呢？並且還不算最耗資源的內建的對Timeline的支持！你們想一想，咱們天天都在建立MC。但事實上咱們作開發時，建立的MC有多少用到了大部分的功能和Timeline？只有一部分的經過Flash建立的MovieClip才須要時間軸的支持，其他大部分根本不須要時間軸支持。這樣的設計是否是有問題呢？

痛批了一頓ActionScript 3以前的MC後，咱們不得不說幾句公道話：這樣的錯誤是有其歷史侷限性的，咱們不能苛求古人。且看如今的視覺元件架構，那叫一個爽。爽，就爽在系統設計師對整個Flash視覺系統的抽象上。抽象和解構的功力很深！不得不佩服！系統各個超類和子類的設計劃分，職責清晰，穩健高效，堪稱優雅！我看.Net FrameWork 的System.Drawing架構設計時都沒有這個感受。畢竟Flash是靠視覺起家，與視覺動畫交互打交道最深阿。

下面來欣賞ActionScript 3 的元件架構。

ActionScript 3 中全部能夠被看到的視覺元件都統一於DisplayObject，即其子類的實例。DisplayObject是一個抽象類，不能生成實例。從系統架構設計上來講，這樣的超類設計是常識。DisplayObject，我在AS3.0教程(5):強大的事件機制(1)中講過，繼承於EventDispatcher類，也就意味着全部的DisplayObject子類均可以發送事件了。

啊哈，DisplayObject下面一層的抽象就精彩了，架構設計師的原意是將全部視覺元件分爲兩大類：能夠接受人機交互事件的，和不能夠接受人機交互事件的。因此就有了InteractiveObject類和非InteractiveObject類之分。因爲非InteractiveObject的幾個類之間差異太大，也抽象不出什麼共同點，因此，乾脆就分紅了InteractiveObject的六個同級兄弟 AVM1Movie, Bitmap, MorphShape, Shape, StaticText, Video。但黑羽認爲從系統的優雅性出發，不妨就設一個UnInteractiveObject的超類，將這六個孩子放在這個超類的下面。還便於往後的功能擴展。

在講最重要的InteractiveObject以前，咱們先把這幾個不三不四的兄弟先掃掉。這幾個子類中，咱們把它分爲能夠代碼建立的，和不能夠代碼接觸的。所謂不能夠代碼建立的，是指只能經過Flash創做工具來建立的。和之前同樣，StaticText仍是不能夠用代碼實現。另一個是MorphShape，這個東東是指在Flash中建立Shape形變時，由Flash Player自動生成的，一樣的，代碼沒法實現。

剩下的幾個都是能夠用代碼建立的：Bitmap，位圖對象，能夠經過BitmapData對象來建立，也能夠從外部載入，好比經過loader。Shape，形狀，專門用來繪製矢量圖的，經過Graphic對象建立的。Video,視頻對象，專門用來播放視頻的，能夠來自文件也能夠來自網絡流媒體。

下面要說到的是AVM1Movie，所謂AVM1Movie，意思就是說Actionscript Virtual Machine 1所支持的SWF影片，也就是ActionScript 1和2的影片。因爲ActionScript 3 採用的是AVM2，因此和AVM1影片沒法跨腳本交流，必需要把它同AVM2 swf影片區分開來，因此有個這個類。關於這個，感興趣的兄弟看個人這篇文：小談ActionScript 3.0與AS 2.0，1.0的swf兼容性。這個通常咱們不用關心，也不用直接接觸，一旦咱們加載一個AVM1老影片到AVM2 swf中時，Flash Player 會自動建立一個AVM1Movie的實例包裝這個swf。咱們打交道的每每是裝載AVM1 swf的容器元件。

到了InteractiveObject下一層了，這一層共有三個類。

這一層的抽象理念又要贊一下。架構設計師又用了一個容器和非容器的概念來區分視覺元件。所謂容器，就是能夠在其中加載其餘的DisplayObject子類對象。固然也包括它的叔叔們，即非InteractiveObject的那幾個類。所謂非容器，那就是說不能在它的視圖裏面加入其餘的DisplayObject了。「容器」，這個公共性質實在過重要了，在這一層才這樣抽象出來實在很高明，很到位。

那麼老套路，先講講非容器的兩個類，TextField和SimpleButton。 TextField，就基本上是咱們熟悉的動態文本框，這裏暫不細說。來講說SimpleButton，這個名字雖然和咱們在ActionScript 2中碰到的SimpleButton同樣，但實際上兩者有很大的差異了。實質上，ActionScript 3 中SimpleButton這個類是將Button這個重要經常使用的UI控件單獨提出做爲一類，而不是像之前和MovieClip混淆不清。誰都知道，在ActionScript 2和1中，只要改改MovieClip前幾個幀的標籤，這個MovieClip就變得和Button同樣了。關於SimpleButton的使用，能夠說很是簡潔實用，這個放在後面細說。我在這裏所要強調的是Button和MovieClip不是一個性質。雖然ActionScript 3中Sprite和其子類也能夠經過buttonMode來作出和Butoon類似的行爲，但原理是不一樣的。

剩下的就是DisplayObjectContainer類了。DisplayObjectContainer的全部子類對象，均可以在其中添加其餘DisplayObject子類對象。但要注意一點，DisplayObjectContainer自己也是一個抽象類，不能夠生成實例。這是出於架構設計穩健性擴展性的考慮，和將DisplayObject設計成抽象類的緣由同樣，很少說了。

重要的是看看它的幾個子類，Sprite, Loader, Stage。 Stage，就是舞臺，全部的視覺元件都是在它之中，當之無愧是最終容器，放在這一層也是合情合理。 Loader就有趣了，它把之前MovieClip裝載的部分所有抽象分離出來了。全部和外部資源的加載，都是經過Loader來進行的。而Loader也不能直接和網絡資源打交道，要經過專門的URLRequest對象來進行，各司其職，很是好。Loader能幹什麼？裝載swf, 和各類圖片。注意，視頻仍是要經過Video類來進行，直接addChild到各類Container中，不必定要放在Loader中。

下面來了Sprite，這個3.0中咱們打交道最多的容器了。一句話，它是去掉了時間軸的MovieClip（即MovieClip被閹掉了）。如我開頭例子所說，假若咱們只是爲了建立一個容器，那麼Sprite是首選。甚至能夠說，咱們這些寫代碼的開發人員，90%以上的狀況都只須要和Sprite打交道。含有時間軸的MovieClip通常是Flash工具建立出來的，每每只須要加載就能夠了。準確的說，Sprite比ActionScript 2中的MovieClip不止少一個TimeLine，如裝載。Sprite中也含有Graphic對象，這意味着，它也能夠直接在其中代碼繪圖。但咱們始終要記住，Sprite不一樣於Shape,區別就在於Sprite是容器，而Shape不是。從代碼角度說，就是，Sprite能夠addChild(),但Shape不能夠。

都說到這兒了，咱們親愛的MovieClip還不見蹤跡，到底在哪兒了呢？其實就在Sprite的下一層。Sprite下一層中，共有四個子類，MovieClip是其中一個。你們能夠想到，如今的MovieClip重要性大不如前了，主要就是表明用Flash建立的含有時間軸的影片。經常使用的gotoAndStop, currentFrame等等這些屬性如今才能碰到了。

其他三個子類，也是來頭不小，最牛的就是其中的FlexSprite。雖然它的改動只是變了一下toString()函數，但它倒是全部Flex組件的共同基石。著名的UIComponent的老爸如今就是它了。UIComponent何許人也？天下組件，皆由它出。黑羽大膽預測，咱們在Flash 9中所要用到的控件，也就是如今的Flex裏面的組件，即mx.controls裏面的全部組件。此類不可小看。

另兩個子類Preloader和DownloadProgressBar，已經不屬於flash.display包了，而是屬於mx.preloaders包，主要管理的是下載進度和共享庫的下載等功能，不予細說了。

到此，ActionScript 3 主要的視覺元件架構已經理出了一個清晰的脈絡，設計的緣由，理由，思路都作了一一剖析，但願你們喜歡。其實InteractiveObject下的另外兩根枝條TextField和SimpleButton也有很重要的地位，在後續教程中會一一細說。

下面到了老鳥時間了，和老鳥們分享一下我對ActionScript 3 視覺架構的分析心得。能夠看出的是，抽象的界限很是明確，應用的模式也比較統一。應用的模式就是OOP編程中最經常使用的模式之一：Composite模式。全部的DisplayContainer屬於Composite模式中的樹枝，非DisplayContainer部分的都是樹葉。樹枝中都有相應的彙集對象。
另外要指出的是，MovieClip和Sprite不再像之前2.0的MovieClip同樣，對內部的不一樣子對象給出包裝接口。好比Shape下的Graphic對象，Sprite下面的SoundTransform對象，Loader下的LoaderInfo對象，等等等等。我原本迷惑，爲什麼不用裝飾器模式，讓這些元件的行爲和ActionScript 2更加類似一些，過渡的痛苦少一些，但轉念一想明白了架構設計師的苦心。就是要用這樣清清楚楚，明明白白的Composite來增強全部開發者OOD時分工協做，更加快的熟悉和運用新的強大的架構。與這個優勢相比，這麼一點過渡的痛苦又算得了什麼呢？

關於ActionScript 3視覺編程後續部分和具體的編程例子，會陸續放出。（11月份更新：才發如今拷貝Word文檔到博客，並編輯內容時，不當心在最後一段遺漏了幾行字，如今加上。請轉載的網站也加以更新，否則恐有歧義，讀者難以理解。）