當(dāng)我們?cè)诰W(wǎng)上沖浪時(shí)，看到形形色色的動(dòng)畫效果，一定會(huì)有一種沖動(dòng)，那就是將這個(gè)漂亮的動(dòng)畫存儲(chǔ)到自己的硬盤上，那么你知道這些動(dòng)畫是如何制作的的嗎?

其實(shí)動(dòng)畫的原理很簡(jiǎn)單，就是讓圖片有秩序地輪流顯示。

利用Firework 3制作動(dòng)畫總共有三種方法，由易到難分別為：合并已有圖片生成動(dòng)畫，利用Tween Instances生成動(dòng)畫和手工繪制。

一、 合并已有圖片生成動(dòng)畫

合并已有圖片形成動(dòng)畫，顧名思義就是將一系列圖片按順序排列在不同的幀中從而生成動(dòng)畫，當(dāng)然，首先我們必須有一串連續(xù)的圖片，然后，在 Fireworks中，選擇菜單指令“File/Open Multiple”，這時(shí)將彈出“打開”對(duì)話框(如圖1)， 進(jìn)入所需圖片所在的目錄，然后按照動(dòng)畫中圖片顯示的順序依次選取圖片，并單擊“Add”按鈕將這三張圖片加入到對(duì)話框下面的窗口;注意：我們還必須勾選對(duì)話框最下面的“Open as Animation”(以動(dòng)畫打開)選項(xiàng)，不然的話，我們打開的將是三張分開的靜態(tài)圖片;最后，單擊“Done”(完成)按鈕。

圖片教程【圖】_新客網(wǎng)" src="/d/file/p/2019/09-11/b856b8d62bf31699841d29ac9e038277.gif" width="541" height="364" border="0" onload="return imgzoom(this,550);" style="cursor: pointer;" onclick="javascript:window.open(this.src);"/>

　　圖1 以動(dòng)畫打開

單擊窗口右下角狀態(tài)欄的播放按鈕，怎么樣?效果還不錯(cuò)吧!

現(xiàn)在只是一只海鷗在不停地飛，如果為它再添加一副背景，效果一定會(huì)更好，好吧，下面我們就為海鷗添加一副大海的背景。

添加背景的方法有兩種：自動(dòng)復(fù)制和共享圖層。

1. 自動(dòng)復(fù)制

圖片教程【圖】_新客網(wǎng)" src="/d/file/p/2019/09-11/4a94a2afab10de050600b2bb973a49f9.gif" width="465" height="201" border="0" onload="return imgzoom(this,550);" style="cursor: pointer;" onclick="javascript:window.open(this.src);"/>

　　圖2 添加幀

首先，單擊“Frames”面板右上角如圖2按鈕，選擇“Add Frames”，在彈出的對(duì)話框中選擇“Number”為1和“At the end”，單擊“ok”按鈕。

圖片教程【圖】_新客網(wǎng)" src="/d/file/p/2019/09-11/69e86eca6664702b5493d03539119f9b.gif" width="290" height="195" border="0" onload="return imgzoom(this,550);" style="cursor: pointer;" onclick="javascript:window.open(this.src);"/>

　　圖3 編輯模式狀態(tài)

然后將畫布的大小改為200x150(Pixels);接下來(lái)，打開背景圖片，發(fā)現(xiàn)圖片周圍有一個(gè)如圖3的邊框，說(shuō)明圖片處于圖像編輯模式，選擇 “Modify/Exit Image Edit (Ctrl+Shift+D)”，使圖片進(jìn)入對(duì)象編輯模式，如果想讓圖片打開時(shí)總為對(duì)象編輯模式，我們將“File/Preferences”的 “Editing”面板中“Open in Image Edit Mode”復(fù)選框前面的對(duì)鉤去掉即可。(如圖4)

圖片教程【圖】_新客網(wǎng)" src="/d/file/p/2019/09-11/4569e53adae7fad19a659c1352a49522.gif" width="431" height="352" border="0" onload="return imgzoom(this,550);" style="cursor: pointer;" onclick="javascript:window.open(this.src);"/>

　　圖4 Prefernces對(duì)話框

選中新添加的“Frame 4”，將背景圖片拷入其中并適當(dāng)?shù)卣{(diào)整一下背景圖片的位置，然后選中圖片，單擊“Frames”面板右上角如圖4按鈕，在彈出菜單中選擇“Copy to Frames”，進(jìn)入“Copy to Frames”窗口，選擇拷貝范圍為：All Frames，單擊“ok”按鈕 。

圖片教程【圖】_新客網(wǎng)" src="/d/file/p/2019/09-11/e62a59944623b6475b1fc0ce92234d0a.gif" width="222" height="201" border="0" onload="return imgzoom(this,550);" style="cursor: pointer;" onclick="javascript:window.open(this.src);"/>

　　圖4 拷貝幀

打開“Frames”面板，我們發(fā)現(xiàn)前三幀的圖片都被背景圖片遮住了，單擊第一幀，然后選中畫布中的圖片，執(zhí)行菜單指令“Modify/Arrange/Send”;或者單擊修改工具欄的置后工具(如圖5)，將背景圖片移到動(dòng)畫圖片的后面，其它幀同理。

圖片教程【圖】_新客網(wǎng)" src="/d/file/p/2019/09-11/9b0ebd56bc1d8194252f473ce7e7eeed.gif" width="412" height="129" border="0" onload="return imgzoom(this,550);" style="cursor: pointer;" onclick="javascript:window.open(this.src);"/>

　　圖5 置后工具

最后雙擊“Frame 4”，將它的時(shí)間延遲設(shè)置為0(如圖6)。

圖片教程【圖】_新客網(wǎng)" src="/d/file/p/2019/09-11/27a7f0f1b8b4f1bdf32fec8b9775fc0e.gif" width="222" height="227" border="0" onload="return imgzoom(this,550);" style="cursor: pointer;" onclick="javascript:window.open(this.src);"/>

　　圖6 延時(shí)設(shè)置

至此，背景添加完畢，趕快預(yù)覽一下動(dòng)畫的效果吧!(如圖7)

圖片教程【圖】_新客網(wǎng)" src="/d/file/p/2019/09-11/b186ed982d0c5789b45df0fc70479657.gif" width="200" height="150" border="0" onload="return imgzoom(this,550);" style="cursor: pointer;" onclick="javascript:window.open(this.src);"/>

　　圖7 動(dòng)畫效果圖

2. 共享圖層

共享圖層就是使用“Layers”圖層面板，將指定的背景圖片設(shè)定為共享圖層，如此即可在所有的幀中看到該背景。

我們有時(shí)可能會(huì)誤認(rèn)為每一幀都擁有一個(gè)圖層，其實(shí)不論設(shè)定的幀有多少，這些幀都位于同一圖層上，只是出現(xiàn)的時(shí)間不同罷了。

下面我們就利用此方法為剛才的動(dòng)畫添加一個(gè)背景： 首先，將畫布的大小改為200x150(Pixels)，然后開啟“Layers”圖層面板，單擊“Layers”圖層面板右上角如圖按鈕，選擇“New Layer”，在彈出的“New Layer”對(duì)話框中，為新層起一個(gè)名字，例如：background，鉤選“Share Across Frames”復(fù)選框，單擊“ok”按鈕，“background”圖層就成了共享圖層，(如圖8)左鍵按住“background”圖層，將它拖到 “Layer 1”圖層下面;然后打開背景圖片，單擊“矩形選擇工具”圖片教程【圖】_新客網(wǎng)" src="/d/file/p/2019/09-11/50fe5262ddd9dde36f7ea31d805038fa.gif" width="20" height="19" border="0" onload="return imgzoom(this,550);" style="cursor: pointer;" onclick="javascript:window.open(this.src);"/> ，選擇我們需要的背景，將其拷到“background”圖層的畫布中，并適當(dāng)?shù)卣{(diào)整一下背景的位置。好了，一切ok!

圖片教程【圖】_新客網(wǎng)" src="/d/file/p/2019/09-11/7d93e40e1531937d0b56b9cae3cc0bf6.gif" width="496" height="235" border="0" onload="return imgzoom(this,550);" style="cursor: pointer;" onclick="javascript:window.open(this.src);"/>

　　圖8 共享圖層

二、 利用Tween Instances生成動(dòng)畫

利用Tween Instances生成動(dòng)畫是Firework 3十分強(qiáng)大的功能之一，它的原理是將圖片轉(zhuǎn)化為元件(symbol)，然后，確定元件的初始和結(jié)束分身(instance)，再利用Tween Instances將這些分身轉(zhuǎn)換為具有過(guò)渡效果的連續(xù)幀(frame)。

Tween Instances功能支持元件的位移、旋轉(zhuǎn)、縮放、扭曲、傾斜以及不透明度的過(guò)渡。

具體的動(dòng)畫制作過(guò)程我們可以參見第一章的第四節(jié)，這里就不再重復(fù)。

三、 手工繪制

如果我們要手工繪制動(dòng)畫，就需要用到Firework 3的洋蔥皮功能(Onion Skinning)，它就象我們制作卡通用的半透明紙一樣，在編輯當(dāng)前幀的同時(shí)，可以看到此前或此后幀中的內(nèi)容，這樣，我們?cè)谑掷L動(dòng)畫時(shí)就可以方便地繪制圖案。

下面我們就來(lái)認(rèn)識(shí)一下洋蔥皮功能，開啟“Frames”面板，單擊“洋蔥皮功能”按鈕(如圖9)，彈出菜單中選項(xiàng)分別為：

· No Onion Skinning： 關(guān)閉洋蔥皮功能;

· Show Next Frame： 在當(dāng)前幀中顯示下一幀的內(nèi)容;

· Before and After： 在當(dāng)前幀中顯示前一幀和下一幀的內(nèi)容;

· Show All Frames： 在當(dāng)前幀中顯示所有幀中的內(nèi)容;

· Custom： 可以設(shè)置洋蔥皮的顯示功能;

· Multi-Frame Editing： 可以透過(guò)洋蔥皮編輯其他幀中的內(nèi)容。

圖片教程【圖】_新客網(wǎng)" src="/d/file/p/2019/09-11/ba6454d4856b62c4b3a0b74621d0c1a7.gif" width="162" height="132" border="0" onload="return imgzoom(this,550);" style="cursor: pointer;" onclick="javascript:window.open(this.src);"/>

　　圖9 洋蔥皮功能菜單

空說(shuō)無(wú)用，打開我們先前制作的“海鷗”動(dòng)畫，然后選中Show All Frames，我們不僅可以看到當(dāng)前幀的海鷗，還可以看到其他兩幀中海鷗的淡化效果(如圖10);Firework 3的洋蔥皮功能十分強(qiáng)大，而且方便高效，我們可以在以后的手工繪制動(dòng)畫中慢慢地體會(huì)。

圖片教程【圖】_新客網(wǎng)" src="/d/file/p/2019/09-11/57eabfc7d3c91889016c43c4dc9f2ee6.gif" width="121" height="67" border="0" onload="return imgzoom(this,550);" style="cursor: pointer;" onclick="javascript:window.open(this.src);"/>

　　圖10 淡化效果