會動的爆炸圖片素材

Flash大型動畫賀卡製作例解

一、如何查看源代碼

這個動畫中包含的物件,素材等都比較多,因此我們也特地把源代碼提供給大家下載。這可是第一次提供大型動畫源代碼喲!源文件文件下載地址是:

。下載完成後先播放觀看幾遍ycard,以加深對動畫效果的認識。好了,現在運行你的Flash

6,打開文件(別告訴我你還沒當下來)同時建立一個新文件。我們根據這個動畫源文件逐步講述製作過程。切換至新文件,選擇Modify(修改)菜單下的Movie(影片),在彈出的對話框中如下圖進行設置(圖2)。

Forame

Rate播放速度為每秒20幀(高一些的播放速度可以使動畫更加流暢)。Width寬和Height高分別為500和400像素,設置完成按OK關閉。然後畫兩個黑色長方形遮在畫面上下,產生寬銀幕的遮邊效果(看圖1靜止幀你就看得出來),並將遮邊所在的層鎖定,其他的動畫元素所在的層都處於遮邊層之下。

二、動畫開場

基本工作完成後我們開始編輯動畫。切換至,先看Loading部分,是背景不斷變換,這是用兩張圖片不斷交替隱現產生的。按「Ctrl+L」打開Library庫面板,在其中的序幕文件夾中有一個背景循環的Movie

Clip影片夾子,在它上面點右鍵選擇Edit進行編輯,進入背景循環工作區,我們看它的Timeline時間線(圖3)。

可以看到,這個隱現過程包含兩個層,上下兩層其實是一個圖片,只是做了一個反轉,然後設置上層第一幀為顯現,第十五幀透明度為「0」隱藏,設置Motion變化。產生一個漸隱效果,而下層正好相反,產生漸現感。這個紅色背景是導入的點陣圖文件,它在Library面板序幕文件夾的紅色背景Graphic圖形物件中。在必要時可以進入其工作區選擇File菜單下的Import導入新圖將其換掉,注意保持大小一致。

返回主場景,在Loading部分畫面中間還有一個《電腦報》的Logo(標志),它位於Library面板「序幕」文件夾的祝賀Logo

Graphic物件內,可以在其上點右鍵選擇Edit進入工作區。Library是Flash中非常重要的一個工具面板,我們製作動畫時所有的元素,包括聲音、圖片、文字等都存放在Library中,可以用「Ctrl+L」快捷方式打開。OK!接下來還有一個Loading...的文字,是一個MovieClip,在Library中的名字是loading,過後有一個Complete提示,在主場景的Loading完成層中,進行黑白顏色變換產生閃動。我們看主場景Timeline,在Loading層的5、6、9、10幀上分別有簡單的Actions,設置它們循環,當影片裝載完成後跳至完成提示。Loading完成的18幀同樣有一個

Actions,功能為Stop,因為動畫是要用按鈕進行播放的。Play按鈕在Library按鈕文件夾中。同時注意,按鈕層處於黑色遮邊層之上,不然顯示不到,我們設置它的Actions為gotoAndPlay19。

三、閃爍效果

這是動畫的開場部分,你可以按照你的素材進行編輯,或者你比較懶,直接把源文件的素材替換掉就可以了。我們接著讓動畫開始播放。下面的動畫有不斷的閃動反轉片效果,看起來炫,其實很簡單。我們來看白色閃光那一層(圖4)。

創建一個Graphic物件,然後在裡面畫一個白色矩形,拖入場景內並調整大小直至遮住整個畫面,然後設置閃動效果。如圖中的Timeline設置,透明度由0快速過渡到100不透明,然後再過渡至透明,接著65透明度跳躍至0,40跳躍至0,這樣效果就出來了。自己動手試試,不過不要閃得太厲害,小心眼睛:

注意:隨著第一次白色閃動完成,背景已經換掉了。思考一下,當白色閃至不透明時,將新的背景放入場景,當白色閃爍過渡至透明,新的背景也逐漸顯現了。新背景出現後開始閃爍,還有反轉片的效果,那其實是兩張相同的圖,一張在

Photoshop中做了色彩反相處理(圖5)。

在背景的變換過程中,始終穿插著文字的閃爍。文字是一個Graphic物件,位於Library面板的文字中。依然通過快速變化實現閃爍效果,並依次閃爍出C、P、C、W。這里就一個小技巧,我們可以把所有文字放在一個Graphic中,每幀一個文字。拖入場景,這樣文字會隨著Timeline的播放而變化,而我們需要出現某個特定文字的時候,可以用到Instance面板(快捷方式

「Ctrl+I」例如P字母處於文字元號的第二幀。那麼我們設置Instance面板為SingleFrame單幀模式。First為2(圖6)。

影片繼續播放,出現《電腦報》文字以及網址,使用簡單的隱現效果。然後進入到下一個畫面:小編拜年標題部分。背景也相應切換至一個有中國傳統風格的圖形,它位於Library面板的「傳統紅色」物件內。接著掉下來一個報社的紅色Logo。你可以在Library序幕中的「祝賀Logo」中找到。做法非常簡單。先把我們已經做好的文字放進去,然後用矩形工具畫一個正方形,填充為紅色,再用鉛筆畫一些黃色的小點,通過旋轉工具做成動畫中的形狀。有興趣畫一個自己的Logo放進去。接著會有「小編大拜年」這幾個造型字。在Library的「傳統文字」中,你可以根據自己的想法修改。這個文字的繪制方法也很簡單,先畫一個黑色圓形,再輸入文字「小」,選擇一種有書法感的字體,如果你的系統中沒有一樣的字體也沒關系,選一種近似的就可以,設置為土黃色。「編」的做法一樣。下面「大拜年」這三個字使用了描邊,先輸入文字,「Ctrl+B」將其打散。通過墨水瓶工具做一個黃色描邊,即可完成。

四、繪制鞭炮

下面出現的兩串鞭炮比較費工夫。要先用工具欄中的畫圖工具畫出一個鞭炮的形狀,填色備用(圖7)。

按照圖7的步驟畫出鞭炮,最後記住使用漸變工具多試幾次紅色漸變,直到滿意為止。接著要製作鞭炮動畫了,一長串鞭炮噼里啪啦慢慢放完,這個工作沒有捷徑,只能發揚「釘子精神」,一點一點手工完成,方法是這樣的,先在Insert菜單New

Symbol下建立一個Movie

Clip影片夾子,然後把剛才畫好的鞭炮物件從Library面板拖進來,使用「旋轉」工具調整傾斜度,再拖進來一個鞭炮,調整傾斜度,一直這樣排列完成整串鞭炮。不要著急,要有耐心。這才剛開始呢!

耐著性子終於做好鞭炮後,我們准備點燃鞭炮了。建立一個新層,畫兩個爆炸後的火花,因為兩個火花不夠表現效果,而都畫在同一層的話又容易出現粘連,因此建立新層來畫,做完之後調整好位置。接下來是燃放過程,依然要發揮一下剛才的「釘子精神」,在鞭炮層內隔兩三幀插入一個關鍵幀,然後從最底部刪除一兩個鞭炮,調整火花位置,依次插入關鍵幀,刪除鞭炮,調整火花位置直到這串鞭炮放完。真是麻煩,還不如到樓下商店買串真的一放多省事(圖8)。

五、圖片的掃描效果

現在我們回到主場景,從Library面板把鞭炮動畫拖入場景,左右各一串,左邊的那串小一點,調整好位置。動畫中兩串鞭炮是從上面一前一後甩下來的,因此我們要做一個簡單的Motion來達到效果。先將鞭炮放在場景上方,然後空十幾幀插入一個關鍵偵,再將鞭炮移動到要出現的位置,設置好Motion運動,鞭炮從頂部甩下來的效果就出來了。鞭炮放完後轉場進入場景2,我們可以點擊Timeline右上角的Edit

Scene按鈕在兩個場景之間切換(圖9)。

進入場景2。也就是我們這個動畫的主要內容區域,《電腦報》各個版塊編輯照片,老編故事以及賀詞等都會在這里出現。內容多多,大家快來吧。在這里古樸的背景經過閃動被一個科技背景所取代,這個背景圖在Library照片文件夾「科技背景」內(你可以直接弄張圖替換它)。接著便是各大版塊的編輯開始亮相,我們設計了一種掃描效果,掃描完成後照片逐漸顯現(圖10)。

我們來看下這個效果的實現方法。首先,場景中出現一個照片外輪廓的掃描線。這是一個Mask效果,先畫一個矩形方框至合適位置,刪除中間的填充只保留邊線部分。這個是輪廓邊線層,接著建立一個新層處於它之下,做一個矩形漸變填充,並進行Shape邊畫,從左邊移動至右邊(圖11)。

移動完成後在邊線層點右鍵選擇Mask,測試,無效果,這是因為在Flash中Line的對象不能進行Mask操作,需要先將其轉換為Fill模式。我們選中邊線,在Modify修改菜單下的Shape形狀子項里選擇Convert

Lineto

Fill命令將邊線轉換為Fill模式,再次測試,完成效果。接著還有輪廓內部的兩次掃描動作。同樣是一個Mask效果,因為我們只需要讓這個掃描效果出現在邊框線內部,因此做一個矩形,調整大小和位置與邊框線內大小相同。用同樣方法製作一個漸變填充的運動。這次在填充上要有一定要求,因為掃描尾部是逐漸隱沒的,因此需要進行一次白色至透明的漸變填充。從Windows菜單Panels下打開Fill面板,選擇左邊的填充滑桿,然後打開Mixer面板,將Alpha透明度設置為「0」(圖12)。

設置好以後對這個透明漸變進行Shape移動操作,這次從左移動至右邊後還要再次移動回來,這樣才完成一個掃描循環,給照片出場鋪路。OK,完成以後該出現照片了,照片有一個獨立的層,以漸顯的方式出現。從現在起出現的9張照片及版塊介紹模式都一樣,因此我們把照片放在一個獨立的Graphic中,每幀一張照片,這樣我們在切換照片的時候就可以通過前面學習的技巧用Instance面板來指定。因為位置與大小的關系,照片的尺寸最好要保持一致,這樣才能保證不錯位。

接下來出現的是各版塊的名稱和祝詞,跟製作照片的方法一樣,做到一個Graphic中,用Instance面板來控制該出現哪個。同時你肯定注意到了,背景圖也在不斷閃動,其中包含前面提到的白色閃動,還有就是顏色會不斷地變化。這是用Effect面板的Advanced高級色彩進行調整(圖13)。

Flash中的這個功能非常強大,不僅可以調整透明度,還可以對每種單色的比率數值進行精確調整,通過它,我們就可以對背景圖片產生非常多的色彩效果。

照片依次介紹完成之後就是老編故事。隨著一陣笑聲,老編出場(他有「偽善」的笑容,「狠毒」的心腸,讓小編們整天「提心吊膽」,所以我們使用黑色的背景襯托出那種氣氛),照片和文字的出現上使用簡單的Motion透明漸現漸隱。通過照片配以文字的方式刻畫出老編的形象,最後以一句:「會嗎?小編天真地想!」結束。如果大家的賀卡也有這種場景的需要,嘿嘿,換張照片肯定經典。

六、影片收尾

隨後禮花炸開出現電腦報的字樣,至此動畫基本播放完成,進行收尾工作,傳統圖案的背景逐漸出現,放出一張全體編輯的合影,旁邊緩慢地出現上滾的賀詞。由於要讓賀詞只在出現的地方滾動,因此我們還要做最後一個Mask,先做好祝賀文字的Graphic物件,然後建立一個MovieClip用來實現文字滾動,在第一層內畫一個矩形,它是文字需要出現的區域,注意大小。然後建立新層,使它處於矩形層之下,將賀詞放進來做一個緩慢向上移動的Motion,過渡幀越多,移動越慢。然後在矩形層名稱區點右鍵選擇Mask,滾動文字創建完成,將它放入場景中。動畫製作基本結束(圖14)。

此外,還要做一個重復播放的按鈕,創建一個按鈕,起名Replay,將其放到左下角位置,設置Actions跳轉並播放場景一的第一幀。代碼如下。

on(release){

gotoAndPlay("Scene1",1):

}

至此,動畫基本完成,接下來的工作就是要給動畫加上音樂,我們動畫中的背景音樂一共分四段,第一段在開場部分,第二段在照片展示部分,第三段是老編故事的嚇人音樂,最後是結束後賀詞的背景音樂。同時場景中還有一些事件聲音(比如鞭炮什麼的)。

七、添加音效

好,現在我們來看看動畫中的音樂是如何配進去的。回到場景一從頭開始。打開Library面板可以在Sound文件夾中找到我們導入的一些音效。這里的音效大部分來自閃盟在線(

)。在場景一的背景音樂層中第20幀是我們插入的音樂,因為前面是Loading部分,裝載完後會停下來,當我們點了Play按鈕以後動畫正式播放,背景音樂也跟著響了起來。接著在Layer

33的第149幀我們放了一個物體掉在地上的聲音,剛好配合小編的「小」字掉下來。緊跟著大拜年三個字落下,因此在層Layer32的176幀插入了一個物體砸下的聲音。在層Layer

30和Layer

31幀配合鞭炮我們特地找到了鞭炮爆炸的效果加進去。這樣場景一的配音完畢,我們跳轉至場景二中。隨著幾下閃動,切換至有科技色彩的背景中,我們挑選輕快節奏的音樂開始播放。注意聽,它的聲音是由小至大開始的。這里,我們用到了Flash中的聲音漸現Fade

in(圖15)。

我們在Sound面板的Effect項中選擇Fade

in來實現。由於這段音樂播放時間有限,而我們的動畫又比較長,因此在Loops循環項中我們設置了6次循環。背景音樂完成後開始配合照片掃描的效果音樂,大家可以聽到,當照片邊線閃爍的時候有一個電流的聲音,我們把他加在了Layer36的第70幀,照片邊線閃爍的時候。在後面的動畫中,照片會依次出現,因此我們這個音效要依次加到每張照片的邊線閃爍里。

完成後照片內部同樣還要掃描兩次,我們挑選了掃描的聲音,並准備在Layer35出現兩次,在後面的照片中以同樣的方式出現(圖16)。

後面,老編出場時Layer

38的1223幀配上背景音樂,跟著笑聲在層「怪笑」的第1236幀響起來。禮花部分配合了爆炸的聲音。最後,動畫結束的時候要響起結束的背景音樂。我們把它放在最後一幀,同時設置一個Stop停止操作,不然播放完後會自動跳轉從頭播放。

提示:如何調整更換的素材尺寸

不過在替換時注意與原素材的尺寸位置,如果不一致的話有可能出現錯位。這里還有一個小的技巧。選擇Windows菜單Panels下的info面板(圖17)。在這個面板里你可以看到,選中任何一個物件,在面板上就會出現相應的寬高與坐標位置,我們可以用這個工具以像素級精度進行物件的大小及位置調整,如果你要替換素材的話,這個面板起到的作用很大,它可以調節物體的大小、位置等,最起碼比瞪大雙眼用滑鼠一點點拖動輕松得多。

提示:如何替換Library中的圖片

按「Ctrl+B」打開Library庫面板,在照片文件夾的科技背景Graphic物件上點右鍵選擇編輯進入它的工作區。先建立一個新層,用File菜單的Import命令導入一張替換新圖片,完成後我們需要將新圖片的大小與位置與原來的素材保持一致(要做到一絲不差,不然的話在動畫中會出現錯位)。

現在教大家如何精確調整新圖與原圖的大小。使用info面板,選擇原圖,在info面板中出現了相關數據,我們得到W寬183;H高124;X坐標-91.5,Y坐標-62。得到這些數據後記下來,再選擇新圖,把剛才得到的原圖的數據填進去。這樣,兩張圖片的大小和位置就絕對一致了。

如何替換Library中的聲音

聲音的替換相對簡單些,將你准備的聲音導入後,它會出現在Library面板中,然後我們在需要替換的位置建立新層插入關鍵幀,將聲音拖進來並把原來的聲音層刪掉就可以了。