DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Fireworks入門知識 >> Fireworks基礎 >> 用Fireworks制作動畫 (1)
用Fireworks制作動畫 (1)
編輯:Fireworks基礎     
 制作網頁動畫可用許多種方法來實現,如:用Java或DHtml或等,也可用.而Fireworks提供了三種制作動畫的手段:手工繪制、使用符號(Symbol)、圖像法。

    下面我們以手工繪制和圖像法來制作簡易的“月出場景”動畫。

    1、新建一空白文檔窗口:

    運行Fireworks 4,選擇菜單“File→New”命令後,出現“New Document”窗口,設置一些參數後,按“OK”,在Fireworks的程序窗口中,出現新建空白文檔窗口(Untitled-1)。

    2、導入圖像:

    選擇菜單“File→Inport…”命令後,出現導入窗口(Import),選擇某個圖像文件後,按“打開”,鼠標移到空白文檔窗口時,指針變為折線形狀,在空白文檔窗口的左上角單擊,則所選圖像導入到空白文檔窗口,調整圖像的位置或編輯畫布大小等。本例導入一幅“沒有月亮的夜景”(如圖1)。


圖1

    3、創建動畫幀數:

    如Fireworks 4程序窗口沒有出現幀面板(Frames),可同時按Shift+F2鍵,則出現幀面板。在幀面板中有一個Frame1 ,表示已存在一個幀,第2步導入的圖像就在這個幀中。鼠標單擊幀面板右上角的三角形圖標,出現幀面板菜單,選擇“Add Frames…”命令,出現添加幀窗口(Add Frames),在添加窗口的“Number”輸入項中輸入動畫的幀數,本例輸入幀數4,並選擇“After Current Frame”選項,按“OK”,則在幀面板出現5個幀(Frame 1~Frame5)。如用鼠標單擊選擇第2~5幀,在文檔窗口中無顯示圖像,鼠標選擇第1幀時,在文檔窗口中顯示已導入的圖像。

    4、共享圖層:

    用鼠標單擊選擇第1幀,再按F2鍵,出現圖層面板(Layers),用鼠標選擇“Layer1”,再單擊圖層面板右上角的三角形圖標,出現圖層面板菜單,選擇“Share This Layer”命令,確定後,就把第1幀的第一層(Layer1)轉換為4個幀都共享的圖層,可選擇其他4個幀預覽。


圖2

    5、繪制動畫:

    選擇第1幀的圖層面板,鼠標單擊圖層面板右下角的打開圖標,創建第1幀第二個圖層(Layer2)。在Layer 2圖層中,用工具箱中的畫圓工具,繪制一個月亮,再復制出4個月亮,把這5個月亮沿著升起的方向排放,並編輯太陽形狀顏色等屬性(如圖2)。用鼠標同時選擇(按Shift鍵)這5個月亮,再選擇幀面板,把這5個月亮分發到5個幀去。

    6、調整各幀延遲時間:

    在幀面板中,用鼠標雙擊每一幀右邊的數字,出現一個窗口,輸入幀播放延遲時間。從Frame 1至Frame5順序選擇幀,浏覽月亮升起的方向,如有誤,可用鼠標拖拽幀來調整幀的順序。

    7、浏覽效果:

    在Fireworks 4程序窗口的左下角有一排動畫播放控制按鈕,使用該控制按鈕,浏覽動畫效果。若不滿意,可編輯修改各參數,直到滿意。

    8、作品輸出

    選擇菜單“File→Export Preview…”命令,出現導出預覽對話框(Export PrevIEw),進行動畫優化和設置後,按“Export…”按鈕,就導出動畫作品。

    請各位自己試一試,在構建動畫的過程中,添加你的創意,你一定會發現許多奇妙的視覺效果。

    

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