FW制作照片连续滚动效果

[复制链接]
查看: 419|回复: 0
gggds 发表于 2009-12-27 13:25:29 | 显示全部楼层 |阅读模式
  本文中我们建立一个具有胶片形式的动态影视Banner,首先制作一个具有胶片效果的边框,接着使用帧面板制作GIF动画效果。主要熟悉Fireworks MX 2004中组合、帧面板、修改画布大小、动画面板等使用。文章末尾提供原文件供大家下载参考。
, S  G' P6 W( c5 [& r8 x. i* i9 Z( u' W/ d. v  m/ }' \8 f* z
1 {6 \% b5 A" y5 C4 b7 j
  下面我们看具体操作步骤。    1) 新建一个353×51的文件,设置背景颜色为黑色,如图1。
; U' m4 k7 U" Z6 K5 N6 K! N0 G& w1 c5 A4 x% f5 t. J2 c* ^3 q

5 A# I0 Z9 j5 [$ c5 m  G% E% J图1? 新建一个文件2 d: T) k( f* D0 B- m. o) b' t0 v
    2) 由于图像相对较小,为了方便编辑需要改变视图大小,点击\\\"视图\\\"菜单,选择\\\"缩放比例\\\"150%,如图2所示。
$ Y2 _7 @) }3 l# r' s5 }" s! U( k; f: j& I& E3 O
1 i  h8 Y( R: o2 o8 u/ N4 T9 x
图2? 改变视图大小
" y" T4 {! V0 I8 y5 i+ h8 ]* x    3) 点击工具箱的 图标,在图像上画一矩形,并设置填充色为白色,得到图3。6 N, f! M3 q7 C3 h
- @" d" K/ t7 S: C( L- r* I! R! b. A) ]

7 T+ y$ z2 x/ r图3? 画一矩形    4) 选择矩形并按Ctrl+C复制,然后Ctrl+V粘贴。并用方向键移动复制所得矩形到适当位置,按Shift键选择两者并组合,得到图4。
* }: U6 [/ {0 V  v
* P, S$ {# b2 n$ ^9 q3 V* @) p$ {' E0 A8 U6 ]2 d& M
图4? 复制并组合矩形  5) 不断重复步骤4)得到如图5所示。这样就做出了一个胶卷的样子了,下一步就为其添加一些\\\"相片\\\"。  v2 D0 ]; K. M7 u- V" I' V0 T

) @* b7 q/ O( ?. H7 W" t% R3 P0 K' Y8 L- O$ x& S
图5? 重复复制矩形得到的图片    6) 导入一个Banner.gif图片,如图6所示。6 R+ U. {: Y3 I6 s$ r

+ ]; w& ^0 V  w- W0 |5 [: r$ ]& X5 x4 S3 @& k8 H' B! ~
图6? 导入一个图片    7) 选定导入的图像并点击工具箱的 图标,改变导入图像的大小使其与\\\"胶卷\\\"符合,得到图7。$ u0 R: I% R8 L- d: V' f/ }
! c7 n; j' Y# V
. C( e" {2 u& n6 v! n" w6 \7 h
图7? 改变导入图像的大小  8) 重复步骤6)和步骤7),导入其他一些图像,并按方向键排列导入的图像,恢复到100%视图最终得到图8。
/ P+ `3 f: ]" r1 c8 T9 g
5 {! |* {/ l$ |; D) D  O0 w! e9 v& U
图8? 导入所有图像后所得图像    9) 保存文件为Banner.png,下一步来制作一个滚动的Gif图片。打开Banner.png图片,单击\\\"选择\\\"菜单,选择\\\"选择全部\\\"下拉菜单,选定所有的元素。如图9所示。
- l+ E- i3 ~  E* E+ z% x: W& R; Q! P6 i% j1 h1 }7 e
9 c2 j* Z5 a8 y
图9? 选择所有元素  10)选择\\\"修改\\\"|\\\"组合\\\",将所有元素组合成一个对象,如图10所示。! R1 I% H4 ?" L4 `3 o
* u7 H/ j6 x- W+ e$ ?3 T3 p" B& l

% y7 u8 e8 `8 N* [. `图10? 组合所有元素  11)为了实现滚动效果,需要图像右边移出时,左边有图像能够补进。需要两幅相同图像来制作滚动效果。首先选择\\\"修改\\\"菜单,然后选择\\\"画布\\\"|\\\"画布大小\\\",修改画布大小为706×51,得到图11。
. m5 c8 B( U6 K/ Z' f8 U' G图11? 修改画布大小(图片较大,请拉动滚动条观看)  12)选择所选组合,按Ctrl+C复制后再按Ctrl+V粘贴,然后排列好两个对象并再次组合,得到图12。7 p$ Q8 f0 m( T( e5 V: ~2 x
图12? 复制并排列组合元素(图片较大,请拉动滚动条观看)  13)按Ctrl+X剪切所选组合,修改画布大小到353×51,再按Ctrl+V粘贴组合,将所选组合右侧与画布右侧对齐,得到图13。
' e- ^! z0 s8 q0 F" ~$ N图13? 恢复画布大小并右侧对齐画布与图像(图片较大,请拉动滚动条观看)  14)在开始制作滚动动画。首先选择\\\"修改\\\"菜单,再其下拉菜单中选择\\\"动画\\\"|\\\"选择动画\\\",得到如下图所示窗口。将\\\"移动\\\"设为\\\"353\\\",使其恰好能够左右衔接上。并将\\\"帧\\\"设为70,如图14所示。
/ |9 q8 G+ N8 ]; L5 H' x" g3 j8 t' [7 I; v; n3 R
/ i* |7 X2 K6 I5 P
图14? 动画窗口的参数设置  15)单击\\\"确定\\\"会跳出如图15所示窗口,单击\\\"确定\\\"会得到图16。
  r) S# m( ^; D! t* B5 {7 J+ O# S/ k8 I, z+ c

( _5 V5 u6 g% d, U; v  K图15? 跳出窗口
+ [9 y( s# k2 `5 B3 {* r图16? 动画元件窗口(图片较大,请拉动滚动条观看)    16)打开帧面板,选择第一帧,按住Shift键并拖动至第七十帧,单击鼠标左键选定所有帧,双击帧面板右侧,修改\\\"帧延时\\\"为\\\"10/100秒\\\"。如图17。
0 d: p: A1 y  _0 v' P5 k2 m" K$ ~9 B& H
5 ]7 Z) Z7 \4 `. ~
图17? 选择所有帧并修改\\\"帧延时\\\"  17)下一步就可以播放动画,看看效果如何了。点击绘图面板的 图标播放动画,效果如图18所示。
5 C. g/ D1 z9 z; I1 n* f3 U* [% K( U) d
+ Y$ g* x/ w/ @/ @4 `# G
图18? 播放动画  18)最后一步导出图像,将做好的图片保存为Banner.gif文件,如图19所示。 原文件下载( ?/ i: ~2 D$ ^  @' o, F( G
图19? 将图像保存(图片较大,请拉动滚动条观看)

本版积分规则

精彩图文

Copyright   ©2015-2016  展示网  Powered by©Discuz!  技术支持:凡尚展览     ( 粤ICP备14065977号 )