Fireworks動態(tài)元件的基本制作及高級運(yùn)用教程

本文格式為Word版，下載可任意編輯——Fireworks動態(tài)元件的基本制作及高級運(yùn)用教程

本例為Fireworks技巧實(shí)例教程，主要講解動態(tài)元件的創(chuàng)立方法，教程從介紹動態(tài)元件的概念、創(chuàng)立一個基本的Fireworks動態(tài)元件到運(yùn)用JSF代碼的高級運(yùn)用均有講解，希望能給朋友們帶來幫助~~首先講一下什么是動態(tài)元件，在Fireworks中，我們可以創(chuàng)立"圖形'、"按鈕'、和"動畫'三種元件，但往往我們只是直接從文檔庫里面直接把元件拖出來用，我們把這種元件成為靜態(tài)元件。

舉個例子：我繪畫了一顆"OK"按鈕并轉(zhuǎn)換為按鈕類的元件，當(dāng)我要再做一個"Cancel'按鈕時，我就要把方才那個"OK'按鈕從文檔庫拖進(jìn)畫布，打散，然后把文本"OK'改為"Cancel'，再轉(zhuǎn)成元件。像這樣子的操作可能我們壓根就沒必要將它們轉(zhuǎn)成元件，由于假如我們要做好多按鈕，那文檔庫就會有好多這樣子的元件。

而動態(tài)元件是什么概念呢？就是我只需要從庫里面把這按鈕拖出來，然后就可以在"元件定義'面板里面改變這個按鈕上的文字、長和寬、以及鼠標(biāo)移入、按下等屬性，但這個元件在庫里面只存在一個，這就是我所說的動態(tài)元件。假如你對此還不太理解，那你可以點(diǎn)擊"Window'菜單下的"CommonLibrary'開啟公用庫，里面就放著一些這種類型的元件。

了解動態(tài)元件用來做什么以后，我們就可以開始制作了。

一、創(chuàng)立一個基本的動態(tài)元件

1.首先我們繪制一顆按鈕的四種狀態(tài)："正常狀態(tài)'、"鼠標(biāo)移入狀態(tài)'、"鼠標(biāo)按下狀態(tài)'和"禁用狀態(tài)'

2.然后我們把這些按鈕背景圖的坐標(biāo)設(shè)為統(tǒng)一，讓它們重疊在一起，再將它們?nèi)窟x中，按F8鍵轉(zhuǎn)為一個圖形類元件，進(jìn)入這個元件的編輯狀態(tài)，參與按鈕文本，并給每張狀態(tài)圖進(jìn)行命名（如下圖）

3.第2步操作要注意幾點(diǎn)：

-開啟"九宮智能縮放'，將拉伸區(qū)域設(shè)定在文本框外部；

-文本框的寬度要等于按鈕背景圖寬度減去縮放區(qū)域?qū)挾?，并設(shè)置文本居中顯示；

-按鈕背景圖最好平面化為位圖，避免在縮放時出現(xiàn)路徑開拆（但不平面化也可以保持圖形縮放時的質(zhì)量不會損失）；

-將不需要顯示的狀態(tài)圖進(jìn)行隱蔽（去掉圖層前面的眼睛圖標(biāo)）；

4.在文檔庫中選中方才創(chuàng)立的元件，點(diǎn)擊右上角的菜單按鈕，選擇"保存到公用庫'，在彈出的對話框中選擇保存，默認(rèn)的路徑是：

X:DocumentsandSettingsUserNameApplicationDataAdobeFireworksCS3CommonLibraryCustomSymbols

5.在"命令'菜單中點(diǎn)擊"創(chuàng)立元件腳本'；

6.在"創(chuàng)立元件腳本'對話框中選擇開啟方才保存的PNG文件，并依照下圖設(shè)置動態(tài)元件的屬性，最終點(diǎn)擊保存：

7.現(xiàn)在隨意新建一個文檔，在公用庫的自定義目錄中將自制的動態(tài)元件拖進(jìn)畫布，再在"Window'菜單下點(diǎn)擊"SymbolProperties'（元件屬性）

簡單設(shè)置一下就可以在場景上創(chuàng)立多個不同狀態(tài)、不同標(biāo)簽文字的按鈕了。

二、動態(tài)元件的高級運(yùn)用

前面講解了怎么創(chuàng)立一個基本的Fireworks動態(tài)元件，那么這一次就講解一下怎么制作一個"高級'一點(diǎn)的動態(tài)元件。

事先聲明一下，本教程涉及JSF代碼，假如對此沒有興趣的童鞋可以綺麗的飄過，對Fireworks極度狂熱且有信心能讀懂簡單代碼的朋友請繼續(xù)。

1.我們上次做了一個動態(tài)組件，并保存到了

X:DocumentsandSettingsUserNameApplicationDataAdobeFireworksCS3CommonLibraryCustomSymbols

2.現(xiàn)在我們用瀏覽器開啟這個目錄，可以看到兩個文件：

3.現(xiàn)在我們用記事本開啟"myBtn.jsf'，就可以看到里面的JSF代碼（代碼略，大家自己開啟文件看）；

4.作為參考，我們開啟Fireworks內(nèi)置動態(tài)元件的JSF腳本文件，開啟公用庫面板中的Mac目錄，隨意找一個名字獨(dú)特一點(diǎn)的按鈕（本例選擇"ButtonBarLeft'），把它的名字記錄下來來，然后探尋這個名字就可以獲得這個路徑：X:...AdobeFireworksCS3ConfigurationCommonLibraryMac

5.找到了內(nèi)置動態(tài)元件的路徑，我們就可以開啟這些內(nèi)置動態(tài)元件的腳本來觀測了，我們開啟"Button.jsf'（這個腳本對應(yīng)的文件是"Button.graphic.png'），即可看到里面的JSF代碼；

6.那么我們就可以將內(nèi)置動態(tài)元件的腳本"移植'到我們自己的按鈕上去，在進(jìn)行這一步前要注意，這些移植的代碼將被"命令'菜單下的"創(chuàng)立元件腳本'程序識別為"不被兼容的腳本'，因此只能自己用記事本編輯了.

7.現(xiàn)在開啟我們在之前生成的按鈕腳本"myBtn.jsf'，清空舊代碼，輸入如下代碼，我加了解釋，應(yīng)當(dāng)還是對比簡單理解的：

//Widget.opCode會返回兩個值：1和2，

//當(dāng)動態(tài)元件被拖進(jìn)畫布時會返回1（初始化），

//每當(dāng)檢測到用戶改變了動態(tài)元件的屬性就會返回2（偵聽變化）；

switch(Widget.opCode){

case1:setDefaultValues();break;

case2:applyCurrentValues();break;

}

//初始化函數(shù)

functionsetDefaultValues(){

varvalues=newArray();

//建立Label和State屬性，并定義初始值；

values.push({name:Label,type:text,value:MyButton});

values.push({name:State,type:ComboBox,value:normal,normal,mouseOver,mouseDown,unavailable});

//用內(nèi)置方法給當(dāng)前屬性賦予初始值；

Widget.elem.customData[currentValues]=values;

}

functionapplyCurrentValues(){

//取得當(dāng)前值

varvals=Widget.elem.customData[currentValues];

//獲得State狀態(tài)列表當(dāng)前項(xiàng)的名稱

varstate=vals[1].value.split(,)[0].toString();

//遇到錯誤時可以用alert();來Debug；

//alert(state);

//根據(jù)用戶輸入改變label標(biāo)簽的值

Widget.GetObjectByName(label).textChars=vals[0].value;

//根據(jù)用戶在下拉列表選擇項(xiàng)來顯示或隱蔽對應(yīng)的按鈕背景圖；

Widget.GetObjectByName(normal).visible=(state==normal);

Widget.GetObjectByName(mouseOver).visible=(state==mouseOver);

Widget.GetObjectByName(mouseDown).visible=(state==mouse