项目2 动画制作

项目2动画制作,教学目标,能熟练使用逐帧动画能熟练使用传统补间动画能熟练使用补间形状动画能熟练使用引导层动画能熟练使用遮罩动画能熟练使用补间动画能熟练使用骨骼动画能熟练使用3D旋转动画掌握元件的概念能熟练使用图形元件与影片剪辑元件制作动画,任务1会动的相框（三种基本动画）,案例效果,本案例学习：本案例学习动画“会动的相框”制作方法,案例分析,本案例是一个会动的相框动画。相框里有一幅会动的画，里面有若干只海鸥在飞，有海浪在涌动，有几个宽度不一、透明度不一的白色竖条矩形块在移动，还有文字“心情飞扬”在作缩放动画，同时整个相框被绳子拴在一个钮钉上左右摆动。相框背景：主要使用Flash绘图工具来制作；海鸥飞翔动画：主要使用逐帧动画、传统补间动画和影片剪辑来制作；波浪涌动：主要使用补间形状动画来制作；文字动画：主要使用影片剪辑和传统补间动画来制作；整个相框的左右摆动：主要使用影片剪辑结合传统补间动画来完成。,相关知识,1.重要概念,影片：我们可以将整个Flash动画称作影片(Movie)，所有的一切都在影片中发生，影片中可以放入文字、图片、小动画、声音、视频等。而Flash输出的.swf文件格式，就是一个影片。,场景：可以理解为话剧中的一幕，或者电影中的分镜头。可以将Flash动画表现一主题的几个阶段分为几个场景。,舞台：位于Flash界面正中央的白色大区域就是舞台，所有的对象都在其上展示出来的。只有位于舞台中的Flash对象才会在播放时被看到，任何位于舞台边界之外的灰色区域中的对象都无法被看到。,相关知识,时间轴：时间线体现了Flash动画在时间上的延伸。如果你是Flash这出话剧的导演的话，所有演员都听你的指挥，包括出场和退场的时间、音乐响起的时间和大幕落下的时间等。,帧：时间线是由帧和层组成的，帧可以理解为电影胶片中的一格。帧中可以有内容，也可以没有。一个普通的帧是我们不能编辑的，但我们可以把某一帧改变成关键帧来进行编辑。,层：如果说由帧的变化构成了影片在时间上的延续，那么层是对Flash动画在空间上的延伸。Flash的层和层之间就像画有图像的透明胶片重叠在一起，在上面的层上的图像可以遮盖在下面层中同一位置的图像。,相关知识,2.逐帧动画,逐帧动画是Flash所提供的最基本的动画形式，它是将动画的每一帧均设置为关键帧，通过改变每一个关键帧中的图像而产生动画效果。,相关知识,3.补间形状动画,补间形状动画可以实现物体之间复杂的形状变化。与前面介绍的逐帧动画不同，使用补间形状动画，只要将两个关键帧中的对象制作出来即可，中间的过渡帧由Flash自动创建。,3.1补间形状动画操作的对象,补间形状动画变形的对象是矢量图形，如果你要使用元件、按钮、文字时就必须先“打散”这些元件，并将其转换为“形状”后才能创建形状补间动画。,举例1：【例2-1】火焰，“火焰.fla”。举例2：【例2-2】制作扇子的收缩和展开动画，“扇子转动.fla”。,相关知识,4.传统补间动画,可以制作出对象的位移、变形、旋转、透明度、滤镜及色彩变化等动画效果。传统补间动画的制作方法与补间形状动画一样，唯一不同的是开始和结束关键帧中的内容不能是打散的矢量图，必须是组或元件实例。,4.1传统补间动画操作的对象,可以用来创建传统补间动画的对象是元件实例，包括影片剪辑、按钮、图形、文本、位图、组合等。只有把形状“组合”或者转换成元件后才可以创建传统补间动画。,相关知识,4.2传统补间动画的属性,（1）缓动：可以设置物体的加速减速运动当曲线图向下压时，物体是先慢再快，当曲线图向上升时，物体是先快再慢最后停下来。可以在曲线上用鼠标单击来增加节点，这时节点会出现两个方向线，拖动方向线可以改变曲线的曲率和方向，因而改变物体在不同时间段的运动速率。,举例1：【例2-6】五角星周围闪闪发光，“五角星发光.fla”。举例2：【例2-5】制作QQ文字动画，“QQ文字.fla”。,（2）旋转：该选项可以在不使用旋转工具的情况下，让物体进行旋转。四个选择：分别是无、自动、顺时针、逆时针,相关知识,5元件,元件就是对象，是一种可以重复使用的对象，重复使用它并不会增加文件的大小，而且还方便简化了影片的修改。,类型：影片剪辑、按钮、图形。,5.1元件的类型和特点,特点：三种元件都有自己的时间线，自己的层和舞台.三种元件都具有多级嵌套能力。,5.2元件与实例,元件一旦创建完后，就会自动存储在库中，而元件一旦被拖到舞台上后，就称之为该元件的实例，所以一个元件可以有若干个实例。,相关知识,5.3影片剪辑,这是能力最强、适应性最广的元件，它的功能涵盖了按钮元件和图形元件。影片剪辑元件可以容纳各种素材，例如位图、声音、视频、脚本等。在时间线方面，影片剪辑拥有各自独立于主时间轴的多帧时间轴。,5.4图形元件,图形元件的作用就是创建补间动画或存储一些不动的静态图像。不能给图形元件的实例命名，不能加脚本，不能添加交互式控件和声音。图形元件的时间线不像影片剪辑元件那样独立，而是与场景中的时间线同步的。,5.5按钮元件,按钮元件主要用来创建按钮。按钮元件有自己的时间线，主要包含4个状态帧：弹起、指针经过、按下、点击。用户可以在对应的帧中创建所需的图形或图像。,相关知识,5.5实例属性,影片剪辑实例的属性面板，包括实例名称、位置和大小、3D定位和查看、色彩效果、显示、滤镜等。,举例1：学校宣传片头举例2：五角星发光,案例实现,1）相框的绘制。,2）波涛涌动效果的制作。,3）海鸥飞翔的动画制作。,4）多条垂直半透明矩形条的随机运动动画。,5）文字动画。,案例拓展,制作风车风景动画，效果如下图所示。动画中要求两风车在转动，花儿在摇摆。,任务2飘动的音符（引导层动画）,案例效果,本案例学习：案例“飘动的音符”主要学习传统运动引导层动画的制作方法。,案例分析,本动画是在深红色的背景下，五线谱的线和音符都在优雅的飘动。动画由两部分构成：第一部分是9条线的飘动：主要应用传统补间动画和影片剪辑来完成；第二部分是音符由左到右的飘动，并有淡入淡出的效果：主要应用传统运动引导层动画来完成；,相关知识,1.传统运动引导层动画,传统运动引导层动画可以绘制路径，并让补间实例、组或文本块可以沿着这些路径运动。可以将多个层链接到一个运动引导层，使多个对象沿同一条路径运动。链接到引导层动画的常规层就成为引导层。,传统运动引导层动画的制作是在传统补间动画的基础上完成的。所以首先要有传统补间动画，然后再其上创建运动轨迹，让该补间动画中的对象沿运动轨迹进行运动。,举例1：【例2-6】制作动态导航按钮动画，“引导层动画.fla”。举例2：【例2-6】制作圆圈动画，“圆圈动画.fla”。,案例实现,1）影片剪辑“线”的制作。先绘制一条波浪线，制作让其从左向右运动的动画。,2）复制8条“线”影片剪辑并摆好位置。,3）飘动音符的制作。使用传统引导层动画制作音符的飘动。,案例实现,4）4个音符影片剪辑“动1”、“动2”、“动3”、“动4”制作完成后，在场景中把它们的实例复制多个，并在舞台外面摆好出场的先后顺序，测试动画如截图所示。,案例拓展,本拓展案例“小鸟飞翔”，描述的是一只大鸟带着4个小鸟在蓝天上沿着曲线从右向左，忽上忽下地进行飞翔。动画截图如下图所示。动画主要分两部分：一是先用逐帧动画制作小鸟翅膀拍动的效果；二是用传统运动引导层动画让拍动翅膀的小鸟沿着曲线进行飞翔。,任务3公司宣传片头（遮罩动画）,案例效果,本案例学习：本案例学习动画“公司宣传片头”制作方法，以下是几个主要组成动画的效果截图，如下图所示：,第一幕动画截图,产品和员工展示动画截图,结束一幕动画截图,案例分析,案例“公司宣传片头”是虚拟公司“东时创展”的宣传动画，公司的标志、产品图片、员工图片及公司口号通过动画的形式表现出来。动画主要由3部分组成：第一幕动画：线画标志；同时标志由大变小，文字“东时创展”由模糊变小变清晰；接着是标志和文字的过光效果。第二幕动画：先是3幅产品图片展开效果，然后是2幅员工工作图片展开效果。第三幕动画：最后是“合作共赢，共同发展”文字动画。,相关知识,1.遮罩的原理和特点,在flash中对于遮罩层下的物体，只有那些被遮盖的部分才能被看到，没有被遮罩的区域反而看不到。遮罩层上的遮罩物体可以是填充的形状、文字对象、图形元件的实例或影片剪辑。但是声音或线则不能用作遮罩物体。遮罩的效果与遮罩层上物体的形状有关，与物体的颜色、透明度、渐变色和线条样式等无关。一个遮罩层中只能存在一个遮罩物体即一个对象，即只能在一个遮罩层中放置一个文本对象或一个影片剪辑实例或其他。（这里要注意，多个打散的而没有成组的矢量图形，可以放在一个遮罩层中）,相关知识,遮罩层不能放置在按钮内部，也不能将一个遮罩应用于另一个遮罩。可以在遮罩层和被遮罩层中分别或同时使用形状补间动画、动作补间动画、引导线动画。如果要让遮罩层是运动的，那么对于用作遮罩的填充形状，可以使用补间形状；对于类型对象、图形实例或影片剪辑，可以使用补间动画。当使用影片剪辑实例作为遮罩时，可以让遮罩沿着运动路径运动。,相关知识,举例1：【例4-7】彩带展开效果，“遮罩.fla”。举例2：【例4-8】制作光线流动效果，“光线流动效果.fla”。举例3：【例4-9】制作文字过光效果，“文字过光效果.fla”。举例4：【例4-10】潺潺流水动画，“流动的水.fla”。,【例4-7】彩带展开效果,【例4-8】制作光线流动效果,【例4-9】制作文字过光效果,【例4-10】潺潺流水动画,案例实现,1）第一幕动画：A、制作线画标志动画，把它制作成影片剪辑“线画标志”；B、标志由大变小动画制作；C、标志过光效果制作；D、文字“东时创展”由模糊变清晰的动画；,案例实现,2）第二幕动画。A、背景图上先是一条高光矩形在移动，然后分出两条高光矩形，接着合成一条，最后再分出两条的动画，使用遮罩层来完成。B、三张产品图像展示动画，使用遮罩层来完成。,案例实现,3）第三幕动画：A、标志和“东时创展”文字从中间向左上角移动。B、新建图层“合作文字”，并在第125帧插入空白关键帧，输入文字“合作共赢共同发展”。将此三层的帧都延伸到第140帧。,案例拓展,制作节约用水公益广告动画。动画由5个遮罩动画制作而成，是文字和图片的展开效果，动画最后一帧效果如下图所示。动画首先由背景图从中央慢慢向四周展开的同时，其他4部分内容也依次相应的展开，动画先后有序，节奏把握好。,任务4小孩走路动画的制作（骨骼动画）,案例效果,本案例学习：本案例是一小孩走路的动画，截图如下所示。,案例分析,本案例是小孩走路的动画。小孩一边走一边摆动手臂、头部和身体，主要包括以下三部分：腿部动画：腿部走动利用骨骼动画完成；手臂动画：手臂摆动利用补间动画完成；头部和身体动画：头部和身体摆动利用补间动画完成；,相关知识,1.补间动画,补间动画是针对一个对象的属性值变化来制作动画，通过对同一对象的同一属性，在不同帧间赋予不同的值来建立动画，而这个属性在两帧间的部分将由Flash根据预设的规则自动生成。只需一个关键帧，其它的帧叫属性关键帧，是指用户更改此对象的某个属性值建立的。,举例1：【例2-6】汽车在不平整的路上颠簸行走。,相关知识,2.骨骼动画,反向运动是一种使用骨骼对一个对象或彼此相关的一组对象进行动画处理的方法。这些骨骼按父子关系链接成线性或分支状的骨架。例如蛇的骨架仅需要线性链，而整个人体图形则需要包含四肢分支的结构。源于同一骨骼的骨架分支称为同级。骨骼之间的连接点称为关节。,骨架：使用“骨骼工具”连接元件或矢量形状的整个结构称为骨架。骨架中的第一个骨骼被称为“骨架根骨”，上一级骨骼被称为父级骨骼，后续的骨骼被称为子级骨骼。,骨骼：单根骨骼默认显示为三角形。在每根骨骼的头部和尾部各有一个圆形连接点，称为骨骼头部、尾部。,分支骨架：骨骼链状结构可以是线性的，也可以是多个骨架分支。源于同一骨骼的骨架分支互相称为同级，除了在分支根部外，骨架分支不能与其他分支相连接。,相关知识,2.骨骼动画,在flash中使用IK主要有两种方式：第一种方式是向形状对象的内部添加骨架。通过骨骼，可以移动形状的各个部分并对其进行动画处理，而无需将形状转成元件。例如让大象的鼻子甩起来，就无需把鼻子转换成元件，直接将骨骼添加到形状中即可。第二种方式是通过骨骼工具将多个不同的元件实例链接到一起。例如有一组影片剪辑，每个影片剪辑都表示物体的不同部分。通过将这些部分链接在一起，可以创建逼真移动的物体。,相关知识,3.骨骼动画属性：弹簧和阻尼,举例1：红灯笼的摆动。,骨骼的这两个属性可应用于整个IK骨架或骨架中的个别骨骼，还可以改变各个骨骼的弹簧量，通过增加阻尼控制衰减量。弹簧属性可以自动产生类似弹簧的运动效果，可通过设置弹簧强度来控制弹簧效果，值越高，创建的弹簧效果越强。添加阻尼属性能够控制弹簧效果的衰减速率，值越高，弹簧衰减得越快。,举例2：给形状添加骨骼：大象鼻子的甩动。,举例3：木偶的动作。,案例实现,1）小孩由5部分构成，分别是头部身体、右手、左手、右腿、左腿，分别将这5部分放置在5个图层。将左腿动画和右腿动画都分别制作成图形元件，图形元件中分别制作左腿和右腿的骨骼动画。右手、左手、头部身体三部分在场景中分别制作成补间动画，如下图所示。,案例实现,2）图形元件左腿骨骼动画的制作。,3）图形元件右腿骨骼动画的制作。制作方法和左腿一样。,4）分别对左手、右手和头部身体三个图层制作旋转补间动画，让小孩在走路时左手、右手、头部和身体都在跟着摆动。,案例拓展,本拓展案例是用吊塔将货物吊起，让汽车把货物运走的动画，效果如图所示。,任务53D片头动画的制作（3D旋转动画）,案例效果,本案例学习：本案例学习动画“工作室片头”制作方法，动画截图如下图所示。,案例分析,本案例是一小段工作室片头动画。动画分为三部分，首先是两个圆环在作3D旋转动画，然后是两段画线动画，紧接着出现文字“导向工作室”外发光的动画。圆环3D旋转动画：利用3D旋转和补间动画来完成；画线动画：利用补间形状动画来完成；文字动画：利用补间动画来完成。,相关知识,1.3D旋转,3D旋转可以沿X、Y、Z轴任意