文章出處

我們知道補間動畫可以改變對象的形狀,可以是在大小、傾斜、旋轉上改變,本例講解用Flash的Flash實例教程:制作災區祈福蠟燭動畫效果,教程通過詳細的說明,介紹了形狀補間的運用。一起來學習吧!
  下面先讓我們來看效果吧:


最終效果
  形狀補間動畫關鍵幀上元素的要求:一是必須是矢量圖,二是必須是形狀狀態。選中關鍵幀上的物體時顯麻點狀態,在屬面板里顯示"形狀"。

Flash實例教程:制作災區祈福蠟燭動畫
圖1
  如果使用圖形元件、按鈕、文字、對象繪制等,則必先"打散"再變形。形狀補間動畫可以實現兩個圖形之間顏色、形狀、大小、位置的相互變化。下面通過制作搖曳的燭光進行形狀補間動畫的練習。看效果演示:


動畫效果預覽


  新建文檔,背景色黑色,其他默認。
  一、制作光圈元件
  1、點插入—新建元件,影片剪輯,名"光圈"。

Flash實例教程:制作災區祈福蠟燭動畫
圖2
  2、筆觸色禁止,填充色放射狀,三個色標:左FFFF00 Alpha100%,中FFFF6E Alpha77%,右FFFFCC Alpha0%,用橢圓工具畫個圓,全居中。

Flash實例教程:制作災區祈福蠟燭動畫
圖3
  3、第15、第30幀加上關鍵幀,點中第15幀,再點修改—變形—縮放和旋轉,縮放150。

Flash實例教程:制作災區祈福蠟燭動畫
圖4
  4、在圖層一上點一下,這樣整個圖層都被選中了(時間軸為黑色了),再在屬性面板里"補間",選擇"形狀"。

Flash實例教程:制作災區祈福蠟燭動畫
圖5
  釋放下鼠標,時間幀面板的背景色變為淡綠色,在起始幀和結束幀之間有一個長長的實線箭頭,表示形狀補間動畫創建好了。

Flash實例教程:制作災區祈福蠟燭動畫
圖6


  二、蠟燭元件制作
  新建元件,影片剪輯,名"蠟燭" 。
  1、第1層,畫燭身。禁止填充色, 筆觸色CF8453,點橢圓工具,在屬性面板里設置實線,大小2。

Flash實例教程:制作災區祈福蠟燭動畫
圖7
  畫一個橢圓,選中圓按住ALT或者 CTRL拖出兩個擺放好,再用直線畫上兩條線。

Flash實例教程:制作災區祈福蠟燭動畫
圖8
  刪掉多余的線條。

Flash實例教程:制作災區祈福蠟燭動畫
圖9
  放射狀填充: F5B778、 F29437、 D74D1F、 923107。色標的擺放如圖,用顏色桶填充后,再用填充變形工具調整顏色的位置。

Flash實例教程:制作災區祈福蠟燭動畫
圖10
  放射狀填充:F29C48、F4C402、F2912F、F29437、D74D1F、923107。填充后,再用填充變形工具如果調整顏色的位置。

Flash實例教程:制作災區祈福蠟燭動畫
圖11
  線性填充:D74D1F、F29437、D14B26。

Flash實例教程:制作災區祈福蠟燭動畫
圖12
  刪除多余的線條,用筆刷工具,顏色8C4F26,刷燭芯。

Flash實例教程:制作災區祈福蠟燭動畫
圖13
  延長到30幀,圖層上鎖。


  2、新建圖層
  畫火苗。筆觸色禁止,填充色線性:左FFFF99 Alpha100%,右FFFF1B Alpha30%,畫橢圓,整調形狀。第30幀插入關鍵幀,創建形狀補間動畫。第5幀插入關鍵幀,用選擇工具(黑箭頭工具)調整形狀,注意不能調整太過,以免變形不規則,第9幀插入關鍵幀,繼續調整。以此類推,第 13,17,22,26幀都插入關鍵幀做調整,可以根據自己的感覺去調整,覺得怎么自然就怎么去調,可以只做火苗伸長和壓縮,做成上下竄動,也可以再加上左右擺動。
  我做的僅供參考,相信大家做的更好。

Flash實例教程:制作災區祈福蠟燭動畫
圖15
  3、新建圖層
  點第1幀,從庫中把光圈拖入擺放好,用變形工具適當壓扁,在屬性面板里”顏色”里Alpha設置為50%。

Flash實例教程:制作災區祈福蠟燭動畫
圖16
  現在回到場景中,從庫里把蠟燭元件拖到場景中,擺放好, Ctrl Enter 測試,另存為*.fla,導出影片*.swf。
  【擴展練習】
  簡單提示下:新建一個影片剪輯元件,用上面做好的蠟燭元件做心形運動。再新建一個影片剪輯元件,把上面心形運動的元件拖入場景中,增加圖層2寫代碼:

  第1幀上
  var i = 0;
  第2幀上:
  if (i <=60)
  {
  duplicateMovieClip(mc, "mc" i, i);
  this["mc" i]._alpha = 100 - 2 * i;
   i;
  }
  else
  {
  gotoAndStop(4);
  } // end else if
  第3幀上:
  gotoAndPlay(2);


最終效果

歡迎轉載:http://www.kanwencang.com/bangong/20161206/63819.html

文章列表




Avast logo

Avast 防毒軟體已檢查此封電子郵件的病毒。
www.avast.com


arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()