网页设计第14章ppt课件

, , , , , ,*,网页设计与制作应用教程,机械工业出版社同名教材,配套电子课件,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,，并完成,3,个元件的动画。,选择主菜单,【,文件,】,【,图像预览,】,命令，并单击窗口底部的“播放”按钮，观看完整的动画效果。单击“导出”按钮，选中文件路径，保存文件。,思考与练习,动画的基本原理是什么？网页中的基本动画格式为哪一种？,逐帧绘制动画的步骤是什么？,制作连续跳跃的数字。,制作如图所示的飞舞的蝴蝶。,