Fireworks制作钟摆式公告牌摇摆动画

[复制链接]
查看: 261|回复: 0
gggds 发表于 2009-12-27 03:17:54 | 显示全部楼层 |阅读模式
 今天我们用Fireworks制作一个钟摆式的公告牌。  先参阅一下效果图。
3 G0 a5 l  Q2 G7 L: U
. F% }- F/ D1 k+ E- @2 O
1 u1 N! S! Z" }( a8 ^5 U  1、新建一个文件,画布背景颜色选取白色。同时将画布大小设置稍大些。  2、使用Fwmx2004的矢量工具,绘制圆角矩形,自选一种纹理效果填充,如图。$ |6 d( }! `. m& D6 j" W/ j$ l$ ]

% f0 E- y+ R) j3 @; z$ `" P( y1 G' n$ s+ u, b9 X
  3、输入文字。  4、在圆角矩形右、左上角绘制小圆形,如图所示。
6 C; E  E0 v1 x- y* s
0 a! k) Q5 X! T* l7 J/ e' a3 H% I, o4 F+ H% e
  5、添加辅助形,找到该圆角矩形的中心点位置,如图。: _% i7 l; ?' O
: Q! c' ]  `" _

8 h# J$ ^0 E: X& M; y: W2 G  6、在中心点上方垂直辅助线上绘制渐变效果的小圆形,以及两根斜直线段,复选该圆形及斜直线对角,组合并移至最后,使用钢笔工具,分别在两个白色小圆形上绘制曲线。如图。
9 s6 T$ @* S' ]9 f
! ]# e! j, }7 y% w! K
) \* }; R, x4 D) l4 S  7、群组(Ctrl+A、Ctrl+G)所有对象,一个简单的公告牌效果就简单制作完成了。现在进行动画效果的制作。
4 a1 d& X1 y2 R- O4 b, c9 Y  8、克隆群组后的公告牌,使用工具栏中的缩放工具,分别对画布中显示的公告牌进行旋转处理,如图。6 O: L+ i! Y; |7 p+ C, S
) t# \# v# ?" I7 \( }% }6 w

) }7 F: I( e) t7 U, B  9、复选这两个对象,并按垂直居中与水平居中进行排列,如图。% D% Q7 a( ?: p% S
& t. b2 }9 \0 ~, v5 q$ ~7 n
1 n: w9 B' C% p( @2 o7 {0 t
# ?; z/ D/ N2 W1 [# ~: ~4 v

+ V* B! Q" }, k# S* X) m[color=red'][1]- H9 Z1 o) H2 j& a* K8 N" K. `
[2]下一页

0 ]& @7 s0 M* u. ]2 f4 `/ o- y10、在层面板中先屏蔽掉右边的公告牌。再选择修改菜单、动画、选择动画命令,弹出动画属性设置窗口。进行参数的设置,如图。+ ]+ I* ?# N% n1 Y

; A' y0 y/ l7 }, a( I, z# \8 S! r4 r6 L( }0 w- h, n
/ f/ ^* o1 j2 Z" ]7 x: S- V& p5 o2 Y. ]! g
  11、确定后,公告牌对象自动转化为元件。双击该元件对象,在元件编辑窗口中,将公告牌圆形移至元件编辑窗口中心位置,如图。% i- ^$ b3 E0 ?) ?* N

' f  I$ `: D7 t0 P% O2 g
1 d& G- L; }  k- W: p& D9 T0 y9 x9 b4 j
  12、返回至主编辑窗口,现在一个由左向右摆动的动画效果已形成。打开帧面板,选择第一帧。将层面板屏蔽的公告牌显示出来,并进行剪切。  13、在帧面板中新建空帧,粘贴对象至画布内。对当前公告牌进行由右至左的钟摆动画设置。选择修改菜单、动画、选择动画命令,弹出动画属性设置窗口。进行参数的设置,其中各参数与第九步相同,仅需要给旋转方向上变化为顺时针。如图。; g: c* f" Q0 g

- ]6 U7 P% V1 w8 e% a. n+ S$ g7 p! X  r6 {+ \# K! R

6 f8 d, g$ u8 G4 Q: _( c( u( }  14、将该公告牌参照第十一步修改元件中心的方法进行位置的移动。  15、这样,由右至左的钟摆动画效果就完成了,在帧面板中将Gif动画效果设置为启永久,让动画连续播放。再导出为Gif动画文件,最终效果图如下所示。- [  l* w' G" N' _

/ g' \% i3 V# x9 S* g5 N8 h6 O4 Y
; J! B& {: w) A' n4 K' t  o! z8 q. A' g6 P" X+ K  U
  制作技巧提示:  ①在位置调整时,比如中心点的对齐、旋转等,可以借助于FW中的辅助线。  ②使用动画面板调整好旋转角度生成动画后,建议不要在帧面板中进行删除帧了操作了。如果需要调整角度,可以在画布上对元件对象进行选择右键、动画、设置,在弹出动画设置窗口中再进行调整。  Fireworks制作的Png源图如下。
$ x2 x; ?+ o( C/ O3 o8 O& y7 x  H( z+ x, D; g

2 C& N5 ]3 E* Y2 H+ J上一页[1]7 ^7 _3 k4 k5 Q3 D6 |  I- v# Q
[color=red'][2]) C* D$ X$ |, z' I! A

本版积分规则

精彩图文

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