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

[复制链接]
查看: 611|回复: 0
gggds 发表于 2009-12-27 14:02:50 | 显示全部楼层 |阅读模式
  gif动画是web创作中不可缺少的部分,从前web设计师们需要一帧一帧绘制出静止的图象,然后将他们摆放到专门的gif动画软件中再加工,其步骤之烦琐让人望而生畏。但是Fireworks的出现彻底改变了这一切,不但所有的步骤可以在Fireworks中完成,而且简洁方便,Fireworks4的动画创作工具更是比以前的版本有了新的提高。, H/ q! k! I/ P
  现在我们就来创建一幅动画,同时体会Fireworks强大的功能。首先在画板上绘制一个矩形,如图:' D; T, Z; M7 A; g* d  s
7 U1 J3 l* A  }( w8 b, y0 W

9 j6 G1 N' o1 v6 ?! [* c7 ^4 R* w0 r& c, p# `8 o' R$ F
  将它转化为动画(Animation),使用菜单Insert->Convert to Symbol或者使用快捷键F8,在弹出的窗口中选择Animation,接下来的窗口会要求你设置动画的运动方式,你可以在后面的object面版中随时修改这些参数,所以暂时不管先ok,这样一个Animation就创建好了。Animation是符号的一种,符号类型的对象在左下角都会有一个箭头的标志,在这里先要说明一下3种不同的符号(Symbol)类型:
# l1 w' w: q$ U/ r6 z0 ]3 ^. c% p5 s; i) L: j4 h7 L
! |- _4 o# H9 ]# \/ ~' x& u5 o

- v' F, C4 O3 w; m% J7 T
5 M* A$ h2 ?5 I" g9 |% F0 a+ ~4 FGraphic:图形,中心是一个十字,组成动画的最基本的元素。 . p7 Q+ R/ m0 t& i3 H; I. q: A* O
; |. w& g6 U( H+ X5 Z$ H0 B
/ W: [+ L5 v# Q

; [7 F+ ?( ]) E$ S! O+ X8 U. w4 {! h1 D0 u' }! a
Animation:动画,中间有一个点,一系列的Graphic就是一个Animation
& C: _1 k8 ?+ f1 D% S# \" @6 a6 u4 k+ s3 ]' L: G
4 N) K# s  z" f- V# b: j) j6 S- D) {; X
. {3 R: o: p  k% g
4 c$ i' C, E; s3 O
Button:按钮,带有切割热区的就是按钮。
" n. a2 ^% a' J& u9 r  U
7 u9 ~: I! ^, @' t& Z
; p0 \! v4 ^8 y0 p- O* ^' U9 U" Y) {  C0 j% Y& `
  从上面可以看出来,这部分的概念和Flash非常相似,只是将Movie Clip的名称换成了Animation,其实本质是一样的。不同类型的符号之间可以非常方便的互相转换,打开Library面版,点击面版右上角的箭头在弹出的菜单中选择Properties就可以转换符号的类型。
: w8 ~. d0 C, X) J" A' y2 y! x7 `9 p( T; u" B0 I4 N
- Q! c. w( r; N) s
  H% U5 k2 b* Y, m4 _
  还有一点顺便在这里提一下,选择菜单Modify->Symbol->Break Apart可以将一个已有的符号恢复到原来的类型,恢复后它会以Group的形式出现,Ungroup一下就会完全呈现出它最原始的形态(矢量图形、位图、文字或其他的类型)。
* U  Q9 t( F4 b4 y4 f0 j2 u& K. F  在了解了这些概念后,我们开始真正的创建一幅动画。选中刚才已经转换好的那个Animation,同时打开object面版,在object面版中修改动画运动的方式。
' M. J; u: Z( f# |+ V
: p/ m5 U; s/ O; @3 Q6 J: }9 i+ V  N8 R1 f8 z
; d0 N& W6 N) |: {" S& p: W% j
2 @3 k2 c; r1 ~: e, b9 N
Frames:设定这段动画用多少帧来完成,理论上帧数越多动画越流畅,但同时文件的尺寸也越大。
4 A3 |+ O: M, A( E8 A. h$ m$ f1 W1 `" A. _

" {" J" c( @  i) s7 V$ H" v% s4 p7 g: I! J( _

0 I; {$ I7 I% F4 |3 NScaling:缩放,默认值是100,即不进行缩放,如果数字小于100则代表缩小,数字大于100则放大。 , d8 N* A2 Q3 q2 l8 ?5 o
4 }/ i2 i8 N/ n: O7 n/ X2 M7 y; K0 M
  b' q3 V, ~8 y5 W- K
, O0 w7 x& i/ b5 W6 J( o  B* ^

! X* Y+ f7 S8 C8 W7 ]: kOpacity:透明度,有2个数值,即代表透明度从多少变化到多少。
. i. {# e4 I  c( S9 \( ]. G* i7 d
' I' |& O7 w# T( [' s2 |
" D1 L; ]4 w  h5 W) n4 T
1 i. ~% T+ p" X& Z: o/ j  @( k
Rotation:旋转,单位是角度,CW为顺时钟方向,CCW为逆时钟方向。
4 `) `9 s6 s# |" S; S
- g6 u. J. b1 D
+ L) c8 G$ V$ v3 G! N' `+ |8 m6 x0 I# W0 r
  在这里我不得不又一次说,它和Flash是多么的相象!, k2 ]6 Q8 j$ c
  设定Frames为15,Scaling为150,即动画终止时动画符号的大小为原始大小的1.5倍,Opacity为100到0,即一个渐淡消失的效果,Rotation为90CW,即顺时钟旋转90度。完成后从符号中央可以拖出一条动画线。
: ^2 V* e$ Q, t* p9 i" f% c0 k- j. g

% H& V2 g& y2 R0 s9 n; F2 z" i( ?: R
  当看到这条动画线的时候我又一次的似曾相识了,对了,它就是在Director中的动画线,现在也被借用到Fireworks中来了,是整合的需要吗?这个问题只有问Macromedia了。绿色的点代表动画的开始帧,红色的点代表动画的结束帧,中间每个兰色的点代表每个过度帧的形态。你可以通过拖动始末点来改变动画的运动轨迹。下面的图片显示了每一帧时符号的形态。 & a3 l6 o' `. e4 x$ C) j/ i7 i
0 t* V! P' W$ F# j) S8 [
7 @: ~. n- s  |* y, Z, t
# j% r8 t. P' @  B: m/ d
  ok,play一下来欣赏刚才的成果。

本版积分规则

精彩图文

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