fireworks 輕松繪制 banner廣告動(dòng)畫教程
?。?1)在幀面板中選擇第1幀,然后在層面板中選擇layer 3,接著新建一個(gè)layer 4,選擇工具箱上的文本工具為圖像添加“天極軟件網(wǎng)”文字,如圖23所示。

圖23 添加文本
?。?2)選中文本然后按f8鍵將文本轉(zhuǎn)換為符號(hào),在符號(hào)屬性中為其命名為nuoli,選擇轉(zhuǎn)換為動(dòng)畫符號(hào),如圖24所示。由于要將文本保持靜止?fàn)顟B(tài)5幀,所以在設(shè)置動(dòng)畫時(shí)和前面不變色的圖片符號(hào)一樣,只輸入幀數(shù)就可以了,其他的設(shè)置不變,如圖25。

圖24 命名符號(hào)

圖25設(shè)置動(dòng)畫屬性
?。?3)同理添加諾利網(wǎng)的網(wǎng)址“http://soft.yesky.com/”這個(gè)文本,并將其轉(zhuǎn)換為符號(hào),設(shè)置動(dòng)畫屬性如圖26所示。選擇“ok”回到畫布中,如圖27所示。其中綠色點(diǎn)為動(dòng)畫起始位置,紅色點(diǎn)為終止位置。然后在幀面板中選中第5幀,雙擊后面的數(shù)字,將幀速設(shè)為200。

圖26 設(shè)置動(dòng)畫符號(hào)屬性

圖27 文本轉(zhuǎn)換為動(dòng)畫符號(hào)后的圖像
(24)下面來實(shí)現(xiàn)一個(gè)“動(dòng)感模糊”效果。選中第6幀,這時(shí)我們發(fā)現(xiàn)所做的前5幀動(dòng)畫看不到了。點(diǎn)擊工具箱上的矩形工具繪制一個(gè)矩形,將矩形填充設(shè)為folds填充,如圖28所示。

圖28 將矩形填充設(shè)為折疊填充
?。?5)在折疊填充浮動(dòng)框中設(shè)置第一個(gè)顏色塊為白色,第二個(gè)顏色塊為黑色,如圖29所示,最終得到圖30所示的圖像效果。

圖29 設(shè)置折疊填充屬性

圖30 設(shè)置填充屬性后的填充效果
?。?6)使用鼠標(biāo)調(diào)整折疊填充的控制柄,得到圖31所示的圖像效果。

圖31 調(diào)整控制柄后的圖像效果
?。?7)選中這個(gè)矩形,點(diǎn)擊屬性面板上的按鈕,在彈出菜單中選擇“eye candy 4000le”>>“motion trail”,設(shè)置motion trail屬性如圖32所示。

圖32 motion trail設(shè)置
(28)再一次使用motion trail特效,不過將方向設(shè)為180度,其他的設(shè)置和上面一樣,得到圖33所示的圖像效果。

圖33 兩次使用motion trail特效后的效果
(29)然后打開庫面板,將“天極軟件網(wǎng)”字樣的符號(hào)拖到場景中,右擊鼠標(biāo)選擇“symbol”>>“break apart”,斷開和庫的聯(lián)系,然后選中文字,點(diǎn)擊屬性面板上的按鈕,在彈出菜單中選擇“blur”>>“gaussian blur”對(duì)其進(jìn)行高斯模糊,模糊度設(shè)置為2.0就可以了,然后將處理好的矩形放到模糊文字的上面,適當(dāng)調(diào)節(jié)透明度,這樣兩個(gè)文字過渡時(shí)候的動(dòng)感模糊效果就實(shí)現(xiàn)了,如圖34所示效果。

圖34 動(dòng)態(tài)模糊效果
?。?0)選中第7幀,輸入文字“真誠為您服務(wù)”,轉(zhuǎn)化為動(dòng)畫符號(hào),也設(shè)置5幀的動(dòng)畫,設(shè)置不同的動(dòng)畫屬性,如圖47所示。得到圖35所示的圖像。

圖35 設(shè)置動(dòng)畫屬性

圖36 設(shè)置動(dòng)畫屬性后的圖像
(31)選中第12幀,輸入文字“設(shè)計(jì)在線”,復(fù)制一下,然后在14幀粘貼,然后在16幀也粘貼,并將該幀幀速改為100,這樣文字就有閃爍的效果了,如圖37所示。

圖37 banner的第16幀圖像
?。?2)選擇第17幀,將文字復(fù)制一個(gè),選中后再用motion blur特效,設(shè)置其屬性如圖38所示。然后按f8將其轉(zhuǎn)化為動(dòng)畫符號(hào),設(shè)置其屬性如圖39所示。

圖38 設(shè)置motion blur屬性

圖39 設(shè)置動(dòng)畫屬性
?。?3)選擇“ok”回到工作區(qū),得到第17幀圖像如圖40所示。然后選擇第30幀,設(shè)置幀延時(shí)為200/100 second即可。

圖40 第17幀圖像
?。?4)回到圖像第1幀,點(diǎn)擊下面工作區(qū)狀態(tài)欄的圖標(biāo)就可以預(yù)覽圖像效果了。適當(dāng)進(jìn)行調(diào)整然后就可以選擇導(dǎo)出向?qū)?,在?dǎo)出向?qū)?duì)話框中選擇導(dǎo)出類型為gif動(dòng)畫,如圖41所示,這樣就可以將圖像導(dǎo)出為gif動(dòng)畫了。

圖41 將圖像導(dǎo)出為gif動(dòng)畫
小結(jié):在上面的這個(gè)例子中,我們主要學(xué)會(huì)了漸變顏色動(dòng)畫的制作。在這個(gè)banner的制作過程中,我們通過使用層面板、幀面板和庫面板進(jìn)一步熟悉fireworks mx 2004中這些面板的使用方法。
在幀面板中我們學(xué)會(huì)了如何選擇各幀編輯,如何復(fù)制幀、添加幀等,還學(xué)會(huì)了如何去設(shè)置幀的時(shí)間長短。
在層面板中我們了解了如何新建圖層和設(shè)置共享圖層等。
在庫面板中我們熟悉如何將圖像和文本轉(zhuǎn)換為動(dòng)畫元件,通過動(dòng)畫屬性對(duì)話框設(shè)置動(dòng)畫的大小、透明度等來控制動(dòng)畫效果以及怎么樣將庫文件放置到場景之中。
我們通過對(duì)不同符號(hào)對(duì)象的不同設(shè)置實(shí)現(xiàn)了不同的動(dòng)畫效果,這里讀者可以在即嘗試著設(shè)置動(dòng)畫屬性對(duì)話框中的不同參數(shù)來設(shè)置動(dòng)畫圖像的效果,包括frame(幀數(shù))、move(運(yùn)動(dòng)的距離)、direction(方向)、scale to(尺寸大小)、opacity(不透明度)、rotate(旋轉(zhuǎn))等值,從而產(chǎn)生不同的效果。
另外,在這個(gè)banner的制作過程中,我們有進(jìn)一步熟悉了指針工具、文本工具、縮放工具、矩形工具等工具的使用方法和技巧。通過使用motion trail特效熟悉了它的使用,并通過它制作了文本的“動(dòng)感模糊”效果。
相關(guān)文章
FireWorks設(shè)計(jì)制作動(dòng)畫Logo實(shí)例教程
Fireworks 應(yīng)用的一大亮點(diǎn)就是輕松制作紛繁的動(dòng)畫效果,下面我們就來看看如何應(yīng)用Fireworks MX2004 新增的一款濾鏡效果來輕松制作如下圖所示的動(dòng)畫效果2013-09-02Fireworks利用濾鏡工具輕松制作可愛Gif動(dòng)畫實(shí)例教程
本章我們來教大家利用ireworks中的濾鏡工具來設(shè)計(jì)制作出,精致可愛的GIF動(dòng)畫效果圖片2013-08-30Fireworks用隕石背景打造飛火流星動(dòng)畫特效實(shí)例教程
本章我們用Fireworks軟件制作出以隕石背景為主的飛火流星的動(dòng)畫實(shí)例教程2013-08-30Fireworks設(shè)計(jì)制作出具有GIF動(dòng)畫效果的BANNER實(shí)例教程
本文我們一起學(xué)習(xí)如何使用Fireworks MX制作一個(gè)平滑變色效果的Banner,相信這樣的Banner一定會(huì)讓您的網(wǎng)站增色不少2013-08-27fireworks下用運(yùn)動(dòng)模糊濾鏡制作下雨動(dòng)畫效果
絲絲小雨,帶給我們多少溫柔與浪漫,這篇教程里,我們將會(huì)用fireworks里的運(yùn)動(dòng)模糊濾鏡來制作出絲小雨的動(dòng)畫特效.希望大家在網(wǎng)頁設(shè)計(jì)中能有幫助2013-01-04- fireworks 應(yīng)用的一大亮點(diǎn)就是輕松制作紛繁的動(dòng)畫效果,下面我們就來看看如何應(yīng)用fireworks mx2004 新增的一款濾鏡效果來輕松制作2013-01-03
- 漂亮的閃圖動(dòng)畫應(yīng)用范圍非常廣,不僅可以在相冊(cè)、動(dòng)態(tài)表情里使用,還可以在QQ空間、論壇簽名、各類回貼和博客中使用。 學(xué)習(xí)要點(diǎn):本例中我們主要學(xué)習(xí)Fireworks導(dǎo)入閃2009-05-07
Fireworks教程:gif動(dòng)畫圖片批量增加水印
gif動(dòng)畫圖片批量增加水印效果.這個(gè)功能對(duì)于個(gè)人站長是非常實(shí)用的。 處理后 1.用firework打開gif文件。 2.在gif上面加上水印效果(打上文字,設(shè)置透明2008-10-05
無論在GIF動(dòng)畫中,還是在Flash 動(dòng)畫中,經(jīng)常會(huì)出現(xiàn)電視機(jī)沒有信號(hào)的雪花動(dòng)畫畫面,或者類似的動(dòng)態(tài)圖標(biāo),現(xiàn)在我們利用Fireworks中的折疊漸變加上逐幀動(dòng)畫的形式來制作一下2008-10-05- 不得不承認(rèn)fireworks的強(qiáng)大與便捷。這幾天的學(xué)習(xí)讓我感覺以前學(xué)的知識(shí)都只是皮毛中的皮毛。 參考教程: http://bbs.blueidea.com/viewthre ... 3Ddigest#pid38828612008-10-05


