本例講解用Flash的形狀補間打造搖曳的燭光效果,教程通過執行個體詳細說明了形狀補間的運用。對本文感興趣的朋友快送出作業吧~~
形狀補間動畫關鍵幀上元素的要求:一是必須是矢量圖,二是必須是形狀狀态。選中關鍵幀上的物體時顯麻點狀态,在屬面闆裡顯示"形狀"。
[img]/uploads/allimg/080722/0900200.jpg[/img]
如果使用圖形元件、按鈕、文字、對象繪制等,則必先"打散"再變形。形狀補間動畫可以實作兩個圖形之間顔色、形狀、大小、位置的互相變化。下面通過制作搖曳的燭光進行形狀補間動畫的練習。先看效果示範:
建立文檔,背景色黑色,其他預設。
[1b]一、制作光圈元件[/1b]
1、點插入—建立元件,影片剪輯,名"光圈"。
[img]/uploads/allimg/080722/0900201.jpg[/img]
2、筆觸色禁止,填充色放射狀,三個色标:左FFFF00 Alpha100%,中FFFF6E Alpha77%,右FFFFCC Alpha0%,用橢圓工具畫個圓,全居中。
[img]/uploads/allimg/080722/0900202.jpg[/img]
3、第15、第30幀加上關鍵幀,點中第15幀,再點修改—變形—縮放和旋轉,縮放150。
[img]/uploads/allimg/080722/0900203.jpg[/img]
4、在圖層一上點一下,這樣整個圖層都被選中了(時間軸為黑色了),再在屬性面闆裡"補間",選擇"形狀"。
[img]/uploads/allimg/080722/0900204.jpg[/img]
釋放下滑鼠,時間幀面闆的背景色變為淡綠色,在起始幀和結束幀之間有一個長長的實線箭頭,表示形狀補間動畫建立好了。
[img]/uploads/allimg/080722/0900205.jpg[/img]
[1b]二、蠟燭元件制作[/1b]
建立元件,影片剪輯,名"蠟燭" 。
1、第1層,畫燭身。禁止填充色, 筆觸色CF8453,點橢圓工具,在屬性面闆裡設定實線,大小2。
[img]/uploads/allimg/080722/0900206.jpg[/img]
畫一個橢圓,選中圓按住ALT或者 CTRL拖出兩個擺放好,再用直線畫上兩條線。
[img]/uploads/allimg/080722/0900207.jpg[/img]
删掉多餘的線條。
[img]/uploads/allimg/080722/0900208.jpg[/img]
放射狀填充: F5B778、 F29437、 D74D1F、 923107。色标的擺放如圖,用顔色桶填充後,再用填充變形工具調整顔色的位置。
[img]/uploads/allimg/080722/0900209.jpg[/img]
放射狀填充:F29C48、F4C402、F2912F、F29437、D74D1F、923107。填充後,再用填充變形工具如果調整顔色的位置。
[img]/uploads/allimg/080722/09002010.jpg[/img]
線性填充:D74D1F、F29437、D14B26。
[img]/uploads/allimg/080722/09002011.jpg[/img]
删除多餘的線條,用筆刷工具,顔色8C4F26,刷燭芯。
[img]/uploads/allimg/080722/09002012.jpg[/img]
延長到30幀,圖層上鎖。
2、建立圖層
畫火苗。筆觸色禁止,填充色線性:左FFFF99 Alpha100%,右FFFF1B Alpha30%,畫橢圓,整調形狀。第30幀插入關鍵幀,建立形狀補間動畫。第5幀插入關鍵幀,用選擇工具(黑箭頭工具)調整形狀,注意不能調整太過,以免變形不規則,第9幀插入關鍵幀,繼續調整。以此類推,第 13,17,22,26幀都插入關鍵幀做調整,可以根據自己的感覺去調整,覺得怎麼自然就怎麼去調,可以隻做火苗伸長和壓縮,做成上下竄動,也可以再加上左右擺動。
我做的僅供參考,相信大家做的更好。
[img]/uploads/allimg/080722/09002013.jpg[/img]
3、建立圖層
點第1幀,從庫中把光圈拖入擺放好,用變形工具适當壓扁,在屬性面闆裡”顔色”裡Alpha設定為50%。
[img]/uploads/allimg/080722/09002014.jpg[/img]
現在回到場景中,從庫裡把蠟燭元件拖到場景中,擺放好, Ctrl+Enter 測試,另存為*.fla,導出影片*.swf。
[1b]有興趣的進一步做擴充練習[/1b]
簡單提示下:建立一個影片剪輯元件,用上面做好的蠟燭元件做心形運動。再建立一個影片剪輯元件,把上面心形運動的元件拖入場景中,增加圖層2寫代碼:
第1幀上:
var i = 0;
第2幀上:
if (i
第3幀上:
gotoAndPlay(2);
本文轉自:http://www.5uflash.com/flashjiaocheng/Flashdonghuajiaocheng/3581.html