fireworks 动画

五、优化动画 五、
设置构成动画的元件和状态后，请优化动画以使其便于加载和顺 利播放
通过循环将动画设置为重复
使动画重复之后，循环处理将尽可能减少生成动画所需的状态数。 1 选择“ 窗口”>“ 状态” 以显示“ 状态” 面板。 2 单击面板底部的“GIF 动画循环” 按钮。 3 选择动画第一遍播放后重复播放的次数。 例如，如果选择 4，则动画共播放 5 遍。“ 永久” 不停地重复 播放动画。
一、动画基础知识 一、动画基础知识
关于动画元件
动画元件是动画中的主角。动画元件可以是您创建或导入的任何 对象，并且一个文件中可以有许多元件。每个元件都拥有其各 自的属性和独立的行为，因此可以创建在其它元件淡入淡出或收 缩时在屏幕上移动的元件。 不是动画的每个方面都需要使用元件。但是，对于出现在多个状 态中的图形使用元件和实例会减小文件大小。 可以随时使用“ 动画” 对话框或“ 属性” 检查器更改动画元 件的属性。还可以在不影响文档其余部分的情况下编辑元件的 图 片。还可以通过移动运动路径来改变元件的运动。 因为动画元件被自动放到库中，所以可以重复使用它们创建其它 动画。
二、状态 二、
可以通过创建其内容将出现在“ 状态” 面板上的状态来生成动 画。 。 每个状态也都有相关的属性。通过设置状态延迟或隐藏状态， 可以在编辑动画时查看其外观。
设置状态持续时间
状态延迟指定当前状态显示多长时间，用一秒的百分之一表示。 例如，指定 50 可将该状态显示半秒，指定 300 可将该状态 显示三秒。 1 选择一个或多个状态： 2 执行下列操作之一： 从“ 状态” 面板的“ 选项” 菜单中选择“ 属性”。 双击状态延迟列。 3 为状态延迟输入一个值。 4 按 Enter 或者在“ 帧” 面板外部单击。
第五讲 动画
教学目标
通过本讲的学习掌握创建编辑位 图图像
教学内容： 教学内容：
1、 、
教学重难点： 教学重难点：
重点：了解Firworks的使用范围
一、动画基础知识 一、动画基础知识
Adobe Fireworks可以创建能够移动的横幅广告、徽 标和卡通形象等动画图形。可以通过向称为动画元件 的对象分配属性来创建动画。元件的动画可分成多种 状态，状态包含动画中的图像和对象。一个动画中可 以有一个以上的元件，每个元件可以有不同的动作。 不同的元件可以包含不同数目的状态。当所有元件的 所有动作都完成时，动画就结束了。
一、动画基础知识 一、动画基础知识
删除所选动画元件中的动画
选择“ 修改”>“ 动画”>“ 删除动画”。 元件变成图形元件，不再有动画属性。如果您以后将元件重新转 换为动画元件，它将保留其先前的动画设置。。
从文档库中删除元件
1 在“ 文档库” 面板中选择所需的动画元件。 2 将元件拖到右下角的垃圾桶图标上。
二、状态 二、
查看状态中的对象
从“ 层” 面板底部的“ 状态” 弹出菜单中选择状态。
三、编辑动画基本概念 三、
洋葱皮
洋葱皮是一种技术，用来查看位于所选状态之前和之后状态的 内容。可以很流畅地使对象变为动画，而不用在对象中来回 跳跃。 打开洋葱皮时，前后状态中的对象将变暗，以便您可以将它们 与当前状态中的对象区分开。
一、动画基础知识 一、动画基础知识
创建动画元件
1 2 3 4 选择“ 编辑”>“ 插入”>“ 新建元件”。 在“ 转换为元件” 对话框中，输入新元件的名称。 选择“ 动画” 并单击“ 确定”。 在文档面板中，使用绘图或文本工具创建一个对象。可以绘制 矢量对象或位图对象。 5 在完成对该元件的编辑之后，切换到整页
二、状态 二、
在“ 状态” 面板中移动所选对象 状态”
可以使用“ 状态” 面板将对象移动到另一个状态。仅出现在 单个状态中的对象会在播放动画时消失；您可以使它们在不 同的时 间消失和重新出现。 在“ 状态” 面板中，状态延迟时间右侧的小圆圈表示该状态 中的对象状态。 1 在画布上，选择要显示在另一个状态上的对象。 2 在“ 状态” 面板中，将选取指示器（状态延迟时间右侧的 黑色小圆圈）拖到新的状态上。 若要将选定对象复制到其它状态，请在按住 Alt 的同时，拖 动这些对象。
一、动画基础知识 一、动画基础知识
动画元件的属性
状态动画中状态的数量。可以用滑块指定状态数（最多可指定 250 状态 个），也可以在“ 状态” 框中输入任何数字。默认值为 5。 移动（仅限“ 动画” 对话框）对象移动的距离（用像素表示）。默认 移动 值为 72，但没有上限。移动是线性的，并且没有关键状态 方向（仅限“ 动画” 对话框）对象移动的方向（从 0 到 360）。还 方向 可以通过拖动对象的动画手柄来更改“ 移动” 和“ 方向” 的值。 缩放从开始到完成，元件大小的变化百分比。默认值为 100%，但没 缩放 有上限。若要将对象从 0% 缩放到 100%，原始对象必须 很小；建议使用矢量对象。 不透明度从开始到完成，淡入或淡出的度数。值的范围从 0 到 100， 不透明度 默认值为 100%。创建淡入/ 淡出需要同一元件的两个实 例：一个播放淡入，另一个播放淡出。 旋转从开始到完成，旋转的度数。值的范围从 0 到 360。要想让元件 旋转 旋转不止一圈，可以输入更高的值。默认值为 0。 “ 顺时针” 和“ 逆时针” 对象旋转的方向（顺时针 (CW) 或逆时针 顺时针” 逆时针” (CCW)）。
一、动画基础知识 一、动画基础知识
改变元件的移动或方向
所选动画元件有一个唯一的边框和一个指示元件移动方向的运动路径。 运动路径上的绿点表示起始点，而红点表示结束点。路径上的蓝点代表 状态。例如，一个有五个状态的元件在其路径上会有一个绿点、三个 蓝点和一个红点。如果对象出现在第三个点上，则第 3 个状态就是当 前状态。 通过改变路径的角度可以改变运动的方向。
一、动画基础知识 一、动画基础知识
更改动画元件的属性
1 选择一个动画元件。 2 选择“ 修改”>“ 动画”>“ 设置” 打开“ 动画” 对话框。 如果“ 属性” 检查器尚未打开，可选择“ 窗口”>“ 属性” 将其打开。 3 更改属性。 4 如果正在使用“ 动画” 对话框，单击“ 确定” 以接受更改 的属性。
五、优化动画 五、
从“ 优化” 面板中选择设置 优化”
优化过程会将文件压缩成最小的包，这会缩短 Web 下载时间。 1 选择“ 窗口”>“ 优化”。 2 在“ 优化” 面板中选择导出文件格式。 3 选择“ 调色板” 和“ 抖动” 选项。 4 在“ 优化” 面板的“ 透明度” 弹出菜单中，选择“ 索引色 透明” 或“Alpha 透明度”。 5 使用“ 优化” 面板中的透明度工具选择透明的颜色。 6 在“ 状态” 面板中设置状态延迟。
六、使用现有动画 六、
可以通过以下方法使用现有的 GIF 动画：将该 GIF 导入 Fireworks 文件中，或者 将该 GIF 作为新文件打开。 当导入 GIF 动画时，Fireworks 将它转换为一个动画元件并将其置于当前选定的 状态中。如果该动画的状态比当前影片的状态多，可以选择自动添加更多状态。 所导入的 GIF 采用当前文档的状态延迟设置。由于导入的文件是一个动画元件，因 此可以对它应用其它的动作。例如，导入一个人原地走的动画，然后应用方向和 动作属性让这个人在屏幕上来回走动。 在 Fireworks 中打开一个 GIF 动画时，会创建一个新文件，并且 GIF 中的每一个 状态都被置于一个单独的状态中。尽管 GIF不是一个动画元件，但它确实保留了 原始文件中的所有状态延迟设置。 导入文件后，可以将文件格式设置为 GIF 动画，以便能够从 Fireworks 中导出动 作。
补间
在 Fireworks 中，补间是一个手动过程，它混合同一元件的 两个或多个实例，并使用插值属性创建中间的实例。使用补 间可以 创建对象在画布间的复杂移动，以及其动态滤镜在动画的每个 状态下发生更改的对象的复杂移动。
三、编辑动画基本概念 三、
补间实例
1 选择画布上同一图形元件的两个或更多的实例。不要选择不 同元件的实例。 2 选择“ 修改”>“ 元件”>“ 补间实例”。 3 在“ 补间实例” 对话框中输入要插入到原始对之间的补间 步骤的数目。 4 若要将补间对象分散到不同的状态中，请选择“ 分散到状 态” 并单击“ 确定”。 以后可以通过选择所有实例并单击“ 状态” 面板中的“ 分 散到状态” 按钮 来完成此操作。
一、动画基础知识 一、动画基础知识
动画工作流程
1 可以从头开始创建动画元件，也可以通过将现有对象转换为元 件来创建动画元件 2 可以在“ 属性” 检查器或“ 动画” 对话框中编辑动画元件。 可以设置移动的角度和方向、缩放、不透明度（淡入或淡出） 以及旋转的角度和方向 注： 移动的角度和方向选项只能在“ 动画” 对话框中找到。 3 使用“ 状态” 面板中的“ 状态延迟” 控件设置动画速度。 （ 4 将文档优化为 GIF 动画文件 5 将文档作为 GIF 动画文件或者 SWF 文件导出，或者保存为 Fireworks PNG 文件并导入到 Flash 中做进一步编辑。
二、状态 二、
在播放期间隐藏状态
隐藏状态在播放期间不显示而且也不会导出。 1 执行下列操作之一： 从“ 状态” 面板的“ 选项” 菜单中选择“ 属性”。 双击状态延迟列。 2 取消选择“ 导出时包括”。 3 按 Enter 或者在“ 帧” 面板外部单击。
二、状态 二、
在播放期间隐藏状态
隐藏状态在播放期间不显示而且也不会导出。 1 执行下列操作之一： 从“ 状态” 面板的“ 选项” 菜单中选择“ 属性”。 双击状态延迟列。 2 取消选择“ 导出时包括”。 3 按 Enter 或者在“ 帧” 面板外部单击。
四、预览动画 四、
在工作区中预览动画
使用显示在文档窗口底部的状态控件。
在“ 预览 视图中预览动画 预览”
1 单击文档窗口左上角的“ 预览” 按钮。 2 使用状态控件
在 Web 浏览器中预览动画
选择“ 文件”>“ 在浏览器中预览”，并从子菜单中选择一个浏览器。 注： 若要在预览动画时查看动作，请在“ 优化” 面板中选择“GIF 动画” 作为“ 导出文件格式”，即使您打算将该动画以 SWF 或 Fireworks PNG 文件形式导入 Flash 也是如此。
六、使用现有动画 六、
导入 GIF 动画
1 选择“ 文件”>“ 导入”。 2 找到文件并单击“ 打开”。 3 单击并将文件拖放到画布上。
打开 GIF 动画wenku.baidu.com
选择“ 文件”>“ 打开” 并找到 GIF 文件。
六、使用现有动画 六、
螺旋式渐隐
您可以使用“ 螺旋式渐隐” 效果创建组合成多种效果的动画。
二、状态 二、
添加新状态
单击“ 状态” 面板底部的“ 新建/ 重制状态” 按钮。
向序列中添加状态
1 从“ 状态” 面板的“ 选项” 菜单中选择“ 添加状态”。 2 输入要添加的状态的数目。 3 选择要插入状态的位置并单击“ 确定”。
反向状态的顺序
您可以反向所有状态的顺序或选定范围内的状态顺序。 1 选择“ 命令”>“ 文档”>“ 反向状态”。 2 执行下列操作之一： 选择“ 所有状态” 以反向从开始到结束的状态顺序。 选择“ 状态范围”，然后选择开始状态和结束状态，以反向 所选范围之内的状态顺序。 3 单击“ 确定”。
一、动画基础知识 一、动画基础知识
将对象转换为动画元件
1 选择该对象。 2 选择“ 修改”>“ 动画”>“ 选择动画”。 3 通过设置动画属性来编辑元件。 动画控件出现在对象的边框上，而元件的副本添加到库中。
一、动画基础知识 一、动画基础知识
编辑动画元件
可以更改各种元件属性，如动画不透明度和旋转。可以使元件显 示为旋转、加速、淡入淡出或者是这些属性的任意组合。 状态数是一个关键属性。在设置此属性时， Fireworks 会自动 将完成该动作所需的状态数添加到文档中。