<address id="ousso"></address>
<form id="ousso"><track id="ousso"><big id="ousso"></big></track></form>
  1. 網頁設計

    Fireworks制作GIF動畫圖片教程

    時間:2025-03-07 15:27:14 網頁設計 我要投稿
    • 相關推薦

    Fireworks制作GIF動畫圖片教程

      當我們看到一些動畫圖片的時候都會覺得和美觀和喜歡,那么它們是如何制作的呢?下面將為大家講解Fireworks制作GIF動畫圖片教程,希望對您有所幫助!

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

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

      一、 合并已有圖片生成動畫

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

      圖1 以動畫打開

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

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

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

      1. 自動復制

      圖2 添加幀

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

      圖3 編輯模式狀態

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

      圖4 Prefernces對話框

      選中新添加的“Frame 4”,將背景圖片拷入其中并適當地調整一下背景圖片的位置,然后選中圖片,單擊“Frames”面板右上角如圖4按鈕,在彈出菜單中選擇“Copy to Frames”,進入“Copy to Frames”窗口,選擇拷貝范圍為:All Frames,單擊“ok”按鈕 。

      圖4 拷貝幀

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

      圖5 置后工具

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

      圖6 延時設置

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

      圖7 動畫效果圖

      2. 共享圖層

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

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

      下面我們就利用此方法為剛才的動畫添加一個背景: 首先,將畫布的大小改為200x150(Pixels),然后開啟“Layers”圖層面板,單擊“Layers”圖層面板右上角如圖按鈕,選擇“New Layer”,在彈出的'“New Layer”對話框中,為新層起一個名字,例如:background,鉤選“Share Across Frames”復選框,單擊“ok”按鈕,“background”圖層就成了共享圖層,(如圖8)左鍵按住“background”圖層,將它拖到 “Layer 1”圖層下面;然后打開背景圖片,單擊“矩形選擇工具”

      ,選擇我們需要的背景,將其拷到“background”圖層的畫布中,并適當地調整一下背景的位置。好了,一切ok!

      圖8 共享圖層

      二、 利用Tween Instances生成動畫

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

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

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

      三、 手工繪制

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

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

      · No Onion Skinning: 關閉洋蔥皮功能;

      · Show Next Frame: 在當前幀中顯示下一幀的'內容;

      · Before and After: 在當前幀中顯示前一幀和下一幀的內容;

      · Show All Frames: 在當前幀中顯示所有幀中的內容;

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

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

      圖9 洋蔥皮功能菜單

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

      圖10 淡化效果

    【Fireworks制作GIF動畫圖片教程】相關文章:

    Fireworks制作GIF動畫效果的技巧10-16

    Fireworks制作GIF動畫圖解10-26

    fireworks特效教程制作分解09-19

    Fireworks教程:立體倒影的制作10-16

    Fireworks制作立體倒影的教程11-04

    Fireworks制作卡通表情教程08-06

    Fireworks制作下拉菜單教程11-01

    Fireworks制作立體倒影的教程分享09-11

    最新Fireworks禮花動畫制作學習教程09-14

    <address id="ousso"></address>
    <form id="ousso"><track id="ousso"><big id="ousso"></big></track></form>
    1. 日日做夜狠狠爱欧美黑人