動畫製作是Fireworks的特長,尤其結合Mask會製作出很多意想不到的效果,下面的旋轉地球就是用Fireworks MX做出來的(其他版本的Fireworks 也一樣可以做出),挺逼真吧!
本例使用圓形遮罩中運動的平面世界地圖模擬地球的轉動,涉及到的關鍵技術只有Mask,但要做到地球旋轉連續流暢還是需要一點小技巧,希望下面的教程能夠讓你有一點收穫。
讀者應具有Fireworks的基本操作能力,特別要熟悉層面板和Select菜單操作。
step1:先打開一張世界地圖的圖片,如圖1。
圖1
step2:在工具欄點擊
按鈕,使用魔術棒工具在地圖中白色區域點擊一下,將圖片中的白色變成選擇區域,可仔細觀察,有些微小的區域還是沒有被選上,這時執行菜單命令「Select/Select Similar」,將所有的白色都納入選擇區域,如圖2。在使用魔術棒工具時,設置比較恰當的Tolerance參數,會使選擇區域比較精確。
圖2
step3:按下Delete鍵將圖片中的白色全部刪除,使用橡皮擦工具擦去不在選擇區域中多餘的部分,剩下的就是整個世界地圖的輪廓了。當然你也可以輕鬆的給地圖換上你喜歡的顏色,只需執行菜單命令「Select/Select Inverse」或快捷鍵「Ctrl+Shift+I」,就可以取得地圖的選擇區域了,然後在工具欄選擇油漆桶工具,填充你所喜歡的顏色。
然後再克隆一個世界地圖,將它們群組,兩個地圖的位置關係如圖3。注意兩地圖一定要保持Y軸參數相同。
圖3
step4:新建一個文件,背景色選為黑色。將上一步完成的世界地圖複製並粘貼在新文件中,然後選中世界地圖,執行菜單命令「Modify/Symbol/Convert to Symbol...」(快捷鍵F8),將其轉化為符號。
在層面板中新建一層,在該層上使用圓形工具繪製一個無邊框的正圓(繪製時同時按住Shift鍵),如圖4 。
圖4
step5: 選中Symbol世界地圖,執行菜單命令「Modify/Animation/Animate Selection...」(快捷鍵「Alt+Shift+F8」),出現如圖5的對話框,將Frames參數設為15。該參數的設置有一定的原則,如果太小,地球轉動就會不夠流暢;如果參數過大,雖然動畫效果比較流暢,但文件的尺寸會比較大,所以大家最好根據作品的用途及環境設置該參數。
圖5
step6: 現在我們創建了一個15幀的動畫,向右水平拖動中間的紅色控制點,會產生代表15個幀的15個點,其中綠色表示第一幀(首幀),紅色表示第15幀(末幀)。本動畫製作的關鍵就是使世界地圖無間斷地流暢轉動,業就是使最後一幀的世界地圖狀態和第一幀的世界地圖的狀態完全重疊。為了達到這種效果,我們需要在世界地圖中做一個小標誌:在Lirbary面板中選擇Symbol,進入對符號的編輯狀態,我們這裡在世界地圖中右上角的格陵蘭島東海岸畫上標誌,如圖6
圖6
step7:退出符號編輯狀態,在主動畫文件中,用鼠標拖動綠色的點(第一幀),使圓形和地圖的位置如圖7所示。然後用鼠標點擊紅色的點(最後一幀),保持水平拖動使其位置如圖8所示。使用適當的輔助線和放大視圖會使你更好的完成這一步,這一步很關鍵也很麻煩,一定要有耐性,只要能調整準確他們的位置,就能保證動畫的流暢。
圖7
圖8
step8: 在共享層Layer2中選中正圓,複製(Ctrl+C),然後點擊動畫層Layer1,粘貼(Ctrl+V)。然後在Layer1中同時選擇正圓和動畫元件地圖,執行菜單命令
「Modify/Mask/Group as Mask」,實現遮罩效果如圖9,這裡正圓的填充色為白色,如果讀者用的是Fireworks 4.0,將填充色改為黑色即可。
在幀面板中選擇最後一幀,將其播放時間設置為0,點擊左下角的播放按鈕,預覽動畫效果,如果不太流暢,就返回上一步繼續調整,如果流暢就刪除Symbol中的標誌。這時的圖層面板如圖10。
圖9
圖10
step9: 此時旋轉的地球已經做好了,但顯然還缺乏立體感,下面我們還要修飾一下。選擇共享層Layer2中的正圓,在屬性面板中使用Radial填充,具體的參數設置如圖9。左邊使用透明填充,這是Fireworks MX新增的功能,使用Fireworks 4.0的用戶可使用簡單的遮罩能完成相同的效果。
圖11
step10: 感覺效果還不是太好,那麼選擇屬性面板的Effect,使用「Inner Glow」效果,具體的參數設置如圖11所示,完成後的效果如圖12。此時預覽時邊緣會有毛邊,只需在屬性面板中將正圓的寬和高同時增加2個像素,然後使用方向鍵向左向上各移一個像素,便可解決。
圖12
圖13
step11:現在感覺已經不錯了,但為了使地球更逼真,我們將地球的背景色變成藍色。新建一共享層Layer3,將它拖到最底層,複製(Ctrl+C)Layer2層上的正圓,將其粘貼在Layer3層上。把Layer1和Layer2層設置為不可見,這樣顯示的是Layer3層上的正圓,刪除該正圓的「Inner Glow」效果,將其填充色改為藍色Solid填充,如圖14。此時預覽時邊緣可能也不是很乾淨利落,解決辦法正好和上一步相反。 現在全部完成,最後的層面板如下圖。
圖14
圖15
step12:最後在輸出時選擇「Animated Gif」格式。在預覽時會重疊位置部分會有短時間的停頓,我的解決辦法是適當調整幀的時間:將第一幀的時間設置短一點,設置為7,將2-14幀設置的較為長一點,設置為15,將最後一幀設置為0。現在點擊Export輸出動畫。一個具有立體感的旋轉地球就完成了。如果你感興趣,還可以以相同的方法用Flash做一個。
小結:本例製作的難點是如何實現地球無停頓地流暢旋轉運動。教程中比較成功的解決了此問題。即遵循循環動畫的特點(最後一幀播放完又回到第一幀繼續播放),所以保持首尾兩幀的狀態相同,將最後一幀的播放時間設置為0,就可以實現流暢的運動。製作過程中在Symbol中做小標記是一個小技巧,起到了很好的輔助作用。