DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Fireworks入門知識 >> Fireworks基礎 >> 在Fireworks中繪制QQ聊天表情 [4]
在Fireworks中繪制QQ聊天表情 [4]
編輯:Fireworks基礎     

    為了使這個靜態表情能夠動起來,我們要先建一個畫布大小為65*65大小的新文檔,然後將組成“放大鏡”表情的所有對象選中並復制到這個新畫布上來。接著再啟動“幀”面板。在面板的右上方點擊其下拉菜單,從中選擇“重制幀”項,也就是復制幀的意思。如圖16.

圖16

    隨後會彈出一個對話框,我們直接點擊“確定”按鈕。此時復制出來的幀也就列在“幀”面板中了。我們點擊“2幀”,然後在畫布中將綠豆左側大眼的黑色眼珠組合對象刪除。換以在上面用“鋼筆”工具繪制的直線路徑。如圖17.

圖17

    該路徑的描邊色為全黑色的1像素柔化,但為了使這條路徑更加的明顯,我們點擊“復制”、“粘帖”按鈕,用兩條相同路徑的重疊來加深其色彩濃度。這樣,一個眨眼的動作表情也就繪制完成了。我們可以點擊畫布下方的GIF動畫播放按鈕來觀看。

圖18

是否覺得動作太快了呢。我們在“幀”面板中將第一幀的延時時間設置為140/100秒。如圖19.

圖19

    而第二帖的延時時間則設置為14/100秒。然後我們再來查看播發效果,可能有人又覺得慢了些。其實當我們把這一動畫導出為GIF動畫圖片後,你再用ACDSee之類的看圖軟件去查看時會發現其播放速度要比在中查看時稍快一些。因此還是先把該動畫導出為GIF格式後再來查看。用“切片”工具將畫布范圍進行框選。然後在“優化”面板中選擇導出格式為“GIF動畫”,顏色為256色,如圖20.

圖20

    然後在切片上點擊右鍵,在彈出菜單中選擇“導出所選切片”,並為該動畫選擇保存路徑即可。然後我們用看圖軟件來查看這一動畫。我個人覺得其播放速度還是比較適中的。至此,我們所繪制的第一個表情也就大功告成了。盡管這一動畫只有兩幀,而且表情變化也很簡單,但卻為其它表情的繪制提供了一些樣式,可通過樣式面板直接使用。以及為其它表情動作的誇張與變形帶來一定的原始參考。

 

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved