Fireworks不仅在网页制图、切图、与Dreamweaver结合上有其独到的优势，制作GIF动画也是它的强项，本文我们一起学习如何使用Fireworks MX制作一个平滑变色效果的Banner，相信这样的Banner一定会让您的网站增色不少！
; c% `5 n2 L1 \6 N为互联网事业发展提供源动力！ 通过本教程学习我们可以掌握符号(symbol)的定义、修改、使用等问题，调节色相/对比度(hue/saturation)，补间实例动画(tween instance)，层(Layers)和帧(Frames)的基本用法，还可以学习几个特效。
( I8 c1 j, U! p& \9 P团购网站系统,团购网程序
( h2 j/ {2 Z j! ?8 S, ?9 F163k团购网站系统官方服务论坛
$ Q" ~/ l: r9 e8 j/ w
- \. _6 |: Y) t. W' lbbs.163k.com 1.新建画布，大小为468*60（Banner标准尺寸）。选择素材图片，当然也可以手绘，调整到适当大小，如图：
bbs.163k.com2 r4 h- V& I5 V6 B* A
% |( c- m3 k3 t) R! U" V4 zbbs.163k.com
为互联网事业发展提供源动力！3 H# A0 ?/ E7 A4 i4 J$ h
163K网站系统官方论坛/ H; ?4 v4 W3 p
2.将图片克隆（原地复制，当然用复制、粘贴也可）几个，这主要取决于你希望所变颜色的多少。例中有三种颜色变化，故克隆三个，可以理解为Flash里的关键帧,选中克隆的图片，选择菜单项滤镜(Filters)->颜色(adjust color)->调节色相对比度(hue/saturation)，对关键图片进行变色处理，需要注意的是，在调节过程中，不要调节亮度，否则整个图片都发生了变化，首先调节为绿色！色相值：120，如图所示是绿色图片的参数设置。
163k团购网站系统官方服务论坛: d7 P$ t _0 J6 x7 {8 y0 I
# d2 r x# B+ |+ l3 \4 s8 i5 Dbbs.163k.com
163K网站系统官方论坛' g$ B$ G H2 [
9 x/ O0 G) K. Y. z3 O$ I9 f163K网站系统官方论坛 其他的图片颜色调节和该例类似，hue值蓝色为180，紫色为-80，图片不同调节的参数也不同，这里不赘述，请读者在制作中仔细调整，还要特别注意在制作前要想好颜色的变化过程，最好是同一色系逐渐变化，如先由蓝变绿，再由绿变紫……，本例就是要实现这种变化！调整好颜色，将他们按顺序摆放，看看色彩过渡的跨度是不是太大，如果太大，再做调整，直到满意为止！如图：
b. y2 J, M; d3 L: h: l为互联网事业发展提供源动力！bbs.163k.com& ]( k* y* x1 l; f) z
! R" ], O) B% m: m3 v; L) C163K网站系统官方论坛
; ?8 y% A$ ^' H' Q( B4 J% qbbs.163k.com 3.选中一个图片（例中为绿色）按快捷键F8，或者右键convert to symbol，在弹出的对话框内选择动画符号(Animation)，点击确定，这时会弹出一个要求进行动画设置的对话框，我们暂时对它不做设置，保持为一帧，移动为0就可以了，如图：
163k团购网站系统官方服务论坛0 [2 N; y0 c5 M1 I* x$ D
' y" \+ N* ^! L8 \$ `6 N4 |* s
为互联网事业发展提供源动力！1 E8 ~5 _$ X6 T6 R+ t) S4 M# a
为互联网事业发展提供源动力！+ Y! N/ c- |/ c& Q% s' J2 ]' E3 h
单击确定，将该图片转化为动画符号，在画布上会看到带箭头的虚线边框的实例，我们将它删除~！（不要怕，符号已经定义到库中了，然后将其他的图片按此方法都转化为符号！
/ r y7 [' Y5 s, c4 R! j
为互联网事业发展提供源动力！# H5 D* R, _% e6 O- }! Y% H0 d
& ?3 F8 s- T: y1 C& A2 U& D: }, O163k团购网站系统官方服务论坛
8 `) a7 }+ u0 O6 j- R! r# o! ]3 Y6 q 4.这个时候画布一片空白，好象我们辛苦了半天，都白做了？！不要着急，真正的动画还没有开始做呢，看着画布是不是有点单调啊，我们给她美化一下吧，因为我们的素材背景是黑色的，我们把画布的背景改为黑色，菜单修改(Modify)->画布(Canvas)->画布颜色(Canvas Colors...)，再在角上加个不动的图片吧，使Banner更加生动，如图：
团购网站系统,团购网程序4 |8 {+ y5 K3 w G+ ~/ p
) z% i2 [" v3 D$ x5 b163K网站系统官方论坛
4 \) U/ }3 |) obbs.163k.com5 U% L8 ~) X9 K5 P# @
5.好了，前期工作基本就绪，开始真正的动画了，现在看看你的几个主要面板都打开了吗？库面板(Window->Library F11)、帧面板(Window->frames Shift+F2)、层面板(Window->layers F2)。如果没有打开，按括号中的打开吧。首先点击层面板，双击我们的背景所在层，在弹出的小窗口里的方框里打上勾，（在输入栏里可以给图层起个好记的名字，看你的爱好了~！），即共享这个图层，也就是说，在以后的动画中，这一层是始终不变的。完成后图层右面出现个胶片的图标，对，就是那个小梯子，呵呵，如图：
. R* y/ h/ K2 K) g$ ?& U* }' a$ H
团购网站系统,团购网程序& W; @+ H( Q) i7 {7 L+ T
7 b( \6 R. Z1 b* M9 L! a163K网站系统官方论坛
: R. k; B2 l7 K; i8 {团购网站系统,团购网程序 6.单击带加号的文件夹图标新建图层2，将库面板中的蓝色符号拖到画布中，记住纵横坐标（例中为x：-1，y：-1）选择菜单修改(Modify)->动画(Animation)->设置(Settings... )，在弹出的对话框内设置帧数为10，单击确定，这时系统会提示是否要自动添加帧，回答是ok。
163K网站系统官方论坛' h5 L5 ~( |3 M8 `* S9 L
163K网站系统官方论坛0 Y6 z- U5 K( v' L
' z& | j+ v' Lbbs.163k.com163k团购网站系统官方服务论坛3 j- E3 Z4 @* T0 H2 q% h) f
然后再新建一个图层3，将绿色的符号拖到场景中，设置动画，也是10帧，不同的是将透明度由0变到100。
1 Y. T2 G3 c9 R' N) r团购网站系统,团购网程序4 ?2 p( T- V$ T5 H7 z
1 J. q. i) g6 t1 E7 o2 U6 S8 }163K网站系统官方论坛163K网站系统官方论坛7 { x- y! |$ Q' P8 r
为了能够跟前面的图形保持一致，在properties面板里设置坐标信息，例中所有的坐标都是x:-1,y:-1。完成后，第一帧层面板如图：
163k团购网站系统官方服务论坛0 z, |5 ~( c+ C. D9 S2 p
$ g1 o9 i w C, T9 n团购网站系统,团购网程序
. K0 l; g0 _; d% U163K网站系统官方论坛
$ z: [- b: k0 I0 R 画布的效果如图：
163K网站系统官方论坛" \6 \2 V7 ]8 C! v9 f, o8 z2 Z# C/ f$ T
163k团购网站系统官方服务论坛( T0 {: A& x4 n* C! _) c/ j% W9 i
为互联网事业发展提供源动力！ F4 L/ r; h2 {5 F
163K网站系统官方论坛4 h; z4 z1 |& i8 Z+ r: u
7.这样，一种渐变效果应该说是搞定了，接下来是要让它由绿色变为紫色，在帧面板里选择最后一帧，即第10帧。
! D: Y* }: N! S; a9 U163K网站系统官方论坛团购网站系统,团购网程序 n' F" [0 W9 ?" B- R
. G* G3 [ o7 S* ~为互联网事业发展提供源动力！
/ I$ N7 k- B6 c: o163K网站系统官方论坛
) K( o; y R4 \3 ?为互联网事业发展提供源动力！ 如果步骤没有错误的话，画布中的人物应该成了绿色了。单击帧面板右上角的小箭头，选择填加帧Duplicate frame...,在弹出的对话框内选择填加一帧，在原来帧后面，如图（一般默认，直接点确定就可以）。
, x Z J- C& P( \9 p( \ z1 e( o0 z
1 `8 N: q3 C9 J8 i; H1 ~bbs.163k.com
为互联网事业发展提供源动力！/ x$ S" f. ~! I
团购网站系统,团购网程序6 T, w: [( p( C a2 M/ F1 l
这时画布又变为背景了，在层面板中选中图层2，将紫色的符号拖到画布中，在properties面板中设置X,Y坐标，如步骤7进行动画设置，怎么设置呢，对了，紫色在这一次变化中是不变的，只设置帧数为10便可以了~！选中图层3，将绿色的符号拖到画布中，设置坐标，设置动画。这次，绿色符号的透明度应该由100变到0，让它淡去，紫色就出现了，实现由蓝变绿，由绿变紫的效果。
; Q, [ R- ~5 `: \1 D 8.现在该由紫变回蓝色去了，不用我说，你也该会了吧。同上，在帧面板中选中20帧，再添加一帧，选中层3，将蓝色符号拖到画布中，设置透明由0到100，选中图层2，拖入紫色符号，透明度不变，帧数也是10帧。（其实这一步可以在第7步中一次搞定，因为紫色符号一直没有变化，所以，第7步中直接让它20帧就可以了！为了说明思路，这里我们分开来做）。
5 m5 S( w6 D6 U$ l* F7 L4 A4 | @
9.现在，大功告成了，点击播放按钮浏览一下吧，是不是速度太快了，没关系，按住Shift键，选中所有的帧，双击，将帧速调整为10，现在速度可以了吧！
* b* u& k5 J/ W! P) ]) ?0 j1 h6 ebbs.163k.com 10.变色是实现了，可没有文字的Banner是没有用的。加文字动画可以根据自己的需要设置，这里我罗嗦一下例子中的几个文字动画效果，大家也可以进一步熟悉动画制作的一些技巧。
163k团购网站系统官方服务论坛 S h6 O) Y. Q" m2 p# D
接上面步骤，选中第1帧，然后选中图层3，填加图层4，这一层应该在最上面。选择文字工具，在这一层输入制作动画的文字，如例中输入“风云设计眼”，然后按快捷键F8，将其转化为动画符号，因为我要它保持静止状态5帧，所以在设置动画时和前面不变色的图片符号一样，只输入帧数就可以了，其他的设置不变。如图：
团购网站系统,团购网程序5 z) ~, ~ d# ^0 T0 U& |. j
+ F$ K1 e9 z7 F3 j2 M. S3 h+ {# e
" Y$ O- Y% ?+ t9 ^* R gbbs.163k.com团购网站系统,团购网程序; J1 B0 D& u, O' _- R
如果要达到自己想要的效果，可以自行设置，这个不会影响我们设置的颜色渐变动画，可以根据需要自己调整。然后输入网址（就是下面移动的小字）同样按F8转化为动画符号，在弹出的设置窗口中做如下设置：如图：
163K网站系统官方论坛# C6 d9 s5 _# H# x" x
- H# G1 C7 N8 ^3 `. Lbbs.163k.com
# J& Q& J' M' Z6 l& ~0 k6 n团购网站系统,团购网程序bbs.163k.com& Z( ]/ h$ o% L4 L: a* U2 ?# E
调整动画控制柄，如下图，绿色点为动画起始位置，将它移到图片外面，红色点为终止位置，将它移到文字的下放，然后在帧面板中选中第5帧，双击后面的数字，将帧速设为200。
% d6 s9 f- y i) \, b163K网站系统官方论坛
+ M7 }0 L" j4 }
( G( ^; l! j( j. C- l. F
bbs.163k.com' Q, ~% K6 T- m2 I$ g& ?8 Z( C7 o3 B
选中第6帧，这时我们所做的前5帧动画看不到了，看看层面板，始终保持在第4层，我们来实现例中的那个“动感模糊”，好多网友不知道用Fireworks怎么很好的实现！
163k团购网站系统官方服务论坛: S4 w# l6 P! _8 P3 P. x6 H' w
11.绘制和要模糊的文字差不多大小的一个矩形，然后选择填充下面的Fill Options...，如图对矩形进行Folds填充：
163k团购网站系统官方服务论坛+ Y( {2 P {' J- R8 j7 F
9 Q" ?' q" b" f( K. _& O4 B6 v163K网站系统官方论坛
: H# c( f q8 \8 n) G: F
5 X4 \- U8 ?+ H3 L% W& B/ \& T5 v163k团购网站系统官方服务论坛 成为如下图的效果！
/ V3 [. K# c7 {4 I0 c: b; f团购网站系统,团购网程序
! k# e7 n5 W) G y团购网站系统,团购网程序
. K3 J7 J! P, j1 P! e163K网站系统官方论坛团购网站系统,团购网程序7 J# }; _8 \& ?
（模拟条形码，详细教程见：http://）然后羽化，在Properties面板里选择Effects，选择Motion Trail...滤镜，进行两次“动感”一次角度为0，如下图，一次为180。
+ `! }+ N3 @- H; M8 i I! n1 {163k团购网站系统官方服务论坛
7 b& v& ~+ @) G& I163K网站系统官方论坛
4 [) l& j4 a4 Q0 x( p7 ^5 a; O为互联网事业发展提供源动力！6 p# g6 w+ a m' E2 }
完成的效果如图：
为互联网事业发展提供源动力！4 y5 R( x8 Z( F6 E7 b$ l# z
) f+ ~) j" p! P2 a
: ^2 _3 u5 c% k
bbs.163k.com9 {: T& g" i0 R' l. C5 q( z3 C
然后打开库面板，将“风云设计眼”字样的符号拖到场景中，右键->Symbol->Break Apart，断开和库的联系，然后选中文字，在Properties面板选择Effects，对其进行高斯模糊，模糊度设置为2.0就可以了，然后将处理好的矩形放到模糊文字的上面，适当调节透明度，这样两个文字过渡时候的动感模糊效果就实现了，如图中效果：
0 ~: T/ H9 e2 Z' x8 _! |. q8 I5 A163K网站系统官方论坛为互联网事业发展提供源动力！- b/ S- m9 k& J1 e# c
163k团购网站系统官方服务论坛, A# S7 L9 o; O6 U4 q
7 y/ U' s/ B) w+ B: R$ Qbbs.163k.com 12.选中第7帧，输入文字“点燃灵感”，转化为动画符号，也设置5帧的动画，设置和前面“风云设计眼”完全一样，只是下面的文字变化方向不同而已，大家可以打开原文件看看就明白了！
163K网站系统官方论坛+ q% v( x$ T) N" |4 T8 x* ^; O* ~
13.选中第12帧，输入文字“Fireworks爱好者的家园”，复制一下，隔一帧，也就是在14帧粘贴，然后在16帧也粘贴，并将该帧帧速改为100。这样文字就有闪烁的效果了~！选择第17帧，将文字复制一个，选中，再用Motion Trail...滤镜，给文字加上运动的尾巴，角度为0，相信大家已经理解了吧。然后按F8将其转化为动画符号，设置为3帧，运动方向为180度，设置如下图。（帧数少了，文字飞出的速度就越快。还有，运动的长度可以根据需要自己调整，无须拘泥与教程。）
$ m( J1 Y8 Y# f) p6 R; _/ X' V1 s# C团购网站系统,团购网程序
+ z& q- R1 v* g: L& L9 ]; s为互联网事业发展提供源动力！
4 b' F: s! E, I: f8 f) B2 e163K网站系统官方论坛! X1 h5 w2 ^. U) {) V: P) i' n
好了，到此一个漂亮的BANNER已经做好了！最后的工作就是导出了，选择菜单File->Export Preview,在弹出的对话框内，记得选GIF动画（ Gif Animation）就可以了！完了之后如果对速度等等感觉不满意，可以调节帧速，达到想要的效果。当然用FW实现这种变色banner的方法不止一种，好的方法等你去思考呢！有好方法不要忘了和大家一起分享哦！
8 ]) I* N) J3 J1 g9 p) F8 Mbbs.163k.com Png源文件：
" ^$ p z7 P& V9 \3 {团购网站系统,团购网程序
) m4 `( }, g7 o8 zbbs.163k.com
