Flash 組件應用與開發詳細講解

來源:互聯網
上載者:User

  組件是帶有參數的電影剪輯,這些參數可以用來修改組件的外觀和行為。每個組件都有預定義的參數,並且它們可以被設定。每個組件還有一組屬於自己的方法、屬性和事件,它們被稱為應用程式程介面(Application Programming Interface,API)。使用組件,可以使程式設計與軟體介面設計分離,提高代碼的可複用性。Flash MX 2004 或 Flash MX Professional 2004 中包含的組件不是 FLA 檔案,而是 SWC 檔案。SWC 是用於組件的 Macromedia 檔案格式。庫項目中的電影剪輯可以被先行編譯成swf檔案。這樣可以縮短影片測試和發布的執行時間。將 SWC 檔案拷貝到 First Run\Components目錄後,該組件便會出現在“組件”面板中。

  Flash 內建的組件都位於mx.controls包中。組件直接或間接繼承於UIComponent類,UIComponent類對UIObject類做了擴充,而UIObject類又是MovieClip類的子類。MovieClip類不屬於任何包,定義檔案位於FlashInstalDir\en\First Run\Classes目錄。UIComponent類和UIObject類都位於mx.core包中,定義檔案位於FlashInstalDir\en\First Run\Classes\mx\core目錄。

  UIObject類對MovieClip類進行封裝,所有Flash V2組件都可以共用它的方法、屬性和事件。  UIObject類使組件在樣式、事件和縮放比例調整上得到了實現。它提供了動態建立刪除群組件的方法:

·createObject方法:直接調用attachMovie函數,返回一個MovieClip類型的引用。

·createClassObject方法:調用createObject方法,建立一個指定類的組件執行個體,並返回所建立的組件的引用。

·createEmptyObject方法:建立一個空的UIObject執行個體。

·destroyObject方法:使用delete語句刪除已經建立的組件執行個體。

UIObject還封裝了其它的一些方法,包括:

·redraw方法:在當前幀重新繪製組件。

·invalidate方法:標記組件,使之在下一個幀間隔重新繪製。

·move方法:把組件移動到指定位置。

·setSize方法:設定組件大小。

·setSkin方法:設定組件皮膚。

·getStyle方法:擷取樣式資訊。

  UIObject類的屬性除了scaleX和scaleY外,其它都是唯讀屬性,使用時需要注意。所以如果要在運行時調整組件外觀,就必須使用UIObject類的方法。對於唯讀屬性的賦值是無效的,即使是對非唯讀屬性的賦值,有時也會造成組件在外觀顯示上的差錯。UIObject類還定義了一系列的事件,包括載入事件(load)、卸載事件(unload)、移動事件(move)、重繪事件(draw)和大小調整事件(resize)。

  利用UIObject類的組件建立方法,可以在運行時建立組件執行個體。

  UIComponent類從UIObject類繼承,它並不是一個可視的組件。和UIObject類一樣,所有Flash V2組件都可以共用它的方法和屬性。它實現了組件的焦點擷取、鍵盤輸入,組件的禁用和啟用以及組件的按布局調整自動大小。

  UIComponent類的主要方法有:

·getFocus方法:利用焦點管理器(Selection)返回一個當前擷取焦點的對象的引用。

·setFocus方法:使組件擷取焦點。

  UIComponent類的enabled屬性指定組件執行個體是否可用;tabIndex屬性指定組件的焦點擷取順序。UIComponent類還定義一系列焦點和鍵盤事件:焦點擷取事件(focusIn),焦點轉移事件(focusOut)、鍵盤按下事件(keyDown)和鍵盤釋放事件(keyUp)。

  在Flash MX 2004和 Flash MX Professional 2004內建了一套組件稱為Flash V2組件,它是從Flash MX的V1組件升級而來的,V1組件和V2組件盡量不要一起使用以免發生一些錯誤。V2組件支援即時預覽,使開發人員在編輯狀態下就能看到組件的外觀效果。開發人員可以自行設定是否需要即時預覽和即時預覽的模式,以節省電腦資源。在ControlàEnable Live Preview菜單設定是否使用即時預覽,在ViewàPriview Mode菜單選擇預覽模式。組件實質上是一些被編譯好的電影剪輯,其格式為SWC。SWC檔案類似與Zip檔案,可以使用一般的解壓縮程式進行解壓查看其內容。電影剪輯可以在編輯環境中直接發布為組件,也可以直接編譯儲存為swc格式的組件檔案,便於其他開發人員使用。同樣,開發人員也可以從外部匯入組件。

  使用組件,必須把組件面板中所需要的組件拖到舞台(Stage),使組件出現在庫面板。這樣組件就可以象普通的庫項目一樣被使用。使用指令碼可以動態建立組件執行個體,運行時建立組件可以有三個方法:createObject()、creatClassObject()和attachMovie()。attachMovie()是MovieClip類的方法,createObject()和creatClassObject()是UIObject類方法,但事實上它們都是對attachMovie()的直接或間接調用。

  組件被添加後可以在屬性或參數面板中直接設定組件的參數。另外還要為組件定義事件,最簡單的方法是使用on(eventName)進行定義。另外還可以使用接聽程式和事件處理函數等定義組件事件的處理方法。組件的事件定義比較靈活,使用何種方式定義取決與個人的習慣與偏好。當事件發生時,組件會廣播一個Object類型的事件參數,該參數中包括了事件發生對象和事件類型的資訊。另外,使用深度管理器(DepthManager)可以對組件進行深度管理。

  Flash組件最大的特點是開發人員可以自訂群組件,尤其是介面元素的自訂,使其更具有吸引力。V2組件有它自己的一套預設介面方案,稱為主題(Theme)。主題包括兩個方面:樣式(Style)和外觀(Skin)。UIObject類的setStyle()和getStyle()方法可以擷取和設定組件的樣式。樣式的設定比較簡單,主要有以下三種方式:

·直接設定屬性:

T.color=0xff5567;

·使用簡單的setStyle()名值對方法自訂樣式:

instanceName.setStyle("property", value);

·把樣式對象與setStyle()方法結合使用來自訂樣式:

//建立一個樣式對象

var styleObj = new mx.styles.CSSStyleDeclaration;

//刻畫樣式細節

//……

styleObj.fontSize = 18;

//把樣式應用到組件執行個體

b.setStyle("styleName", styleObj);

  樣式的層級包括4個層次:全域樣式,應用於所有組件;組件類單獨的預設樣式,應用於某一類的組件;自訂樣式;直接設定組件執行個體的屬性。對於不同層級的樣式Flash按照一定的順序分別把這些樣式應用到組件。

  首先,Flash 尋找組件執行個體上的樣式屬性,如果執行個體上沒有直接設定樣式,Flash 將查看執行個體的styleName 屬性,確定是否向它分配了樣式聲明。如果 styleName 屬性沒有被分配樣式聲明,Flash 將尋找預設類樣式聲明上的屬性。如果沒有類樣式聲明,並且屬性沒有繼承它的值,則將檢查 _global 樣式聲明。如果屬性未在 _global 樣式聲明中定義,則該屬性為 undefined。

  另外,如果沒有類樣式聲明,但屬性確實繼承了它的值,Flash 將尋找該執行個體父級上的屬性。如果屬性未在父執行個體上定義,Flash 將檢查父執行個體的 styleName 屬性;如果未定義該屬性,Flash 將繼續查看父執行個體,直到 _global 層級。如果屬性未在 _global 樣式聲明中定義,則該屬性為undefined。

  另一方面,為了更好的使用組件,還需要修改或重新定義組件外觀。Flash V2的外觀定義檔案位於FlashInstralDir\en\First Run\ComponentFLA檔案夾下。在修改外觀時,需要把原始的外觀定義檔案作為外部庫匯入(FileàOpen External Library),並把外部庫中的外觀定義庫項目拖到當前文檔的庫中,外觀庫項目通常都是電影剪輯(MovieClip)。每一個組件外觀定義庫專案檔夾中都包含一個States檔案夾,其中定義了組件在不同狀態下的外觀,每一個狀態都指定了一個連結名(linkageName)作為指令碼引用,如果修改了這個名稱,則會使組件在該狀態下的外觀載入發生錯誤。在組件的類檔案中,每一個狀態都使用一個字串屬性指定其外觀庫項目的連結名,如果要重新定義組件某一狀態下的外觀,只要在指令碼中修改這個字串屬性的值就可以了,當然首先必須存在可鏈的新的外觀庫項目。

  瞭解了這樣一個組件外觀機制以後,組件外觀的修改就變的非常簡單。其關鍵就是修改或重新定義一組新的外觀庫項目並指定其連結名,然後修改組件類檔案中指定組件外觀的屬性。開發人員可以在組件執行個體的初始化事件(initialize)中修改組件執行個體的外觀。修組件所有執行個體外觀的方法比較多,例如_root的第一幀使用ClassName. prototype.stateName=value語句,該語句也可以直接在#initclip和#endinitclip代碼塊中使用;另外還可以使用類繼承的方式,在組件初始化時就為組件外觀連結屬性指定新的值,這裡也需要用到#initclip、#endinitclip代碼塊。#initclip和#endinitclip是Flash的編譯器命令,作為初始化代碼塊的開始標記和結束標記。只要符號(symbol)被定義,那麼初始化代碼就被先於第一幀執行,而且緊執行一次。所以在這個代碼塊中,可以為整個組件類指定不同狀態下的外觀。

  在Flash MX Professional 2004中,開發人員開可以在項目中自己建立新的V2組件。在開始開發V2組件之前,首先要瞭解MovieClip類、UIObject類和UIComponent類,因為它們是Flash V2組件的基類,所有Flash內建的組件都是它們的直接或間接子類。開發一個組件可以從原先的父類繼承,擴充現有的組件類,使被建立的組件在父類的基礎上進一步擴充。另外,也可以建立一個不帶父類的組件,以實現一些其它的功能。在這裡將重點討論如何擴充現有的組件類。擴充一個現有組件類,通常包括以下幾個步驟:

  1、組件首先作為一個電影剪輯(MovieClip)被建立,在該電影剪輯中建立兩個圖層,分別用於組件介面元素和指令碼。然後在庫的下拉式功能表中選擇Component Defination,在該對話方塊中的AS2.0 Class中輸入該組件所要關聯的類的完全限定名。當介面元素定義完成以後,就可以在外部檔案中建立組件的屬性、事件和方法,當然,組件的介面元素也可以在類中使用代碼動態建立。

  2、在定義組件類檔案時,首先必須匯入所需要的類,前面已經說過,MovieClip類、UIObject類和UIComponent類是V2組件的基類,所以如果當前建立的組件是從V2組件的任意組件擴充,那麼就必須瞭解這三個基類,和其下的相關組件類。關於組件的特性可以查看Macromedia公司發布的組件字典,也可以直接在FlashInstalDir\en\First Run\Classes目錄查看類檔案代碼。

  3、確定組件所要擴充的類以後,就要為組件類編寫建構函式(Constructor)。一般情況下,建構函式建議為空白,這樣才能用對象的屬性介面來定義對象屬性。此外,根據初始化調用順序的不同,有時在建構函式中設定屬性會導致覆蓋預設值。

  4、接下來要做的是添加組件的版本資訊,如果當前開發的組件是作為組件包的一部分,那麼可以把版本資訊放到另外一個外部檔案中。在定義版本資訊時,可以繼承UIObject類的靜態字串屬性version。另外還需要定義三個比較重要的屬性:symbolName,symbolOwner和className;他們都是從組件基類繼承的。symbolName定義為靜態字串變數,用於指定組件符號的名稱;symbolOwner定義為靜態Object類型,是該類的一個完全限定名,它將在createClassObject() 方法的內部調用中被使用;className定義了組件類名稱。

  5、當這些都完成以後,就要開始定義組件功能相關的屬性和方法。在屬性和方法定義時,比較好的做法是確定每一個屬性和方法的訪問特性,使組件為使用者提供一個良好的應用程式介面(API)。所以在定義屬性和方法時要使用private和public來聲明屬性的可訪問性,並使用setter和getter函數來設定和擷取屬性的值。這樣就更好的地實現了組件的封裝,使使用者無須瞭解組件的內部細節。

  所有組件必須實現兩個核心方法:始化方法和大小調整。如果不在自訂群組件的類檔案中覆蓋兩個方法,Flash Player 可能會產生錯誤。Flash 在建立類時調用初始化方法。初始化方法應該調用父類的初始化方法,因為只有在調用此方法之後,才能正確設定width、height 和和其它的影片剪輯參數。


function init(Void):Void

{

// 調用父類的初始化方法

super.init();

//在這裡添加與本組件相關的初始化代碼

}

大小調整的方法也與初始化方法類似:

function size(Void):Void

{

super.size();

//在這裡添加與本組件相關的大小調整代碼

}

  6、為了讓屬性在開發面板中可見,還必須為屬性聲明相關的中繼資料(Metadata)。中繼資料標記可以定義組件屬性、資料繫結屬性和事件。Flash 可以解釋這些語句並相應地更新開發環境。中繼資料與類聲明或單個的資料欄位相關。中繼資料語句綁定到指令碼的下一行。例如,在定義組件屬性時,在屬性聲明的前一行添加中繼資料標記。在定義組件事件時,在類定義之外添加中繼資料標記,以便將事件綁定到整個類。對屬性而言,有兩個比較重要的中繼資料:Inspectable和InspectableList。

  Inspectable中繼資料定義了在“組件檢查器(Component Inspector)”面板中向使用者顯示的組件的屬性。文法如下:

[Inspectable( value_type=value [,attribute=value,...] ) ]

property_declaration name:type;

Inspectable中繼資料還包括若干中繼資料標記:

·name:類型為String(可選),屬性在開發面板中的顯示名稱。

·type:類型為String(可選)指定屬性的類型。如果省略,則使用屬性的類型。以下下是可接受的值: Array、 Object、List、String、Number、Boolean、Font Name、Color。

·defaultValue:類型可以是String或Number(必需)。指定屬性的預設值。

·enumeration:類型為String(可選)。指定以逗號分隔的屬性合法值列表。

·category:類型為String(可選)。將屬性劃分到屬性偵測器中的某個特定子類別中。

  InspectableList 中繼資料關鍵字用於確切地指定屬性偵測器中應顯示可檢查參數的哪個子集。可以將 InspectableList 與 Inspectable 組合使用,這樣即可隱藏子類組件的繼承屬性。如果不給組件的類添加 InspectableList 中繼資料關鍵字,所有可檢查的參數(包括組件父類的可檢查參數)都會顯示在屬性偵測器中。其的文法如下:

[InspectableList("attribute1"[,...])]

// class definition

InspectableList 關鍵字必須緊挨著類定義且在它之前,因為它應用於整個類。

  7、定義組件的事件,首先要使用Event中繼資料關鍵字聲明事件。Event 中繼資料關鍵字用於定義組件事件。其文法如下:

[Event("event_name")]

  在類檔案中必須把 Event 語句添加到類定義之外,以便將它們綁定到類,而不綁定到類的特定成員。首先組件類會繼承基類事件。如果當前定義組件的基類是UIComponent,那麼該組件中已經包括了MovieClip類、UIObject類和UIComponent類的28個事件。但事實上,這28個事件並不是都可以用的。其原因很簡單,因為組件可以有它的組成結構,組件內部可能還有組件或是其它的元件執行個體。組件要為使用者提供一個統一的介面,就必須抽取其內部結構的某些事件並把它們定義為組件的事件,這是一種基於組件內部組成結構的事件。比如說組件包括兩個文字框T1和T2,這時可以根據組件的功能要求把T1的change事件發布為組件的PP事件,而把T2的change事件發布為組件的UU事件,當然關於組件事件的名稱可以由組件開發人員自己定義。

  那麼究竟如何為組件定義一個新的事件呢?對於上面的那個例子,可以做如下定義:

//匯入類

import mx.core.UIComponent;

//用中繼資料聲明組件事件

[Event("PP")]

[Event("UU")]

//指明該類從UIComponent繼承

class T_T extends UIComponent

{

//在編輯環境中已經建立兩個輸入文本(Input Text),並在類中聲名其引用。

var T1:TextField;

var T2:TextField;

//定義建構函式

function T_T()

{

//在建構函式中發布T1的change事件

T1.onChanged=function()

{ //建立一個事件對象,存放與事件相關的資訊

var eventObj = new Object();

//定義事件類型的名稱

eventObj.type = "PP";

//指明事件廣播(發生)的對象

eventObj.target = _parent;

//把事件作為組件的事件發布

_parent.dispatchEvent(eventObj);

}


//在建構函式中發布T2的change事件

T2.onChanged=function()

{

var eventObj = new Object();

eventObj.type = "UU";

eventObj.target =_parent;

_parent.dispatchEvent(eventObj);

}

}

}

  在以上代碼中,先用中繼資料聲明了組件的兩個事件UU和PP,然後又在組件類的建構函式中定義T1和T2的change事件,並在它們的change事件中用_parent.dispatchEvent(eventObj);語句把chang事件發布為組件事件。dispatchEvent()方法需要一個Object類型的事件對象作為參數,該對象中儲存了與事件相關的資訊:target指明事件廣播(發生)的對象;type定義了事件類型的名稱——也可以認為是事件名稱。在事件指令碼中使用如下代碼就可以對事件做出響應,其使用方法與一般的事件處理方法一致:

//對組件的PP事件做出響應

on(PP)

{ trace("PP"); }

//對組件的UU事件做出響應

on(UU)

{ trace("UU"); }

組件的屬性的改變也可以作為事件發布,例如:

private var Tm:String;

//在setter中發布組件的事件

public function set TTm(val:String)

{

Tm=val;

var eventObj = new Object();

eventObj.type = "KK";

eventObj.target =this;

this.dispatchEvent(eventObj);

}

  當然,還要用Event中繼資料為組件聲明事件。但事實上,沒有Event中繼資料聲明的事件組件同樣可做出響應。Event中繼資料聲明似乎僅僅是多了一個代碼提示而已。所以中繼資料只是為組件提供了一個更加友好的使用者介面,使開發人員更加容易得使用組件。

  在發布組件之前,還可以為組定製一個表徵圖。表徵圖大小要求為 18 x 18 像素,並儲存為 PNG 格式。它的 Alpha 透明度必須是8位,左上方的像素要求是透明的,以支援遮罩。另外還需要在組件類檔案中定義添加中繼資料聲明:

[IconFile("component_name.png")]

  該聲明和事件聲明一樣,必須放在類定義之前,使該聲明作用到組件類。最後將該映像儲存到到FLA檔案所在的同一目錄中。在匯出 SWC 檔案時,Flash將在自動包含該映像。

  當組件定義完整,測試通過後,就發行就緒組件供其他開發人員使用。Flash MX 2004 將組件匯出為組件包(SWC 檔案)。在發布組件時,只需向其他開發人員提供 SWC檔案就可以了。此檔案包含與組件相關的所有代碼、SWF 檔案、映像和中繼資料,因此其他開發人員可以方便地將它放到自己的 Flash開發環境中。

  這裡對Flash V2組件開發做了初步的討論。在具體的開發時,應根據組件的功能特性非常細緻地刻畫組件的屬性、事件和方法,聲明中繼資料定義良好的使用者介面。如果該組件是一個可視的組件還需要為組件製作組件介面的圖形元素。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。