`

Fireworks制作GIF动画

 
阅读更多
Fireworks制作GIF动画Banner
2007-01-13 13:56

http://tech.163.com/05/1204/17/2457ICFQ00091589.html

本小节中我们看看怎样使用Fireworks MX 2004设计一张GIF动画Banner,以一个宣传天柱山的Banner为例,主要熟悉Fireworks中帧面板、动画、元件等工具的使用方法。

完成效果如图:

 

 

 

(1) 新建一个大小为468×60的文件,设置其画布颜色为透明,并导入一幅汽车的位图图像,得到图1所示的图像。

 

 

 

图1 新建文件并导入图像

(2) 选中这幅汽车图像,单击【修改】菜单,选择【元件】|【转换为元件】,这时候会跳出元件属性对话框,将这个图形文件命名为"汽车图 1",如图2所示。

 

 

图2 将图像转换为图形元件

(3) 单击【确定】,这时候位图图像就已经转换为了图形元件了,如图3所示。选中这个图形元件,单击【修改】菜单,选择【动画】|【选择动画】,跳出动画对话框,在其中设置帧数为10,移动到380,如图4所示。

 

 

图3 位图转换为图形元件

 

 

 

 

图4 设置动画属性 图5 弹出对话框

(4) 单击【确定】,这时候跳出图5所示的对话框,询问是否添加新帧,选择【确定】,这时候在帧面板中就已经添加了新帧,得到图6所示的动画元件图像。

 

 

图6 动画元件图像

(5) 默认的帧延时的时间太短,可以将前面9帧帧延时设为10,第10帧的帧延时设为35来控制汽车运动的效果。为了将第10帧的图像始终能够显示在这个GIF动画上,所以有必要将第10帧的图像效果复制到后面的所有帧中去。设计这幅动画共有30帧,所以后面的20帧中都需要有这个第10帧中的汽车图像。这里要调用库中的图形元件来实现所有帧中都有第一幅汽车图的效果。打开帧面板,新建一帧,设置其帧延时为10。单击帧面板的洋葱皮工具,在弹出菜单中选择【之前和之后】,这样在编辑第11帧时就能够看到第10帧的汽车图像了。单击【窗口】,选择【库】,打开了库面板。发现库面板中有一个动画元件和开始保存的名为"汽车图形 1"的图形元件,如图7所示。

 

 

图7 库面板

6) 从库面板中拖动图形元件到画布之中,使其和第10帧的汽车图形完全对齐。得到第11帧的图像,如图8所示。

 

 

(7) 选中第11帧,在帧面板中单击 按钮,在弹出菜单中选择【重制帧】,在弹出对话框中设置帧的数量为9,如图9所示。

 

 

图9 复制第11帧

(8) 选中第11帧,导入另外一幅汽车图像,如图10所示。

 

 

图10 导入另外一幅汽车图像

(9) 同样单击【修改】菜单,选择【元件】|【转换为元件】,在元件属性对话框,将这个图形文件命名为"汽车图 2",如图11所示。

 

 

图11 将图像转换为图形元件

(10)单击【确定】,这时候位图图像就已经转换为了图形元件了。选中这个图形元件,单击【修改】菜单,选择【动画】|【选择动画】,跳出动画对话框,在其中设置帧数为10,移动到290,得到图13所示的图像。

 

 

图12 第二个动画元件

(11)设置第20帧的图像帧延时为35,11帧到19帧帧延时为10。然后新建一帧并设置帧延时为10,从库面板中拖动"汽车图1"和"汽车图2"到画布之上,使其和第20帧中图像完全对齐,如图14所示。

 

 

图13 第21帧图像

(12)选择第21帧,和第7步一样,将其重制9次。在21帧中导入第三幅汽车图,只将车的前半部分放在画布之中,好像车子是逐渐开进来的一样。接下来和前面一样,将它转化为图形元件,并设置动画效果,设置其帧数为10,移动为100即可,如图15所示。

 

 

图14 导入第三幅汽车图并设置动画

(13)将"汽车图 3"元件拖到第30帧中并与动画元件对齐。接着为图像添加两个小圆形和一个圆角矩形,并在矩形中添加"我也要去天柱山"几个字来增强效果,如图16所示。

 

 

图15第30帧图像

(14)将第30帧帧延时设为200即可,让它的显示时间长一些。最后保存这个文件并将其导出为一个GIF文件,这样在个人网页中就可以使用这个GIF图片了。

 

分享到:
评论

相关推荐

    Gif动画制作软件(主要用来做动画的)

    这个软件主要是用来制作GIF动画的,将静态图片转换为动态的

    用photoshop制作gif动画图片指导

    什么软件可以制作这种图片? Photoshop 、fireworks、gif animator、Ulead GIF Animator可以做GIF动画 ...用photoshop制作gif动画图片指导 只要是photoshop6.0以上的就用自带ImageReady ,先找到你要做的原图 ,然后

    Fireworks8

    Fireworks 8是第一个完全为网页制作者设计的软件。作为一个图象处理软件,Fireworks 8能够自由地导入各种图象(如 Macintosh 的 PICT、FreeHand, Illustrator,CorelDraw8 的矢量文件、Photoshop 文件、GIF、...

    网页设计与制作——Flash.Dreamweaver.Firework

    7.1 打造GIF动画广告条 7.2 创建按钮与导航条 7.3 创建层 7.4 层的基本操作 7.5 网页初步整合 7.6 层的使用 7.7 时间轴的使用 7.8 层、时间轴和行为的综合使用 7.9 创建网站相册 7.10 创建图像切片 小结 习题 第8章...

    计算机毕业实习总结实习学习总结.doc

    单击"星座物语",进入内容左侧的字体是fireworks的gif动画。左侧下方是篇有关星座 的文章,右侧的星座专题有三个关于星座的内容可单击。'漂亮穿衣法那么'内有 广告条,鼠标放在上面时停顿浮动,鼠标离开时继续浮动...

    计算机应用技术专业学生毕业实习总结.docx

    计算机应用技术专业学生... 单击"星座物语",进入内容左侧的字体是fireworks编辑的gif动画。左侧下方是篇有关星座的文章,右侧的星座专题有三个关于星座的内容可单击。"漂亮穿衣法则"内有广告条,鼠标放在上面时停止

    关于计算机毕业实习报告介绍.docx

    关于计算机毕业实习报告介绍全文共5页,当前为第1页。... 单击"星座物语",进入内容左侧的字体是fireworks编辑的gif动画。左侧下方是篇有关星座的文章,右侧的星座专题有三个关于星座的内容可单击。'漂亮穿

    计算机毕业实习报告四篇.doc

    单击"星座物语",进入内容左侧的字体是fireworks编辑的gif动画。左侧下方是篇有关 星座的文章,右侧的星座专题有三个关于星座的内容可单击。'漂亮穿衣法则'内有广告 条,鼠标放在上面时停止浮动,鼠标离开时继续...

    图形图像处理实用教程

    7.4 制作GIF动画 7.4.1 概述 7.4.2 动画制作实例 习题七 第8章 Photoshop的创作技巧与实例 8.1 组合照片 8.2 广告招贴画的设计 8.3 网页图像的制作 习题八 第9章 中文CorelDRAW 9.1 CorelDRAW概述 9.1.1 CorelDRAW的...

    网页设计毕业实习报告.docx

    接着就搜集了一些有梦幻效果的网页背景,FIASH源代码、小图标和一些GIF的动画等。 2.熟悉制作工具软件: 主页制作的基本条件有: 硬件: 一台电脑(64MB以上内存,当然越大越好啦);可以拨号上网;如果你有条件的话,...

Global site tag (gtag.js) - Google Analytics