DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Fireworks入門知識 >> Fireworks基礎 >> FW動畫類型及制作詳解
FW動畫類型及制作詳解
編輯:Fireworks基礎     

寫在前面的話:

  我一直認為FW比之PS強大的地方主要體現在兩點上,一是向量圖形編輯模式與位圖編輯模式的完美整合,二就是純圖形處理功能與GIF動畫制作功能的整合。至於說在軟件的使用簡便性上的對比,我現在到覺得無益探討,蓋因對於某一軟件使用操作的得心應手完全取決於使用者的喜好。續論上述兩個優勢。圖形模式混合處理這一功能,ADOBE在PS6中以經引入,我們拋之不談。就動畫處理圖形處理的整合上來說,PS比之FW仍有相當距離。

(注:以上是作者的觀點,並不代表pcedu.com.cn的立場)

  現在就讓我們共同走進FW中來仔細了解一下FW在動畫處理上的強大功能及其靈活簡便,並側重分析一下可生成的動畫形式。

注意:在本篇中只針對軟件直接生成的動畫效果進行分析,不做手工分桢動畫的討論。

提示:在FW中有兩種“符號”可以通過軟件內建指令產生運動及其它變化的效果。一是“圖形符號(Graphic Symbol)”,二是“動畫符號(Animation Symbol)”。

逐步分析:

雖然我們能夠利用FW制作出很酷炫的動畫效果,但它畢竟不是一個專業制作GIF動畫的軟件,所以純軟件生成的效果非常簡單。大致可以分為以下兩個類別:

一是基本運動類,二是特效運動類:

一、基本運動類包括:

  直線運動:它包含了垂直、豎直、傾斜這三種運動情況。如圖1所示。

直線運動1


  漸變運動:FW只支持兩種漸變運動,一是大小漸變運動,二是可見性漸變運動,可見性即指透明度的變化,其中還包括運動過程中符號的旋轉。如果你想把 一個圓形逐漸變成矩形,那麼只有通過手動方式一桢桢的做了。如圖2-4所示。

漸變運動2

漸變運動3

漸變運動4

二、特效運動只有一種即“遮照類”動畫:

  遮照類動畫有兩種生成的方法,其一是利用共享文件夾(Share Across Frames)功能創造遮照的效果,如圖5所示。二是真正的利用遮照功能(Paste as mask or Group as mask)通過被遮照物體的運動而生成遮照動畫。如圖6所示。

遮照動畫5

遮照動畫6

以上就是可以通過FW內建指令生成的兩大類動畫。只要我們善於利用這些指令再加上我們的創意就可以創造出很多很有意思或者很COOL的效果了。下面我們就來熟悉一下這些動畫制作的過程。

注意:
  以下動畫的制作過程我們將以對比的形式講解。其中基本運動類動畫的制作我們將以通過“圖形符號”及“動畫符號”創造動畫效果的不同方法進行對比。特效運動類動畫的制作我們將通過以“共享文件夾”及“遮照”兩種不同方式進行對比。

提示:
  在FW中轉換及添加符號的方法有5種,一是將初始的向量圖形轉換為Symbol(符號)的快捷方式:選中圖形按下F8鍵。二是右鍵點選圖形,在下拉列表中選擇Convert to Symbol(轉換為符號)。三是選中圖形,打開Insert菜單選擇Convert to Symbol……。4是添加一個新符號,打開Insert選擇New symbol.5是添加新符號的快捷方式即按下Ctrl+F8。在下邊的講解中,我們用到的全部是快捷方式。

逐步講解:

一、基本動畫:

  1、利用“圖形符號”制造直線運動類動畫:首先畫出你需要的圖形(為求簡明,這裡只用矩形表示)。選中該圖

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