计算机网络与多媒体(-罗静)-(5)[161页]课件.pptx

1、第5章 动画制作技术第5章 动画制作技术5.1 动画的基础知识动画的基础知识5.2 电脑动画电脑动画5.3 网页动画网页动画5.4 Flash动画设计概动画设计概述述5.5 Adobe Flash CS5软件基础软件基础5.6 逐帧动画的制作逐帧动画的制作5.7 运动补间动画的制作运动补间动画的制作5.8 Adobe Flash CS5形状补间动画形状补间动画本本章小章小结结思思考与设计考与设计第5章 动画制作技术5.1 动画的基础知识动画的基础知识5.1.1 动画的基本概念动画的基本概念英国动画大师约翰海勒斯(John Halas)对动画有一个很准确的描述：“动画的变化是动画的本质。”动画由

2、很多内容连续但各不相同的画面组成，由于每幅画面中的物体位置和形态不同，在连续观看时，能给人以活动的感觉。第5章 动画制作技术动画是通过把人、物的表情、动作、变化等分段画成许多幅画，再用摄影机连续拍摄成一系列画面，给视觉造成连续变化的图画。它的基本原理与电影、电视一样，都是视觉原理。人眼具有“视觉暂留”的特性，就是说人的眼睛看到一幅画或一个物体后，在1/24秒内不会消失。利用这一原理，在一幅画还没有消失前播放出下一幅画，就会给人造成一种流畅的视觉变化效果。第5章 动画制作技术5.1.2 动画的发展历史动画的发展历史早期，中国将动画称为美术片，现在，国际统称为动画片。动画是一门幻想艺术，更容易直观

3、表现和抒发人类的情感，可以把现实中不能够看到、听到的情景转为现实，极大地扩展了人类的想象力和创造力。1909年，美国人Winsor Mccay用一万张图片表现了一段动画故事，这是迄今为止世界上公认的第一部动画短片。1928年，华尔特迪士尼(Walt Disney)制作了第一部有声动画威利汽船；1937年，又创作了第一部彩色动画长片白雪公主和七个小矮人。第5章 动画制作技术1995年，皮克斯公司制作出第一部三维动画长片玩具总动员，使动画行业焕发出新的活力。动画发展到现在，分为二维动画和三维动画两种，用Flash等软件制作成的就是二维动画，而三维动画则主要是用Maya或3Ds MAX制作而成的。动

4、画从最初到现在，其本质没有多大的变化，而动画制作手段却发生了翻天覆地的变化。现在，“电脑动画”、“电脑动画特技”不绝于耳，可见电脑对动画制作领域的强烈震撼。第5章 动画制作技术5.1.3 制作动画的条件制作动画的条件合适的计算机硬件设备和相应的应用软件是制作动画的必要条件。1硬件条件硬件条件制作动画的计算机首先应该是一部多媒体计算机，能够使用和加工各种媒体，满足动画制作需求的计算机没有特殊要求，只是应有高速的CPU主频，足够大的内存容量，以及大量的硬盘空间。彩色显示器对于动画制作非常重要，在经济条件准许的情况下，尽量选用屏幕尺寸大、色彩还原好、点距小的显示器，在某些特定条件下，还可以使用双显示

5、器进行动画制作。第5章 动画制作技术制作动画的主要工作是用鼠标器绘制画面，要求鼠标器具有反应灵敏、移动连续、无跳跃、手感舒适等特点。另外，制作动画也需要一些特殊的多媒体配件，例如视频卡、视频压缩卡等，可以根据动画的实际需要选配相应的硬件卡。第5章 动画制作技术2软件环境软件环境目前，大多数动画制作和处理软件都运行在Windows环境下，为了保证动画系统稳定、可靠的运行，Windows中不要同时运行其他应用程序，同时应关闭任务栏中各个任务项。在制作动画时，最好关闭某些病毒监控程序，这些程序会影响动画程序运行的速度，并且容易误把动画系统形成的中间数据看作成病毒，造成不必要的麻烦。第5章 动画制作技

6、术5.1.4 全动画与半动画全动画与半动画全动画与半动画描述了动画内容与画面数量之间的关系，是有关动画的重要概念。1全动画全动画全动画是指在动画制作中，为了追求画面的完美、动画的细腻和流畅，按照每秒播放24幅画面的数量制作的动画。全动画对时间和金钱在所不惜，其观赏性极佳，迪士尼公司出品的大量动画产品都属于全动画。第5章 动画制作技术2半动画半动画半动画又称为有限动画。制作半动画与制作全动画几乎需要完全相同的动画制作技巧。半动画采用少于每秒24幅的画面来绘制动画，常见的画面数为6幅或8幅。以8幅画面的半动画为例，为了保证播放的速率，画面总数仍应为24幅，则每幅画面重复2次，形成三幅画面一个动作的

7、格局。由于半动画的动作画面比较少，因此动作的连续性、流畅性较全动画差，但半动画不需要全动画那样高昂的经济开支和巨大的工作量。第5章 动画制作技术5.2 电电 脑脑 动动 画画人们习惯上把计算机制作的动画称为电脑动画。电脑动画主要经历了以下几个阶段：第一阶段：用计算机画出简单的线条和几何图形，计算机把绘图过程记录下来，在需要的时候，由计算机重复绘画过程，使人们看到活动的画面。第5章 动画制作技术第二阶段：电脑动画中活动的主题从简单的线条、几何图形过渡到比较复杂的图形。画面上的变化模式和多种颜色的运用使得这一阶段的动画具有很好的视觉效果，开始体现电脑动画的风格。第三阶段：以先进的软件和硬件作为条件

8、，逼真地模拟手工动画，并进一步制作手工动画难以表现的题材。动画主体从图形过渡到图像，并能够生成数字化的主题模型，进而产生纯电脑动画。第5章 动画制作技术5.2.1 电脑动画的基本概念电脑动画的基本概念就动画性质而言，电脑动画可分为两大类：一类是帧动画，另一类是矢量动画。如果按照动画的表现形式分类，则可分为二维动画、三维动画和变形动画三大类。所谓帧动画，是指构成动画的基本单元是帧，很多帧组成一部动画片。帧动画借鉴传统动画的概念，每帧的内容不同，当连续播放时，形成动画视觉效果。矢量动画是经过计算机计算而生成的动画，其画面只有一帧，主要表现变化的图形、线条、文字和图案。矢量动画同时采用编程方式和某些

9、矢量动画制作软件完成。第5章 动画制作技术二维动画也称为平面动画，是帧动画的一种，它沿用了传统动画的概念，具有灵活的表现手段、强烈的表现力和良好的视觉效果。三维动画也称为空间动画，可以是帧动画，也可以制作成矢量动画。主要表现三维物体和空间运动。它的后期加工和制作往往采用二维动画软件来完成。变形动画也是帧动画的一种，它具有把物体形态过渡到另外一种形态的特点。形态的变换与颜色的变换都经过复杂的计算，形成引人入胜的视觉效果。变形动画主要用于影视人物、场景变换、特技处理、描述某个特别缓慢变化的过程等场合。第5章 动画制作技术5.2.2 动画制作软件动画制作软件动画制作软件通常具备大量的编辑工具和效果工

10、具，用来绘制和加工动画素材。不同的动画制作软件用于制作不同形式的动画：Flash、Magic Morph等软件用于制作各种二维动画，如网页动画、变形动画等；3DS Max、Cool 3D、Maya等软件用于制作各种三维动画，如三维造型动画、文字三维动画、特技三维动画等。第5章 动画制作技术5.2.3 动画制作软件介绍动画制作软件介绍1Softimage 3D Softimage 3D是由SGI工作站移植到PC机上的软件，功能极其强大，最擅长卡通造型和角色动画，是电影制作必不可少的工具。侏罗纪公园、第五元素、闪电悍将等电影都可以找到它的身影。第5章 动画制作技术2MayaMaya是SGI公司收购

11、Alias公司和Wavefront公司后推出的新一代三维动画软件。它的功能强大，尤其是对于造型功能，提供了Polygons、Subdivision、NURBS、Artisan Paint Tool、Paint Effects五种建模工具。3HOUDINIHOUDINI是SGI工作站移植到PC机上的三维动画软件。它将平面图像处理、三维动画和视频合成技术有机结合，其创作流程极富个性。在电影终结者2、独立日等中都显示了其不凡的身手。第5章 动画制作技术43Ds Max3Ds Max是国内使用人数最多的三维动画和视觉效果软件。它的功能强大、开放性好，其最大的优点是插件特别多，从而使得它在角色动画、渲染

12、质感等方面有了质的飞跃。3Ds Max凭借Discreet公司及其母公司Autodesk的实力，理所当然地成为世界上最广泛用于三维建模、动画和渲染的专业系统解决方案。第5章 动画制作技术5LightWave 3D LightWave 3D在好莱坞所具有的影响力一点不比Softimage、Alias等差。其价格低廉、品质出色。名扬天下的好莱坞巨片泰坦尼克号中泰坦尼克的造型，就是用这个软件来设计完成的。6Rhino 3DRhino 3D俗称“犀牛”，美国Robert McNeel公司研制的应用于PC机的专业NURBS建模软件。它的程序设计人员出自著名的工业设计软件巨头Alias公司。第5章 动画制

13、作技术5.3 网网 页页 动动 画画5.3.1 基本概念基本概念网页动画主要应用于Internet的网页制作、网络广告、电子贺卡、产品展示以及网络游戏等方面，与文字、图片和声音配合在一起，构成了多媒体信息的集合。除了国际互联网以外，网页动画还用于电视字幕制作、片头动画、MTV画面制作、多媒体光盘等领域。第5章 动画制作技术5.3.2 网页动画的特点网页动画的特点(1)数据量小。为了便于网络信息的传播，网页动画除了采用压缩算法对数据进行压缩以外，还采用了约束画面尺寸和采用适当的颜色管理功能等措施，使得数据量进一步减少。(2)表现力强。在网页上演播活动的画面，更容易引起人们的注意，而且，演播内容的

14、不断更替，使得画面信息量更大。(3)视觉效果好。如果设计适当，就能产生非常好的启示、引导和展示效果。(4)模式多样化。在网页上，可以使用交互式矢量动画，也可以使用帧动画。第5章 动画制作技术5.3.3 网页动画的制作途径网页动画的制作途径(1)将平面动画、三维动画等多种动画形式加工和整理，然后利用网页动画转换软件将其转换成网页动画，是比较灵活的动画制作方式。(2)使用专门的网页动画制作软件直接生成网页动画，其成品可以是矢量动画，也可以是帧动画。这种途径制作的网页动画具有交互性，特别适合网络应用，其传输速率和使用效率比较高，动画形态和制作也比较灵活。第5章 动画制作技术5.4 Flash动画设计

15、概述动画设计概述Flash是由Macromedia公司推出的交互式矢量图和 Web 动画的标准，后被Adobe公司收购。Flash的前身是Future Wave公司的Future Splash，是世界上第一个商用的二维矢量动画软件，用于设计和编辑Flash文档。Flash是基于矢量的具有交互性的图形编辑和二维动画制作软件，它具有强大的动画制作功能和卓越的视听表现力。第5章 动画制作技术5.4.1 Flash动画设计基本功能动画设计基本功能绘图和编辑图形、补间动画以及遮罩动画是Flash动画设计的三大基本功能，它是整个Flash动画设计知识体系中最重要、最基础的部分。绘图和编辑图形功能要求，在绘

16、图的过程中要学习怎样使用元件来组织图形元素，这也是Flash动画的一个巨大特点。Flash中的每幅图形都开始于一种形状，形状由两个部分组成：填充(fill)和笔触(stroke)，前者是形状里面的部分，后者是形状的轮廓线。第5章 动画制作技术5.4.2 Flash动画设计的类型动画设计的类型Flash动画设计基本类型包括补间动画、逐帧动画、遮罩动画，这三种基本类型展示了整个Flash动画的最大优点，另外还有引导层动画。第5章 动画制作技术1Flash补间动画补间动画1)运动补间动画运动补间动画运动补间动画是Flash中非常重要的动画表现形式之一，在Flash中制作动作补间动画的对象必须是“元件

17、”或“组成”对象。基本原理：在一个关键帧上放置一个元件，然后在另一个关键帧上改变该元件的大小、颜色、位置、透明度等，Flash根据两者之间帧的值自动创建的动画，被称为动作补间动画。第5章 动画制作技术2)形状补间动画形状补间动画所谓的形状补间动画，实际上是由一种对象变换成另一种对象，而该过程只需要用户提供两个分别包含变形前和变形后对象的关键帧，中间过程将由Flash自动完成。基本原理：在一个关键帧中绘制一个形状，然后在另一个关键帧中更改该形状或绘制另一个形状，Flash根据两者之间帧的值或形状来创建的动画称为“形状补间动画”。形状补间动画可以实现两个图形之间颜色、形状、大小、位置的相互变化，其

18、变形的灵活性介于逐帧动画和动作补间动画之间，使用的元素多为鼠标或压感笔绘制出的形状。第5章 动画制作技术2Flash逐帧动画逐帧动画逐帧动画是一种常见的动画形式，它的原理是在“连续的关键帧”中分解动画动作，也就是每一帧中的内容不同，连续播放形成动画。基本原理：在时间帧上逐帧绘制帧内容称为逐帧动画，由于是一帧一帧地画，所以逐帧动画具有非常大的灵活性，几乎可以表现任何想表现的内容。第5章 动画制作技术3Flash遮罩动画遮罩动画遮罩是Flash动画创作中所不可缺少的，这是Flash动画设计三大基本功能中重要的出彩点。使用遮罩配合补间动画，用户可以创建更多丰富多彩的动画效果，如图像切换、火焰背景文字

19、、管中窥豹等都是实用性很强的动画。遮罩的原理非常简单，但其实现的方式多种多样，特别是和补间动画以及影片剪辑元件结合起来，可以创建千变万化的动画效果。第5章 动画制作技术基本原理：在Flash中遮罩就是通过遮罩图层中的图形或者文字等对象，透出下面图层中的内容。在Flash动画中，“遮罩”主要有两种用途：一种是用在整个场景或一个特定区域，使场景外的对象或特定区域外的对象不可见；另一种是用来遮罩住某一元件的一部分，从而实现一些特殊的效果。被遮罩层中的对象只能透过遮罩层中的对象显现出来，被遮罩层可使用按钮、影片剪辑、图形、位图、文字、线条等。第5章 动画制作技术4Flash引导层动画引导层动画引导层动

20、画也被称为“引导路径动画”，就是将一个或多个层链接到一个运动引导层，使一个或多个对象沿同一条路径运动的动画形式。这种动画可以使一个或多个元件完成曲线或不规则运动。在Flash中引导层是用来指示元件运行路径的，所以引导层中的内容可以是用钢笔、铅笔、线条、椭圆工具、矩形工具或画笔工具等绘制的线段，而被引导层中的对象是跟着引导线走的，可以使用影片剪辑、图形元件、按钮、文字等，但不能应用于形状。第5章 动画制作技术需要注意的是引导路径动画最基本的操作就是使一个运动动画附着在引导线上，所以操作时应特别注意引导线的两端，被引导的对象起始点、终止点的两个中心点一定要对准“引导线”的两个端头。第5章 动画制作

21、技术5.5 Adobe Flash CS5软件基础软件基础5.5.1 Adobe Flash CS5界面介绍界面介绍启动Flash CS5，在Windows操作系统中，选择“开始”“所有程序”Adobe Flash CS5。启动Flash后，将进入Flash CS5的主界面，其中分为三列，标准文件创建模板、新建文件、学习教程及其他资源的链接，如图5-1所示。第5章 动画制作技术图5-1 Flash启动界面第5章 动画制作技术第一次启动使用Flash软件，可以选择新建ActionScript 3.0，来新建Flash文档，并进入Flash工作界面，如图5-2所示。最近的项目栏，会自动列出最近新建

22、或修改过的Flash文档，可以通过该选项打开本地Flash文件，如图5-3所示。ActionScript 3.0是Flash脚本语言的最新版本，可以使用它添加交互性动作。ActionScript 3.0要求浏览器具有Flash Player 9或更高版本。第5章 动画制作技术 图5-2 新建Flash文档 图5-3 打开Flash文件第5章 动画制作技术Adobe Flash工作区包括位于屏幕顶部的菜单命令以及多种工具和面板，这些工具和面板主要用于在影片中进行元素的编辑和添加。使用Flash时，可以为动画创建所有的对象，也可以导入在Adobe Illustrator、Adobe Photosh

23、op、Adobe After Effects及其他兼容应用程序中创建的元素。一般情况，Flash会显示菜单栏、时间轴、舞台、工具面板、属性检查器以及另外几个面板(如图5-4所示)。在Flash中工作时，可以打开、关闭、停放和取消停放面板，也可以在屏幕上四处移动面板。值得一提的是，工具面板的显示和关闭，可以通过“窗口”菜单选项来设定，例如可选择“窗口”“工作区”“基本功能”来恢复工作区的基本界面。第5章 动画制作技术图5-4 Flash工作界面第5章 动画制作技术5.5.2 常用面板介绍常用面板介绍1工具面板工具面板工具面板是经常使用的选择、绘图、颜色填充、图形调整的工具集，如图5-5所示。图5

24、-5 工具面板第5章 动画制作技术其中主要使用到的工具如下所述：(1)选择工具：选择工具的作用是选择对象、移动对象、改变线条或对象轮廓的形状。主要用来选取对象，以便对该对象进行操作，如：删除，移动等。如图5-6所示，用鼠标按住不动，然后拖动到所需要的位置。图5-6 选择工具应用第5章 动画制作技术另外它还具有切割和变形的功能。用工具箱中的工具绘制出圆、矩形、线条等形状时，用鼠标可以将它们切割。将不需要的部分选中，按住鼠标拖动，如图5-7所示。图5-7 选择工具切割功能第5章 动画制作技术当鼠标接近我们绘制的图形时，这时可按住鼠标拖动来改变它的外形，如图5-8所示。图5-8 选择拖动应用第5章

25、动画制作技术(2)部分选取工具：单击节点，会出现两个手柄。拖动其中一个手柄可以改变曲线的形状，拖动节点可以改变节点的位置。(3)任意变形工具：可以将绘制的图形，导入的图片等，通过鼠标调整改变成需要的形状。(4)线条工具：用于绘画直线，在按下鼠标左键进行拖动时，如果按住了Shift键，则可绘制水平、垂直或以45角度增加的直线。(5)套索工具：和Photoshop类似，套索工具用来选取不规则的区域以便对所选部分进行操作，主要用于位图处理。第5章 动画制作技术(6)钢笔工具：钢笔工具，用与绘制几何图形，同样可以使用锚点。(7)文本工具：可以实现文本的创建、编辑。(8)矩形工具：用来绘制矩形和椭圆，在

26、绘制过程中按住Shift键可绘制正方形或圆形。(9)铅笔工具：绘制任何形状的曲线，点击铅笔工具后，在工具箱下面有个图标，单击后可选择“平滑”，这样绘出的线条比较平滑。按住Shift键可绘制水平方向或垂直方向的直线。第5章 动画制作技术(10)刷子工具：使用刷子工具可以随意地画出各种色块。(11)颜料桶工具：也叫油漆桶工具，用来对封闭图形的内部进行填充或修改。(12)滴管工具：滴管工具可以从场景中选择线条、文本和填充的样式，然后创建或修改相应的对象。(13)橡皮擦：橡皮擦工具可以擦除当前场景中的对象。当选择橡皮擦后，工具箱下面还有擦除模式，水龙头是用来擦除整块颜色的。第5章 动画制作技术(14)

27、手形工具：手形工具可以将文档窗口中的场景连同对象一起移动。(15)放大镜：放大镜工具，用于缩放舞台场景。(16)笔触色按钮：笔触色按钮用来改变线条或所绘几何图形边框的颜色。(17)填充色按钮：用来改变填充的颜色。第5章 动画制作技术2对齐面板对齐面板对齐面板也是常用的面板，包括了对齐、信息、变形三个页框。对齐页主要是舞台对象的相互对齐，其中“与舞台对齐”选项经常使用；信息页反映了对象的形状和位置信息；变形页则可以实现图形对象的放大、缩小、旋转等操作。具体如图5-9所示。第5章 动画制作技术图5-9 对齐面板第5章 动画制作技术3属性面板属性面板当选中不同对象时，会显示不同对象的属性，属性面板用

28、以修改和调整对象的属性，是经常用以设置对象的面板。如图5-10所示就是文档的属性。第5章 动画制作技术图5-10 文档属性第5章 动画制作技术5.5.3 Flash文档基本操作文档基本操作1Flash文档的基本格式文档的基本格式(1)后缀名为.fla的文件是Flash动画制作的原始文件，只能用对应版本或更高版本的Flash打开编辑。(2)后缀名为.swf的文件是Flash影片文件，由Flash原文件导出生成，该类型文件必须有Flash播放器才能打开(包括各大浏览器，视频播放器)，且播放器的版本须不低于Flash程序自带播放器的版本。第5章 动画制作技术2Flash文档的创建文档的创建(1)启动

29、Adobe Flash CS5，会进入欢迎界面。如前所述，可以通过选择欢迎界面中的新建栏目下的ActionScript 3.0来新建一个Flash文档，如图5-11所示。第5章 动画制作技术图5-11 欢迎界面新建文档第5章 动画制作技术(2)通过文件菜单选项新建文档：“文件”“新建”，然后选择ActionScript 3.0，如图5-12所示。同时还可以设置将要创建文档的舞台的宽、高，帧速率等，如图5-13所示。第5章 动画制作技术 图5-12 文件菜单新建文档第5章 动画制作技术图5-13 选择ActionScript 3.0第5章 动画制作技术(3)新建文档后，进入Flash工作界面，如

30、图5-14所示。图5-14 Flash工作界面第5章 动画制作技术3文档的保存文档的保存选择“文件”“保存”，出现“另存为”对话框，选择好文件保存的位置，然后在文件名中输入“Flash动画一”，保存类型选择“Flash CS5文档(*.fla)”，最后点击确定保存文档，如图5-15所示。第5章 动画制作技术图5-15 保存文档第5章 动画制作技术(1)保存好后的文档为Flash的原始文档，并非影片文档。如要保存演示型文件，则要选择保存为*.swf格式文档。(2)若希望打开已经保存的Flash文档，则可以点击“文件”“打开”选项，在保存位置选择要打开的Flash文档打开，以便进行修改和编辑。第5

31、章 动画制作技术5.5.4 Flash动画制作相关概念动画制作相关概念动画产生的原理就是画面的连续播放，每秒播放多少幅画面我们称为帧速率F/s，电影是每秒播放24幅画面，电视则每秒播放25幅画面，Flash CS5默认帧速率是每秒播放24幅画面(可以修改)。每一幅画面我们称它为一个帧，就是一个动画在某个时刻的一个画面，也就是时间轴上的一个点(方格)。时间轴就相当于现实生活中的胶卷，而一个帧就相当于胶卷里的一张胶片。连续播放的帧就构成一个动画。帧又分为空白关键帧，关键帧和普通帧。第5章 动画制作技术1空白关键帧空白关键帧在时间轴上，一个小方格并且里面有一个白色的小圆圈，称为空白关键帧。在新建的F

32、lash文件里面，默认图层1的第一帧就是空白关键帧，这表示在舞台上第一帧里面什么内容都没有，一片空白，但是它又是关键的，因为将来这个空白关键帧会发生变化，成为动画的关键帧，如图5-16所示。图5-16 空白关键帧第5章 动画制作技术2关键帧关键帧起关键变化的帧，动画要表现运动或变化，至少前后要给出两个不同的关键状态，表示关键状态的帧叫做关键帧。如图5-17所示，小格子里面是个实心的小黑点，它就是关键帧，里面有实际存在的内容，本图中我们导入了一张图片到舞台，可以看到，空白关键帧变成了有黑点的关键帧。图5-17 关键帧 第5章 动画制作技术3普通帧普通帧 普通帧主要起到对前一关键帧的延续播放，它播

33、放最近的前一关键帧的内容，即普通帧是关键帧的播放延续。如图5-18所示，在图层1的时间轴上，从第1个关键帧后的第2帧到第20帧间连续插入了普通帧，也就是第一个关键帧会连续播放19帧的时间。图5-18 普通帧第5章 动画制作技术4帧的插入帧的插入对空白关键帧、关键帧、普通帧的认识和理解是Flash动画制作的基础，值得注意的是，在时间轴上，可以使用插入菜单选项来实现各类帧的创建，如图5-19所示。选择“插入”“时间轴”“帧(普通帧)/关键帧/空白关键帧”。第5章 动画制作技术图5-19 帧的创建第5章 动画制作技术5元件元件Flash使用的原始的素材对象，包括形状、元件、实例、声音、位图、视频、组

34、合等，元件是构成Flash 动画所有因素中最基本的因素，元件存放在库中，例如可以将文字转换为图形元件，或者创建其他元件。元件必须在Flash中才能创建或转换生成，它有三种形式，即影片剪辑、图形、按钮。元件只需创建一次，即可在整个文档或其他文档中重复使用。第5章 动画制作技术(1)影片剪辑元件：可以理解为电影中的小电影，可以完全独立于场景时间轴，并且可以重复播放。影片剪辑是一小段动画，用在需要有动作的物体上，它在主场景的时间轴上只占1帧，就可以包含所需要的动画。影片剪辑就是动画中的动画。“影片剪辑”必须要进入影片测试里才能观看到。(2)图形元件：是可以重复使用的静态图像，它是作为一个基本图形来使

35、用的，一般是静止的一幅图画，每个图形元件占1帧。第5章 动画制作技术(3)按钮元件：实际上是一个只有4帧的影片剪辑，但它的时间轴不能播放，只是根据鼠标指针的动作做出简单的响应，并转到相应的帧，通过给舞台上的按钮添加动作语句来实现Flash 影片强大的交互性。元件的管理在库面板中进行，在库面板中可以创建许多文件夹，对不同类别的元件进行分类管理。元件的创建如图5-20所示，选择“插入”菜单“新建元件”选项。第5章 动画制作技术图5-20 元件的创建第5章 动画制作技术6库库库是用来存放各类素材和元件的地方，Flash的素材或者元件可以导入到库，对于新建的元件也是存放在库中的。7图层图层图层(Lay

36、er)的概念和前面章节学过的Photoshop中的一样。形象地说，Flash的图层也可以看成是叠放在一起的透明的胶片，各图层相互独立互不影响，最后的动画显示效果是各个图层叠加的显示效果。各图层相互独立，可以根据需要，在不同层上编辑不同的动画而互不影响，并在放映时得到合成的效果。使用图层可以更好帮助动画的安排和组织。以下是一些基本的图层操作：第5章 动画制作技术(1)双击任何一个层都可以选中该层并进入重命名图层名称的状态，根据设计需要命名图层有利于动画制作。(2)单击鼠标左键即选中了某一图层，同时也就选中了所有该层上的对象。按住Shift键，可以同时选择多个图层。(3)特别强调，图层的排列是有顺

37、序的，最上面的层是你所能看到的最接近你的层，其上的内容将遮盖在其他层之上，也可以通过用鼠标拖动的方式改变层与层之间的排列关系。第5章 动画制作技术(4)每一层上的图标和文字都称作是该层的属性，也可以通过在某一层点鼠标右键，在菜单中选属性(Properties.)来进行修改。(5)可以通过指向图层后单击鼠标右键来实现新图层的插入、删除、剪切、复制、粘贴等编辑操作，如图5-21所示。第5章 动画制作技术图5-21 图层的编辑第5章 动画制作技术5.5.5 素材的导入和舞台的调整素材的导入和舞台的调整(1)将素材导入到舞台，点击选择：“文件”“导入”“导入到舞台”，这个时候选择“文件的创建和素材导入

38、”文件夹下的导入素材图片，可以看到素材被导入到舞台，如图5-22所示。第5章 动画制作技术图5-22 通过文件菜单导入素材到舞台第5章 动画制作技术(2)素材导入舞台后，可以看到素材呈现在舞台上，同时注意观察，图层1的第1帧也由空白关键帧变成了关键帧，因为在这一帧上出现了关键内容，也就是关键变化，如图5-23所示。(3)用鼠标选择库，可以看到素材在导入到舞台的同时也被导入到库中了；也可以将素材先导入到库，然后用鼠标拖动库中的素材到舞台。第5章 动画制作技术图5-23 素材导入后的变化第5章 动画制作技术(4)选择“窗口”菜单中的“对齐”，弹出对齐面板。在“与舞台对齐”上打钩，然后选中导入到舞台

39、的图片，点击对齐面板上的水平中齐按钮，然后再点击对齐面板上的垂直中齐按钮，则图片居于舞台正中对齐。(5)单击舞台白色部分，可以观察到此时的属性面板变化为文档的属性，这个时候可以直接点击文档属性中的大小，调整舞台的宽和高。本例中可以将文档的宽和高调整为300200，则文档的大小与图片的大小一致，同时还可以对文档播放的帧速率进行修改，如图5-24所示。第5章 动画制作技术图5-24 通过属性面板调整文档大小、帧率第5章 动画制作技术5.6 逐帧动画的制作逐帧动画的制作逐帧动画是Flash制作动画的基础，它是由一张张静止的图像连续快速播放形成的，而这些静止的图片就叫做“帧”。其原理是在“连续的关键帧

40、”中分解动画动作，也就是对时间轴上的每帧逐帧绘制不同的内容，使其连续播放而形成动画。第5章 动画制作技术【例5.1】舞动的“恭贺新喜”。本例通过简单逐帧设置，以实现闪烁字体动画效果，具体实现步骤如下：(1)新建Flash文档，并保存为“恭贺新喜.fla”。(2)选中第一个空白关键帧，选择文本工具，如图5-25所示，在舞台上单击，出现文本输入光标，在舞台上输入文字“恭贺新喜”。第5章 动画制作技术图5-25 文本属性设置第5章 动画制作技术(3)设置文字效果：选中文字，在“属性”面板中设置文字效果，设置文字字体为“华文彩云”，字号为“96号”，颜色为“黄色”，如图5-26所示。(4)点击选择工具

41、，选中文本对象，然后打开对齐面板，调整文本的位置，相对舞台居中对齐，如图5-27所示。第5章 动画制作技术图5-26 文字属性设置第5章 动画制作技术图5-27 相对舞台居中对齐第5章 动画制作技术(5)选择时间轴上的第2帧，这个时候按F6键(F6键的作用是复制上一个关键帧)，此时，第1帧被复制到第2帧的相应位置。(6)动画效果的产生是因为前后画面的变化，因此第2帧和第1帧如果相同则没有意义。选中第2帧，然后选中文本，修改颜色为“红色”，如图5-28所示。第5章 动画制作技术 图5-28 插入第2关键帧 修改颜色属性第5章 动画制作技术(7)选择时间轴上的第3帧，这个时候按F6键，复制上一个关

42、键帧即第2帧，此时第2帧被复制到第3帧的相应位置。(8)选中第3帧，然后选中文本，修改颜色为“绿色”。(9)按下Ctrl+Enter键观看动画效果，由此可以看出，每一帧图画位置一样，大小一样，但是颜色发生了变化，由于颜色的差异，实现了文字的闪烁效果动画。(10)保存文档为fla格式，并将影片导出为swf格式。第5章 动画制作技术【例5.2】文字的书写效果。本例主要通过对文字图形实现分离打散，修改每一个关键帧，以实现逐帧变化效果，具体操作步骤如下：(1)新建一个Flash文档，文件命名为“梦字的书写.fla”文档。(2)用鼠标点击舞台，在属性对话框中调整舞台的大小为300200像素，FPS调整为

43、12帧，如图5-29所示。第5章 动画制作技术 图5-29 设置文档属性第5章 动画制作技术(3)在时间轴单击“图层1”的第1帧，选择工具箱中的文本工具“T”按钮，在属性面板将字体设为“华文行楷”、字号为“96”，在工作区单击，输入文字“梦”，通过对齐面板选项，将文字对齐到舞台中央，如图5-30所示。(4)用选择工具选中文字，此时单击“修改”“分离”命令，将文字打散。注意如果是多个文字组合的词语，需要执行两次这样的操作，才能最终将文字打散，如图5-31所示。第5章 动画制作技术图5-30 文本的调整第5章 动画制作技术图5-31 分离打散文字第5章 动画制作技术(5)在时间轴单击“图层1”的第

44、2帧，可以通过菜单“插入”“时间轴”“关键帧”命令，或按下F6建，插入一个与第1帧相同的关键帧，然后点击缩放工具，先将舞台中的梦字放大，然后选择第2帧中的文字，用“橡皮擦工具”，将“梦”字的最后一个笔画擦掉，如图5-32所示。(6)选中时间轴的第3帧，按下F6键，重复上一个操作，擦掉梦字的倒数第二个笔画。依次反复，直到插入最后一个关键帧，把梦字的第一个笔画擦除。第5章 动画制作技术图5-32 插入第2个关键帧第5章 动画制作技术(7)选中图层1的第1帧，按住Shift键单击最后一个关键帧，将所有的关键帧选中；单击“修改”“时间轴”“翻转帧”命令，这时选中的所有帧的排列顺序会颠倒过来，第1帧变成

45、最后一帧，最后一帧变成第1帧，如图5-33所示。(8)预览动画效果，可以看到梦字的书写动画。依此类推可以实现“中国梦”动画的书写。(9)将文件保存，并导出swf文档。第5章 动画制作技术图5-33 翻转帧顺序第5章 动画制作技术5.7 运动补间动画的制作运动补间动画的制作补间动画是指在两个有实体内容的关键帧间建立动画关系后，Flash将自动在两个关键帧之间补充动画图形来显示变化，从而生成连续变化的动画效果。Flash动画制作中补间动画分两类：一类是形状补间，用于形状的动画；另一类是动画补间，用于图形及元件的动画。第5章 动画制作技术5.7.1 运动补间的制作运动补间的制作【例例5.3】动画缩放

46、字体。动画缩放字体。本例设置前后相隔帧的字体形状大小和透明度，以实现帧的前后差异，再通过Flash自动实现补间过程，达到动画效果，具体操作步骤如下：(1)新建一个Flash文档，保存命名为“缩放字的补间.fla”。(2)单击菜单栏“修改”“文档”命令，设置尺寸为“550像素400像素”，背景设置为“黑色”，如图5-34所示。第5章 动画制作技术图5-34 设置文档属性第5章 动画制作技术(3)新建一个元件，新建的图形元件作为一个整体对象利于缩放。点击菜单栏的“插入”“新建元件”命令，如图5-35所示。打开创建新元件对话框，将名称改为“文本”，类型选择“图形”后确认，如图5-36所示，此时进入“

47、元件编辑”状态。需要注意的是元件编辑状态并不是舞台编辑状态。第5章 动画制作技术图5-35 新建元件 图5-36 图形元件第5章 动画制作技术进入元件编辑状态，如图5-37所示。图5-37 元件编辑状态第5章 动画制作技术如果点击场景图标，则回到舞台编辑状态；如果想要进入元件编辑状态需要点击元件图标，选择文本元件，再次进入元件编辑状态。(4)在元件编辑状态，选择文字工具按钮“T”，在工作区中输入“补间动画”；选中文字，在旁边的属性面板设置字体为“黑体”，“白色”，“仿粗体”，字号为“72”。运用对齐工具面板，将文本居中对齐。文本的设置还可以通过文本菜单进行。如图5-38和图5-39所示实例图。

48、第5章 动画制作技术图5-38 编辑文本图形元件第5章 动画制作技术图5-39 编辑文本图形元件第5章 动画制作技术(5)单击回到场景，此时点击库，可以看到文本元件以图形的形式保存在库中，如图5-40所示。图5-40 库中的图形元件第5章 动画制作技术(6)单击“图层1”的第1帧，点击“窗口”“库”打开库面板，将元件“文本”拖到舞台的正中间，同样使用对齐工具，让图形文字居于舞台正中。(7)选中图层1的第20帧，按下F6键，插入一个关键帧，该帧内容与第1帧的内容相同，如图5-41所示。图5-41 普通帧与关键帧的插入第5章 动画制作技术(8)动画的产生在于不同，因此，单击第1帧，然后选择菜单栏“

49、窗口”“变形”命令，打开变形面板，将高度和宽度的缩放比例都改为300%，可以看到第1帧的文本图形被放大了，如图5-42所示。第5章 动画制作技术图5-42 图形变形第5章 动画制作技术(9)单击舞台中的文本图形，在属性面板中的“颜色效果”的下拉列表中选择“Alpha”，将透明度设置为“0%”，如图5-43所示。图5-43 透明度调整第5章 动画制作技术(10)可以得知，现在第1帧和第20帧是有差异的。第1帧的图形放大了，并且是透明的。(11)创建传统补间：在图层1的第1帧上单击鼠标右键，在快捷菜单中选择“创建传统补间”，在第1帧到第20帧之间出现了蓝色的箭头，单击回车就可以查看动画效果了。第5

50、章 动画制作技术(12)在时间轴上单击“插入图层”按钮，创建一个新图层2，如图5-44所示。图5-44 插入新图层2第5章 动画制作技术(13)在图层1的第20帧上右击，选择“复制帧”；在图层2的第21帧上右击，选择“粘贴帧”，即复制了一个内容相同的帧。(14)单击图层2的第40帧，按下F6键，建立一个关键帧，该帧内容与前面第21帧的内容相同，同样打开变形面板中将高度和宽度的缩放比例都改为300%，文字的透明度设为“0%”。(15)在图层2的第21帧上右击，选择“创建传统补间动画”，在第21帧到第40帧之间出现了蓝色的箭头。第5章 动画制作技术(16)单击图层1的第40帧，单击F5命令，建立一