文档介绍：第8章动态效果设计
本章重点
本章将重点介绍如何使用Fireworks CS5制作GIF动画、动态按钮,对图像进行切片以及图像映射的操作。
学习目的
通过本章的学习,您可以掌握:
动画元件
状态的操作
热点和切片
添加行为
动画元件
使用Fireworks创建动画十分简单。首先制作动画元件,然后随时间改变动画元件的属性。文档中创建及导入的对象都可作为动画元件。同一个动画可以使用一个或多个动画元件,动画元件之间相对独立,互不干扰。
创建/编辑动画元件
1、选择【编辑】/【插入】/【新建元件】,弹出【元件属性】对话框。
2、在对话框的【名称】栏内输入动画元件的名称,在【类型】栏内选择【动画】。
单击【确定】按钮,在弹出的元件编辑窗口中制作动画元件。
3、编辑完动画元件的属性后单击【完成】关闭元件编辑窗口。此时在画布中会自动添加一个动画元件的实例。
4、执行【修改】/【动画】/【设置】命令,打开如图所示的【动画】对话框对动画元件进行编辑。
编辑动画路径
1、选中动画元件后,元件上会显示元件边框、路径、动画路径点,如图所示。
元件上绿色的动画路径点表示运动起始点;红色的动画路径点表示运动结束点;中间蓝色的动画路径点均表示中间的位置。动画路径点与动画的帧数目相同,每帧都会对应一个动画路径点。
2、设置动画路径点的位置,可以编辑动画路径。
拖动蓝色的动画路径点可以在保持结束点不变的前提下改变动画方向。
拖动红色的动画路径点可以在保持起始点不变的前提下改变运动方向。
拖动绿色的动画路径点可以移动动画路径,并保持方向不变。
在改变动画方向时,按住Shift键,可以以45度的改变量来改变动画方向。
实例制作——礼花绽放
动画状态
动画元件的每一个动作都存放在“状态”(早期的版本称之为帧)中,当按照一定顺序播放这些状态时,即能产生动画效果。
添加与删除帧
可以采用下面几种不同的方法在动画中添加状态:
如果要在动画最后追加一个状态,单击【状态】面板右下角的【新建/重制状态】按钮即可。
如果要在当前状态后面插入一个状态,可选中当前状态,选择菜单栏【编辑】/【插入】/【状态】命令。
按住【Alt】键,在【状态】面板的状态列表区域单击鼠标左键,可直接添加新的空白状态。
如果要在指定位置插入多个状态,可以单击【状态】面板右上角的面板菜单按钮,选择面板菜单的【添加状态】命令。
编辑状态中的对象
在状态之间移动对象
在状态之间复制对象
将对象分发到状态
在状态之间共享层
洋葱皮技术
单击【状态】面板左下角的【洋葱皮效果】按钮可调出洋葱皮效果菜单,菜单包含以下命令:
【无洋葱皮】:不使用洋葱皮技术。
【显示下一个状态】:使用洋葱皮技术显示当前状态的后一状态。
【显示前后状态】:使用洋葱皮技术显示当前状态的前一状态和后一状态。
【显示所有状态】:使用洋葱皮技术显示动画的所有状态。
【自定义】:自定义洋葱皮效果,选择该项,会弹出【洋葱皮】对话框。在对话框中设置在当前状态之前和之后显示的状态数目以及显示时的透明度。
【多状态编辑】:可以通过单击动画路径上的点选中不同状态中的对象,并进行编辑。
设置状态延迟时间
选择【状态】面板菜单中的【属性】选项,将会弹出如图所示的效果图,在【状态延时】数值框中输入该状态需要显示的时间。点击窗口外的区域完成设定。
设置动画循环
单击【状态】面板底部的按钮打开如图所示的循环设定菜单。选中需要的循环次数即可。