創建動畫（Animation）（上）

2024-09-11 13:33:06

字體：大中小

來源：轉載

供稿：網友

創建動畫（animation）（上）

gif動畫是web創作中不可缺少的部分，從前web設計師們需要一幀一幀繪制出靜止的圖象，然后將他們擺放到專門的gif動畫軟件中再加工，其步驟之煩瑣讓人望而生畏。但是fireworks的出現徹底改變了這一切，不但所有的步驟可以在fireworks中完成，而且簡潔方便，fireworks4的動畫創作工具更是比以前的版本有了新的提高。

現在我們就來創建一幅動畫，同時體會fireworks強大的功能。首先在畫板上繪制一個矩形，如圖：

將它轉化為動畫（animation），使用菜單insert->convert to symbol或者使用快捷鍵f8，在彈出的窗口中選擇animation，接下來的窗口會要求你設置動畫的運動方式，你可以在后面的object面版中隨時修改這些參數，所以暫時不管先ok，這樣一個animation就創建好了。animation是符號的一種，符號類型的對象在左下角都會有一個箭頭的標志，在這里先要說明一下3種不同的符號（symbol）類型：

graphic：圖形，中心是一個十字，組成動畫的最基本的元素。
animation：動畫，中間有一個點，一系列的graphic就是一個animation
button：按鈕，帶有切割熱區的就是按鈕。

從上面可以看出來，這部分的概念和flash非常相似，只是將movie clip的名稱換成了animation，其實本質是一樣的。不同類型的符號之間可以非常方便的互相轉換，打開library面版，點擊面版右上角的箭頭在彈出的菜單中選擇properties就可以轉換符號的類型。

還有一點順便在這里提一下，選擇菜單modify->symbol->break apart可以將一個已有的符號恢復到原來的類型，恢復后它會以group的形式出現，ungroup一下就會完全呈現出它最原始的形態（矢量圖形、位圖、文字或其他的類型）。

在了解了這些概念后，我們開始真正的創建一幅動畫。選中剛才已經轉換好的那個animation，同時打開object面版，在object面版中修改動畫運動的方式。

frames：設定這段動畫用多少幀來完成，理論上幀數越多動畫越流暢，但同時文件的尺寸也越大。
scaling：縮放，默認值是100，即不進行縮放，如果數字小于100則代表縮小，數字大于100則放大。
opacity：透明度，有2個數值，即代表透明度從多少變化到多少。
rotation：旋轉，單位是角度，cw為順時鐘方向，ccw為逆時鐘方向。

在這里我不得不又一次說，它和flash是多么的相象！

設定frames為15，scaling為150，即動畫終止時動畫符號的大小為原始大小的1.5倍，opacity為100到0，即一個漸淡消失的效果，rotation為90cw，即順時鐘旋轉90度。完成后從符號中央可以拖出一條動畫線。

當看到這條動畫線的時候我又一次的似曾相識了，對了，它就是在director中的動畫線，現在也被借用到fireworks中來了，是整合的需要嗎？這個問題只有問macromedia了。綠色的點代表動畫的開始幀，紅色的點代表動畫的結束幀，中間每個蘭色的點代表每個過度幀的形態。你可以通過拖動始末點來改變動畫的運動軌跡。下面的圖片顯示了每一幀時符號的形態。