毋庸置疑,Fireworks是目前制作網(wǎng)頁圖片的最佳專業(yè)軟件之一。這一節(jié)我們來熟悉Fireworks中幀面板、動(dòng)畫、元件等工具的使用方法。下面學(xué)習(xí)啦小編給大家整理了關(guān)于fireworks制作gif動(dòng)畫banner的方法，希望你們喜歡。

　　fireworks制作gif動(dòng)畫banner的效果如圖：

　　fireworks制作gif動(dòng)畫banner的方法步驟

　　fireworks制作gif動(dòng)畫banner的步驟(1)：在fireworks中 新建一個(gè)大小為468×60的文件，設(shè)置其畫布顏色為透明，并導(dǎo)入一幅汽車的位圖圖像，得到圖1所示的圖像。

　　圖1 新建文件并導(dǎo)入圖像

　　fireworks制作gif動(dòng)畫banner的步驟(2)：然后選中這幅汽車圖像，單擊【修改】菜單，選擇【元件】|【轉(zhuǎn)換為元件】，這時(shí)候會(huì)跳出元件屬性對(duì)話框，將這個(gè)圖形文件命名為"汽車圖 1"。

　　fireworks制作gif動(dòng)畫banner的步驟(3) ：選擇單擊【確定】，這時(shí)候位圖圖像就已經(jīng)轉(zhuǎn)換為了圖形元件了，如圖3所示。選中這個(gè)圖形元件，單擊【修改】菜單，選擇【動(dòng)畫】|【選擇動(dòng)畫】，跳出動(dòng)畫對(duì)話框，在其中設(shè)置幀數(shù)為10，移動(dòng)到380，如圖4所示。

　　圖3 位圖轉(zhuǎn)換為圖形元件

　　圖4 設(shè)置動(dòng)畫屬性 圖5 彈出對(duì)話框

　　fireworks制作gif動(dòng)畫banner的步驟(4) ：單擊【確定】，這時(shí)候跳出圖5所示的對(duì)話框，詢問是否添加新幀，選擇【確定】，這時(shí)候在幀面板中就已經(jīng)添加了新幀，得到圖6所示的動(dòng)畫元件圖像。

　　圖6 動(dòng)畫元件圖像

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

　　圖7 庫面板

　　fireworks制作gif動(dòng)畫banner的步驟(6) ：從庫面板中拖動(dòng)圖形元件到畫布之中，使其和第10幀的汽車圖形完全對(duì)齊。得到第11幀的圖像，如圖8所示。

　　fireworks制作gif動(dòng)畫banner的步驟(7)： 選中第11幀，在幀面板中單擊 按鈕，在彈出菜單中選擇【重制幀】，在彈出對(duì)話框中設(shè)置幀的數(shù)量為9，如圖9所示。

　　圖9 復(fù)制第11幀

　　fireworks制作gif動(dòng)畫banner的步驟(8) ：選中第11幀，導(dǎo)入另外一幅汽車圖像，如圖10所示。

　　圖10 導(dǎo)入另外一幅汽車圖像

　　fireworks制作gif動(dòng)畫banner的步驟(9) ：同樣單擊【修改】菜單，選擇【元件】|【轉(zhuǎn)換為元件】，在元件屬性對(duì)話框，將這個(gè)圖形文件命名為"汽車圖 2"，如圖11所示。

　　圖11 將圖像轉(zhuǎn)換為圖形元件

　　fireworks制作gif動(dòng)畫banner的步驟(10)：單擊【確定】，這時(shí)候位圖圖像就已經(jīng)轉(zhuǎn)換為了圖形元件了。選中這個(gè)圖形元件，單擊【修改】菜單，選擇【動(dòng)畫】|【選擇動(dòng)畫】，跳出動(dòng)畫對(duì)話框，在其中設(shè)置幀數(shù)為10，移動(dòng)到290，得到圖13所示的圖像。

　　圖12 第二個(gè)動(dòng)畫元件

　　fireworks制作gif動(dòng)畫banner的步驟(11)：設(shè)置第20幀的圖像幀延時(shí)為35，11幀到19幀幀延時(shí)為10。然后新建一幀并設(shè)置幀延時(shí)為10，從庫面板中拖動(dòng)"汽車圖1"和"汽車圖2"到畫布之上，使其和第20幀中圖像完全對(duì)齊，如圖14所示。

　　圖13 第21幀圖像

　　fireworks制作gif動(dòng)畫banner的步驟(12)：選擇第21幀，和第7步一樣，將其重制9次。在21幀中導(dǎo)入第三幅汽車圖，只將車的前半部分放在畫布之中，好像車子是逐漸開進(jìn)來的一樣。接下來和前面一樣，將它轉(zhuǎn)化為圖形元件，并設(shè)置動(dòng)畫效果，設(shè)置其幀數(shù)為10，移動(dòng)為100即可，如圖15所示。

　　圖14 導(dǎo)入第三幅汽車圖并設(shè)置動(dòng)畫

　　fireworks制作gif動(dòng)畫banner的步驟(13)：將"汽車圖 3"元件拖到第30幀中并與動(dòng)畫元件對(duì)齊。接著為圖像添加兩個(gè)小圓形和一個(gè)圓角矩形，并在矩形中添加"我也要去天柱山"幾個(gè)字來增強(qiáng)效果，如圖16所示。

　　圖15　第30幀圖像

　　fireworks制作gif動(dòng)畫banner的步驟(14)：將第30幀幀延時(shí)設(shè)為200即可，讓它的顯示時(shí)間長(zhǎng)一些。最后保存這個(gè)文件并將其導(dǎo)出為一個(gè)GIF文件，這樣在個(gè)人網(wǎng)頁中就可以使用這個(gè)GIF圖片了。 .png文件下載

看過“fireworks怎樣制作gif動(dòng)畫banner “的認(rèn)還看了：

1.fireworks怎樣制作gif動(dòng)畫

2.Fireworks制作GIF動(dòng)畫圖片教程

3.怎么使用Fireworks制作gif圖片

4.fireworks8如何制作動(dòng)態(tài)gif動(dòng)態(tài)圖

5.Fireworks教程:gif動(dòng)畫圖片批量增加水印