搜索
网页设计与制作应用教程机械工业出版社同名教材配套电子课件2009.4第14章动画制作14.1规划动画14.2帧的应用14.3动画元件与实例14.4导出动画14.5综合实例——制作简单“标题”动画14.1规划动画创建动画一般要5个步骤，这些步骤的顺序也可能会因个人的工作流程和动画设计而异。创建一个新文档。使用帧面板，给文档增加多个帧。分别给每个帧绘画或放置对象。设置帧延时。将文档优化并输出为Gif动画格式。14.2帧的应用14.2.1帧的基本操作14.2.2在帧中编辑对象动画实际上是由帧组成的，要编辑复杂的动画效果，就需要编辑动画的帧。选择菜单【窗口】／【帧】命令即可打开“帧”面板。14.2.1帧的基本操作添加、移动、复制和删除帧添加帧•单击“帧”面板底部的“新建/复制帧”按钮，即可在动画最后添加一个新的帧。新添加的帧除了画布颜色与第1帧相同外，其余都是空白。•若要在指定的位置添加多帧：从“帧”面板的“选项”菜单中选择“添加帧”命令。弹出“添加帧”对话框，输入要添加的帧的数目，并选择要插入帧的4种位置（在开始、在当前帧之前、在当前帧之后、在结尾），然后单击“确定”按钮。移动帧在帧面板上移动该帧。在帧面板上选中需要移动的帧（按住“Shift”键可选中多帧），将其拖动到适合的位置松开鼠标，即可实现移动帧。移动后，所有帧重新命名排序。14.2.1帧的基本操作复制帧如果要重复使用动画的某段，可以采用复制对应帧的方法。•创建帧的副本：将一个现有帧拖到“帧”面板底部的“新建/复制帧”按钮上。•复制所选帧并按顺序放置它：从“帧”面板的“选项”菜单中选择“复制帧”。输入要为所选帧创建的副本数，选择插入复制帧的位置，然后单击“确定”按钮。14.2.1帧的基本操作删除帧单击“帧”面板中的“删除帧”按钮。或者将帧拖到“删除帧”按钮上。还可以从“帧”面板的“选项”菜单中选择“删除帧”命令，以达到删除帧操作。14.2.1帧的基本操作设定帧延时数帧延时决定当前帧显示的时间长度。单位是1/100秒。例如，如果设置为50，则帧显示0.5秒；设置为300，则帧显示3秒。•选择一个或多个帧，按住“Shift”键或“Ctrl”键可以选择相邻或不相邻的多个帧。•双击帧延时栏，弹出“帧延时”窗口。•为帧延时输入一个值。•按“Enter”键或在面板外单击。14.2.1帧的基本操作显示/隐藏帧从“帧”面板的“选项”菜单中选择“属性”，或者直接双击帧延时列。弹出“帧延时”窗口。取消选择“导出时包括”复选框。按“Enter”键或在“帧延时”弹出窗口外单击关闭窗口。此时，帧延时栏显示一个红色的“X”代替帧延时时间。若希望恢复显示帧，则重新选中“导出时包括”复选框即可。14.2.1帧的基本操作重命名帧Fireworks自动为所创建的帧命名为“帧1”、“帧2”，依此类推。重命名帧：在“帧”面板中，双击帧的名称，在弹出文本框中，输入一个新名称然后按“Enter”键即可。14.2.1帧的基本操作14.2.2在帧中编辑对象在“帧”面板中移动所选对象动画中各帧之间是独立的关系，编辑某帧不会影响其他帧效果。但要将帧对象在动画中的不同位置出现或消失时，可以使用“帧”面板将对象移动到另一个帧。将所选对象移动到另一个帧的操作：•在帧面板上选中需要移出对象的帧，在文档窗口中选中需要移动的对象。这时，在帧面板中对应帧的右面出现一个蓝色小方块，如图所示。将帧延时时间右边的蓝色小方块拖到新的帧上即可提示：拖动蓝色方块时按住“Alt”键，可以将选中对象复制到其他帧中。在帧间共享层在动画中，可以使用层来组织作为动画背景一部分对象。如果希望对象在整个动画中的每一帧都出现，可将它们放置在某一层上，然后使用“层”面板在帧间共享该层。这样，就可以编辑在任何帧的被共享层中的对象，对对象的编辑会影响所有其他帧。在帧间共享层：首先应将背景单独放入一层，然后单击“层”面板的“选项”菜单，选择共享此层，即可将背景在每一帧中可见。或者双击该层，在弹出的“层名称”栏中选中“共享交叠帧”选项，可以使层中的所有对象在每一帧中可见。14.2.2在帧中编辑对象洋葱皮技术使用洋葱皮技术可以查看被选择帧的前面或后面的帧，有助于用户把握动画的平滑。洋葱皮一词来源于一种传统的动画技术，即使用很薄的、半透明的描图纸来查看动画序列，。当洋葱皮被打开时，将多帧的图像在同一个编辑窗口中显示，但透明度不同，便于用户区分当前帧和其他帧的内容。14.2.2在帧中编辑对象调整当前帧之前和之后的可见帧的数目：单击“帧”面板中的“洋葱皮”按钮。选择显示选项：•“无洋葱皮”：关闭洋葱皮，只显示当前帧的内容。•“显示下一帧”：显示当前帧和下一帧的内容。•“之前和之后”：显示当前帧和与当前帧相邻的帧的内容。•“显示所有帧”：显示所有帧的内容。•“自定义”：设置自定义帧数并控制洋葱皮的不透明度。选择该项，会弹出如图14-12所示的“洋葱皮”对话框。在对话框中设置当前帧之前和之后显示的帧数目以及显示时的不透明度。•“多帧编辑”：可以选择和编辑所有可见对象。如果取消选择此选项，则只选择和编辑当前帧中的对象。14.2.2在帧中编辑对象动画播放当动画中的每个帧都制作完成时，可以通过点击VCR状态栏中的“播放”按钮，帧面板中的循环设置决定动画将重复播放几次。单击“循环”按钮，在弹出的菜单中选择要使动画在第一次播放后重复回放的次数。14.2.2在帧中编辑对象14.3动画元件与实例14.3.1创建元件14.3.2编辑动画元件14.3.3元件的导入和导出14.3.4插帧动画14.3.1创建元件直接创建动画元件选择主菜单【编辑】／【插入】／【新建元件】命令。在对话框的“名称”栏内输入新元件的名称，在“类型”栏选择“动画”选项，并单击“确定”按钮。弹出的窗口是编辑元件窗口，在窗口的左上方，注明了编辑元件的状态。在窗口中创建并编辑一个新对象作为动画元件，该对象可以是矢量对象或位图对象。绘制完成后，单击“完成”按钮。选择主菜单【窗口】／【库】来打开库面板，新元件显示在列表中将对象转换为元件选择需要转换为元件的对象。执行菜单【修改】／【动画】／【选择动画】命令，弹出“动画”对话框。在对话框中设置动画参数，设置完毕，单击“确定”按钮，即可将对象转换为动画元件。14.3.1创建元件14.3.2编辑动画元件编辑动画元件的属性动画元件的属性面板内容“动画”对话框可以通过选择菜单【修改】／【动画】／【设置】命令打开，如图所示。通过处理这些属性，可以使元件显示为旋转、加速、淡入淡出或者是这些动作的任意组合。帧：是动画中包含的帧数。所有动画元件的关键属性是帧数。该属性确定元件分几步来完成动画。通过帧滑块设定的帧数最大为250，也可以在帧文本框中输入任何需要的帧数，大小不限。移动：是指每个对象移动的像素数。此选项只在“动画”对话框中才有。默认值为72，可以在“移动”文本框中输入任何想要的数字。方向：是指对象移动的方向，单位是度。值的范围从0到360度。此选项只在“动画”对话框中才有。通过拖动对象的动画手柄也可以更改“移动”和“方向”的值。缩放：是从开始到完成，动画元件大小变化的百分比。默认值为100%，可以在“缩放”文本框中输入任何想要的数字。不透明度：是从开始到完成淡入或淡出的度数。值的范围从0到100，默认值为100%。创建淡入/淡出需要相同元件的两个实例-一个播放淡入，另一个播放淡出。旋转：是从开始到完成元件旋转的数量，单位是度。值的范围从0到360度。要想让14.3.2编辑动画元件删除动画效果选中需要删除动画效果的动画实例。执行主菜单【修改】／【动画】／【删除动画】命令，即可删除该实例上的动画效果。提示：对于刚刚删除动画效果的元件，单击库面板右下角的“实例属性”按钮，在弹出的“元件属性”对话框中将实例类型重新置为“动画”，即可恢复动画效果。14.3.2编辑动画元件双击选中的实例元件对象。选择菜单【修改】／【元件】／【编辑元件】命令。打开元件编辑窗口后即可对元件对象进行更改14.3.2编辑动画元件编辑元件运动路径当选择一个动画元件时，它有一个唯一的定界框并附加了一个指示元件移动方向的运动路径。运动路径上的绿点表示起始点，而红点表示结束点。路径上的蓝点代表帧。14.3.2编辑动画元件14.3.3元件的导入和导出通过菜单命令方式导入元件从Fireworks元件库导入一个或多个现成的元件：选择菜单【编辑】／【库】子菜单中的命令，然后选择一种库：“主题”：将打开一个动画、图形和按钮元件列表；每个主题由以相似方式设计和命名的三种元件组合而成，这些元件的颜色搭配很协调，能够一起使用。“动画”：将打开动画元件集合。“按钮”：打开具有2个、3个和4个状态的Fireworks按钮元件的集合。“项目符号”：将打开类似于各种列表项目符号的图形元件的集合。“其他”：将打开“打开”对话框，从中可以定位到先前导出的元件库PNG文件。通过“库”面板导入/导出元件导入元件•选择菜单【窗口】／【库】命令，打开“库”面板，单击面板右上角的“选项”菜单图标，如图所示。在菜单中选择“导入元件”命令，弹出“打开”对话框，选中文件并单击“打开”按钮，以导入的元件随即出现在“库”面板中，如图所示。14.3.3元件的导入和导出导出元件从“库”面板的“选项”菜单中选择“导出元件”命令。在弹出的“导出元件”对话框中选择要导出的元件，然后单击“导出”。导出到文件夹，为该元件文件键入一个名称，然后单击“保存”。Fireworks将这些元件保存在单个PNG文件中。14.3.3元件的导入和导出通过操作实例导入/导出元件可以通过拖放或复制和粘贴操作导入元件，操作方法为：将元件实例从包含该元件的文档拖到目标文档中。或者在包含该元件的文档中复制一个元件实例，然后将其粘贴到目标文档中。该元件被导入到目标文档的“库”面板中，同时保留与原始文档中的元件的关系。14.3.3元件的导入和导出14.3.4插帧动画补间动画的操作步骤如下：选择画布上同一图形元件的两个或更多的实例选择菜单【修改】／【元件】／【补间实例】命令，在“补间实例”对话框中输入要插入到原始帧之间的补间步骤的数目，如图所示。若要将补间对象分散到不同的帧中，请选择“分散到帧”并单击“确定”。如果选择不将对象分散到不同的帧，则可以在以后通过选择所有实例并单击“帧”面板中的“分散到帧”按钮来执行此操作。14.4导出动画选择主菜单【文件】／【导出向导】命令，单击“选择导出格式”按钮，然后单击“继续”。在出现的对话框中选择“Gif动画”，然后单击“继续”按钮在出现的图像预览对话框中，对导出的图像进行优化设置。优化动画可以在保持动画质量基本不变的情况下，降低文件的大小。其中主要参数如下：颜色：颜色种类越少，文件越小。失真：设置压缩损失，值越大，文件越小。抖动：设置抖动值，此项设置对文件的大小没有影响。设置完成后，单击“导出”，导出到文件夹，并为该文件键入一个名称，即可完成对动画的优化输出过程。14.5综合实例——制作简单“标题”动画下面通过动画实例来说明Fireworks中动画制作的基本过程。选择主菜单【文件】／【新建】命令，打开新建文档对话框，设置画布宽度为300，高度为100，颜色为“#101042”。选择工具箱中的文字工具（），在属性面板中设定颜色为红色、50号华文行楷。在画布中单击鼠标进入文字编辑状态，输入“忠诚”内容，在属性面板中执行【效果】／【阴影和光晕】／【发光】命令，给文字增加一个外发光的效果，如图所示。实例14.5文字选中状态下，按“F8”键，弹出“元件属性”对话框，设置如图所示。在随后弹出的“动画”对话框中设定参数，单击“确定”按钮，动画被创建。在帧面板，选择第1帧，双击“帧延时”数值，数值设为30，即0.3秒延时。在帧面板中选中第五帧，单击帧面板右下角“新建/重制帧”按钮，建立第六帧。重复步骤2）、3）、4）操作，分别对文字“求实”、“勤奋”、“创新”建立元件2、元件3和元件4