|
|
gif动画是web创作中不可缺少的部分,从前web设计师们需要一帧一帧绘制出静止的图象,然后将他们摆放到专门的gif动画软件中再加工,其步骤之烦琐让人望而生畏。但是Fireworks的出现彻底改变了这一切,不但所有的步骤可以在Fireworks中完成,而且简洁方便,Fireworks4的动画创作工具更是比以前的版本有了新的提高。) F% \$ @; w2 D. M$ b
现在我们就来创建一幅动画,同时体会Fireworks强大的功能。首先在画板上绘制一个矩形,如图:
, b! I$ D0 @; Y2 G5 u1 j" K
5 M9 n2 y' L) m s0 e
3 I5 d* \2 X8 ^8 H( G$ L" L
" f% s% X# ?" n- d0 m( b& V 将它转化为动画(Animation),使用菜单Insert->Convert to Symbol或者使用快捷键F8,在弹出的窗口中选择Animation,接下来的窗口会要求你设置动画的运动方式,你可以在后面的object面版中随时修改这些参数,所以暂时不管先ok,这样一个Animation就创建好了。Animation是符号的一种,符号类型的对象在左下角都会有一个箭头的标志,在这里先要说明一下3种不同的符号(Symbol)类型: ; Q5 v! Z2 W' \# z
Q |" p$ ^6 ?5 n
" ]) h, v+ z8 J( j# T

1 l3 Y" e" `! b$ U4 a) R$ u% Y& g1 C8 i
Graphic:图形,中心是一个十字,组成动画的最基本的元素。 ( l7 i: e( j4 M2 R& d9 ~
K' j: j1 H$ n
' N, w* `7 K/ {
- ?! F2 } [8 v8 w
! ^. }, {4 p# x6 M W( |& H8 XAnimation:动画,中间有一个点,一系列的Graphic就是一个Animation
" H! h% j0 Q) D2 R/ @4 k; p. [ s
' K# o2 D! r/ z
! \, F7 c( b, F * ^: A, G( ]$ S+ m
+ w' Q; D' s0 a- E
Button:按钮,带有切割热区的就是按钮。
) Z$ t2 u8 k1 I& s4 q$ Y
+ J3 h7 W! X- r0 ~. y+ X & H1 K0 N' Z. X: q
9 ?$ s( M% k/ p' K2 |$ Z
从上面可以看出来,这部分的概念和Flash非常相似,只是将Movie Clip的名称换成了Animation,其实本质是一样的。不同类型的符号之间可以非常方便的互相转换,打开Library面版,点击面版右上角的箭头在弹出的菜单中选择Properties就可以转换符号的类型。 9 D2 q* `( }" ^& N- v
y+ j* l. O0 f
% G+ L& ]- Z# z6 M: m h. [' l+ C8 t8 A: K. A# D
还有一点顺便在这里提一下,选择菜单Modify->Symbol->Break Apart可以将一个已有的符号恢复到原来的类型,恢复后它会以Group的形式出现,Ungroup一下就会完全呈现出它最原始的形态(矢量图形、位图、文字或其他的类型)。
$ T" Y/ H2 e ]/ V8 k$ \1 N- a 在了解了这些概念后,我们开始真正的创建一幅动画。选中刚才已经转换好的那个Animation,同时打开object面版,在object面版中修改动画运动的方式。
4 z# L2 ]) I2 H, y9 z; I3 o6 H# @' D8 C
7 B/ p* J1 P2 h' q. x
u, \: ^6 I9 W( e+ w5 H& h* V9 B: ~: p) j7 f& G
Frames:设定这段动画用多少帧来完成,理论上帧数越多动画越流畅,但同时文件的尺寸也越大。 2 v6 v, Y0 M6 n# `) G% Q% |7 ?
- j$ }. Y: e. \7 p& t+ s# d' F
8 `& \' _! y! m8 F& @
: n2 L* T: v. }8 F& g k# v* X. t
( Z: z) k, e' U& d9 X9 hScaling:缩放,默认值是100,即不进行缩放,如果数字小于100则代表缩小,数字大于100则放大。 _2 E& H( Z: w( a
5 B8 {9 @ {. q5 C3 z" U Q5 y
- I- l+ u4 j' X. s$ |

! t& \' J9 T+ p% }- b' e2 j8 v& \ a* C$ u6 b5 P
Opacity:透明度,有2个数值,即代表透明度从多少变化到多少。* H: S; v# x6 O# n
% P# W2 p* e! ]' X! q4 g
5 c6 H" K5 h+ S+ m. I! F8 k; y' j
6 \- Q: x1 }0 P- O: i% ^* K- M5 @+ T5 F
Rotation:旋转,单位是角度,CW为顺时钟方向,CCW为逆时钟方向。
4 {( r# |7 ]7 z1 h# t8 s. s& S# ?/ ~( _, c

$ g5 a9 r7 o4 Q0 |9 ]# k4 ~- {( R: Z3 S" D4 f7 p6 l) n! Z
在这里我不得不又一次说,它和Flash是多么的相象!
$ I+ `6 G" @3 q2 K+ Y 设定Frames为15,Scaling为150,即动画终止时动画符号的大小为原始大小的1.5倍,Opacity为100到0,即一个渐淡消失的效果,Rotation为90CW,即顺时钟旋转90度。完成后从符号中央可以拖出一条动画线。 " ~ Q& x. F- J$ N- I
- \: O, V# K; B- }4 y% s, g
4 O# B% ^$ q$ s9 ^0 r" R
% O6 v- I: t" {; g+ F0 H# h% U 当看到这条动画线的时候我又一次的似曾相识了,对了,它就是在Director中的动画线,现在也被借用到Fireworks中来了,是整合的需要吗?这个问题只有问Macromedia了。绿色的点代表动画的开始帧,红色的点代表动画的结束帧,中间每个兰色的点代表每个过度帧的形态。你可以通过拖动始末点来改变动画的运动轨迹。下面的图片显示了每一帧时符号的形态。 / c7 x6 C( D9 Q
3 p4 p! V w6 L0 O8 q5 E" ^
$ F; g9 m5 C& O+ i
3 |9 X/ i$ H) ^" Q6 X7 l ok,play一下来欣赏刚才的成果。 |
|