用fireworks插件制作透明按鈕
Fireworks中制作按鈕的方法,模仿著直接制作了一個(gè)透明按鈕。制作過(guò)程簡(jiǎn)單,效果也很不錯(cuò)。下面學(xué)習(xí)啦小編給大家整理了更多關(guān)于用fireworks 插件制作透明按鈕,希望大家喜歡。
用fireworks 插件制作透明按鈕的方法步驟:
我們先將Macbutton V2.01下載到自己的電腦上,然后準(zhǔn)備在Fireworks MX 2004中安裝這個(gè)擴(kuò)展插件。
1) 打開(kāi)Fireworks MX 2004,選擇“幫助”菜單下的“管理擴(kuò)展功能…”。彈出如圖1所示的Macromedia擴(kuò)展管理器。
圖1 Macromedia擴(kuò)展管理器
單擊擴(kuò)展管理器上的“安裝新擴(kuò)展”按鈕,找到Macbutton V2.01擴(kuò)展文件所在的目錄,如圖2所示。
圖2 找到擴(kuò)展所在目錄并安裝
選中macbutton.mxp點(diǎn)擊“安裝”,彈出安裝協(xié)議窗口,如圖3。
圖3 安裝協(xié)議窗口
選擇“接受”,最后會(huì)跳出提示安裝成功的消息
選擇“確定”,這時(shí)發(fā)現(xiàn)在Macromedia擴(kuò)展管理器多出了Macbutton一項(xiàng),這就是所安裝的擴(kuò)展,如圖5所示。
圖5 擴(kuò)展管理器中的Macbutton
2) 在第一步的擴(kuò)展管理器中有使用這個(gè)擴(kuò)展的英文說(shuō)明,最后一段話是“To use this command, choose Commands > Bitgenius > MacButton.”,意思就是說(shuō)如果要使用這個(gè)擴(kuò)展時(shí),只需要選擇“命令”菜單下的“Bitgenius| MacButton”即可。
其實(shí)還可以找到Fireworks MX 2004安裝文件夾中的“Configuration| Commands”文件夾對(duì)其進(jìn)行路徑的進(jìn)行修改。這里為了簡(jiǎn)單起見(jiàn),就使用默認(rèn)的路徑開(kāi)始創(chuàng)建透明按鈕。
首先,新建一個(gè)200×100的文件。選擇“命令”下拉菜單中的“Bitgenius| MacButton”,這樣會(huì)跳出創(chuàng)建透明按鈕對(duì)話框,如圖6所示。
右側(cè)部分有兩個(gè)選擇“Rectangle”和“Circlebutton”,代表的意思分別是“矩形按鈕”和“圓形按鈕”。這里選擇創(chuàng)建一個(gè)矩形按鈕,并分別設(shè)置矩形的大小、位置、圓角度數(shù)和顏色,如圖7所示。
這樣得到了如圖8所示的矩形,發(fā)現(xiàn)它其實(shí)是一組組合。
圖6 創(chuàng)建透明按鈕窗口
圖7 設(shè)置矩形按鈕屬性
圖8 繪制透明對(duì)象
3) 打開(kāi)對(duì)齊面板,通過(guò)水平居中和垂直居中兩個(gè)按鈕將所得對(duì)象放置到畫布中心以方便編輯,并適當(dāng)?shù)耐ㄟ^(guò)屬性面板修改透明度。
下一步就需要將這個(gè)組合轉(zhuǎn)換為按鈕了。選擇這個(gè)組合,選擇“修改”菜單下的“元件”|“轉(zhuǎn)換為元件…”,得到圖9所示的元件屬性彈出窗口,命名為 “button”,選擇“按鈕”。單擊“確定”,這是組合已經(jīng)被轉(zhuǎn)換為按鈕了,其左下腳出現(xiàn)了一個(gè)小箭頭并且為其添加了一個(gè)切片,如圖10所示。
圖9 元件屬性設(shè)置
圖10 按鈕圖像
4) 雙擊按鈕打開(kāi)按鈕編輯器,可以為每個(gè)狀態(tài)創(chuàng)建不同的文字和圖形了。并且選擇這個(gè)透明按鈕的所有對(duì)象,按Ctrl+G將它們組合起來(lái),如圖11所示。
圖11 打開(kāi)按鈕編輯器
5) 在按鈕的釋放狀態(tài)之下,選擇工具箱的文本工具,為按鈕添加文本并設(shè)置文本屬性如圖12所示,并通過(guò)將按鈕和文本對(duì)齊,得到圖13。
圖12 文本屬性設(shè)置(圖片較大,請(qǐng)拉動(dòng)滾動(dòng)條觀看)
圖13 為按鈕添加文本
6) 這樣釋放狀態(tài)的編輯已經(jīng)結(jié)束,現(xiàn)在開(kāi)始編輯滑過(guò)狀態(tài)。點(diǎn)擊按鈕編輯器頂端的“滑過(guò)”選項(xiàng)欄,選擇“復(fù)制彈起時(shí)的圖形”。選中透明按鈕的組合,通過(guò)屬性面板將其透明度稍微調(diào)低一些。然后選擇文本,修改其填充顏色為#FFFF66,得到如圖14所示的滑動(dòng)狀態(tài)。
圖14 按鈕的滑動(dòng)狀態(tài)
7) 一般情況下,只要兩個(gè)狀態(tài)就足夠了,當(dāng)然其他狀態(tài)也是類似制作,這里就不需詳細(xì)敘述了?,F(xiàn)在選擇按鈕編輯器的“活動(dòng)區(qū)域”選項(xiàng)欄,修改切片的大小使之和按鈕大小基本符合,如圖15所示。
圖15 修改切片大小
8) 單擊“完成”,這樣的按鈕已經(jīng)制作好了。在文件工作區(qū)面板中可以選擇“預(yù)覽”選項(xiàng)欄,就可以看看所制作的按鈕的效果了。如圖16所示。
圖16 預(yù)覽按鈕效果
9) 最后將圖像另存為button.png即可。
小結(jié):我們?cè)谶@個(gè)按鈕的制作例子中,熟悉了按鈕編輯器的一些基本情況,還通過(guò)這個(gè)按鈕的制作了解了如何在Fireworks MX 2004中安裝擴(kuò)展插件。