當前位置:朝夕網 > 幫助中心 > 老教材Fireworks制作GIF動畫廣告BANNER >
     幫助導航

關于我們
版權聲明
閱讀服務條款
朝夕網贊助服務
聯系我們
友情鏈接
朝夕網發展歷史
關于QQ管家誤報朝夕網的
制作幫助
ie6下png站標制作的
如何查找自己需要的素材?
注冊朝夕圖片網的好處
如何使用朝夕banner
QQ郵箱如何使用本站生成
非IE瀏覽器如何保存圖片
廣告條制作基礎篇幫助信息
基礎知識
Banner在線制作有什
關于Aleo Flash
logo簡單介紹,一些關
制作工具Flash Ba
主頁Banner制作好幫
banner是什么意思?
banner常見尺寸,有
本站公告
新功能:部分圖片制作模板
朝夕banner在線制作
banner制作網密碼安
建議注冊會員使用廣告設計
本站暫未提供手工制作ba
歡迎淘寶客使用淘寶ban
設計教程
透明站標制作教程,如何制
適合菜鳥的初級banne
如何用DreamWeav
flash的as關于一個
老教材Fireworks
banner設計教程中的
如何制作吸引人的bann
網站banner橫幅設計

老教材Fireworks制作GIF動畫廣告BANNER


標簽:Fireworks gif BANNER 

本小節中我們看看怎樣使用Fireworks MX 2004設計一張GIF動畫Banner,以一個宣傳天柱山的Banner為例,主要熟悉Fireworks中幀面板、動畫、元件等工具的使用方法。文章末尾提供.png文件供大家下載參考。

  完成效果如圖:



Fireworks制作GIF動畫廣告BANNER(多圖)


  (1) 新建一個大小為468×60的文件,設置其畫布顏色為透明,并導入一幅汽車的位圖圖像,得到圖1所示的圖像。



Fireworks制作GIF動畫廣告BANNER(多圖)
圖1 新建文件并導入圖像


  

  (2) 選中這幅汽車圖像,單擊【修改】菜單,選擇【元件】|【轉換為元件】,這時候會跳出元件屬性對話框,將這個圖形文件命名為"汽車圖 1",如圖2所示。

Fireworks制作GIF動畫廣告BANNER(多圖)
圖2 將圖像轉換為圖形元件


  (3) 單擊【確定】,這時候位圖圖像就已經轉換為了圖形元件了,如圖3所示。選中這個圖形元件,單擊【修改】菜單,選擇【動畫】|【選擇動畫】,跳出動畫對話框,在其中設置幀數為10,移 動到380,如圖4所示。

Fireworks制作GIF動畫廣告BANNER(多圖)
圖3 位圖轉換為圖形元件
Fireworks制作GIF動畫廣告BANNER(多圖)(2)
 圖4 設置動畫屬性
 
Fireworks制作GIF動畫廣告BANNER(多圖)(2)
 圖5 彈出對話框


  (4) 單擊【確定】,這時候跳出圖5所示的對話框,詢問是否添加新幀,選擇【確定】,這時候在幀面板中就已經添加了新幀,得到圖6所示的動畫元件圖像。

Fireworks制作GIF動畫廣告BANNER(多圖)(2)
圖6 動畫元件圖像


  (5) 默認的幀延時的時間太短,可以將前面9幀幀延時設為10,第10幀的幀延時設為35來控制汽車運動的效果。為了將第10幀的圖像始終能夠顯示在這個GIF動畫上,所以有必要將第10幀的圖像效果復制到后面的所有幀中去。設計這幅動畫共有30幀,所以后面的20幀中都需要有這個第10幀中的汽車圖像。這里要調用庫中的圖形元件來實現所有幀中都有第一幅汽車圖的效果。打開幀面板,新建一幀,設置其幀延時為10。單擊幀面板的洋蔥皮工具,在彈出菜單中選擇【之前和之后】,這樣在編輯第11幀時就能夠看到第10幀的汽車圖像了。單擊【窗口】,選擇【庫】,打開了庫面板。發現庫面板中有一個動畫元件和開始保存的名為"汽車圖形 1"的圖形元件,如圖7所示。

Fireworks制作GIF動畫廣告BANNER(多圖)(2)
圖7 庫面板

(6) 從庫面板中拖動圖形元件到畫布之中,使其和第10幀的汽車圖形完全對齊。得到第11幀的圖像,如圖8所示。

Fireworks制作GIF動畫廣告BANNER(多圖)(3)


  (7) 選中第11幀,在幀面板中單擊 按鈕,在彈出菜單中選擇【重制幀】,在彈出對話框中設置幀的數量為9,如圖9所示。

Fireworks制作GIF動畫廣告BANNER(多圖)(3)
圖9 復制第11幀


  (8) 選中第11幀,導入另外一幅汽車圖像,如圖10所示。

Fireworks制作GIF動畫廣告BANNER(多圖)(3)
圖10 導入另外一幅汽車圖像


  (9) 同樣單擊【修改】菜單,選擇【元件】|【轉換為元件】,在元件屬性對話框,將這個圖形文件命名為"汽車圖 2",如圖11所示。

Fireworks制作GIF動畫廣告BANNER(多圖)(3)
圖11 將圖像轉換為圖形元件


 


  (10)單擊【確定】,這時候位圖圖像就已經轉換為了圖形元件了。選中這個圖形元件,單擊【修改】菜單,選擇【動畫】|【選擇動畫】,跳出動畫對話框,在其中設置幀數為10,移 動到290,得到圖13所示的圖像。

Fireworks制作GIF動畫廣告BANNER(多圖)(4)
圖12 第二個動畫元件


  (11)設置第20幀的圖像幀延時為35,11幀到19幀幀延時為10。然后新建一幀并設置幀延時為10,從庫面板中拖動"汽車圖1"和"汽車圖2"到畫布之上,使其和第20幀中圖像完全對齊,如圖14所示。

Fireworks制作GIF動畫廣告BANNER(多圖)(4)
圖13 第21幀圖像


  (12)選擇第21幀,和第7步一樣,將其重制9次。在21幀中導入第三幅汽車圖,只將車的前半部分放在畫布之中,好像車子是逐漸開進來的一樣。接下來和前面一樣,將它轉化為圖形元件,并設置動畫效果,設置其幀數為10,移 動為100即可,如圖15所示。

Fireworks制作GIF動畫廣告BANNER(多圖)(4)
圖14 導入第三幅汽車圖并設置動畫


  (13)將"汽車圖 3"元件拖到第30幀中并與動畫元件對齊。接著為圖像添加兩個小圓形和一個圓角矩形,并在矩形中添加"我也要去天柱山"幾個字來增強效果,如圖16所示。

Fireworks制作GIF動畫廣告BANNER(多圖)(4)
圖15 第30幀圖像


  (14)將第30幀幀延時設為200即可,讓它的顯示時間長一些。最后保存這個文件并將其導出為一個GIF文件,這樣在個人網頁中就可以使用這個GIF圖片了。

Fireworks制作GIF動畫廣告BANNER(多圖)(4)
 
 
 
png文件下載 :banner.rar
相關信息

如果您對本信息有什么建議,請【直接留言給我們】
微信版极速牛牛