当前位置 - 股票行情交易網 - 財經資訊 - Fireworks怎樣做出GIF動畫圖片

Fireworks怎樣做出GIF動畫圖片

當我們在網上沖浪時,看到形形色色的動畫效果,壹定會有壹種沖動,那就是將這個漂亮的動畫存儲到自己的硬盤上,那麽妳知道這些動畫是如何制作的的嗎?下面是深空遊戲小編整理的壹些關於Fireworks制作GIF動畫圖片的相關資料,供您參考。

Fireworks制作GIF動畫圖片教程

其實動畫的原理很簡單,就是讓圖片有秩序地輪流顯示。

利用Firework3制作動畫總***有三種方法,由易到難分別為:合並已有圖片生成動畫,利用TweenInstances生成動畫和手工繪制。

壹、合並已有圖片生成動畫

合並已有圖片形成動畫,顧名思義就是將壹系列圖片按順序排列在不同的幀中從而生成動畫,當然,首先我們必須有壹串連續的圖片,然後,在Fireworks中,選擇菜單指令“File/OpenMultiple”,這時將彈出“打開”對話框(如圖1),進入所需圖片所在的目錄,然後按照動畫中圖片顯示的順序依次選取圖片,並單擊“Add”按鈕將這三張圖片加入到對話框下面的窗口;註意:我們還必須勾選對話框最下面的“OpenasAnimation”(以動畫打開)選項,不然的話,我們打開的將是三張分開的靜態圖片;最後,單擊“Done”(完成)按鈕。

圖1以動畫打開

單擊窗口右下角狀態欄的播放按鈕,怎麽樣?效果還不錯吧!

現在只是壹只海鷗在不停地飛,如果為它再添加壹副背景,效果壹定會更好,好吧,下面我們就為海鷗添加壹副大海的背景。

添加背景的方法有兩種:自動復制和***享圖層。

1.自動復制

圖2添加幀

首先,單擊“Frames”面板右上角如圖2按鈕,選擇“AddFrames”,在彈出的對話框中選擇“Number”為1和“Attheend”,單擊“ok”按鈕。

圖3編輯模式狀態

然後將畫布的大小改為200x150(Pixels);接下來,打開背景圖片,發現圖片周圍有壹個如圖3的邊框,說明圖片處於圖像編輯模式,選擇“Modify/ExitImageEdit(Ctrl+Shift+D)”,使圖片進入對象編輯模式,如果想讓圖片打開時總為對象編輯模式,我們將“File/Preferences”的“Editing”面板中“OpeninImageEditMode”復選框前面的對鉤去掉即可。(如圖4)

圖4Prefernces對話框

選中新添加的“Frame4”,將背景圖片拷入其中並適當地調整壹下背景圖片的位置,然後選中圖片,單擊“Frames”面板右上角如圖4按鈕,在彈出菜單中選擇“CopytoFrames”,進入“CopytoFrames”窗口,選擇拷貝範圍為:AllFrames,單擊“ok”按鈕。

圖4拷貝幀

打開“Frames”面板,我們發現前三幀的圖片都被背景圖片遮住了,單擊第壹幀,然後選中畫布中的圖片,執行菜單指令“Modify/Arrange/Send”;或者單擊修改工具欄的置後工具(如圖5),將背景圖片移到動畫圖片的後面,其它幀同理。

圖5置後工具

最後雙擊“Frame4”,將它的時間延遲設置為0(如圖6)。

圖6延時設置

至此,背景添加完畢,趕快預覽壹下動畫的效果吧!(如圖7)

圖7動畫效果圖

2.***享圖層

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

我們有時可能會誤認為每壹幀都擁有壹個圖層,其實不論設定的幀有多少,這些幀都位於同壹圖層上,只是出現的時間不同罷了。

下面我們就利用此方法為剛才的動畫添加壹個背景:首先,將畫布的大小改為200x150(Pixels),然後開啟“Layers”圖層面板,單擊“Layers”圖層面板右上角如圖按鈕,選擇“NewLayer”,在彈出的“NewLayer”對話框中,為新層起壹個名字,例如:background,鉤選“ShareAcrossFrames”復選框,單擊“ok”按鈕,“background”圖層就成了***享圖層,(如圖8)左鍵按住“background”圖層,將它拖到“Layer1”圖層下面;然後打開背景圖片,單擊“矩形選擇工具”,選擇我們需要的背景,將其拷到“background”圖層的畫布中,並適當地調整壹下背景的位置。好了,壹切ok!

圖8***享圖層

二、利用TweenInstances生成動畫

利用TweenInstances生成動畫是Firework3十分強大的功能之壹,它的原理是將圖片轉化為元件(symbol),然後,確定元件的初始和結束分身(instance),再利用TweenInstances將這些分身轉換為具有過渡效果的連續幀(frame)。

TweenInstances功能支持元件的位移、旋轉、縮放、扭曲、傾斜以及不透明度的過渡。

具體的動畫制作過程我們可以參見第壹章的第四節,這裏就不再重復。

三、手工繪制

如果我們要手工繪制動畫,就需要用到Firework3的洋蔥皮功能(OnionSkinning),它就象我們制作卡通用的半透明紙壹樣,在編輯當前幀的同時,可以看到此前或此後幀中的內容,這樣,我們在手繪動畫時就可以方便地繪制圖案。

下面我們就來認識壹下洋蔥皮功能,開啟“Frames”面板,單擊“洋蔥皮功能”按鈕(如圖9),彈出菜單中選項分別為:

·NoOnionSkinning:關閉洋蔥皮功能;

·ShowNextFrame:在當前幀中顯示下壹幀的內容;

·BeforeandAfter:在當前幀中顯示前壹幀和下壹幀的內容;

·ShowAllFrames:在當前幀中顯示所有幀中的內容;

·Custom:可以設置洋蔥皮的顯示功能;

·Multi-FrameEditing:可以透過洋蔥皮編輯其他幀中的內容。

圖9洋蔥皮功能菜單

空說無用,打開我們先前制作的“海鷗”動畫,然後選中ShowAllFrames,我們不僅可以看到當前幀的海鷗,還可以看到其他兩幀中海鷗的淡化效果(如圖10);Firework3的洋蔥皮功能十分強大,而且方便高效,我們可以在以後的手工繪制動畫中慢慢地體會。

圖10淡化效果

Fireworks|