簡介
創建組件就是自行設計制作出新的組件。設計組件是壹項繁重的工作。自行開發組件與使用組件進行可視化程序開發存在著極大的不同,要求程序員熟知原有的VCL類庫結構,精通面向對象程序設計。設計組件是壹項艱苦的工作。對於組件的開發者,組件是純粹的代碼。組件的開發不是壹個可視化的開發過程,而是用C++或Object Pascal嚴格編制代碼的工作。實際上,創建新組件使我們回到傳統開發工具的時代。雖然這是壹個復雜的過程,但也是壹個壹勞永逸的過程。創建組件的最大意義在於封裝重復的工作,其次是可以擴充現有組件的功能。組件創建過程包括設計、開發、調試(就是所謂的3D's)工作,然後是組件的使用。組件開發者應該掌握的三項主要內容是:屬性、事件和方法。
組件源文件
組件面板中提供的組件都是預編譯過的 SWC 剪輯。同時還提供了源 Flash 文檔 (FLA)(其中包括的是這些組件的圖形)和源 ActionScript 類文件(AS)(其中包含的是這些組件的代碼),以便於您在創建自已的自定義組件時使用。第 2 版組件的源文件隨 Macromedia Flash 壹起安裝。在構建自己的組件之前,打開並查看其中部分文件,嘗試去了解這些文件的結構,會對您有所幫助。RadioButton 組件就是較為簡單的組件的示例,您可能應首先研究該組件。StandardComponents.fla 的庫中的所有組件都是元件。每個元件都鏈接到壹個 ActionScript 類。它們的位置如下:
FLA文件源代碼在 Windows 中:C:Program FilesMacromediaFlash 8語言ConfigurationComponentFLAStandardComponents.fla。 在 Macintosh 上:HD/Applications/Macromedia Flash 8/Configuration/ComponentFLA/StandardComponents.fla ActionScript 類文件在 Windows 中:C:Program FilesMacromediaFlash 8語言First RunClassesmx 在 Macintosh 上:HD/Applications/Macromedia Flash 8/First Run/Classes/mx
組件結構概述
組件由 Flash (FLA)文件和 ActionScript (AS)文件組成。您可以選擇創建其它文件(例如,圖標和 .swd 調試文件),並將其與組件壹起打包,但所有組件都需要壹個 FLA 文件和壹個 ActionScript 文件。完成組件開發後,需要將它導出為 SWC 文件。
Flash (FLA)文件、ActionScript (AS) 文件和 SWC 文件FLA文件包含壹個影片剪輯元件,該元件必須在鏈接屬性和組件定義對話框中鏈接到 AS 文件。
影片剪輯元件有兩個幀和兩個圖層。第壹個圖層是 Actions 圖層,它的第壹幀上有壹個 stop()全局函數。第二個圖層是 Assets 圖層,它有兩個關鍵幀:第壹幀包含壹個邊框,第二幀包含所有其它資源,其中包括組件使用的圖形和基類。
指定組件的屬性和方法的 ActionScript 代碼位於單獨的 ActionScript 類文件中。此類文件還聲明組件的擴展的類(如果有)。AS 類文件的名稱為組件的名稱加上.as擴展名。例如,MyComponent 包含 MyComponent 組件的源代碼。
最好將組件的 FLA 和 AS文件保存在同壹文件夾並將這兩個文件指定為相同的名稱。如果將 AS文件保存在其它文件夾中,則必須確認該文件夾在類路徑中,以便 FLA 文件能夠找到它。有關類路徑的詳細信息,請參閱學習 Flash 中的 ActionScript 2.0中的類。
構建第壹個組件
在本節中,將構建壹個 Dial 組件。已完成的組件文件Dial.fla、Dial 和 DialAssets.fla 位於計算機上的以下示例文件夾中:
在 Windows 中:C:Program FilesMacromediaFlash 8Samples and TutorialsSamplesComponentsDialComponent文件夾。
在 Macintosh 上:HD/Applications/Macromedia Flash 8/Samples and Tutorials/Samples/Components/DialComponent文件夾。
Dial 組件是壹個電位計,類似於測量電壓差的電位計。用戶可以單擊並拖動指針來更改指針位置。Dial 組件的 API 具有壹個 value 屬性,可用來獲取和設置指針的位置。
選擇父類
創建組件時,首先要確定是否擴展某個第 2 版類。如果選擇擴展某個第 2 版類,則可以擴展某個組件類(例如,Button、CheckBox、ComboBox、List 等)或某個基類(UIObject 或 UIComponent)。除 Media 組件之外,所有其它組件類都擴展基類;如果擴展組件類,該類也會自動從基類繼承。
兩個基類為組件提供了常見功能。通過擴展這些類,組件壹開始即具備壹組基本的方法、屬性和事件。
在第 2 版框架中,您無需創建 UIObject 子類、UIComponent 子類或任何其它類。即使組件類直接繼承自 MovieClip 類,也可以使用許多強大的組件功能:導出到 SWC文件或編譯剪輯、使用內置實時預覽、查看可檢查屬性等等。但是,如果要將組件用於 Macromedia 第 2 版組件,並要使用管理器類,就需要擴展 UIObject 或 UIComponent。
下表簡要說明第 2 版基類: 基類 擴展 說明 mx.core.UIObject MovieClip UIObject 是所有圖形對象的基類。 mx.core.UIComponent UIObject UIComponent 是所有組件的基類。 了解 UIObject 類
基於 Macromedia ComponentArchitecture第 2 版的組件源自 UIObject 類,該類是 MovieClip 類的子類。MovieClip 類是 Flash 中可以在屏幕上表示可視對象的所有類的基類。
UIObject 添加用於處理樣式和事件的方法。它在加載和卸載時(load 和 unload)、布局更改時(move、resize)以及隱藏或顯示時(hide和 reveal),都會在繪制(draw 事件等效於 MovieClip.onEnterFrame 事件)之前將事件發送到它的偵聽器。
UIObject 另外提供只讀變量來確定組件的位置和大小(width、height、x、y),並提供 move() 和 setSize() 方法來改變對象的位置和大小。
UIObject 類實現以下功能:
樣式
事件
按縮放比例調整大小
了解 UIComponent 類
UIComponent 類是 UIObject 的子類(請參閱組件語言參考中的UIComponent 類)。它是處理用戶交互(鼠標和鍵盤輸入)的所有組件的基類。UIComponent 類允許組件執行以下操作:
接收焦點和鍵盤輸入
啟用和禁用組件
按布局調整大小
關於擴展其它第 2 版類
為了能夠更方便地構造組件,可以擴展任何類的子類,這樣也就不需要直接擴展 UIObject 或 UIComponent 類。如果擴展任何其它第 2 版組件類(Media 組件除外),默認情況下也會擴展 UIObject 和 UIComponent。您可以通過擴展組件字典中列出的任何組件類來創建新組件類。
例如,如果要創建壹個組件,其行為與 Button 組件的行為幾乎相同,就可以擴展 Button 類,而不必從基類重新創建 Button 類的所有功能。
下圖顯示了第 2 版組件的層次結構:
此文件的 FlashPaper 版本可在 Flash安裝目錄的以下位置找到:Flash 8Samples and TutorialsSamplesComponentsarch_diagram.swf。
關於擴展 MovieClip 類
您可以選擇不擴展第 2 版類,而讓組件直接繼承 ActionScript MovieClip 類。但是,如果需要 UIObject 和 UIComponent 的任何功能,則必須親自構建。您可以打開 UIObject 和 UIComponent 類 (First Run/Classes/mx/core) 來檢查它們的構造方式。
創建組件影片剪輯
若要創建壹個組件,必須創建壹個影片剪輯元件並將它鏈接到該組件的類文件。
影片剪輯有兩個幀和兩個圖層。第壹個圖層是 Actions 圖層,它的第壹幀上有壹個 stop() 全局函數。第二個圖層是 Assets 圖層,它有兩個關鍵幀。第壹幀包含壹個邊框或充當最終圖片的占位符的任意圖形。第二幀包含所有其它資源,包括組件使用的圖形和基類。
插入新的影片剪輯元件
所有組件都是 MovieClip 對象。要創建新組件,首先必須將新元件插入新的 FLA 文件中。
添加新組件元件:
在 Flash 中,創建空白的 Flash 文檔。
選擇插入>新建元件。
顯示創建新元件對話框。
輸入元件名稱。為組件命名,方法是將組件中每個單詞的第壹個字母更改為大寫字母(例如 MyComponent)。
選擇影片剪輯行為。
單擊高級按鈕顯示高級設置。
選擇為 ActionScript 導出,取消選擇在第壹幀導出。
輸入鏈接標識符。
在AS 2.0 類文本框中,輸入 ActionScript 2.0 類的完全限定路徑。
類名稱應與顯示在組件面板中的組件名稱相同。例如,Button 組件的類為 mx.controls.Button。
註意
不要包含文件擴展名;AS 2.0 類文本框指向類的打包位置,而不是該文件的文件系統名稱。
如果 ActionScript文件位於包內,必須包含該包的名稱。此值可以是類路徑的相對路徑,也可以是包的絕對路徑(例如 mypackage.MyComponent)。
大多數情況下,應取消選中在第壹幀導出(默認選中該選項)。有關詳細信息,請參閱組件開發檢查列表。
單擊確定。
Flash 將元件添加到庫中,然後切換到元件編輯模式。在此模式下,元件的名稱顯示於舞臺左上角的上方,並且有壹個十字線表明該元件的註冊點。
您現在就可以編輯該元件以創建壹個組件。請參閱編輯影片剪輯。
編輯影片剪輯
在創建新元件並為其定義鏈接後,即可在該元件的時間軸中定義組件的資源。
組件的元件應有兩個圖層。本節說明應該插入哪些圖層,應該在這些圖層上添加哪些內容。
若要編輯影片剪輯,請執行以下操作:
將圖層1 重命名為動作,然後選擇第壹幀。
打開動作面板,然後添加 stop() 函數,如下所示: stop();
不要向此幀添加任何圖形資源。
添加壹個名為 Assets 的圖層。
在 Assets圖層上,選擇第二幀並插入壹個空白關鍵幀。
現在該圖層上有兩個空白關鍵幀。
請執行以下操作之壹:
·如果組件具有定義邊界區域的可視資源,則將這些元件拖到第壹幀中並進行適當安排。
·如果組件在運行時創建其所有可視資源,請將壹個 BoundingBox 元件拖到舞臺上第壹幀中,適當調整其大小,然後將實例命名為 boundingBox_mc。該元件位於 Configuration/ComponentFLA文件夾中的 StandardComponents.fla 的庫中。
如果要擴展現有組件,請將該組件的壹個實例和任何其它基類放在 Assets圖層的第二幀中。
為此,請從組件面板中選擇該元件並將它拖到舞臺上。如果要擴展壹個基類,請打開 Configuration/ComponentFLA 文件夾中的 StandardComponents.fla,然後將該類從庫中拖到舞臺上。
註意
將 UIComponent 拖到組件庫時,會更改庫中的文件夾層次結構。如果打算再次使用庫,或將它用於其它組件組(如第 2 版組件),應重新組織文件夾層次結構,以便與 StandardComponents.fla 庫匹配,從而使庫組織有序,避免元件重復。
在組件的 Assets圖層的第二幀添加由該組件使用的所有圖形資源。
組件所使用的任何資源(無論是其它組件還是位圖之類的媒體)都應具有壹個放置在 Assets 圖層的第二幀中的實例。
完成的元件看起來應與下圖相似:
影片剪輯元件必須在組件定義對話框中鏈接到 ActionScript 類文件。這是 Flash 了解在何處查找組件元標記的方式。(有關元標記的詳細信息,請參閱添加組件元數據。)您也可以在組件定義對話框中選擇其它選項。
將影片剪輯定義為組件:
在庫中選擇影片剪輯,然後從庫上下文菜單中選擇組件定義(Windows:右鍵單擊;Mac:按住 Control 鍵單擊)。
必須輸入壹個 AS 2.0 類。
如果該類在包中,則輸入完整的包名稱。如果需要,可以在組件定義對話框中指定其它選項:
單擊加號 (+) 按鈕可定義參數。
此為可選操作。最好的做法是在組件的類文件中使用元數據Inspectable 標記來指定參數。如果未指定 ActionScript 2.0 類,則在這是壹個在組件檢查器中播放的 SWF文件。您可以將它嵌入組件 FLA文件或瀏覽到壹個外部 SWF文件。
指定實時預覽。
這是壹個外部或嵌入的 SWF文件。此處無需指定實時預覽;將壹個邊框添加到組件影片剪輯,Flash 即會為您創建實時預覽。請參閱創建組件影片剪輯。
輸入描述。
在 Flash MX 2004 中,由於參考面板已刪除,因此不建議使用描述字段。提供此字段目的在於以 Flash MX 格式保存 FLA文件時的向後兼容性。
選擇圖標。
此選項指定壹個 PNG文件來用作組件的圖標。如果在 ActionScript 2.0 類文件中指定 IconFile元數據標記(最佳做法),則會忽略該字段。
選擇或取消選擇實例中參數已鎖定。
如果取消選擇此選項,用戶則可以向每個組件實例添加不同於組件參數的參數。通常應選擇此設置。此選項提供與 Flash MX 的向後兼容性。
指定顯示在組件面板中的工具提示。
創建 ActionScript 類文件
所有組件元件都鏈接到 ActionScript 2.0 類文件。(有關鏈接的信息,請參閱創建組件影片剪輯。)
要編輯 ActionScript 類文件,您可以使用 Flash、任何文本編輯器,也可以使用任何集成開發環境(IDE)。
外部 ActionScript 類擴展其它類(無論該類是第 2 版組件、第 2 版基類還是 ActionScript MovieClip 類)。您應擴展所創建的功能與要創建的組件最類似的類。只能從壹個類繼承(擴展)。ActionScript 2.0 不允許多繼承。
本節包含以下主題:
組件類文件的簡單示例
組件類文件概述
定義類及其超類
標識類、元件和所有者名稱
定義變量
使用 getter/setter 方法定義參數
添加組件元數據
定義組件參數
關於核心函數
發送事件
關於指定外觀
關於樣式
組件類文件的簡單示例
下面是類文件的壹個簡單示例,該類文件名為 <CITE style=BACKGROUND: none transparent scroll repeat 0% 0% class=highlight highlight=true>MyComponent</CITE>。如果要創建此組件,應將該類文件鏈接到 Flash 中的組件影片剪輯。
此示例包含從 UIComponent 類繼承的組件 MyComponent 至少應有的壹組導入、方法和聲明。MyComponents文件保存在 myPackage 文件夾中。
Event(eventName)
// 導入包。
import mx.core.UIObject;
// 聲明類並從父類擴展。
classmypackage.MyComponent extends UIObject {
// 標識此類所綁定到的元件名稱。
static var symbolName:String = mypackage.MyComponent;
// 標識元件所有者的完全限定包名稱。
static var symbolOwner:Object = Object(mypackage.MyComponent);
// 提供className 變量。
varclassName:String = MyComponent;
// 定義壹個空構造函數。
function MyComponent() {
}
// 調用父級的 init() 方法。
// 隱藏邊框,該邊框
// 僅在創作時使用。
function init():Void {
super.init();
boundingBox_mc.width = 0;
boundingBox_mc.height = 0;
boundingBox_mc.visible = false;
}
function createChildren():Void{
// 調用 createClassObject 來創建子對象。
size();
invalidate();
}
function size(){
// 編寫處理大小的代碼。
super.size();
invalidate();
}
function draw(){
// 編寫處理可視化表示形式的代碼。
super.draw();
}
}
組件類文件概述
以下是介紹如何為組件類創建 ActionScript文件的常規過程。根據所創建組件類型的不同,某些步驟是可選步驟。
編寫組件類文件
(可選)導入類。(請參閱導入類)。
執行這壹步驟,則無需寫出包(例如,使用 Button 而不是 mx.controls.Button)即可引用類。 使用class關鍵字定義類;使用 extend 關鍵字擴展父類。(請參閱定義類及其超類)。
定義 symbolName、symbolOwner 和className 變量。(請參閱標識類、元件和所有者名稱)。
只有第 2 版組件才需要這些變量。
定義成員變量。(請參閱定義變量)。
這些變量可用於 getter/setter 方法。
定義壹個構造函數。(請參閱關於構造函數)。
定義 init() 方法。(請參閱定義 init() 方法)。
如果類擴展的是 UIComponent,則創建類時會調用此方法。如果類擴展的是 MovieClip,則從構造函數調用此方法。
定義 createChildren() 方法。(請參閱定義 createChildren() 方法)。
如果類擴展的是 UIComponent,則創建類時會調用此方法。如果類擴展的是 MovieClip,則從構造函數調用此方法。
定義 size() 方法。(請參閱定義 size() 方法)。
如果類擴展的是 UIComponent,則調整組件大小時調用此方法。此外,在創作時調整組件的實時預覽大小時也會調用此方法。
定義 draw() 方法。(請參閱關於無效)。
如果類擴展的是 UIComponent,則組件無效時調用此方法。
添加壹個元數據標記和聲明。(請參閱添加組件元數據)。
添加標記和聲明可使 getter/setter 屬性顯示在 Flash 的屬性 方法。(請參閱使用 getter/setter 方法定義參數)。
(可選)為組件中使用的每個外觀元素/鏈接創建變量。(請參閱關於指定外觀)。
執行這壹步驟,用戶則可通過更改組件中的參數來設置不同的外觀元素。
在組件內組合現有組件
在本節中,您將構建壹個可以組合 Label、TextInput 和 Button 組件的簡單的 LogIn 組件。本教程演示如何在新組件中通過添加未經編譯的 Flash (FLA) 庫元件來組合現有組件。已完成的組件文件LogIn.fla、LogIn 和 LogIn.swf 位於硬盤上的以下示例文件夾中:
在 Windows 中:the C:Program FilesMacromediaFlash 8Samples and TutorialsSamplesComponentsLogin folder。
在 Macintosh 上:HD/Applications/Macromedia Flash 8/Samples and Tutorials/Samples/Components/Login文件夾。
LogIn 組件提供輸入名稱和密碼的界面。LogIn 的 API 有兩個屬性 name 和 password,用來設置和獲取名稱和密碼 TextInput 字段中的字符串值。LogIn 組件還將在用戶單擊標記為LogIn的按鈕時發送壹個click事件。
創建 LogIn Flash (FLA) 文件
LogIn 類文件
測試和導出 LogIn 組件
導出和分發組件
Flash 將組件導出為組件包(SWC 文件)。組件可以分發為 SWC文件或 FLA 文件。(有關將組件作為 FLA 分發的信息,請參閱 Macromedia DevNet 上的文章,
分發組件的最好方法是將它導出為 SWC文件,這是因為 SWC 文件包含全部 ActionScript、SWF 文件以及使用組件所需的其它可選文件。如果要同時開發某個組件和使用該組件的應用程序,則 SWC文件也十分有用。
SWC文件可用於分發在 Macromedia Flash 8、Macromedia Dreamweaver MX 2004 和 Macromedia Director MX 2004 中使用的組件。
無論開發組件的目的是為了供他人使用還是自己使用,對作為組件開發的正在進行部分的 SWC文件進行測試都非常重要。例如,組件的 FLA文件中不會出現的問題可能會在 SWC 文件中出現。
組件開發的最後壹些步驟
組件創建完成並準備好打包之後,即可添加圖標和工具提示。要確保已完成所有必需的步驟,請參閱組件開發檢查列表。
本節包含以下主題:
· 添加圖標
· 添加工具提示
· 組件開發檢查列表
添加圖標
您可以添加在 Flash 創作環境的組件面板中表示組件的圖標。 添加組件的圖標:
· 創建新圖像。
圖像必須為 18 x 18像素,並且必須保存為 PNG 格式。它的 Alpha 透明度必須是 8 位,左上角的像素必須是透明的,以支持遮罩。
· 在組件 ActionScript 類文件中的類定義之前添加以下定義: IconFile(component_name.png)
· 將圖像添加到 FLA文件所在的目錄。在導出 SWC文件時,Flash 將在歸檔的根級包含該圖像。
添加工具提示
當用戶將鼠標滾到 Flash 創作環境中組件面板上的組件名稱或圖標上時,工具提示就會顯示出來。
在組件定義對話框中可以定義工具提示。可以從組件 FLA 文件的庫選項菜單訪問此對話框(Windows:右鍵單擊;Mac:按住 Control 鍵單擊)。
在組件定義對話框中添加工具提示:
在 Flash 中打開組件的 FLA文件時,確保庫可見(窗口>庫菜單)。
單擊庫選項菜單(Windows:右鍵單擊;Mac:按住 Control 鍵單擊)。
庫選項菜單位於庫標題欄的右側,顯示為壹個三條線和向下三角形的圖標。
選擇組件定義選項。
在組件定義對話框的選項下,選擇顯示在'組件'面板中。
工具提示文本框即會變為可編輯文本框。
在工具提示文本框中輸入組件的工具提示文本。
單擊確定以保存更改。