Loading动画的制作

[复制链接]
查看: 230|回复: 0
gggds 发表于 2009-12-27 03:25:10 | 显示全部楼层 |阅读模式
  说是Loading动画,其实只不过是用Fireworks4做的一段动画效果,千万别误会是Flash中的Loading哦,用Fireworks可不能进行编程,如果哪位会的话,请告诉我,呵呵。 实际效果是这样的。请看下图
. ^, }+ ?1 C6 p; ?, i3 z
9 _  h: c% v0 R) }1 R3 D4 L
2 s; M  T6 _5 R2 F: g" T2 K7 x3 c2 x. W( f: K

* X1 q- T* `6 x, `$ Q% r3 u(这是一个GIF动画)1 R- I) F6 P, \" \3 ], d
  制作方法如下:  一、 新建文件,新文件的尺寸大小为300*200,画布颜色为白色。  二、 选择工具面板中的矩形工具,按住shift键,画一个正方形,填充颜色为红色,打开info面板,设置其W和H的值都为20,按回车表示确认。
" |( S! A, I. W- u

0 n. {1 ^! Q( \) {( O  Q5 Q: T. x1 C2 l) \
$ f" P9 H' j  \- h

' M! [. M' }& S9 ?0 V) J9 x: l  三、 选择这个红色的正方形,按F8键,在符号属性对话框中,选择其类型为Graphic,点击OK按钮。   四、 使用菜单命令edit->clone,克隆这个实例,这时二个实例处于同一个位置,上下重叠。再使用菜单命令modify->transform->numeric transform,也可以使用快捷键Ctrl+Shift+T. 7 t) b# W5 n0 z! {0 b' G6 q- P
( b  U" b$ c( f7 b$ w+ v

) S" G2 K4 i, A) A3 m! i# i( f$ l1 f6 [
  五、在数字变形对话框中进行如下设置。在下拉菜单中选择resize(调整尺寸)。取消对Constrain Proportions的取消,这样的话对象的长和宽就不用成比例进行缩放了,否则你调整一个,另一个也会跟着比例进行调整。在宽度的文字输入框中输入200。点击OK按钮。1 ?( s5 y/ o2 }
& v9 P/ ~0 n7 D7 z
4 y+ s6 z8 i+ W# P* m

$ c$ T0 F) u+ \+ N) y, F
5 l! c3 n+ A" w' M3 r8 l2 j) D* I
  六、用指针工具全选这二个实例,使用菜单命令Modify->Align->left,使这二个实例左对齐,看下图
+ z, ~' _  g( x% U( V1 D1 d
( t. ?; m; X" i  Z0 B7 q
7 c0 i" i" I% M) K( K- W! s! V
3 v  k4 _5 T+ e( _
1 j$ S/ s! w, f* y
  七、此时二个实例都处于被选择状态,使用菜单命令Modify->Symbol->tween Instances。在弹出的Fireworks4的警告窗口中点击OK按钮。在实例对话框中设置Steps为15,选定Distribute to Frames。这样这些生成的实例就会分布到每个帧中去。点击OK按钮。9 ]2 U, r0 ^) B2 g& f5 s/ A

6 H" c: k4 d5 c( T+ N9 z' g& u4 I/ t5 g: o1 e2 u

. u- r+ w" O) j8 n* B3 `

) a7 [( \* y6 y  Y% x  八、制作完成了,感觉满意的话,我们就可以把这个动画进行输出了。使用菜单file->export preview,在输出对话框中,format(格式)选择为animated gif(动画GIF)按export按钮输出到指定的目录中。好了,这个Loading动画效果就做完了?欣赏一下吧。:)

本版积分规则

精彩图文

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