Fireworks打造滑動菜單教程_Fireworks教程
推薦:如何在Fireworks8中創(chuàng)建非矩形切片創(chuàng)建非矩形切片 當試圖將交互性附加到非矩形圖像時,矩形切片可能無法滿足需要。例如,假如打算將變換圖像行為附加到切片,而切片對象互相重疊或者外形不規(guī)則,則矩形切片可能會與交換圖像交換出非您所要的背景圖形。Fireworks 解決此問題的方法是:答應您使用"多邊形
先看下最后效果:

1、打開FW 8.0 (我用的是8.0,當然其它版本也是可以的了)
2、新建一個穩(wěn)當大小760X400
3、用矩形工具畫一個漸變的矩形,這里這個矩形是要做為導航條的背景,所以你可以調配自己喜歡的顏色。

4、然后我用直線工具畫了兩條線見下圖,做為分隔線來用。

5、然后按住Shift G把這兩條線組合成對象,復制這個對象,從窗口對齊面板最后見下圖:

6、呵呵下來這幾部就比較要害了,按下快捷鍵Ctrl f8,調出新建元件窗口選擇“按鈕”

假如你看見這個對話框那么你這步是正確的的了。
7、來讓我們在這里創(chuàng)作按鈕吧!用圓角矩形工具畫下圖,漸變見下圖,邊框為一個像素。

8、然后復制這個圖形去掉邊框,調節(jié)大小使按鈕有凸出的感覺

9、現(xiàn)在我們來做下面那個三角形我用的是路徑。
(1)在剛才那個圖形的上面點右鍵選折取消組合

(2)選折鋼筆工具在下面路徑加三個節(jié)點見下圖

選擇白箭頭工具,向下拖拉中間的節(jié)點成三角型

(3)寫上文字

(4)到這里其實我們直徑完成了70%的工作量。不急往下看

看見元件編輯區(qū)這里的滑過,按下。。。。。。
分別點擊滑過,按下。。。。
并且每步都要選者復制彈起時的圖形,這個在什么地方見下圖:

假如還找不到的話,你就睜大眼睛使勁找了!
(5)這里先不急著點完成,而是先回到釋放狀態(tài)下把按鈕的背景圖形刪除,不要把文字也刪了��!
(6)點完成
10、呵呵現(xiàn)在我們又回到場景下,按F11打開庫面板拖出按鈕從庫里
11、你可以根據(jù)你要做的數(shù)目拖出你需要的按鈕數(shù)
12、分別選擇按鈕,在屬性欄輸入不同的文字

13。調節(jié)好按鈕之間的距離

14。選擇“文件”---》“導出”

這里一定要選擇“將圖像防入字文件夾",要不你的圖片就到出是了。
好了用瀏覽器看下是不是可以了,當然你還可以倒到DW處理下代碼,我這里就不多說了。
作者:咖啡蟲 來源:藍色理想分享:Fireworks使切片具有簡單的交互效果使切片具有簡單的交互效果 拖放變換圖像方法是創(chuàng)建變換圖像和交換圖像效果的快速而有效的方法。 具體說來,拖放變換圖像方法使您可以確定指針經(jīng)過一個切片時該切片所發(fā)生的變化。最終結果通常稱為變換圖像。變換圖像是在網(wǎng)頁瀏覽器中當指針經(jīng)過其上方移動時,其外觀發(fā)
- 相關鏈接:
- 教程說明:
Fireworks教程-Fireworks打造滑動菜單教程
。