Fireworks 4 完全教程 创建动画(Animation)(上)

[复制链接]
查看: 586|回复: 0
gggds 发表于 2009-12-27 14:02:50 | 显示全部楼层 |阅读模式
  gif动画是web创作中不可缺少的部分,从前web设计师们需要一帧一帧绘制出静止的图象,然后将他们摆放到专门的gif动画软件中再加工,其步骤之烦琐让人望而生畏。但是Fireworks的出现彻底改变了这一切,不但所有的步骤可以在Fireworks中完成,而且简洁方便,Fireworks4的动画创作工具更是比以前的版本有了新的提高。
0 m: _4 {% l  U7 j2 x- Z3 z  现在我们就来创建一幅动画,同时体会Fireworks强大的功能。首先在画板上绘制一个矩形,如图:
4 d8 \1 k1 \4 {; L5 `% u' A; d1 P3 i5 j# q- d3 ^/ q4 m  j% F

6 \2 }* B' R0 b1 F/ ]3 r+ C' @( n  D+ q
  将它转化为动画(Animation),使用菜单Insert->Convert to Symbol或者使用快捷键F8,在弹出的窗口中选择Animation,接下来的窗口会要求你设置动画的运动方式,你可以在后面的object面版中随时修改这些参数,所以暂时不管先ok,这样一个Animation就创建好了。Animation是符号的一种,符号类型的对象在左下角都会有一个箭头的标志,在这里先要说明一下3种不同的符号(Symbol)类型: 1 L0 r' G" v0 }
+ N% H$ H! y' s2 u$ m
# H7 h8 D) S* ~* c( o: G

: p3 P( Z- C7 V- _
& @# i, J7 g0 _! j( k8 x  v$ JGraphic:图形,中心是一个十字,组成动画的最基本的元素。
$ \( h& r9 W/ D' \/ X6 j+ T+ y( e  R. D) P# g/ O' l

' b" n; h; G& G( Y& T- g' D7 f8 V$ g5 n: J. x0 ]% y( f

/ P# ^+ ]2 Q4 I# s9 KAnimation:动画,中间有一个点,一系列的Graphic就是一个Animation ; Z3 v4 E6 Z' ^) K5 ~
' m* ~8 b( D0 H* T' V% v) }
# F- p7 e: i  a& _  _
8 n+ k; I, m1 k0 O8 |) M1 o
: G! _1 ~! z, C/ o0 v. k' V: p
Button:按钮,带有切割热区的就是按钮。
( i" n& e& [; Q, ^! M* ~' u
# {# e9 x5 A& I
7 P3 B5 J! n) k0 Z/ L
* ~0 D  `3 n3 E9 W  从上面可以看出来,这部分的概念和Flash非常相似,只是将Movie Clip的名称换成了Animation,其实本质是一样的。不同类型的符号之间可以非常方便的互相转换,打开Library面版,点击面版右上角的箭头在弹出的菜单中选择Properties就可以转换符号的类型。 % I  w$ \8 v7 Y* \: d
5 ]5 x4 \! c! x7 n+ O: E  R1 X0 f

5 ^, k& j, |- }" I) v* |, l" h* i5 F4 Y$ P# f
  还有一点顺便在这里提一下,选择菜单Modify->Symbol->Break Apart可以将一个已有的符号恢复到原来的类型,恢复后它会以Group的形式出现,Ungroup一下就会完全呈现出它最原始的形态(矢量图形、位图、文字或其他的类型)。1 b0 e3 u/ o& f
  在了解了这些概念后,我们开始真正的创建一幅动画。选中刚才已经转换好的那个Animation,同时打开object面版,在object面版中修改动画运动的方式。' o: `. {" ]; L- `
4 {& z, r  ~6 x0 ?

  @3 a  Q1 p, H( d+ b) P" w) H/ p1 U0 S$ Z7 S! Z
* d3 @3 z' _5 O2 L: Z
Frames:设定这段动画用多少帧来完成,理论上帧数越多动画越流畅,但同时文件的尺寸也越大。 * ]3 `  n. G! `. F; Z

% q. A: z0 |4 c5 H, H7 K
- b8 P/ ]7 e- U! Z; n7 x
, _1 y: {- {4 d8 j+ A* o: l
! w5 M# M. f# x, T3 zScaling:缩放,默认值是100,即不进行缩放,如果数字小于100则代表缩小,数字大于100则放大。
9 L1 b% `! M: b" y% m: h. w1 B0 S8 B  p
6 `% `5 b2 X4 o+ j6 }$ F

7 Z: `+ ^7 R, J  u) a- q* c. Z
) x' t$ ]7 @6 NOpacity:透明度,有2个数值,即代表透明度从多少变化到多少。
, E1 j1 s. g, V9 Q& O& x  _' b0 _/ L) p7 y" D

0 K. P5 D* R* |- p$ ?
, M6 Z8 Y% U8 o
, {. y+ z' `9 U$ |Rotation:旋转,单位是角度,CW为顺时钟方向,CCW为逆时钟方向。( d- w$ `5 X1 M5 n$ c

5 h' X8 |( p$ p: t' _4 e' ?
9 ~  ]: ^  X1 W& i" Q
5 g' v' `/ ~7 u7 F# ^2 c. a2 O( O  在这里我不得不又一次说,它和Flash是多么的相象!) O) n1 i6 a% Q% H. a' w- ?- B; |
  设定Frames为15,Scaling为150,即动画终止时动画符号的大小为原始大小的1.5倍,Opacity为100到0,即一个渐淡消失的效果,Rotation为90CW,即顺时钟旋转90度。完成后从符号中央可以拖出一条动画线。
1 |( H# O9 I: e; K/ D# X) h+ i% t. H- O) m9 c" c

: e# ?6 i; w: g
2 [: w/ G, P' r. h7 |$ X  当看到这条动画线的时候我又一次的似曾相识了,对了,它就是在Director中的动画线,现在也被借用到Fireworks中来了,是整合的需要吗?这个问题只有问Macromedia了。绿色的点代表动画的开始帧,红色的点代表动画的结束帧,中间每个兰色的点代表每个过度帧的形态。你可以通过拖动始末点来改变动画的运动轨迹。下面的图片显示了每一帧时符号的形态。
8 X# K& p9 |' o( X$ b* E' O6 C  ]) w- U( j$ Z% r2 z$ r
) E6 J4 d) }3 W' B1 ]. [9 u

8 W* _# ?/ O$ i% L, |8 O$ a6 p! ?  ok,play一下来欣赏刚才的成果。

本版积分规则

精彩图文

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