|
6 S: h$ ^) L [0 l
1 C& L3 x' V: H7 G6 h
Fireworks不仅在网页制图、切图、与Dreamweaver结合上有其独到的优势,制作GIF动画也是它的强项,本文我们一起学习如何使用Fireworks MX制作一个平滑变色效果的Banner,相信这样的Banner一定会让您的网站增色不少!2 _2 J/ E; L2 p- @
通过本教程学习我们可以掌握符号(symbol)的定义、修改、使用等问题,调节色相/对比度(hue/saturation),补间实例动画(tween instance),层(Layers)和帧(Frames)的基本用法,还可以学习几个特效。8 a t9 w1 Q" I2 J# g6 l
?. w( E3 \- c1 s) k& X/ E" f6 `
![](http://edu.itbulo.com/UploadFiles_1485/200504/20054918454390.gif)
, S: B3 R7 P3 k: Y5 ^/ Q Y: r [% K) F# p
1.新建画布,大小为468*60(Banner标准尺寸)。选择素材图片,当然也可以手绘,调整到适当大小,如图:
! E$ k% o1 x+ Y1 j6 U5 U+ K* [/ z% P9 n: I- X; S$ q$ d
![](http://edu.itbulo.com/UploadFiles_1485/200504/20054918456717.gif)
& Y8 V# R) a% g, a/ w
% V' I7 ^; d7 a, \( J 2.将图片克隆(原地复制,当然用复制、粘贴也可)几个,这主要取决于你希望所变颜色的多少。例中有三种颜色变化,故克隆三个,可以理解为Flash里的关键帧,选中克隆的图片,选择菜单项滤镜(Filters)->颜色(adjust color)->调节色相对比度(hue/saturation),对关键图片进行变色处理,需要注意的是,在调节过程中,不要调节亮度,否则整个图片都发生了变化,首先调节为绿色!色相值:120,如图所示是绿色图片的参数设置。/ K+ E3 ^9 o5 G7 I& a0 y
5 I5 N% O* P4 {' A & Q' f) ^2 x/ m8 P% F
' N7 J8 u" |0 R0 s. q" I 其他的图片颜色调节和该例类似,hue值蓝色为180,紫色为-80,图片不同调节的参数也不同,这里不赘述,请读者在制作中仔细调整,还要特别注意在制作前要想好颜色的变化过程,最好是同一色系逐渐变化,如先由蓝变绿,再由绿变紫……,本例就是要实现这种变化!调整好颜色,将他们按顺序摆放,看看色彩过渡的跨度是不是太大,如果太大,再做调整,直到满意为止!如图:) H. V2 F9 S1 g% M8 G, B
. i; G9 e( O8 R) h+ P5 A5 J![](http://edu.itbulo.com/UploadFiles_1485/200504/20054918456684.gif)
8 v6 b" E3 o. r4 y u+ ?& C
6 o( v+ O0 y, C: }, x; i' j9 e 3.选中一个图片(例中为绿色)按快捷键F8,或者右键convert to symbol,在弹出的对话框内选择动画符号(Animation),点击确定,这时会弹出一个要求进行动画设置的对话框,我们暂时对它不做设置,保持为一帧,移动为0就可以了,如图
' z& B. a+ @! X' [5 l) }( H, w6 L6 R" S. |/ `0 i) F( j
![](http://edu.itbulo.com/UploadFiles_1485/200504/20054918456740.gif)
; ` L- p8 a% a& A- ]% m- O. m m% [, i1 _/ V2 v' k E z$ I
单击确定,将该图片转化为动画符号,在画布上会看到带箭头的虚线边框的实例,我们将它删除\"!(不要怕,符号已经定义到库中了,然后将其他的图片按此方法都转化为符号!* p7 m0 j) [0 E0 Y2 J7 r
: @8 _/ W# T4 B" `
![](http://edu.itbulo.com/UploadFiles_1485/200504/20054918456644.gif)
0 [; I. V! x ?* Z) |# t$ r9 }
+ j q, r Q* e# Q5 G. H4 i 4.这个时候画布一片空白,好象我们辛苦了半天,都白做了?!不要着急,真正的动画还没有开始做呢,看着画布是不是有点单调啊,我们给她美化一下吧,因为我们的素材背景是黑色的,我们把画布的背景改为黑色,菜单修改(Modify)->画布(Canvas)->画布颜色(Canvas Colors...),再在角上加个不动的图片吧,使Banner更加生动,如图
+ f! r1 t y+ a4 J5 l8 v4 E& \) ?8 E+ g" O! y8 j
![](http://edu.itbulo.com/UploadFiles_1485/200504/20054918456206.gif) |
|