热点推荐
ZOL首页 > 软件资讯 > 软件学院 > 平面设计 > 用Fireworks打造奇趣像素人物动画

用Fireworks打造奇趣像素人物动画


网友世界 【转载】 2004年11月20日 18:35 评论

        Fireworks MX 2004是一款优秀的网页图形处理软件,它不单能够处理图形,而且具有强大的动画功能,今天我就教大家用一个十分巧妙的方法制作有趣的像素人物跑动动画,相信大家一定会喜欢的!在制作前,要先安装好Swifty这种特殊的字体。

 

1.启动Fireworks MX 2004,新建一个空白文档,文档大小为800×100,背景色为白色。

 

2.选择工具栏中的“文本”工具,在画布上输入26个英文字母,不一定按顺序排列,只要每个字母不重复就可以了。选中文字,在“属性”面板中选择文字的字体为刚才我们安装的Swifty字体,字体颜色可根据需要选择,在这里我们选择为棕色;文字大小为55,大小也可根据画布的大小来决定,原则上使文字充满整个画布就OK了;其它参数设置如图1所示。

1


用Fireworks打造奇趣像素人物动画

 

3.现在看看你的画布中是不是出现了如图2所示的一系列人物跑步的动作啊?下面我们就要让它动起来。

 

2

用Fireworks打造奇趣像素人物动画

 

4.选择工具栏中的“矩形”工具,绘制一个白色的矩形,大小只要能覆盖住25个小人就可以了。然后选中矩形,按CtrlC组合键复制,再按CtrlV粘贴,分别移动两个矩形的位置,使它们中间只露出第一个人物的动作(如图3)。

 

3

用Fireworks打造奇趣像素人物动画

 

小提示:为了使读者看得比较清楚,我在这里将背景暂时设置为黑色。如果将来要把这个动画导入到Flash中,可以将背景色和矩形颜色设置成和Flash背景一样的颜色。

 

5.这里一共有人物的26个动作,所以我们要让每一个动作逐个显示出来,就需要再增加25帧。打开“帧和历史记录”面板,单击右上角的三角形按钮,在弹出的菜单中选择“重制帧”选项,弹出“重制帧”对话框,设置帧的数量为25,选择插入新帧在“当前帧之后”,单击“确定”按钮就可以在当前帧的后面插入25个和第1帧一模一样的帧了。

 

6.选择第2帧,调节两个白色矩形的位置,让它们遮盖住除了人物的第二个动作以外的其它动作(如图4)。

 

4

用Fireworks打造奇趣像素人物动画

 

7.按照同样的方法分别调节其它24帧上的白色矩形位置,让它们都露出相应的一个动作图形。有的两个动作可能会离得比较近,可以再绘制一个小矩形来遮盖,比如第5帧就需要这样做(如图5)。

 

5

用Fireworks打造奇趣像素人物动画

 

8.将背景色设置为白色,然后单击“预览播放”按钮预览效果,如果速度不合适可以双击“帧和历史记录”面板中的“帧延时”,更改它的数值即可(如图6)。帧延时数值越大,动画的速度就越慢,反之,速度就越快。

 

6

用Fireworks打造奇趣像素人物动画

 

 

小提示:如果要想同时更改所有帧上的“帧延时”数值,可以在按住Shift键的同时选中所有帧,然后双击帧延时数值,在弹出的对话框中更改就可以了。

 

9.如果你对现在的动画效果满意,就可以输出了。打开“文件”→“导出”菜单,在弹出的对话框中,选择导出文件格式为swf。单击“选项”按钮,打开设置SWF格式的对话框(如图7),设置“对象”为维持路径,“JPEG品质”为100,“帧”为全部(此选项很重要,它会影响到是否把所有帧都导出),“帧频”为8每秒,单击“确定”按钮,再单击“保存”就可以将制作好的人物动画输出了。如果你要把这个动画保存成GIF格式,可以在导出文件对话框中选择“gif”格式。

 

7

用Fireworks打造奇趣像素人物动画

 

 

这个动画的制作难度不大,关键是利用一种有趣的字体来实现这种效果,非常简单实用。它的利用范围也很广,既可以导入到Flash中,也可再将画面丰富一些制作成一个效果不错的Banner广告条。

 

看完本文后的感受:文章感受排行>>
频道热词:微信  手机QQ  12306  
视觉焦点
新浪微博