在Fireworks中為網(wǎng)頁添加一個(gè)交互式動(dòng)態(tài)按鈕這已不是什么新鮮事了，然而利用該動(dòng)態(tài)按鈕的制作原理，創(chuàng)作一款能響應(yīng)鼠標(biāo)操作的翻蓋式打火機(jī)，你見過沒呢？！下面讓我們先來看一下該作品在導(dǎo)出為HTM格式后，在瀏覽器中所呈現(xiàn)的各種動(dòng)態(tài)效果，
翻蓋再點(diǎn)燃 Fireworks制作打火機(jī)
。一、效果展示
1、普通狀態(tài)。
2、鼠標(biāo)滑動(dòng)到打火機(jī)翻蓋時(shí)的狀態(tài)。
3、單擊翻蓋后，翻蓋彈起。
4、鼠標(biāo)觸摸或移開打火機(jī)開關(guān)時(shí)，火苗被點(diǎn)燃或熄滅。
5、如果想要再次看到打火機(jī)翻蓋時(shí)的效果，只需再次刷新頁面即可。
怎么樣，這個(gè)效果好玩吧！下面就讓我們進(jìn)入實(shí)質(zhì)的制作階段。
二、制作過程
要完成我們剛才所看到的效果，就必需先把打火機(jī)的“翻蓋”和“開關(guān)”這些對象進(jìn)行分解，然后依據(jù)鼠標(biāo)的相關(guān)動(dòng)作再將其進(jìn)行組裝。至于火苗和火苗光芒這些效果，我們可以根據(jù)需要，畫上去即可。因?yàn)榫W(wǎng)上的打火機(jī)素材圖片非常多，所以也就省去了再去繪制一個(gè)帶翻蓋打火機(jī)的時(shí)間。我們在啟動(dòng)Fireworks后新建一個(gè)500*400大小的白色畫布，然后導(dǎo)入一張事先準(zhǔn)備好的打火機(jī)位圖，如圖05。
為了更加凸顯該打火機(jī)火苗的亮光，我們需要將圖05中的背景，改為黑色，所以我們第一步要做的就是先將圖05中的打火機(jī)從其背景中“扣”出來。等到把火苗繪制完后，再把畫布改為黑色即可。在這里，我使用的是蒙版扣圖。先用“鋼筆”工具沿著這個(gè)打火機(jī)的外形繪制一個(gè)封閉路徑，然后對該路徑使用無描邊色的實(shí)心填充，填充色為全白色，如圖06。
將路徑對象與位圖同時(shí)選中后，使用菜單欄上的“修改——蒙版——組合為蒙版”命令。從而使我們得到一個(gè)較精確的打火機(jī)外形，如圖07。然后再點(diǎn)擊菜單欄上的“修改——平面化所選”命令，將這組蒙版對象轉(zhuǎn)成位圖。
剛才已說過了，為了使這個(gè)打火機(jī)的翻蓋和開關(guān)在鼠標(biāo)的操作下能夠進(jìn)行活動(dòng)，我們需要將這個(gè)打火機(jī)的翻蓋和開關(guān)也獨(dú)立的再“扣”出來。先將當(dāng)前的這個(gè)打火機(jī)位圖進(jìn)行復(fù)制，然后在復(fù)制出來的位圖上，用“鋼筆”工具沿著打火機(jī)的翻蓋繪制出一個(gè)無描邊色的封閉路徑，填充色為白色，如圖08。
將該路徑與復(fù)制的打火機(jī)位圖同時(shí)選中后也使用菜單欄上的“修改——蒙版——組合為蒙版”命令，從而將打火機(jī)的翻蓋也“扣”了出來。接著再使用“修改——平面化所選”命令，將這個(gè)蒙版對象轉(zhuǎn)成位圖。如圖09。
為了使這個(gè)翻蓋能將打火機(jī)的上部“蓋住”，我們選中這個(gè)“翻蓋”后點(diǎn)擊菜單欄上的“修改——變形——數(shù)值變形”命令。在彈出的對話框中選擇“旋轉(zhuǎn)”項(xiàng)，旋轉(zhuǎn)度數(shù)為“—80”，如圖10。
這樣一來，就將這個(gè)打火機(jī)的翻蓋給放平了。接下來再用蒙版扣圖的方法把打火機(jī)的開關(guān)也扣出來，然后使用“修改——平面化所選”命令將其轉(zhuǎn)成位圖。至此，畫布上就有了三個(gè)位圖對象，分別為“翻蓋”、“開關(guān)”和“機(jī)身”，如圖11。大家不妨對照一下，看看自己的操作是否有誤。
為了使“開關(guān)”對象在活動(dòng)時(shí)，不受“機(jī)身”上的開關(guān)遮擋，我們可以用“矩形選區(qū)”工具，將該“機(jī)身”上的開關(guān)進(jìn)行框選后，用“橡皮擦”工具進(jìn)行擦除，或直接按Ｄelete鍵將其刪除。如圖12。
完成后通過“修改——排列——移到最前”命令，將“機(jī)身”對象移至其它對象的最上層。然后把“開關(guān)”與“機(jī)身”進(jìn)行拼裝，如圖13。
完成這一步的操作之后我們就要進(jìn)入打火機(jī)在響應(yīng)鼠標(biāo)動(dòng)時(shí)的操作了。將當(dāng)前的這三個(gè)對象同時(shí)選中后，在任一對象上點(diǎn)擊鼠標(biāo)右鍵，并在彈出菜單中選擇“轉(zhuǎn)換為元件”命令，然后在彈出來的“元件屬性”對話框中選擇“按鈕”類，如圖14。
新建的元件都會被保存在“庫”面板當(dāng)中，為了進(jìn)一步編輯該按鈕元件，我們打開“庫”面板后再雙擊這個(gè)打火機(jī)元件的縮略圖，從而進(jìn)入該按鈕元件的編輯區(qū)，如圖15。
從圖15中的元件編輯窗口中不難看出，在每個(gè)選項(xiàng)卡中所繪制的圖形，都將與鼠標(biāo)的響應(yīng)動(dòng)作相對應(yīng)。由于這幾個(gè)動(dòng)作圖形都必需在當(dāng)前這三個(gè)位圖對象的基礎(chǔ)上進(jìn)一步繪制完成，所以我們要將當(dāng)前“釋放”選項(xiàng)卡而中的三個(gè)位圖對象分別復(fù)制到“滑過”、“按下”和“按下時(shí)滑過”這三個(gè)選項(xiàng)卡當(dāng)中。復(fù)制完成后我們再回到“釋放”選項(xiàng)卡中，先對該選項(xiàng)卡中的打火機(jī)圖形狀態(tài)進(jìn)行繪制。 在 “釋放”選項(xiàng)卡中將要繪制的是該打火機(jī)按鈕元件在鼠標(biāo)處于普通狀態(tài)時(shí)的圖形，
電腦資料
《翻蓋再點(diǎn)燃 Fireworks制作打火機(jī)》(http://www.msguai.com)。此時(shí)的打火機(jī)翻蓋還沒有打開，所以要用“橡皮擦”工具將“機(jī)身”對象上的那個(gè)翻蓋進(jìn)行擦除，如圖16。
對“翻蓋”對象使用“修改——排列——移到最前”命令后，把“翻蓋”對象放到“機(jī)身”對象的上部，如圖17。
完成后點(diǎn)擊“滑過”選項(xiàng)卡，進(jìn)入下一個(gè)鼠標(biāo)動(dòng)作的繪制，由于這一選項(xiàng)卡中的鼠標(biāo)動(dòng)作與“釋放”選項(xiàng)卡中的鼠標(biāo)動(dòng)作完全相同。因此我們只需將“滑過”選項(xiàng)卡中原來的三個(gè)位圖對象刪除后，再把“釋放”選項(xiàng)卡中的全部圖形復(fù)制過來即可。完成后點(diǎn)擊“按下”選項(xiàng)卡，進(jìn)入該打火機(jī)按鈕元件的下一個(gè)鼠標(biāo)動(dòng)作的繪制。
在“按下” 選項(xiàng)卡中將要繪制鼠標(biāo)在松開該按鈕元件后的圖形。此時(shí)打火機(jī)的翻蓋被打開。而在該選項(xiàng)卡中已有打火機(jī)的翻蓋被打開的圖形了，因此，我們只需將雇該選項(xiàng)卡中那個(gè)多余的“翻蓋”對象刪除即可，如圖18。
我們點(diǎn)擊“按下時(shí)滑過”選項(xiàng)卡，進(jìn)入該按鈕元件在鼠標(biāo)再次觸摸到該按鈕時(shí)的動(dòng)作圖形。此時(shí)的打火機(jī)開關(guān)將被“按下”，并有火苗騰出，使其周圍的亮度增加。與“按下”選項(xiàng)卡一樣，把那個(gè)多余的“翻蓋”對象先行刪除。然后我們將這個(gè)選項(xiàng)卡中打火機(jī)的“開關(guān)”對象用方向鍵向下移動(dòng)20個(gè)像素，如圖19。
然后我們再來繪制火苗的內(nèi)焰。同樣是選用“橢圓形”工具先畫一個(gè)8*29大小的橢圓形，用“部分選擇”工具進(jìn)行適當(dāng)調(diào)整后，對該橢圓使用無描邊色的“線性”漸變填充，填充方式如圖21。其中左右兩個(gè)色彩滑塊的數(shù)值分別為# 3F3F3F和# 000000，而左邊色彩滑塊上的不透明度滑塊數(shù)值則為0%。
完成后我們把火苗的外焰與內(nèi)焰這兩個(gè)對象同時(shí)選中，并使用“修改——組合”命令，將其合成一個(gè)組合對象。下面我們再來繪制火苗的光芒。在按住Shift鍵不放的情況下，用“橢圓形”工具繪制一個(gè)大小為459*459的正圓�？稍谳o助線的幫助下將該圓的中心與火苗的中心點(diǎn)進(jìn)行對齊。然后對該圓使用無描邊色的“橢圓形”漸變填充，左右兩個(gè)色彩滑塊的色彩值分別為# FFF1A7與# FFFFFF。而左右兩邊的不透明滑塊的數(shù)值分別為50%和0%。最后，為了更好地呈現(xiàn)出這個(gè)光芒的亮度，我們通過“修改——畫布——畫布顏色”選項(xiàng)，將背景色改為黑色。效果如圖22。
我們進(jìn)入最后的“活動(dòng)區(qū)域”選項(xiàng)卡，為這個(gè)按鈕元件繪制一個(gè)鼠標(biāo)的有效果響應(yīng)區(qū)域。即只有當(dāng)鼠標(biāo)指針位于該區(qū)域時(shí)，該打火機(jī)才會產(chǎn)生相應(yīng)的動(dòng)作圖形。顯然，這個(gè)有效區(qū)域就是打火機(jī)的開關(guān)位置，我們用“矩形熱點(diǎn)”工具在這個(gè)位置上繪制出大小為38*17大小的矩形即可，如圖23。在點(diǎn)擊元件編輯窗口右下角的“完成”按鈕后，即可回到最初的“原始”工作區(qū)中。
在“原始”工作區(qū)中可以看到，這個(gè)打火機(jī)的按鈕元件被自動(dòng)加上了網(wǎng)頁切片。這個(gè)網(wǎng)頁切片的大小與這個(gè)打火機(jī)按鈕元件的大小是相一至的，換句話說，這個(gè)切片所覆蓋著的區(qū)域就是這個(gè)打火機(jī)按鈕元件，在響應(yīng)鼠標(biāo)動(dòng)作時(shí)的變化區(qū)域。但此時(shí)卻有一部分的網(wǎng)頁切片處在畫布之外，這就意味著這個(gè)按鈕元件在導(dǎo)出為HTM格式之后，畫布之外的元件圖形將會被自動(dòng)刪除，從而無法看到作品的整體效果。如圖24。
在圖25中可以看出，盡管我們把這個(gè)打火機(jī)的按鈕元件的背景色改成了黑色，但在畫布當(dāng)中所顯示的卻仍是白色。所以我們通過“修改——畫布——畫布顏色”選項(xiàng)，將畫布改為黑色。
另外，在圖25中的綠色切片上的文字也可以看出，當(dāng)前的圖形切片格式為*GIF，為了使作品在導(dǎo)出為HTM格式后，有個(gè)效好的圖像觀看效果，我們需要將該按鈕元件的圖象導(dǎo)出為品質(zhì)較高的*JPEG格式。先選中該切片，然后在“優(yōu)化”面板中點(diǎn)選“JPEG”，接著在右邊的“品質(zhì)”欄中輸入數(shù)值為“100”即可，如圖26。
至此，整個(gè)作品就完成了，可點(diǎn)擊工作區(qū)上的“預(yù)覽”選項(xiàng)卡進(jìn)行效果查看，如圖27。
在確認(rèn)無誤后最好還是通過“文件——導(dǎo)出”選項(xiàng)將作品以HTM格式進(jìn)行永久性的保存。以后無論什么時(shí)候想要再查看該效果時(shí)就方便多了。所謂舉一反三，在本例教材中我只是巧妙利用了Fireworks在制作交互式按鈕元件時(shí)的相關(guān)功能，從而繪制出了這個(gè)可以用鼠標(biāo)的操作先翻蓋，再點(diǎn)燃的打火機(jī)效果。大家依然可以發(fā)輝想像力，再次利用Fireworks的這一功能來制作出更好的交互式作品！