FW快速製作動態按鈕四狀態

來源:互聯網
上載者:User
按鈕|動態
  按鈕是網頁的重要組成元素之一,在網頁中發揮著十分重要的作用。它主要起著兩個作用:第一是起到提示性的作用,有提示性的文本或者圖形來告訴瀏覽者點擊後會有什麼作用,這樣的按鈕可以是靜態圖片,主要是讓瀏覽者瞭解點擊它起到什麼作用,甚至可能僅僅是一個小的較為美觀的圖片。第二是動態響應的作用,即是指瀏覽者在進行不同的操作時,按鈕能夠呈現出不同的效果,響應不同的滑鼠時間。

  這樣的動態網頁按鈕一般有四個狀態,即Up(釋放)、Over(滑過)、Down(按下)和Over While Down(按下時滑過),要編輯按鈕的連結或行為還要設定按鈕的Active Area(即時區域)。

  今天我們就來介紹如何在Fireworks中快速製作按鈕四狀態 。文章末尾提供原檔案供大家下載參考。


  (1)在Fireworks中建立一個大小為200×60的檔案,使用工具箱上的圓角矩形工具繪製一個圓角矩形,在屬性面板中設定圓角值為47,得到如圖1所示的映像。


圖1 繪製圓角矩形
  (2)然後在屬性面板中填充設定中選擇"Gradient">>"Linear",即選擇線性填充,並在浮動色塊中設定第一個顏色塊值為#B6B6B6,第二個顏色塊值為#FFFFFF,得到圖2所示的映像。


圖2 設定漸層填充
  (3)由於現在是左右漸層,我們想實現上下漸層,其實只要調整漸層填充的控制杆就可以了,如圖3所示。


圖3 調整控制杆
  (4)按住Ctrl+Shift+D複製圓角矩形,然後使用工具箱上的矩形工具繪製一個矩形,並使用選擇工具同時按住Shift鍵選取矩形和複製所得的圓角矩形,如圖4所示。


圖4 同時選中矩形和圓角矩形
  (5)點擊"Modify"菜單,選擇"Combine Paths"(組合路徑)>>"Punch"(打孔),將兩個路徑使用打孔效果,得到圖5所示的映像。


圖5 打孔後的映像效果
  (6)選中打孔所得的圖形,在屬性面板中將其筆觸設為無,線性填充的第一個顏色塊設為#3399FF,第二個顏色塊設為#D0F3FD,適當調整控制杆,並在屬性面板中設定不透明度設為70%,得到如圖6所示的映像。


圖6 調整填充效果
  (7)為了實現高光的效果,我們將畫布顯示的比例調到400%,然後點擊工具箱上的鋼筆工具,繪製圖7所示的路徑。


圖7 繪製路徑

  (8)調整路徑的不透明度為90%,切換到100%視圖,並適當調整一些填充效果讓其達到視覺上的最佳,得到圖8所示的映像。


圖8 添加路徑後的效果
  (9)添加文本,並為文本添加光暈效果,設定發光顏色為白色,得到如圖9所示的映像。


圖9 添加文本
  (10)將畫布顯示的比例調到400%,用圓形工具和鋼筆繪製一個簡單的放大鏡映像,線條顏色為白色,無填充。如圖10所示。


圖10 繪製"放大鏡"
  (11)切換到100%視圖,然後選中底下的圓角矩形,在其屬性面板上為其添加陰影製作效果,最終我們得到圖11所示的按鈕映像。


圖11按鈕映像
  (12)開啟前面製作好的按鈕映像,按住Ctrl+A全選對象,然後按Ctrl+G將所有對象組合,如圖12所示。


圖12 組合所有對象
  (13)按F8在彈出的符號屬性對話方塊中選擇轉換為按鈕單選框並命名,如圖13所示。


圖13 將組合對象轉換為按鈕符號
  (14)點擊"OK",這時候發現剛才的組合已經被轉換為按鈕映像了,此時對象上已經添加了切片,並且左下角有個小箭頭表徵圖,表示現在已經是一個按鈕符號了。

  我們想製作各個狀態的按鈕映像那麼只需要雙擊這個對象,就可以彈出圖14所示的按鈕編輯器了。選擇左下角的"Import a Button"按鈕我們甚至還可以匯入Fireworks內建的按鈕庫,方便我們製作按鈕,如圖15所示。

  另外Fireworks的"Edit">>"Libraries"菜單下內建了Animations(動畫)、Bullets(小表徵圖)、Buttons(按鈕)和Themes(主題)四個符號庫,分別如圖15至18所示,使用它們我們可以方便地製作出許多精美的效果,這裡讀者可以自己去嘗試。


圖14 按鈕編輯器


圖15 Animations符號庫


圖16 Bullets符號庫


圖17 Buttons符號庫


圖18 Themes符號庫

  (15)按鈕的Up狀態我們就選擇原來的按鈕狀態,不做改動,接著我們選擇按鈕的Over狀態列,這時候發現裡面是空白的,如圖19所示。不要著急,點擊 我們可以將Up狀態的按鈕映像複製到Over狀態,然後適當地修改文本和填充的顏色就可以製作好按鈕的Over狀態了,如圖20所示。


圖19 按鈕Over狀態沒有映像


圖20 複製Up狀態修改後的效果
  (16)使用同樣的方式在Down選項欄中複製Over狀態的按鈕映像,然後調整按鈕的填充和字型顏色等,得到圖21所示的按鈕的Down狀態映像。


圖21 按鈕的Down狀態
  (17)接著用上面的方法製作按鈕的Over While Down狀態映像效果,如圖22所示。


圖22 按鈕的Over While Down狀態
  (18)接著選擇"Active Area"選項欄,使用滑鼠拖動即時區域切片的大小,使得它和按鈕大小基本符合,如圖23所示。


圖23 設定按鈕即時區域
  (19)完成之後選擇"Done"按鈕,回到工作區,切換到4幅模式的映像預覽看看按鈕的效果,如圖24所示,這樣我們的響應按鈕就製作好了。原檔案下載


圖24 四幅視圖模式預覽按鈕效果


相關關鍵詞:
相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。