力合科创 南京:图文教程:详解Fireworks中的动画制作

有过FLASH动画制作基础的朋友一定知道，
在FLASH中将绘制的图像转换成的“图像元件”或“动画元件”是可以通过软件的内建指令，
产生运动及其它变化的效果。而在Fireworks中也沿用了这种动画制作方式，
从而大大减省了GIF动画制作时的繁琐性。而在本篇教材中，
我们也只针对软件直接生成的动画效果进行分析，不对手工分桢的动画制作进行讨论。
一、动画的基本运动
在Fireworks中，动画的运动方式可分为四个基本动作：
1、直线运动：图像由A点直线移动至B点；
2、旋转：图像原地进行顺时针或逆时针旋转；
3、不透明度渐变：图像的透明度发生变化；
4、缩放：图像的产生放大或缩小的变化。
每种动画效果即可独立作用于一个图形对象，也可同时作用于一个图形对象上。
二、图像的动画制作
在Fireworks中，将绘制完成的图形对象制作成动画效果，
可以通过“动画”的设置对话框直接完成。同时也可以将图像转为“图像元件”后，
通过“补间实例”功能来间接实现。
1、使用“动画”设置框制作动画
点选将要制作成动画的图形对象后，
选择菜单栏上的“修改——动画——选择动画”命令，
将会弹出“动画”的设置对话框，如图01。

图01
在这里，可以设置动画的帧数、图像的移动距离、运动方向、缩放程度、
不透明度的变化以及旋转的方向和角度等。设置完成后可点击“确定”按钮。
如果此时的“帧”浮动面板里的帧数少于当前将要创建的动画帧数时，
则会弹出一个提示框，示意是否为当前动画建立足够的帧数。
再次点击“确定”后，软件将自动把该图形对象转成动画元件并按刚才所设置的动画参数，
自动成动画效果。我们可通过Fireworks画布文档下方的动画播放按钮进行效果查看。
如图02。

图02
2、使用“补间实例”功能制作动画
这是一种间接制作动画的方式。具体的操作方法是，
先选中图形对象后按F8键，在“元件属性”对话框中将图象转为“图形元件”。
此时打开“库”浮动面板的话就会看到，这里多了一个“图形元件”。
说明该对象已被成功转换为“图形元件”。
如图03。

图03
而原来画布中的图像左下角则会多出一个小箭头标志，
表明这是该“图形元件”的一个分身。
我们从“库”面板中用鼠标将该“图形元件”拖拽至画布当中，
为该“图形元件”建立第二个分身对象。同时选中这两个分身对象后，
在任意一个分身对象上点击鼠标右键，
并从弹出菜单中选择“元件——补间实例”命令，
从而启动“补间实例”对话框，
如图04。

图04
在“步骤”栏中可输入这两个分身之间过渡的图像步骤，
在这里我们可以理解为该动画设置帧数。
而“分散到帧”复选框则是将这两个分身之间的过渡图像按顺序分发到每个帧之中。
因此只有选中了该项，整个动画才能完成。
在点击“确定”按钮后即可生成动画效果了。
如果想让图像做成动画后产生缩放、不透明度渐变以及旋转效果的话，
可在启动“补间实例”之前对这两个分身对象进行不同程度地缩放、不透明度设置和旋转后，
再进行“补间实例”的操作。
引用 Fireworks视频教程和精选图形实例制作
网页教程代码 2009-11-29 14:49:53 阅读133 评论0 字号：大中小
引用
互联友吧 的Fireworks视频教程和精选图形实例制作
',1)">

第一章 基础操作（已发布）对本视频教程有问题请点这里
1.1必读 1.2学习目标 1.3学习方法
1.4启动程序 1.5界面简介 1.6关闭程序
1.7界面布局 1.8新建文件 1.9保存文件
1.10关闭文件 1.11打开文件 1.12撤销、重复、重做
1.13标尺辅助线 1.14网格 1.15调节显示比例
1.16平移 1.17思考延伸
第二章 工具箱（已发布）对本视频教程有问题请点这里
2.1学习思路 2.2工具箱 2.3指针工具
2.4部分选定工具 2.5缩放工具 2.6倾斜工具
2.7扭曲工具 2.8裁切、导出区域工具 2.9选取框工具
2.10套索工具 2.11魔术棒工具 2.12刷子工具
2.13铅笔工具 2.14橡皮檫工具 2.15模糊工具
2.16橡皮图章 2.17替换颜色工具 2.18红眼消除工具
2.19滴管工具 2.20油漆桶工具 2.21渐变工具
2.22直线工具 2.33钢笔工具 2.24矢量路径工具
2.25矩形工具 2.26其他形状的绘制 2.27文本工具
2.28自由变形工具 2.29刀子工具 2.30热点工具
2.31切片工具 2.22颜色工具区 2.33视图工具区
2.34思考延伸
第三章 常用面板（已发布）对本视频教程有问题请点这里
3.1学习思路 3.2属性面板 3.3图层面板
3.4帧面板 3.5历史记录面板 3.6样式库
3.7混色器面板 3.8思考延伸
第四章 修改对象（已发布）对本视频教程有问题请点这里
4.1学习思路 4.2对齐对象 4.3组合路径——接合和拆分
4.4组合路径——联合 4.5组合路径——交集 4.6组合路径——打孔
4.7组合路径——裁切 4.8节点编辑 4.9改变路径
4.10文本操作 4.11思考延伸
第五章 滤镜（已发布）对本视频教程有问题请点这里
5.1学习思路 5.2添加滤镜 1 5.3添加滤镜 2
5.4思考延伸
第六章 效果（已发布）对本视频教程有问题请点这里
6.1学习思路 6.2添加效果 1 6.3添加效果 2
6.4思考延伸
第七章 动画 (已发布)
7.1学习思路 7.2打开时生成动画 7.3创建动画
7.4编辑元件 7.5删除动画 7.6导出动画
7.7思考延伸对本视频教程有问题请点这里
第八章对本视频教程有问题请点这里
后续内容将放置到新专题中。请关注网易学院。近期大量视频教程将推出。
精选图形实例制作
用Fireworks制作仿真公章的教程
Fireworks制作透明按钮的教程
Fireworks滤镜巧绘极光字特效
教你Fireworks使用切片工具
Fireworks制作非常有特色的打孔效果
用Fireworks为gif图片批量加水印教程
Firework小技巧轻松绘制特殊切角图形
Fireworks制作简单清晰的新闻框
Fireworks绘制立体字图标教程
Fireworks制作仿3D光亮DNA桌面壁纸
另类抠图技巧：使用Fireworks五种巧妙抠图
Fireworks层层激发彩魅力效果
Fireworks滤镜巧绘极光字特效
用Fireworks创意奇妙的网页隐藏图像
Fireworks创意遮罩动画制作
用FW MX轻松制作Gif动画
Fireworks制作礼花动画
Fireworks MX制作像素动画
Fireworks MX之旅：导入文字的再编辑
Fireworks 绘制国画牡丹
Fireworks MX 模拟灯泡效果
巧用Fireworks遮罩做平面设计
Fireworks制作空间环绕文字动画
Fireworks动画制作:飞机和降落伞
Fireworks制作字体遮罩动画
Flash和FW合作旋转文字动画
Fireworks 简单立体文字特效
Fireworks制作GIF动画广告
Fireworks三维光感表现实例：立体大胶囊
Fireworks 制作倾慕系列图标
Fireworks 随我做个性台历
制作网页公告的装饰
EyeCandy滤镜打造旋转立体四叶草动画
绘制超绚丽魔幻图案
简单制作羽毛扇
Fireworks教程：放射光感字体
Fireworks钢笔绘制飘逸的红彩带
轻松制作水晶小图标
制作精致英文网页导航
制作水波gif动画
用Fireworks一步步制作网页
Fireworks渐隐线的两种做法
Fireworks制作浪漫彩色网格背景
firework制作木头效果
Fireworks里做立体倒影
用Fireworks仿制的ICO
Fireworks制作隐藏彩照
Fireworks制作文字效果的总结
Fireworks活用发光工具