Loading动画的制作

[复制链接]
查看: 217|回复: 0
gggds 发表于 2009-12-27 03:25:10 | 显示全部楼层 |阅读模式
  说是Loading动画,其实只不过是用Fireworks4做的一段动画效果,千万别误会是Flash中的Loading哦,用Fireworks可不能进行编程,如果哪位会的话,请告诉我,呵呵。 实际效果是这样的。请看下图
9 J0 ~8 Y0 ^3 S" S1 p4 d: p
  u8 R2 \) ~6 k+ z$ q0 R/ C; z
# d7 z1 u; {6 |& ~
& o4 M2 t! j8 ^; U/ R( [: {3 |4 Z1 f7 q5 X1 M' {: E2 l
(这是一个GIF动画)
% B% x+ @8 D  G& F8 T  制作方法如下:  一、 新建文件,新文件的尺寸大小为300*200,画布颜色为白色。  二、 选择工具面板中的矩形工具,按住shift键,画一个正方形,填充颜色为红色,打开info面板,设置其W和H的值都为20,按回车表示确认。 3 V9 H1 ?3 b* X3 ~- c- F# Q7 T/ P# c

6 y) l% P+ G. }) q5 y% g+ f+ r) E4 o

0 V6 ~# G( Q: G5 E  Q% G. [

# K- a/ C- d' }  三、 选择这个红色的正方形,按F8键,在符号属性对话框中,选择其类型为Graphic,点击OK按钮。   四、 使用菜单命令edit->clone,克隆这个实例,这时二个实例处于同一个位置,上下重叠。再使用菜单命令modify->transform->numeric transform,也可以使用快捷键Ctrl+Shift+T. 6 S( f, {4 @" [$ F
: `! D, L' R' _: X( ?6 G# x3 G% c7 o

3 i! H3 ?8 I# |" ]/ w) T
9 |- F& x# Y; w3 Y7 w* h7 l
  五、在数字变形对话框中进行如下设置。在下拉菜单中选择resize(调整尺寸)。取消对Constrain Proportions的取消,这样的话对象的长和宽就不用成比例进行缩放了,否则你调整一个,另一个也会跟着比例进行调整。在宽度的文字输入框中输入200。点击OK按钮。2 _; K/ \+ T  D- c" x  S; Q' P

! e" E, f0 l, {0 }
' n4 Z: E2 e: ]$ o% ~' T
/ i8 [$ p7 i. k3 w! C

' {, z! w/ Y9 L$ ~9 _& q9 |  六、用指针工具全选这二个实例,使用菜单命令Modify->Align->left,使这二个实例左对齐,看下图; ]- B" G) Z: x5 l6 p# x
; K' ~, C; q# O8 s
3 r9 _3 y; Q- {
( f- T. }/ V/ G8 ~
9 K; y9 s; g# {3 k3 a
  七、此时二个实例都处于被选择状态,使用菜单命令Modify->Symbol->tween Instances。在弹出的Fireworks4的警告窗口中点击OK按钮。在实例对话框中设置Steps为15,选定Distribute to Frames。这样这些生成的实例就会分布到每个帧中去。点击OK按钮。) p# u1 T; D" Y3 B8 ~5 P

( }& V& i3 B, m2 Z. A. _5 n3 ^% E6 Z6 y% T
7 V4 i0 w5 K$ F  o2 M( l( a2 X

" P1 D0 N2 b8 y8 `+ E0 R  八、制作完成了,感觉满意的话,我们就可以把这个动画进行输出了。使用菜单file->export preview,在输出对话框中,format(格式)选择为animated gif(动画GIF)按export按钮输出到指定的目录中。好了,这个Loading动画效果就做完了?欣赏一下吧。:)

本版积分规则

精彩图文

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