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

《网页中动画的高级应用.ppt》由会员分享，可在线阅读，更多相关《网页中动画的高级应用.ppt（36页珍藏版）》请在三一办公上搜索。

1、第15章 网页中动画的高级应用,在网页中动画必不可少，而且被大量的使用着，这就要求我们在学习网页制作过程中重点掌握的其中一块内容就是动画。关于动画的制作及相关内容，在前面的章节中已经有所涉及，这里针对动画的一些较复杂的内容的制作方法和应用进行介绍。,15.1 复杂元件,保持一个开放的思想，同时为了实现你的思想不断地探索新的方式，这是对于动画制作的善于创新的要求。对于可视化你要做的东西，试验不同的角度和方式，尝试不同方式的组合，这就要求你事先作好计划。然后，就是查看下载大小和渲染速度，并了解你的观众。这些是动画制作的要点，在上述内容的基础上，我们可以更深层次的进行动画制作了。,15.1.1 复杂

2、元件的制作,制作应用于网页中的动画，往往需要有构成动画的元件。元件制作的成功与否，直接关系到动画效果的好坏，因此对于它的制作非常重要。其实，元件有时是很简单就能实现的，比如由圆、线和色彩等一些元素组成。但是，如果想将它创建的成功，就需要费思量了。尤其，元素可以构成简单的元件，也可以构成复杂的。同样是元件，复杂程度同样决定着动画的动态应用后的效果。如图所示，分别是关于元件的截图。,对于简单的元件制作前面的章节中已经有所涉及，这里针对一些较复杂的元件，通过具体实例来向大家介绍它的实现与操作方法。1Deco工具简单应用Flash制作有关的动画，需要先制作元件，元件的制作方法不止一种，你可以借助它的工

3、具，结合属性来实现的。首先，这里介绍的是Deco工具，以及它的相关应用。如图所示，是一实现的模仿星空的效果截图。,（1）藤蔓式填充效果Deco工具被经常用来制作一些复杂形状的元件。它主要有如下效果：藤蔓式填充、网格填充、对称刷子、3D刷子、建筑物刷子、装饰性刷子、火焰动画、火焰刷子、花刷子、闪电刷子、粒子系统、烟动画、树刷子。关于藤蔓式填充效果它的操作方法，具体如下：（A）工具（B）绘制效果（C）高级选项,（2）网格填充效果在工具面板中，同样使用Deco工具。接着，对该工具的属性面板中的相应的内容进行设置。选择“绘制效果”为网格填充，分别对其中的平铺选项进行颜色调整，并对“高级选项”进行变更，

4、如图是应用网格填充实现的绘制效果。,（3）对称刷子效果对称刷子效果，它的实现方法是，使用Deco工具，在属性面板中，选择“绘制效果”为对称刷子，同时调整合适的颜色，并对“高级选项”进行设置，即可应用。如图是应用对称刷子实现的绘制效果。,2时钟元件制作在了解了Flash中相关工具的应用与效果实现理论后，下面，通过一个简单的元件制作的操作方法的介绍，来帮助进一步掌握。关于时钟元件，就是应用了“对称刷子”效果，再辅以简单的操作实现的。其详细内容如下：首先，在工具面板中选择“Deco工具”，同时选择属性面板中的绘制效果为“对称刷子”。在舞台绘制图案，可得如图所示的效果。,接着，在上述完成图案的基础上，

5、在工具面板中选择“文本”，分别在十二个点的下方添加数字112，标注时钟刻度，如图所示。,最后，在工具面板中选择直线，分别在时间刻度的相应位置，进行钟表中分针和时针的绘制。这里在绘制过程中因为分钟要长于时针，可以通过橡皮擦进行的长短调整。最终绘制完成后，可得如图所示的效果。,15.1.2 复杂元件的添加,复杂元件的添加，只是元件的复杂程度加深了，也就是制作难度增加了，它的添加方法还是一样的。具体参照前面章的动画中的元件添加方法。,15.2 创建复杂动画,Flash用于创建动画，大家都已经认可它了。但是，因为动画效果实现的需要，有时动画创意在设计时比较复杂，连带的它的创建方法也就相较于要复杂的多。

6、这一节，将详细介绍有关复杂的动画的相关内容以及制作。,15.2.1 关于动画制作,计算机动画有不同的形式，但大致可以分为二维动画和三维动画两种。如图所示，是一动画截图，在接下来的内容中，将通过几个实例，讲述有关于具体的动的实现效果的相关操作。,15.2.2 引导层效果的实例应用,一个基本“引导层路径动画”由两个图层组成，上面一层是“引导层”，引导线是一种运动轨迹，下面一层是“被引导层”中的对象可以是影片剪辑、图形元件、按钮、文字等，但不能是形状，图标与普通图层一样。这里通过一实例，详细介绍引导层在动画效果中的具体应用与操作方法。,如图所示，是应用引导层制作完成的Flash动画效果。这里通过小球

7、围绕大球转动的效果，常被用于带有运动轨迹的这一类动画的操作与控制方法。它的实现，正好体现了引导层的相关作用以及所涉及的内容。1大球的制作2小球的制作3引导层,15.2.3 遮罩层效果的实例应用,遮罩动画是Flash中的一个很重要的动画类型，很多效果丰富的动画都是通过遮罩动画来完成的。在Flash的图层中有一个遮罩图层类型，为了得到特殊的显示效果，可以在遮罩层上创建一个任意形状的“视窗”，遮罩层下方的对象可以通过该“视窗”显示出来，而“视窗”之外的对象将不会显示。运用遮罩制作而成的动画。遮罩层中的内容在动，而被遮罩层中的内容保持静止。下面还是通过一应用实例，来作具体的分析。,如图所示，是根据字幕

8、的遮罩显示实现的效果。其主要内容是，通过动画效果，将文字通过一定的方式进行展示。1文字制作2元件制作3.遮罩效果4鼠标移动遮罩效果,15.2.4 复杂逐帧效果的实例应用,在Flash动画尤其是短片的制作中或多或少都要表现一些较复杂的动作，而Flash本身功能的限制使我们在制作动画时感到手脚受到牵制，或者为此付出过多的时间和精力。逐帧动画表现方方法技巧、以及充分利用Flash的变形功能制作动画的表现技巧，针对这些内容，我们通过一个应用实例的具体制作来进行了解。如图所示，是一逐帧动画的实现的效果。,关于该动画的制作方法如下：1创建设置舞台背景为白色。在工具面板中选择“椭圆”按钮，同时设置填充色为“

9、红色”，通过鼠标拖动，在舞台的左侧位置，创建一大小适中的圆，如图所示。,2动画实现图形创建完成后，在时间轴的1-15帧的位置，分别逐一创建“关键帧”。最终得到如图所示的时间轴效果。到这里该逐帧动画也就实现了。,15.3 动画的轨道、时间轴及其它内容,在动画的制作过程中，轨道、时间轴、帧、图层和场景等内容是我们常常接触，也需要频繁使用的。在接下来的内容中，着重关于它们的相关的应用及操作方面来作为切入点。主要通过Flash简单实例的制作与讲解，来进行相应的介绍。,15.3.1 帧,帧是进行flash动画制作的最基本的单位，每一个精彩的flash动画都是由很多个精心雕琢的帧构成的，在时间轴上的每一帧

10、都可以包含需要显示的所有内容，包括图形、声音、各种素材和其他多种对象帧有关键帧、空白关键帧和普通帧之分。下面对其一些相关内容着重进行介绍。,1帧的区别它们之间的区别在于：（1）关键帧在时间轴上显示为实心的圆点，空白关键帧在时间轴上显示为空心的圆点，普通帧在时间轴上显示为灰色填充的小方格。（2）同一层中，在前一个关键帧的后面任一帧处插入关键帧，是复制前一个关键帧上的对象，并可对其进行编辑操作；如果插入普通帧，是延续前一个关键帧上的内容，不可对其进行编辑操作；插入空白关键帧，可清除该帧后面的延续内容，可以在空白关键帧上添加新的实例对象。（3）关键帧和空白关键帧上都可以添加帧动作脚本，普通帧上则不能

11、。,2帧的操作帧应用于动画，实现了逐帧动画和补间动画的相应效果。补间动画，有动画补间和形状补间二种形式。关于帧的操作，下面的内容中将对其进行介绍。（1）帧的创建与转换（2）帧的选择与移动（3）帧的复制、剪切和粘贴（4）帧的翻转与查看（5）帧的显示状态与帧频设置,（6）帧应用在了解了上述帧的相关内容之后，如图所示的效果，是进行相应应用的结果。,15.3.2 轨迹,有需要才有应用，有应用才有轨迹。用这句话，能很贴切形容其作用。在我们制作Flash动画时，为了想让元件或类似的物体，根据我们自己设定的内容运动，也就有了轨迹。它往往反映的是不归则物体、不规律运动方式的相关效果。这里让我们通过一个实例来进

12、一步的帮助掌握。如图所示，是一个简单图形。我们通过应用不同的运动轨迹，就能让它在Flash中呈现不同的美的效果。,对于不同效果的实现，具体内容如下：首先，在场景中通过“矩形”工具绘制如图所示的内容。完成后，将其转换为“元件”。,这里，通过如图1不同的帧的设置，可以得到如图2所示的效果。图1 图2,下面，我们可以借助flash逐帧“轨迹”的技巧，“移动”动画时选择更长的帧距。最后得出更美的图案。具体方法是，通过“绘图纸外观”、“绘图纸边框”、“编辑多帧”等形式，显示图形的不同的美的图形旋转轨迹。如图所示，就是其中的实现效果。,15.3.3 时间轴,时间轴特效功能经常用于以模板的形式制作一些复杂而

13、重复的动画，如模糊、位移等。恰当合理地运用Flash内建的时间轴特效功能，可以为自己平淡的动画添加一些闪光的动感。时间轴特效可以应用到的对象有文本、图形（包括形状、组和图形元件）、位图图像、按钮元件等。当将时间轴特效应用于影片剪辑时，Flash将把特效嵌套在影片剪辑中。,这里通过一具体实例来帮助大家认识时间轴。如图所示，是借助时间轴中，相应的效果设置实现的，动态文字仿脉博跳动形式的运动画面。,15.3.4 场景,FLASH动画的各个对象的位置关系是按照一定的层状结构来呈现的。他的根是场景。有多个场景的情况，实际上每个场景是独立的动画，FLASH是通过设置各个场景播放顺序来把各个场景的动画逐个连

14、接起来，因而我们看到的动画播放是连续的。,对于具体的某一个场景来说，和其他场景的结构是一样的。都包含一个或多个图层（lawyer），每一个图层中的关键桢可以由一层或很多层（level）组成。如图所示，是一可以作为动画场景的效果截图。,15.3.5 图层,Flash对对象实行分层管理，即将不同的对象放置在不同的图层中，这样在修改其中一个对象时不会影响到其他的对象。可以形象地理解为，图层就是透明的玻璃纸，不同的对象绘制在不同的玻璃纸上，它们相互重叠以显示整体的内容，但在修改某一对象时其他对象不受影响。对于图层的操作在时间轴的“图层编辑区”中实现。1创建图层2图层改名3删除图层4隐藏图层5锁定图层,15.3.6 实例应用,在对上述内容有了相关认识之后，接下来通过一简单实例，来针对其应用进行具体介绍。动物的奔跑效果及其状态体现，通过Flash动画来展示，是较常用，也是较复杂的制作。这里通过四肢动物为代表，来帮助大家掌握。,15.4 本章小结,本章主要通过一些Flash应用的具体例子，详细介绍在实际制作与编辑过程中，较高应用技巧与技术的相关内容。同时，结合一些较难的动画实例的讲解与描述，帮助大家掌握较难的时间轴、轨道、图层及其它内容。这里需要大家重点进行学习的是，有关于动画的制作的高阶的应用能力的锻炼。,