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

[复制链接]
查看: 641|回复: 0
gggds 发表于 2009-12-27 14:02:50 | 显示全部楼层 |阅读模式
  gif动画是web创作中不可缺少的部分,从前web设计师们需要一帧一帧绘制出静止的图象,然后将他们摆放到专门的gif动画软件中再加工,其步骤之烦琐让人望而生畏。但是Fireworks的出现彻底改变了这一切,不但所有的步骤可以在Fireworks中完成,而且简洁方便,Fireworks4的动画创作工具更是比以前的版本有了新的提高。% w$ C, _3 s+ N% H- q( M1 o4 p
  现在我们就来创建一幅动画,同时体会Fireworks强大的功能。首先在画板上绘制一个矩形,如图:
& o, N  D& U0 o& v7 g8 l& C1 Y/ w, x2 b! J1 i& [' O% P- c' D4 O

& V$ t5 m0 j% G: }4 Y+ q$ T# H  _1 D. N
  将它转化为动画(Animation),使用菜单Insert->Convert to Symbol或者使用快捷键F8,在弹出的窗口中选择Animation,接下来的窗口会要求你设置动画的运动方式,你可以在后面的object面版中随时修改这些参数,所以暂时不管先ok,这样一个Animation就创建好了。Animation是符号的一种,符号类型的对象在左下角都会有一个箭头的标志,在这里先要说明一下3种不同的符号(Symbol)类型:
$ I; O6 @9 M& L$ S( P
9 d( {4 v6 q7 I6 I
: u7 c2 g5 i# ~& s/ G$ Z' r
$ Z# w5 y1 a! L9 @+ I) `8 j! f$ j6 a9 P$ k" ?8 M: n
Graphic:图形,中心是一个十字,组成动画的最基本的元素。
' x6 N* e5 ?5 A6 U
7 `8 y+ @' a: C+ R9 [6 u3 q, [' O: C4 E

' d4 Y6 F+ [3 _6 @. H% p# S* L" \/ G
Animation:动画,中间有一个点,一系列的Graphic就是一个Animation
2 I4 J, a. U0 w: }% [8 k# ^9 K
- J: T- a0 ~1 S: T2 ~; I' B
9 z: ]  a8 x; d( \
# Y# C, \& D1 O7 l+ {) x6 `0 [
Button:按钮,带有切割热区的就是按钮。
; b  K' @. e' k% ]2 l& E1 T  t/ B2 A% ]

0 `* z" a, ]* a5 x* d, T# ]7 L
! p4 u" W: L" |. F* P5 J$ |2 u  从上面可以看出来,这部分的概念和Flash非常相似,只是将Movie Clip的名称换成了Animation,其实本质是一样的。不同类型的符号之间可以非常方便的互相转换,打开Library面版,点击面版右上角的箭头在弹出的菜单中选择Properties就可以转换符号的类型。 ( O% A: z4 {% n! ]1 X- L

, U8 S" M; M/ y8 G1 z3 A& e) [2 r
- d- c7 M# L4 z& E' C' [- S' T$ P# s+ ?4 Z
  还有一点顺便在这里提一下,选择菜单Modify->Symbol->Break Apart可以将一个已有的符号恢复到原来的类型,恢复后它会以Group的形式出现,Ungroup一下就会完全呈现出它最原始的形态(矢量图形、位图、文字或其他的类型)。) q- W& }3 A3 d9 j; |( c
  在了解了这些概念后,我们开始真正的创建一幅动画。选中刚才已经转换好的那个Animation,同时打开object面版,在object面版中修改动画运动的方式。" j! J7 j5 S: X: |, ~2 b+ D. X. l
% q, E9 O8 e( B6 A, M

# A: i) y$ S4 L" v2 \4 _, m. A5 Q1 J% e9 r8 r

) y; j+ b. s: Q: {, KFrames:设定这段动画用多少帧来完成,理论上帧数越多动画越流畅,但同时文件的尺寸也越大。
+ ]- G5 D) i* Z: a5 A" x, U
6 b/ K& w, g/ W5 f; w# y8 N+ R3 q  f4 k2 b: _# x( ]

0 `4 r) J8 a, j2 N: r; b( Z9 p; X5 ^3 A
Scaling:缩放,默认值是100,即不进行缩放,如果数字小于100则代表缩小,数字大于100则放大。
& }4 x: ~- x- {6 L+ y+ V8 F) I# g+ N  q2 Y2 b3 W$ F" R# t
5 }4 L/ c$ d( J

6 S; @4 E( f9 G1 Q2 `
" Z3 Q  ?0 a9 hOpacity:透明度,有2个数值,即代表透明度从多少变化到多少。
" s0 @6 ?5 s7 ~) @9 r, ^9 _: ]/ m4 p7 g* X- O) S
: n$ f4 o; r$ G; @
3 X% @" m. W6 A' v/ S  ?& L7 }
( A+ k' E2 O: Y
Rotation:旋转,单位是角度,CW为顺时钟方向,CCW为逆时钟方向。1 _  [+ x# [6 d% ^
0 a, X  P! N% ?2 v" q( ^0 b

& R, v, @. I9 c0 c, G8 m4 i$ T
, _+ K- K5 r/ l3 x  在这里我不得不又一次说,它和Flash是多么的相象!
; s+ i2 d( i+ [  设定Frames为15,Scaling为150,即动画终止时动画符号的大小为原始大小的1.5倍,Opacity为100到0,即一个渐淡消失的效果,Rotation为90CW,即顺时钟旋转90度。完成后从符号中央可以拖出一条动画线。 - g$ y+ t& b6 M6 F  Q( n- D
6 q+ L+ d; K& E" ?& {7 V, d3 E

' i) @8 k+ U6 h( C% S0 c" N9 W
0 R& q- G% l) H  当看到这条动画线的时候我又一次的似曾相识了,对了,它就是在Director中的动画线,现在也被借用到Fireworks中来了,是整合的需要吗?这个问题只有问Macromedia了。绿色的点代表动画的开始帧,红色的点代表动画的结束帧,中间每个兰色的点代表每个过度帧的形态。你可以通过拖动始末点来改变动画的运动轨迹。下面的图片显示了每一帧时符号的形态。
8 f+ z* q% k. S  g$ j7 S! P' g# q3 u: d0 f; m
: \# \, H2 ~( R/ {  ?

* G# f/ g8 G4 D9 E4 x  ok,play一下来欣赏刚才的成果。

本版积分规则

精彩图文

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