fireworks不僅在網(wǎng)頁(yè)制圖、切圖、與dreamweaver結(jié)合上有其獨(dú)到的優(yōu)勢(shì),制作gif動(dòng)畫(huà)也是它的強(qiáng)項(xiàng),本文我們一起學(xué)習(xí)如何使用fireworks mx制作一個(gè)平滑變色效果的banner,相信這樣的banner一定會(huì)讓您的網(wǎng)站增色不少!
通過(guò)本教程學(xué)習(xí)我們可以掌握符號(hào)(symbol)的定義、修改、使用等問(wèn)題,調(diào)節(jié)色相/對(duì)比度(hue/saturation),補(bǔ)間實(shí)例動(dòng)畫(huà)(tween instance),層(layers)和幀(frames)的基本用法,還可以學(xué)習(xí)幾個(gè)特效。
1.新建畫(huà)布,大小為468*60(banner標(biāo)準(zhǔn)尺寸)。選擇素材圖片,當(dāng)然也可以手繪,調(diào)整到適當(dāng)大小,如圖:
2.將圖片克隆(原地復(fù)制,當(dāng)然用復(fù)制、粘貼也可)幾個(gè),這主要取決于你希望所變顏色的多少。例中有三種顏色變化,故克隆三個(gè),可以理解為flash里的關(guān)鍵幀,選中克隆的圖片,選擇菜單項(xiàng)濾鏡(filters)->顏色(adjust color)->調(diào)節(jié)色相對(duì)比度(hue/saturation),對(duì)關(guān)鍵圖片進(jìn)行變色處理,需要注意的是,在調(diào)節(jié)過(guò)程中,不要調(diào)節(jié)亮度,否則整個(gè)圖片都發(fā)生了變化,首先調(diào)節(jié)為綠色!色相值:120,如圖所示是綠色圖片的參數(shù)設(shè)置。
其他的圖片顏色調(diào)節(jié)和該例類似,hue值藍(lán)色為180,紫色為-80,圖片不同調(diào)節(jié)的參數(shù)也不同,這里不贅述,請(qǐng)讀者在制作中仔細(xì)調(diào)整,還要特別注意在制作前要想好顏色的變化過(guò)程,最好是同一色系逐漸變化,如先由藍(lán)變綠,再由綠變紫……,本例就是要實(shí)現(xiàn)這種變化!調(diào)整好顏色,將他們按順序擺放,看看色彩過(guò)渡的跨度是不是太大,如果太大,再做調(diào)整,直到滿意為止!如圖:
3.選中一個(gè)圖片(例中為綠色)按快捷鍵f8,或者右鍵convert to symbol,在彈出的對(duì)話框內(nèi)選擇動(dòng)畫(huà)符號(hào)(animation),點(diǎn)擊確定,這時(shí)會(huì)彈出一個(gè)要求進(jìn)行動(dòng)畫(huà)設(shè)置的對(duì)話框,我們暫時(shí)對(duì)它不做設(shè)置,保持為一幀,移動(dòng)為0就可以了,如圖
單擊確定,將該圖片轉(zhuǎn)化為動(dòng)畫(huà)符號(hào),在畫(huà)布上會(huì)看到帶箭頭的虛線邊框的實(shí)例,我們將它刪除~!(不要怕,符號(hào)已經(jīng)定義到庫(kù)中了,然后將其他的圖片按此方法都轉(zhuǎn)化為符號(hào)!
4.這個(gè)時(shí)候畫(huà)布一片空白,好象我們辛苦了半天,都白做了?!不要著急,真正的動(dòng)畫(huà)還沒(méi)有開(kāi)始做呢,看著畫(huà)布是不是有點(diǎn)單調(diào)啊,我們給她美化一下吧,因?yàn)槲覀兊乃夭谋尘笆呛谏模覀儼旬?huà)布的背景改為黑色,菜單修改(modify)->畫(huà)布(canvas)->畫(huà)布顏色(canvas colors...),再在角上加個(gè)不動(dòng)的圖片吧,使banner更加生動(dòng),如圖
5.好了,前期工作基本就緒,開(kāi)始真正的動(dòng)畫(huà)了,現(xiàn)在看看你的幾個(gè)主要面板都打開(kāi)了嗎?庫(kù)面板(window->library f11)、幀面板(window->frames shift+f2)、層面板(window->layers f2)。如果沒(méi)有打開(kāi),按括號(hào)中的打開(kāi)吧。首先點(diǎn)擊層面板,雙擊我們的背景所在層,在彈出的小窗口里的方框里打上勾,(在輸入欄里可以給圖層起個(gè)好記的名字,看你的愛(ài)好了~!),即共享這個(gè)圖層,也就是說(shuō),在以后的動(dòng)畫(huà)中,這一層是始終不變的。完成后圖層右面出現(xiàn)個(gè)膠片的圖標(biāo),對(duì),就是那個(gè)小梯子,呵呵,如圖
6.單擊帶加號(hào)的文件夾圖標(biāo)新建圖層2,將庫(kù)面板中的藍(lán)色符號(hào)拖到畫(huà)布中,記住縱橫坐標(biāo)(例中為x:-1,y:-1)選擇菜單修改(modify)->動(dòng)畫(huà)(animation)->設(shè)置(settings... ),在彈出的對(duì)話框內(nèi)設(shè)置幀數(shù)為10,單擊確定,這時(shí)系統(tǒng)會(huì)提示是否要自動(dòng)添加幀,回答是ok。
新聞熱點(diǎn)
疑難解答
圖片精選