网页中动画的高级应用.ppt

第15章 网页中动画的高级应用在网页中动画必不可少，而且被大量的使用着，这就要求在网页中动画必不可少，而且被大量的使用着，这就要求我们在学习网页制作过程中重点掌握的其中一块内容就是我们在学习网页制作过程中重点掌握的其中一块内容就是动画。关于动画的制作及相关内容，在前面的章节中已经动画。关于动画的制作及相关内容，在前面的章节中已经有所涉及，这里针对动画的一些较复杂的内容的制作方法有所涉及，这里针对动画的一些较复杂的内容的制作方法和应用进行介绍。和应用进行介绍。1 1可编辑版可编辑版15.1 复杂元件保持一个开放的思想，同时为了实现你的思想不断地探索保持一个开放的思想，同时为了实现你的思想不断地探索新的方式，这是对于动画制作的善于创新的要求。对于可新的方式，这是对于动画制作的善于创新的要求。对于可视化你要做的东西，试验不同的角度和方式，尝试不同方视化你要做的东西，试验不同的角度和方式，尝试不同方式的组合，这就要求你事先作好计划。然后，就是查看下式的组合，这就要求你事先作好计划。然后，就是查看下载大小和渲染速度，并了解你的观众。这些是动画制作的载大小和渲染速度，并了解你的观众。这些是动画制作的要点，在上述内容的基础上，我们可以更深层次的进行动要点，在上述内容的基础上，我们可以更深层次的进行动画制作了。画制作了。2 2可编辑版可编辑版15.1.1 复杂元件的制作制作应用于网页中的动画，往往需要有构成动画的元件。制作应用于网页中的动画，往往需要有构成动画的元件。元件制作的成功与否，直接关系到动画效果的好坏，因此元件制作的成功与否，直接关系到动画效果的好坏，因此对于它的制作非常重要。其实，元件有时是很简单就能实对于它的制作非常重要。其实，元件有时是很简单就能实现的，比如由圆、线和色彩等一些元素组成。但是，如果现的，比如由圆、线和色彩等一些元素组成。但是，如果想将它创建的成功，就需要费思量了。尤其，元素可以构想将它创建的成功，就需要费思量了。尤其，元素可以构成简单的元件，也可以构成复杂的。同样是元件，复杂程成简单的元件，也可以构成复杂的。同样是元件，复杂程度同样决定着动画的动态应用后的效果。如图所示，分别度同样决定着动画的动态应用后的效果。如图所示，分别是关于元件的截图。是关于元件的截图。3 3可编辑版可编辑版对于简单的元件制作前面的章节中已经有所涉及，这里针对对于简单的元件制作前面的章节中已经有所涉及，这里针对一些较复杂的元件，通过具体实例来向大家介绍它的实现与一些较复杂的元件，通过具体实例来向大家介绍它的实现与操作方法。操作方法。1 1DecoDeco工具简单应用工具简单应用FlashFlash制作有关的动画，需要先制作元件，元件的制作方法不制作有关的动画，需要先制作元件，元件的制作方法不止一种，你可以借助它的工具，结合属性来实现的。首先，止一种，你可以借助它的工具，结合属性来实现的。首先，这里介绍的是这里介绍的是DecoDeco工具，以及它的相关应用。如图所示，是工具，以及它的相关应用。如图所示，是一实现的模仿星空的效果截图。一实现的模仿星空的效果截图。4 4可编辑版可编辑版（1 1）藤蔓式填充效果）藤蔓式填充效果DecoDeco工具被经常用来制作一些复杂形状的元件。它主要有如工具被经常用来制作一些复杂形状的元件。它主要有如下效果：藤蔓式填充、网格填充、对称刷子、下效果：藤蔓式填充、网格填充、对称刷子、3D3D刷子、建筑刷子、建筑物刷子、装饰性刷子、火焰动画、火焰刷子、花刷子、闪电物刷子、装饰性刷子、火焰动画、火焰刷子、花刷子、闪电刷子、粒子系统、烟动画树刷子。关于藤蔓式填充效果它刷子、粒子系统、烟动画、树刷子。关于藤蔓式填充效果它的操作方法，具体如下：的操作方法，具体如下：（A A）工具）工具（B B）绘制效果）绘制效果（C C）高级选项）高级选项5 5可编辑版可编辑版（2 2）网格填充效果）网格填充效果在工具面板中，同样使用在工具面板中，同样使用DecoDeco工具。接着，对该工具的属性工具。接着，对该工具的属性面板中的相应的内容进行设置。选择面板中的相应的内容进行设置。选择“绘制效果绘制效果”为网格填为网格填充，分别对其中的平铺选项进行颜色调整，并对充，分别对其中的平铺选项进行颜色调整，并对“高级选项高级选项”进行变更，如图是应用网格填充实现的绘制效果。进行变更，如图是应用网格填充实现的绘制效果。6 6可编辑版可编辑版（3 3）对称刷子效果）对称刷子效果对称刷子效果，它的实现方法是，使用对称刷子效果，它的实现方法是，使用DecoDeco工具，在属性面工具，在属性面板中，选择板中，选择“绘制效果绘制效果”为对称刷子，同时调整合适的颜色，为对称刷子，同时调整合适的颜色，并对并对“高级选项高级选项”进行设置，即可应用。如图是应用对称刷进行设置，即可应用。如图是应用对称刷子实现的绘制效果。子实现的绘制效果。7 7可编辑版可编辑版2 2时钟元件制作时钟元件制作在了解了在了解了FlashFlash中相关工具的应用与效果实现理论后，下面中相关工具的应用与效果实现理论后，下面，通过一个简单的元件制作的操作方法的介绍，来帮助进一步通过一个简单的元件制作的操作方法的介绍，来帮助进一步掌握。关于时钟元件，就是应用了掌握。关于时钟元件，就是应用了“对称刷子对称刷子”效果，再辅效果，再辅以简单的操作实现的。其详细内容如下：以简单的操作实现的。其详细内容如下：首先，在工具面板中选择首先，在工具面板中选择“Deco“Deco工具工具”，同时选择属性面板，同时选择属性面板中的绘制效果为中的绘制效果为“对称刷子对称刷子”。在舞台绘制图案，可得如图。在舞台绘制图案，可得如图所示的效果。所示的效果。8 8可编辑版可编辑版接着，在上述完成图案的基础上，在工具面板中选择接着，在上述完成图案的基础上，在工具面板中选择“文本文本”，分别在十二个点的下方添加数字，分别在十二个点的下方添加数字112112，标注时钟刻度，标注时钟刻度，如图所示。如图所示。9 9可编辑版可编辑版最后，在工具面板中选择直线，分别在时间刻度的相应位置，最后，在工具面板中选择直线，分别在时间刻度的相应位置，进行钟表中分针和时针的绘制。这里在绘制过程中因为分钟进行钟表中分针和时针的绘制。这里在绘制过程中因为分钟要长于时针，可以通过橡皮擦进行的长短调整。最终绘制完要长于时针，可以通过橡皮擦进行的长短调整。最终绘制完成后，可得如图所示的效果。成后，可得如图所示的效果。1010可编辑版可编辑版15.1.2 复杂元件的添加复杂元件的添加，只是元件的复杂程度加深了，也就是制复杂元件的添加，只是元件的复杂程度加深了，也就是制作难度增加了，它的添加方法还是一样的。具体参照前面作难度增加了，它的添加方法还是一样的。具体参照前面章的动画中的元件添加方法。章的动画中的元件添加方法。1111可编辑版可编辑版15.2 创建复杂动画FlashFlash用于创建动画，大家都已经认可它了。但是，因为用于创建动画，大家都已经认可它了。但是，因为动画效果实现的需要，有时动画创意在设计时比较复杂，动画效果实现的需要，有时动画创意在设计时比较复杂，连带的它的创建方法也就相较于要复杂的多。这一节，将连带的它的创建方法也就相较于要复杂的多。这一节，将详细介绍有关复杂的动画的相关内容以及制作。详细介绍有关复杂的动画的相关内容以及制作。1212可编辑版可编辑版15.2.1 关于动画制作计算机动画有不同的形式，但大致可以分为二维动画和三计算机动画有不同的形式，但大致可以分为二维动画和三维动画两种。维动画两种。如图所示，是一动画截图，在接下来的内容中，将通过几如图所示，是一动画截图，在接下来的内容中，将通过几个实例，讲述有关于具体的动的实现效果的相关操作。个实例，讲述有关于具体的动的实现效果的相关操作。1313可编辑版可编辑版15.2.2 引导层效果的实例应用一个基本一个基本“引导层路径动画引导层路径动画”由两个图层组成，上面一层由两个图层组成，上面一层是是“引导层引导层”，引导线是一种运动轨迹，下面一层是，引导线是一种运动轨迹，下面一层是“被被引导层引导层”中的对象可以是影片剪辑、图形元件、按钮、文中的对象可以是影片剪辑、图形元件、按钮、文字等，但不能是形状，图标与普通图层一样。这里通过一字等，但不能是形状，图标与普通图层一样。这里通过一实例，详细介绍引导层在动画效果中的具体应用与操作方实例，详细介绍引导层在动画效果中的具体应用与操作方法。法。1414可编辑版可编辑版如图所示，是应用引导层制作完成的如图所示，是应用引导层制作完成的FlashFlash动画效果。这里通动画效果。这里通过小球围绕大球转动的效果，常被用于带有运动轨迹的这一过小球围绕大球转动的效果，常被用于带有运动轨迹的这一类动画的操作与控制方法。它的实现，正好体现了引导层的类动画的操作与控制方法。它的实现，正好体现了引导层的相关作用以及所涉及的内容。相关作用以及所涉及的内容。1 1大球的制作大球的制作2 2小球的制作小球的制作3 3引导层引导层1515可编辑版可编辑版15.2.3 遮罩层效果的实例应用遮罩动画是遮罩动画是FlashFlash中的一个很重要的动画类型，很多效果中的一个很重要的动画类型，很多效果丰富的动画都是通过遮罩动画来完成的。在丰富的动画都是通过遮罩动画来完成的。在FlashFlash的图层的图层中有一个遮罩图层类型，为了得到特殊的显示效果，可以中有一个遮罩图层类型，为了得到特殊的显示效果，可以在遮罩层上创建一个任意形状的在遮罩层上创建一个任意形状的“视窗视窗”，遮罩层下方的，遮罩层下方的对象可以通过该对象可以通过该“视窗视窗”显示出来，而显示出来，而“视窗视窗”之外的对之外的对象将不会显示。运用遮罩制作而成的动画。遮罩层中的内象将不会显示。运用遮罩制作而成的动画。遮罩层中的内容在动，而被遮罩层中的内容保持静止。下面还是通过一容在动，而被遮罩层中的内容保持静止。下面还是通过一应用实例，来作具体的分析。应用实例，来作具体的分析。1616可编辑版可编辑版如图所示，是根据字幕的遮罩显示实现的效果。其主要内容如图所示，是根据字幕的遮罩显示实现的效果。其主要内容是，通过动画效果，将文字通过一定的方式进行展示。是，通过动画效果，将文字通过一定的方式进行展示。1 1文字制作文字制作2 2元件制作元件制作3.3.遮罩效果遮罩效果4 4鼠标移动遮罩效果鼠标移动遮罩效果1717可编辑版可编辑版15.2.4 复杂逐帧效果的实例应用在在FlashFlash动画尤其是短片的制作中或多或少都要表现一些动画尤其是短片的制作中或多或少都要表现一些较复杂的动作，而较复杂的动作，而FlashFlash本身功能的限制使我们在制作动本身功能的限制使我们在制作动画时感到手脚受到牵制，或者为此付出过多的时间和精力。画时感到手脚受到牵制，或者为此付出过多的时间和精力。逐帧动画表现方方法技巧、以及充分利用逐帧动画表现方方法技巧、以及充分利用FlashFlash的变形功的变形功能制作动画的表现技巧，针对这些内容，我们通过一个应能制作动画的表现技巧，针对这些内容，我们通过一个应用实例的具体制作来进行了解。如图所示，是一逐帧动画用实例的具体制作来进行了解。如图所示，是一逐帧动画的实现的效果。的实现的效果。1818可编辑版可编辑版关于该动画的制作方法如下：关于该动画的制作方法如下：1 1创建创建设置舞台背景为白色。在工具面板中选择设置舞台背景为白色。在工具面板中选择“椭圆椭圆”按钮，同按钮，同时设置填充色为时设置填充色为“红色红色”，通过鼠标拖动，在舞台的左侧位，通过鼠标拖动，在舞台的左侧位置，创建一大小适中的圆，如图所示。置，创建一大小适中的圆，如图所示。1919可编辑版可编辑版2 2动画实现动画实现图形创建完成后，在时间轴的图形创建完成后，在时间轴的1-151-15帧的位置，分别逐一创建帧的位置，分别逐一创建“关键帧关键帧”。最终得到如图所示的时间轴效果。到这里该逐。最终得到如图所示的时间轴效果。到这里该逐帧动画也就实现了。帧动画也就实现了。2020可编辑版可编辑版15.3 动画的轨道、时间轴及其它内容在动画的制作过程中，轨道、时间轴、帧、图层和场景等在动画的制作过程中，轨道、时间轴、帧、图层和场景等内容是我们常常接触，也需要频繁使用的。在接下来的内内容是我们常常接触，也需要频繁使用的。在接下来的内容中，着重关于它们的相关的应用及操作方面来作为切入容中，着重关于它们的相关的应用及操作方面来作为切入点。主要通过点。主要通过FlashFlash简单实例的制作与讲解，来进行相应简单实例的制作与讲解，来进行相应的介绍。的介绍。2121可编辑版可编辑版15.3.1 帧帧是进行帧是进行flashflash动画制作的最基本的单位，每一个精彩的动画制作的最基本的单位，每一个精彩的flashflash动画都是由很多个精心雕琢的帧构成的，在时间轴动画都是由很多个精心雕琢的帧构成的，在时间轴上的每一帧都可以包含需要显示的所有内容，包括图形、上的每一帧都可以包含需要显示的所有内容，包括图形、声音、各种素材和其他多种对象声音、各种素材和其他多种对象帧有关键帧、空白关键帧和普通帧之分。下面对其一些相帧有关键帧、空白关键帧和普通帧之分。下面对其一些相关内容着重进行介绍。关内容着重进行介绍。2222可编辑版可编辑版1 1帧的区别帧的区别它们之间的区别在于：它们之间的区别在于：（1 1）关键帧在时间轴上显示为实心的圆点，空白关键帧在时）关键帧在时间轴上显示为实心的圆点，空白关键帧在时间轴上显示为空心的圆点，普通帧在时间轴上显示为灰色填间轴上显示为空心的圆点，普通帧在时间轴上显示为灰色填充的小方格。充的小方格。（2 2）同一层中，在前一个关键帧的后面任一帧处插入关键帧，）同一层中，在前一个关键帧的后面任一帧处插入关键帧，是复制前一个关键帧上的对象，并可对其进行编辑操作；如是复制前一个关键帧上的对象，并可对其进行编辑操作；如果插入普通帧，是延续前一个关键帧上的内容，不可对其进果插入普通帧，是延续前一个关键帧上的内容，不可对其进行编辑操作；插入空白关键帧，可清除该帧后面的延续内容，行编辑操作；插入空白关键帧，可清除该帧后面的延续内容，可以在空白关键帧上添加新的实例对象。可以在空白关键帧上添加新的实例对象。（3 3）关键帧和空白关键帧上都可以添加帧动作脚本，普通帧）关键帧和空白关键帧上都可以添加帧动作脚本，普通帧上则不能。上则不能。2323可编辑版可编辑版2 2帧的操作帧的操作帧应用于动画，实现了逐帧动画和补间动画的相应效果。补帧应用于动画，实现了逐帧动画和补间动画的相应效果。补间动画，有动画补间和形状补间二种形式。关于帧的操作，间动画，有动画补间和形状补间二种形式。关于帧的操作，下面的内容中将对其进行介绍。下面的内容中将对其进行介绍。（1 1）帧的创建与转换）帧的创建与转换（2 2）帧的选择与移动）帧的选择与移动（3 3）帧的复制、剪切和粘贴）帧的复制、剪切和粘贴（4 4）帧的翻转与查看）帧的翻转与查看（5 5）帧的显示状态与帧频设置）帧的显示状态与帧频设置2424可编辑版可编辑版（6 6）帧应用）帧应用在了解了上述帧的相关内容之后，如图所示的效果，是进行在了解了上述帧的相关内容之后，如图所示的效果，是进行相应应用的结果。相应应用的结果。2525可编辑版可编辑版15.3.2 轨迹有需要才有应用，有应用才有轨迹。用这句话，能很贴切有需要才有应用，有应用才有轨迹。用这句话，能很贴切形容其作用。在我们制作形容其作用。在我们制作FlashFlash动画时，为了想让元件或动画时，为了想让元件或类似的物体，根据我们自己设定的内容运动，也就有了轨类似的物体，根据我们自己设定的内容运动，也就有了轨迹。它往往反映的是不归则物体、不规律运动方式的相关迹。它往往反映的是不归则物体、不规律运动方式的相关效果。这里让我们通过一个实例来进一步的帮助掌握。效果。这里让我们通过一个实例来进一步的帮助掌握。如图所示，是一个简单图形。我们通过应用不同的运动轨如图所示，是一个简单图形。我们通过应用不同的运动轨迹，就能让它在迹，就能让它在FlashFlash中呈现不同的美的效果。中呈现不同的美的效果。2626可编辑版可编辑版对于不同效果的实现，具体内容如下：对于不同效果的实现，具体内容如下：首先，在场景中通过首先，在场景中通过“矩形矩形”工具绘制如图所示的内容。完工具绘制如图所示的内容。完成后，将其转换为成后，将其转换为“元件元件”。2727可编辑版可编辑版这里，通过如图这里，通过如图1 1不同的帧的设置，可以得到如图不同的帧的设置，可以得到如图2 2所示的效所示的效果。果。图图1 1 图图2 22828可编辑版可编辑版下面，我们可以借助下面，我们可以借助flashflash逐帧逐帧“轨迹轨迹”的技巧，的技巧，“移动移动”动画时选择更长的帧距。最后得出更美的图案。具体方法是，动画时选择更长的帧距。最后得出更美的图案。具体方法是，通过通过“绘图纸外观绘图纸外观”、“绘图纸边框绘图纸边框”、“编辑多帧编辑多帧”等形等形式，显示图形的不同的美的图形旋转轨迹。如图所示，就是式，显示图形的不同的美的图形旋转轨迹。如图所示，就是其中的实现效果。其中的实现效果。2929可编辑版可编辑版15.3.3 时间轴时间轴特效功能经常用于以模板的形式制作一些复杂而重时间轴特效功能经常用于以模板的形式制作一些复杂而重复的动画，如模糊、位移等。恰当合理地运用复的动画，如模糊、位移等。恰当合理地运用FlashFlash内建内建的时间轴特效功能，可以为自己平淡的动画添加一些闪光的时间轴特效功能，可以为自己平淡的动画添加一些闪光的动感。时间轴特效可以应用到的对象有文本、图形（包的动感。时间轴特效可以应用到的对象有文本、图形（包括形状、组和图形元件）、位图图像、按钮元件等。当将括形状、组和图形元件）、位图图像、按钮元件等。当将时间轴特效应用于影片剪辑时，时间轴特效应用于影片剪辑时，FlashFlash将把特效嵌套在影将把特效嵌套在影片剪辑中。片剪辑中。3030可编辑版可编辑版这里通过一具体实例来帮助大家认识时间轴。如图所示，是这里通过一具体实例来帮助大家认识时间轴。如图所示，是借助时间轴中，相应的效果设置实现的，动态文字仿脉博跳借助时间轴中，相应的效果设置实现的，动态文字仿脉博跳动形式的运动画面。动形式的运动画面。3131可编辑版可编辑版15.3.4 场景FLASHFLASH动画的各个对象的位置关系是按照一定的层状结构动画的各个对象的位置关系是按照一定的层状结构来呈现的。他的根是场景。有多个场景的情况，实际上每来呈现的。他的根是场景。有多个场景的情况，实际上每个场景是独立的动画，个场景是独立的动画，FLASHFLASH是通过设置各个场景播放顺是通过设置各个场景播放顺序来把各个场景的动画逐个连接起来，因而我们看到的动序来把各个场景的动画逐个连接起来，因而我们看到的动画播放是连续的。画播放是连续的。3232可编辑版可编辑版对于具体的某一个场景来说，和其他场景的结构是一样的。对于具体的某一个场景来说，和其他场景的结构是一样的。都包含一个或多个图层（都包含一个或多个图层（lawyerlawyer），每一个图层中的关键桢），每一个图层中的关键桢可以由一层或很多层（可以由一层或很多层（levellevel）组成。如图所示，是一可以作）组成。如图所示，是一可以作为动画场景的效果截图。为动画场景的效果截图。3333可编辑版可编辑版15.3.5 图层FlashFlash对对象实行分层管理，即将不同的对象放置在不同对对象实行分层管理，即将不同的对象放置在不同的图层中，这样在修改其中一个对象时不会影响到其他的的图层中，这样在修改其中一个对象时不会影响到其他的对象。可以形象地理解为，图层就是透明的玻璃纸，不同对象。可以形象地理解为，图层就是透明的玻璃纸，不同的对象绘制在不同的玻璃纸上，它们相互重叠以显示整体的对象绘制在不同的玻璃纸上，它们相互重叠以显示整体的内容，但在修改某一对象时其他对象不受影响。对于图的内容，但在修改某一对象时其他对象不受影响。对于图层的操作在时间轴的层的操作在时间轴的“图层编辑区图层编辑区中实现。中实现。1 1创建图层创建图层2 2图层改名图层改名3 3删除图层删除图层4 4隐藏图层隐藏图层5 5锁定图层锁定图层3434可编辑版可编辑版15.3.6 实例应用在对上述内容有了相关认识之后，接下来通过一简单实例，在对上述内容有了相关认识之后，接下来通过一简单实例，来针对其应用进行具体介绍。动物的奔跑效果及其状态体来针对其应用进行具体介绍。动物的奔跑效果及其状态体现，通过现，通过FlashFlash动画来展示，是较常用，也是较复杂的制动画来展示，是较常用，也是较复杂的制作。这里通过四肢动物为代表，来帮助大家掌握。作。这里通过四肢动物为代表，来帮助大家掌握。3535可编辑版可编辑版15.4 本章小结本章主要通过一些本章主要通过一些FlashFlash应用的具体例子，详细介绍在实应用的具体例子，详细介绍在实际制作与编辑过程中，较高应用技巧与技术的相关内容。际制作与编辑过程中，较高应用技巧与技术的相关内容。同时，结合一些较难的动画实例的讲解与描述，帮助大家同时，结合一些较难的动画实例的讲解与描述，帮助大家掌握较难的时间轴、轨道、图层及其它内容。这里需要大掌握较难的时间轴、轨道、图层及其它内容。这里需要大家重点进行学习的是，有关于动画的制作的高阶的应用能家重点进行学习的是，有关于动画的制作的高阶的应用能力的锻炼。力的锻炼。3636可编辑版可编辑版