Flash cs6動畫製作掃盲教程:[3]補間形狀動畫

  Flash cs6動畫製作掃盲教程:[3]補間形狀動畫

前面對軟體的用戶界面進行了介紹,對工具面板和其它屬性及設置面板我將結合動畫製作穿插進行講解。

Flash的補間動畫主要有三種形式,一是動畫補間,二是補間形狀,三是傳統補間,這三種補間的區別,在我的另一篇經驗《Flash cs6中各種補間動畫的區別》中有詳細的介紹。有興趣的新手可以去找找看。 本節主要就如何創建補間形狀動畫及其應用進行說明。

工具/原料

Flash cs6

一、如何製作補間形狀動畫

打開Flash cs6,新建一個ActionScript3.0的文件。

Flash cs6動畫製作掃盲教程:[3]補間形狀動畫

選擇圓形工具,設置填充色為紅色,然後在場景中繪制一個圓形(按shift鍵不放用滑鼠繪制)。

Flash cs6動畫製作掃盲教程:[3]補間形狀動畫

重復上一步分別再繪制一個藍色和一個綠色的圓形,如圖所示

Flash cs6動畫製作掃盲教程:[3]補間形狀動畫

選擇第20幀,在第20幀上點右鍵,選擇插入空白關鍵幀(或者按F7快捷鍵插入關鍵幀)

Flash cs6動畫製作掃盲教程:[3]補間形狀動畫

在空白關鍵幀上使用前面繪制圓形的方法繪制一個黃色的圓,此時我們就得到了第1幀和第20幀兩個不同的關鍵幀。

新手請注意:補間形狀動畫主要用來製作形狀進行了變化的動畫,有點廢話,但事實如此,類似的如方的變圓的,「李」字變「張」字,1變2等等,這些都是形狀發生了變化,一個目標圖形變成了另一個最終圖形,而這個目標圖形和最終圖形就是第1幀和第20幀這兩個關鍵幀,所謂補間就是1到20幀之間的內容由計算機自動計算補上其中的動畫。

Flash cs6動畫製作掃盲教程:[3]補間形狀動畫

上述我們已經做出了第1幀和第20幀的圖形,接下來就是創建補間形狀動畫,在第1幀點右鍵,在菜單裡選擇創建補間形狀,這時候軟體就自動為1到20幀之間自動製作了過渡變化的補間。

Flash cs6動畫製作掃盲教程:[3]補間形狀動畫

如果你的時間軸圖層上出現了一個綠色背景的箭頭,那麼恭喜你,你的補間形狀動畫成功了。如下圖所示,我們把播放頭移動到1-20幀中間的某一幀上可以看到軟體自動計算的補間的形狀。按CtrL+回車可以進行測試,觀看效果。

Flash cs6動畫製作掃盲教程:[3]補間形狀動畫

二、保存和發布製作好的動畫

剛才我們做好了一個最簡單的Flash補間形狀動畫,我想使用它的輸出文件怎麼辦,首先將做好的動畫文件保存(保存可以按ctrl+s,也可以在文件菜單裡保存或另存)到某個文件夾下,這裡我給動畫起名為:補間形狀動畫,從下圖可以看到,flash的源文件的擴展名為.fla,那麼它的輸出文件的擴展名是什麼呢,請看第二步。

Flash cs6動畫製作掃盲教程:[3]補間形狀動畫

保存好文件後,我們在文件菜單裡找到發布設置,可以看到它的快捷鍵如紅色框中所示

Flash cs6動畫製作掃盲教程:[3]補間形狀動畫

打開發布設置對話框,我們可以看到,Flash的輸出文件格式有默認勾選的是Flash(.swf)格式和Html格式,其實只要我們保存了文件,那麼當我們測試輸出(ctrl+回車)時就會默認輸出swf文件格式。在這裡這麼多的輸出格式中,其實常用的就是下面箭頭所指的幾個格式,其中win放映格式輸出的是exe文件,可以在任何沒有安裝Flash的格式上以執行和觀看。

Flash cs6動畫製作掃盲教程:[3]補間形狀動畫

在發布設置裡設置好需要輸出的文件後,要得到需要的格式文件,只需要在文件菜單裡執行發布就可以了。

Flash cs6動畫製作掃盲教程:[3]補間形狀動畫

三、補間形狀的應用

圖形的變化,如我們前面所做的示例。

文字的改變與變形。文字變形要注意輸入完文字要先將文字打散(ctrl+b),否則補間形狀將會失敗。如果要做到精確的文字變形動畫,可以試著加形狀提示,這將在後續的教程中進行單獨講解。

Flash cs6動畫製作掃盲教程:[3]補間形狀動畫

變形遮罩中的使用。

顏色的變化或透明度變化等。