DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Fireworks入門知識 >> Fireworks基礎 >> Fireworks 4 完全教程 創建動畫(Animation)(上)
Fireworks 4 完全教程 創建動畫(Animation)(上)
編輯:Fireworks基礎     
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了。綠色的點代表動畫的開始幀,紅色的點代表動畫的結束幀,中間每個蘭色的點代表每個過度幀的形態。你可以通過拖動始末點來改變動畫的運動軌跡。下面的圖片顯示了每一幀時符號的形態。

  ok,play一下來欣賞剛才的成果。

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