Fireworks教程：動(dòng)態(tài)元件的基本制作及高級(jí)運(yùn)用
若水221147由 分享
時(shí)間：
本例為Fireworks技巧實(shí)例教程，主要講解動(dòng)態(tài)元件的創(chuàng)建方法，教程從介紹動(dòng)態(tài)元件的概念、創(chuàng)建一個(gè)基本的Fireworks動(dòng)態(tài)元件到運(yùn)用JSF代碼的高級(jí)運(yùn)用均有講解，希望能給朋友們帶來幫助~~
首先講一下什么是動(dòng)態(tài)元件，在Fireworks中，我們可以創(chuàng)建“圖形”、“按鈕”、和“動(dòng)畫”三種元件，但往往我們只是直接從文檔庫(kù)里面直接把元件拖出來用，我們把這種元件成為靜態(tài)元件。
舉個(gè)例子：我繪畫了一顆“OK“按鈕并轉(zhuǎn)換為按鈕類的元件，當(dāng)我要再做一個(gè)“Cancel”按鈕時(shí)，我就要把剛才那個(gè)“OK”按鈕從文檔庫(kù)拖進(jìn)畫布，打散，然后把文本“OK”改為“Cancel”，再轉(zhuǎn)成元件。像這樣子的操作也許我們壓根就沒必要將它們轉(zhuǎn)成元件，因?yàn)槿绻覀円龊芏喟粹o，那文檔庫(kù)就會(huì)有很多這樣子的元件。
而動(dòng)態(tài)元件是什么概念呢？就是我只需要從庫(kù)里面把這按鈕拖出來，然后就可以在“元件定義”面板里面改變這個(gè)按鈕上的文字、長(zhǎng)和寬、以及鼠標(biāo)移入、按下等屬性，但這個(gè)元件在庫(kù)里面只存在一個(gè)，這就是我所說的動(dòng)態(tài)元件。如果你對(duì)此還不太理解，那你可以點(diǎn)擊“Window”菜單下的“Common Library”開啟公用庫(kù)，里面就放著一些這種類型的元件。
了解動(dòng)態(tài)元件用來做什么以后，我們就可以開始制作了。
一、創(chuàng)建一個(gè)基本的動(dò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)為一個(gè)圖形類元件，進(jìn)入這個(gè)元件的編輯狀態(tài)，加入按鈕文本，并給每張狀態(tài)圖進(jìn)行命名（如下圖）
3.第2步操作要注意幾點(diǎn)：
- 開啟“九宮智能縮放”，將拉伸區(qū)域設(shè)定在文本框外部；
- 文本框的寬度要等于按鈕背景圖寬度減去縮放區(qū)域?qū)挾?，并設(shè)置文本居中顯示；
- 按鈕背景圖最好平面化為位圖，避免在縮放時(shí)出現(xiàn)路徑開拆（但不平面化也可以保持圖形縮放時(shí)的質(zhì)量不會(huì)損失）；
- 將不需要顯示的狀態(tài)圖進(jìn)行隱藏（去掉圖層前面的眼睛圖標(biāo)）；
4.在文檔庫(kù)中選中剛才創(chuàng)建的元件，點(diǎn)擊右上角的菜單按鈕，選擇“保存到公用庫(kù)”，在彈出的對(duì)話框中選擇保存，默認(rèn)的路徑是：
X:\Documents and Settings\UserName\Application Data\Adobe\Fireworks CS3\Common Library\Custom Symbols
5.在“命令”菜單中點(diǎn)擊“創(chuàng)建元件腳本”；
6.在“創(chuàng)建元件腳本”對(duì)話框中選擇打開剛才保存的PNG文件，并按照下圖設(shè)置動(dòng)態(tài)元件的屬性，最后點(diǎn)擊保存：
7.現(xiàn)在隨便新建一個(gè)文檔，在公用庫(kù)的自定義目錄中將自制的動(dòng)態(tài)元件拖進(jìn)畫布，再在“Window”菜單下點(diǎn)擊“Symbol Properties” （元件屬性）
簡(jiǎn)單設(shè)置一下就可以在場(chǎng)景上創(chuàng)建多個(gè)不同狀態(tài)、不同標(biāo)簽文字的按鈕了。
二、動(dòng)態(tài)元件的高級(jí)運(yùn)用
前面講解了怎么創(chuàng)建一個(gè)基本的 Fireworks 動(dòng)態(tài)元件，那么這一次就講解一下怎么制作一個(gè)“高級(jí)”一點(diǎn)的動(dòng)態(tài)元件。
事先聲明一下，本教程涉及JSF代碼，如果對(duì)此沒有興趣的童鞋可以華麗的飄過，對(duì) Fireworks 極度狂熱且有信心能讀懂簡(jiǎn)單代碼的朋友請(qǐng)繼續(xù)。
1.我們上次做了一個(gè)動(dòng)態(tài)組件，并保存到了
X:\Documents and Settings\UserName\Application Data\Adobe\Fireworks CS3\Common Library\Custom Symbols
2.現(xiàn)在我們用瀏覽器打開這個(gè)目錄，可以看到兩個(gè)文件：
3.現(xiàn)在我們用記事本打開“myBtn.jsf”，就可以看到里面的JSF代碼（代碼略，大家自己打開文件看）；
4.作為參考，我們打開Fireworks內(nèi)置動(dòng)態(tài)元件的JSF腳本文件，打開公用庫(kù)面板中的Mac目錄，隨便找一個(gè)名字獨(dú)特一點(diǎn)的按鈕（本例選擇“ButtonBarLeft”），把它的名字記下來，然后搜索這個(gè)名字就可以獲得這個(gè)路徑：X:\...\Adobe Fireworks CS3\Configuration\Common Library\Mac\
5.找到了內(nèi)置動(dòng)態(tài)元件的路徑，我們就可以打開這些內(nèi)置動(dòng)態(tài)元件的腳本來觀察了，我們打開“Button.jsf”（這個(gè)腳本對(duì)應(yīng)的文件是“Button.graphic.png”），即可看到里面的JSF代碼；
6.那么我們就可以將內(nèi)置動(dòng)態(tài)元件的腳本“移植”到我們自己的按鈕上去，在進(jìn)行這一步前要注意，這些移植的代碼將被“命令”菜單下的“創(chuàng)建元件腳本”程序識(shí)別為“不被兼容的腳本”，因此只能自己用記事本編輯了.
7.現(xiàn)在打開我們?cè)谥吧傻陌粹o腳本“myBtn.jsf”，清空舊代碼，輸入如下代碼，我加了注釋，應(yīng)該還是比較容易理解的：
//Widget.opCode會(huì)返回兩個(gè)值：1 和 2 ，
//當(dāng)動(dòng)態(tài)元件被拖進(jìn)畫布時(shí)會(huì)返回 1（初始化），
//每當(dāng)檢測(cè)到用戶改變了動(dòng)態(tài)元件的屬性就會(huì)返回 2（偵聽變化）；
switch (Widget.opCode){
case 1: setDefaultValues(); break;
case 2: applyCurrentValues(); break;
}
//初始化函數(shù)
function setDefaultValues(){
var values = new Array();
//建立 Label 和 State 屬性，并定義初始值；
values.push({ name:"Label", type:"text", value:"My Button" });
values.push({ name:"State", type:"ComboBox",
value:"normal,normal,mouseOver,mouseDown,unavailable"});
//用內(nèi)置方法給當(dāng)前屬性賦予初始值；
Widget.elem.customData["currentValues"] = values;
}
function applyCurrentValues(){
//取得當(dāng)前值
var vals = Widget.elem.customData["currentValues"];
//獲得 State 狀態(tài)列表當(dāng)前項(xiàng)的名稱
var state = vals[1].value.split(",")[0].toString();
//遇到錯(cuò)誤時(shí)可以用 alert(); 來Debug；
//alert(state);
//根據(jù)用戶輸入改變 label 標(biāo)簽的值
Widget.GetObjectByName("label").textChars = vals[0].value;
//根據(jù)用戶在下拉列表選擇項(xiàng)來顯示或隱藏對(duì)應(yīng)的按鈕背景圖；
Widget.GetObjectByName("normal").visible = (state=="normal");
Widget.GetObjectByName("mouseOver").visible = (state=="mouseOver");
Widget.GetObjectByName("mouseDown").visible = (state=="mouseDown");
Widget.GetObjectByName("unavailable").visible = (state=="unavailable");
}
8.輸入完代碼后保存（注意要存為 ANSI 編碼），然后進(jìn)入 Fireworks 新建文件、Reload一下公用庫(kù)、再重新把自定義動(dòng)態(tài)元件拖進(jìn)畫布即可見到效果：
首先講一下什么是動(dòng)態(tài)元件，在Fireworks中，我們可以創(chuàng)建“圖形”、“按鈕”、和“動(dòng)畫”三種元件，但往往我們只是直接從文檔庫(kù)里面直接把元件拖出來用，我們把這種元件成為靜態(tài)元件。
舉個(gè)例子：我繪畫了一顆“OK“按鈕并轉(zhuǎn)換為按鈕類的元件，當(dāng)我要再做一個(gè)“Cancel”按鈕時(shí)，我就要把剛才那個(gè)“OK”按鈕從文檔庫(kù)拖進(jìn)畫布，打散，然后把文本“OK”改為“Cancel”，再轉(zhuǎn)成元件。像這樣子的操作也許我們壓根就沒必要將它們轉(zhuǎn)成元件，因?yàn)槿绻覀円龊芏喟粹o，那文檔庫(kù)就會(huì)有很多這樣子的元件。
而動(dòng)態(tài)元件是什么概念呢？就是我只需要從庫(kù)里面把這按鈕拖出來，然后就可以在“元件定義”面板里面改變這個(gè)按鈕上的文字、長(zhǎng)和寬、以及鼠標(biāo)移入、按下等屬性，但這個(gè)元件在庫(kù)里面只存在一個(gè)，這就是我所說的動(dòng)態(tài)元件。如果你對(duì)此還不太理解，那你可以點(diǎn)擊“Window”菜單下的“Common Library”開啟公用庫(kù)，里面就放著一些這種類型的元件。
了解動(dòng)態(tài)元件用來做什么以后，我們就可以開始制作了。
一、創(chuàng)建一個(gè)基本的動(dò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)為一個(gè)圖形類元件，進(jìn)入這個(gè)元件的編輯狀態(tài)，加入按鈕文本，并給每張狀態(tài)圖進(jìn)行命名（如下圖）
3.第2步操作要注意幾點(diǎn)：
- 開啟“九宮智能縮放”，將拉伸區(qū)域設(shè)定在文本框外部；
- 文本框的寬度要等于按鈕背景圖寬度減去縮放區(qū)域?qū)挾?，并設(shè)置文本居中顯示；
- 按鈕背景圖最好平面化為位圖，避免在縮放時(shí)出現(xiàn)路徑開拆（但不平面化也可以保持圖形縮放時(shí)的質(zhì)量不會(huì)損失）；
- 將不需要顯示的狀態(tài)圖進(jìn)行隱藏（去掉圖層前面的眼睛圖標(biāo)）；
4.在文檔庫(kù)中選中剛才創(chuàng)建的元件，點(diǎn)擊右上角的菜單按鈕，選擇“保存到公用庫(kù)”，在彈出的對(duì)話框中選擇保存，默認(rèn)的路徑是：
X:\Documents and Settings\UserName\Application Data\Adobe\Fireworks CS3\Common Library\Custom Symbols
5.在“命令”菜單中點(diǎn)擊“創(chuàng)建元件腳本”；
6.在“創(chuàng)建元件腳本”對(duì)話框中選擇打開剛才保存的PNG文件，并按照下圖設(shè)置動(dòng)態(tài)元件的屬性，最后點(diǎn)擊保存：
7.現(xiàn)在隨便新建一個(gè)文檔，在公用庫(kù)的自定義目錄中將自制的動(dòng)態(tài)元件拖進(jìn)畫布，再在“Window”菜單下點(diǎn)擊“Symbol Properties” （元件屬性）
簡(jiǎn)單設(shè)置一下就可以在場(chǎng)景上創(chuàng)建多個(gè)不同狀態(tài)、不同標(biāo)簽文字的按鈕了。
二、動(dòng)態(tài)元件的高級(jí)運(yùn)用
前面講解了怎么創(chuàng)建一個(gè)基本的 Fireworks 動(dòng)態(tài)元件，那么這一次就講解一下怎么制作一個(gè)“高級(jí)”一點(diǎn)的動(dòng)態(tài)元件。
事先聲明一下，本教程涉及JSF代碼，如果對(duì)此沒有興趣的童鞋可以華麗的飄過，對(duì) Fireworks 極度狂熱且有信心能讀懂簡(jiǎn)單代碼的朋友請(qǐng)繼續(xù)。
1.我們上次做了一個(gè)動(dòng)態(tài)組件，并保存到了
X:\Documents and Settings\UserName\Application Data\Adobe\Fireworks CS3\Common Library\Custom Symbols
2.現(xiàn)在我們用瀏覽器打開這個(gè)目錄，可以看到兩個(gè)文件：
3.現(xiàn)在我們用記事本打開“myBtn.jsf”，就可以看到里面的JSF代碼（代碼略，大家自己打開文件看）；
4.作為參考，我們打開Fireworks內(nèi)置動(dòng)態(tài)元件的JSF腳本文件，打開公用庫(kù)面板中的Mac目錄，隨便找一個(gè)名字獨(dú)特一點(diǎn)的按鈕（本例選擇“ButtonBarLeft”），把它的名字記下來，然后搜索這個(gè)名字就可以獲得這個(gè)路徑：X:\...\Adobe Fireworks CS3\Configuration\Common Library\Mac\
5.找到了內(nèi)置動(dòng)態(tài)元件的路徑，我們就可以打開這些內(nèi)置動(dòng)態(tài)元件的腳本來觀察了，我們打開“Button.jsf”（這個(gè)腳本對(duì)應(yīng)的文件是“Button.graphic.png”），即可看到里面的JSF代碼；
6.那么我們就可以將內(nèi)置動(dòng)態(tài)元件的腳本“移植”到我們自己的按鈕上去，在進(jìn)行這一步前要注意，這些移植的代碼將被“命令”菜單下的“創(chuàng)建元件腳本”程序識(shí)別為“不被兼容的腳本”，因此只能自己用記事本編輯了.
7.現(xiàn)在打開我們?cè)谥吧傻陌粹o腳本“myBtn.jsf”，清空舊代碼，輸入如下代碼，我加了注釋，應(yīng)該還是比較容易理解的：
//Widget.opCode會(huì)返回兩個(gè)值：1 和 2 ，
//當(dāng)動(dòng)態(tài)元件被拖進(jìn)畫布時(shí)會(huì)返回 1（初始化），
//每當(dāng)檢測(cè)到用戶改變了動(dòng)態(tài)元件的屬性就會(huì)返回 2（偵聽變化）；
switch (Widget.opCode){
case 1: setDefaultValues(); break;
case 2: applyCurrentValues(); break;
}
//初始化函數(shù)
function setDefaultValues(){
var values = new Array();
//建立 Label 和 State 屬性，并定義初始值；
values.push({ name:"Label", type:"text", value:"My Button" });
values.push({ name:"State", type:"ComboBox",
value:"normal,normal,mouseOver,mouseDown,unavailable"});
//用內(nèi)置方法給當(dāng)前屬性賦予初始值；
Widget.elem.customData["currentValues"] = values;
}
function applyCurrentValues(){
//取得當(dāng)前值
var vals = Widget.elem.customData["currentValues"];
//獲得 State 狀態(tài)列表當(dāng)前項(xiàng)的名稱
var state = vals[1].value.split(",")[0].toString();
//遇到錯(cuò)誤時(shí)可以用 alert(); 來Debug；
//alert(state);
//根據(jù)用戶輸入改變 label 標(biāo)簽的值
Widget.GetObjectByName("label").textChars = vals[0].value;
//根據(jù)用戶在下拉列表選擇項(xiàng)來顯示或隱藏對(duì)應(yīng)的按鈕背景圖；
Widget.GetObjectByName("normal").visible = (state=="normal");
Widget.GetObjectByName("mouseOver").visible = (state=="mouseOver");
Widget.GetObjectByName("mouseDown").visible = (state=="mouseDown");
Widget.GetObjectByName("unavailable").visible = (state=="unavailable");
}
8.輸入完代碼后保存（注意要存為 ANSI 編碼），然后進(jìn)入 Fireworks 新建文件、Reload一下公用庫(kù)、再重新把自定義動(dòng)態(tài)元件拖進(jìn)畫布即可見到效果：