Loading动画的制作

[复制链接]
查看: 229|回复: 0
gggds 发表于 2009-12-27 03:25:10 | 显示全部楼层 |阅读模式
  说是Loading动画,其实只不过是用Fireworks4做的一段动画效果,千万别误会是Flash中的Loading哦,用Fireworks可不能进行编程,如果哪位会的话,请告诉我,呵呵。 实际效果是这样的。请看下图
+ N% h6 ^6 g) v6 B! g
8 y$ d6 a* ]3 m4 ^: X+ o3 y$ s, a+ I3 U  B3 W4 r$ a

( b; R4 c4 ^9 i. }% X! E
1 K. P& S( w: l) h% w( B(这是一个GIF动画)
' k3 P) N" H* R& d5 Q  制作方法如下:  一、 新建文件,新文件的尺寸大小为300*200,画布颜色为白色。  二、 选择工具面板中的矩形工具,按住shift键,画一个正方形,填充颜色为红色,打开info面板,设置其W和H的值都为20,按回车表示确认。
$ j( V* i* T4 D( r

& e* P. p) A/ W5 p) G6 ^
: Q9 j9 ~9 j9 W! r$ _
9 ]# o3 D; z0 h1 f. n: ~7 p

6 T" L5 G2 I& i  三、 选择这个红色的正方形,按F8键,在符号属性对话框中,选择其类型为Graphic,点击OK按钮。   四、 使用菜单命令edit->clone,克隆这个实例,这时二个实例处于同一个位置,上下重叠。再使用菜单命令modify->transform->numeric transform,也可以使用快捷键Ctrl+Shift+T.
" h8 H8 \0 ?6 p

. [- c# j1 S$ {) {' S* f) m
4 r3 B' T) K# ^' \4 f% B. x) j
2 s' g" h) \2 e( R$ y" I' ?  T
  五、在数字变形对话框中进行如下设置。在下拉菜单中选择resize(调整尺寸)。取消对Constrain Proportions的取消,这样的话对象的长和宽就不用成比例进行缩放了,否则你调整一个,另一个也会跟着比例进行调整。在宽度的文字输入框中输入200。点击OK按钮。
  f: q0 b& |: P+ X# u6 Z6 [2 j

( ]7 @: L* W0 P. }& o1 o. l' m: u) ^) z9 R- a& H- O( j
! Q7 E, J: Q- s) M  ~* `* r2 a
, L0 N+ Z( [3 d( B
  六、用指针工具全选这二个实例,使用菜单命令Modify->Align->left,使这二个实例左对齐,看下图4 B5 M& U9 j! g  k

0 M$ J$ l$ s2 k1 [; U1 d9 c1 `9 I3 X) s% v
) ~6 N2 p  J, }; i
3 I" p7 T5 m. t# M* F2 O+ J
  七、此时二个实例都处于被选择状态,使用菜单命令Modify->Symbol->tween Instances。在弹出的Fireworks4的警告窗口中点击OK按钮。在实例对话框中设置Steps为15,选定Distribute to Frames。这样这些生成的实例就会分布到每个帧中去。点击OK按钮。
/ S* {3 U0 D, N- H! O9 [
  d% ~# R0 U7 p5 P0 X% s& }5 c
7 F* C+ P: t- \, X. \

5 P5 v* R  }( u! ?6 ^

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

本版积分规则

精彩图文

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