AnimateCC二维动画设计与制作-第四单元：图层的应用课件

第四单元：图层的应用4.1引导层与遮罩层应用4.2摄像头动画制作4.3骨骼动画的制作4.4图层父子关系与图层效果第四单元：图层的应用4.1引导层与遮罩层应用内容大纲图层的概念与操作图层的类型制作引导层动画制作遮罩层动画练习与作业2内容大纲2一、图层的概念图层是多数设计类软件都有的术语，可以将其理解为一张透明的胶片，可以在胶片上绘制不同的对象，将多张胶片叠加在一起就可以组成更复杂的画面。所以，图层可以帮助我们来组织不同的对象，在一个图层上绘制和编辑对象，不会影响其他图层上的对象。当给对象做动画时，不同的对象尽量放在不同的图层，以便更好地进行管理和控制。3一、图层的概念3二、图层的操作新建图层与图层文件夹选择图层重命名图层复制与拷贝图层剪切与删除图层排列图层锁定/解锁图层隐藏/显示图层轮廓显示图层4二、图层的操作4三、图层的类型普通图层引导层遮罩层与被遮罩层补间图层骨架图层摄像头图层四、高级图层如何启用高级图层5三、图层的类型5五、引导层动画1.引导层动画简介与案例引导层动画即使用一条线作为对象的运动路径，让对象沿着此条路径运动。这条线即为“引层线”，它所在的图层称为“引导层”。案例展示：蝴蝶飞舞、落叶6五、引导层动画6五、引导层动画2.引导层动画创建过程（1）为动画图层添加引导层（2）绘制引导线（3）将动画对象运动的起始点和结束点都拖到引层线上7五、引导层动画7五、引导层动画3.引导层动画创建条件引导层的对象是线条，被引导的对象是元件实例对象动画的起始和结束时的位置都在引导线上注意引导层和被引导层的引导关系要存在4.一个引导层可以引导多个层练习：蝴蝶飞舞、落叶8五、引导层动画8六、遮罩层动画1.遮罩的概念与案例遮罩即Mask、蒙版，它是一种用来遮挡其它层对象的图形（可以是形状、文字或元件实例）。遮罩就像在图层上挖了一个孔，下方图层与这个孔重叠的区域才可见，而其他区域是被遮住的。用来放置遮罩的图层称为遮罩层，被遮挡的图层称为被遮罩层。被遮罩层与遮罩层相重叠的部分能显示，其它部分会被隐藏。案例：卷轴动画、折扇动画、扫光效果9六、遮罩层动画9六、遮罩层动画2.遮罩的原理与条件遮罩原理与PS中的剪切蒙版很像，用一个图形作蒙版，与其重叠的对象显示，其它隐藏。遮罩对象与被遮罩对象在不同的层，遮罩层在上，被遮罩层在下。遮罩层中的对象与颜色和透明度无关。遮罩层和被遮罩层中的内容可以是形状、元件实例或文字，它和被遮罩层中的对象都可以做动画。一个遮罩层可以有多个被遮罩层。描边轮廓不能作为遮罩层，需转换为填充才可以。10六、遮罩层动画10六、遮罩层动画3.练习（1）简单遮罩效果（2）折扇的展开（3）岁月留声文字动画（4）卷轴动画思考：如何让遮罩的边缘透明（或模糊、羽化）？项目三：“马爹利”网站片头动画11六、遮罩层动画11第四单元：图层的应用4.2摄像头动画制作第四单元：图层的应用4.2摄像头动画制作内容大纲启用摄像头变换摄像头摄像头图层调色摄像头与图层深度摄像头动画制作资源链接：https:///cn/animate/using/working-with-camera-in-animate-cc.html13内容大纲13一、启用摄像头（1）什么是摄像头图层以前要模仿一个镜头的推拉，需要直接缩放图层上的对象，如果画面内容很多，会很麻烦。现在新版AnimateCC提供了摄像头功能，允许动画制作人员模拟真实的摄像机，对视图进行推拉摇移。14一、启用摄像头14一、启用摄像头（2）启用与禁用摄像头单击“工具箱”中的“摄像头”工具或“时间轴”中的“添加/删除摄像头”按钮，可以启用/禁用摄像头。摄像头呈现为一个单独的图层。一个文档只允许有一个摄像头图层，且只能建立于主时间轴中，在元件内部是不能建立摄像头图层的。建立摄像头图层后，看到的其他图层会像透过摄像头来看一样，可以在摄像头图层添加关键帧和补间，以便制作摄像头的镜头变换的动画效果。15一、启用摄像头15二、变换摄像头（1）平移摄像头使用摄像头工具在摄像头边界内拖动。使用属性面板“摄像头属性”中的坐标

X

和

Y

来精确平移摄像头。（2）缩放摄像头使用屏幕上的缩放控件或设置摄像头属性面板中的“缩放”值，可缩放对象。（3）旋转摄像头使用屏幕上的旋转控件或设置摄像头属性面板中的“旋转”值，可旋转对象。16二、变换摄像头16三、摄像头图层调色可通过摄像头给舞台上的所有对象同时调色。方法是启用摄像头属性面板上的“色调”及“调整颜色”功能。“色调”相当于在原来颜色基础上覆盖了一层新的颜色；而“调整颜色”可对视图进行亮度、对比度、饱和度和色相的调整。17三、摄像头图层调色17四、制作摄像头动画可以把摄像头看作一个独立的实例，为其制作传统补间动画和补间动画。如镜头的移动、缩放、旋转及色调的变化都可以记录为动画。案例1：拿剑的武士18四、制作摄像头动画18五、图层附加到摄像头为了让动画的一些对象保持在摄像头的视图中，如游戏中显示的时间表、按钮或血量等，可以将该图层在摄像头移动时同步移动。方法是使用Animate中的“附加到摄像头”功能。19五、图层附加到摄像头19五、图层附加到摄像头两种方法将图层附中到摄像头：1.设置图层的属性，勾选“连接到摄像头”。2.单击时间轴中的“附加摄像头”图标或该图标下对应的图层，来附加或分离摄像头中的图层。20五、图层附加到摄像头20七、摄像头与图层深度所谓图层深度是指各图层相对于视图的纵深感。因为AnimateCC是一个二维动画软件，舞台上的所有图层及对象都处在同一个平面内，当摄像头移动或缩放时，它们的相对速度和位置是完全一样的。而利用摄像头及图层深度，可以模拟三维效果，使同一个平面内的对象具有纵深感，让画面效果更真实。（1）启用图层深度（2）调整图层深度值打开图层深度面板设置各图层深度值或拖动代表深度值的横条案例：一排树。21七、摄像头与图层深度21七、摄像头与图层深度图层深度值与离摄像头的远近以及该图层对象在摄像头视角下的运动速度有什么关系？图层深度值越接近摄像头的深度值，表示该图层对象离摄像头越近，在摄像头视角下的运动速度越快；图层深度值越远离摄像头深度值，表示该图层对象离摄像头越远，运动速度就越慢。案例：案例2。22七、摄像头与图层深度22第四单元：图层的应用4.3骨骼动画的制作第四单元：图层的应用4.3骨骼动画的制作内容大纲骨骼动画案例展示骨骼动画创建条件骨架创建方法与技巧骨架动画实例24内容大纲24一、什么是骨骼动画骨骼动画是AnimateCC中一种特殊的动画形式，它利用反向运动IK（InverseKinematics，反向动力学，即根据末端子关节的位置移动来计算得出每个父关节的旋转）的原理，先给对象绑定骨骼，然后这些骨骼按父子关系链接成线性或枝状的骨架。当一个骨骼移动时，与其连接的骨骼也发生相应的移动。因此，骨骼动画比较适合于制作肢体动作、机械运动等动画效果。25一、什么是骨骼动画25二、骨骼动画案例展示（1）毛毛虫爬行动画（2）骷髅动画（3）卡通猴行走动画26二、骨骼动画案例展示26二、骨骼动画创建条件对象是多个元件实例对象是形状适用于AS3.0和Canvas文档27二、骨骼动画创建条件27三、骨架创建方法与技巧1.形状对象（1）选中所有需要建立同一幅骨架的形状（2）根据角色的骨骼特点使用骨骼工具在形状上拖动，建立骨架（可建立分支）（3）使用移动工具拖动骨骼，改变角色的姿势，在不同的帧上调整姿势28三、骨架创建方法与技巧28三、骨架创建方法与技巧2.元件实例（1）将需要建立骨架的实例按角色姿势摆放好（2）根据角色特点，使用骨骼工具由一个实例拖动鼠标到另一个实例，可连续拖动，也可拖动成分支，建立骨架。（3）使用移动工具拖动骨骼，改变角色的姿势，在不同的帧上调整姿势。29三、骨架创建方法与技巧29四、骨架动画实例实例1：制作毛毛虫爬行动画实例2：制作骷髅运动动画实例3：制作卡通猴行走动画30四、骨架动画实例30第四单元：图层的应用4.4图层关系与图层效果第四单元：图层的应用4.4图层关系与图层效果内容大纲建立图层父子关系使用图层效果拓展：人物基本行走运动规律32内容大纲32知识目标掌握图层父子关系的概念与特点了解人物基本行走动作规律能力目标能为图层建立父子关系并制作动画能为图层和帧添加恰当的效果会制作简单的人物行走动画素质目标培养对艺术创作的兴趣和对技术运用的完美追求能够让学生掌握与人协作能力、创新能力、自我学习和模仿能力33知识目标33一、建立图层父子关系（1）什么是图层父子关系所谓图层父子关系，是指通过将一个图层设置为另一个图层的父项，使一个图层/对象（父）控制另一个图层/对象（子）。当父图层上的对象运动时，子图层自动随它一起运动展示具有父子关系的图层及动画34一、建立图层父子关系34一、建立图层父子关系（2）如何建立图层父子关系启动文档的“高级图层”功能（文档属性中）建立父子关系前，需要将子级图层对象的变形点调整至父级对象上。单击“显示/隐藏父级视图”按钮在关系显示区，将子级图层拖动到父级图层上，或在子级图层上单击，选择对应的父级图层。35一、建立图层父子关系35一、建立图层父子关系（3）如何修改或删除图层父子关系单击任意图层的颜色头，然后拖动虚线并释放，即可删除连接。或者，可以在水平空间上单击，然后再单击“删除父项”练习：给腿建立父子关系36一、建立图层父子关系36一、建立图层父子关系（4）图层父子关系特点：子图层上的对象继承了父图层上对象的位置和旋转，当移动或旋转父项时，子项会同时移动或旋转。可以创建多个父子关系以创建层次结构。父子关系视图层次结构中最左侧的颜色头表示父项。父子层次结构从左向右移动。37一、建立图层父子关系37一、建立图层父子关系练习：悠闲行走的男孩（layer-parenting）基本步骤：1.各实例拼凑成起始形态2.调整各对象变形点3.建立图层关系4.建立关键帧，调整动作，制作动画38一、建立图层父子关系38二、拓展：人物基本行走运动规律人在走路中的基本规律是：左右两脚交替向前，为了求得平衡，当左脚向前迈步时左手向后摆动，右脚向前迈步时右手向后摆动．在走的过程中，头的高低形成波浪式运动，当脚迈开时头的位置略低，当一脚直立另一脚提起将要迈出时，头的位置略高。39二、拓展：人物基本行走运动规律39二、拓展：人物基本行走运动规律40二、拓展：人物基本行走运动规律40二、拓展：人物基本行走运动规律人在走路中的简单基本的节奏规律是：每一步让人物走16帧或8帧的节奏。走16格的节奏更容易（即每步=2/3秒）41二、拓展：人物基本行走运动规律41三、使用图层效果（1）什么是图层效果图层效果就是给整个图层添加特效，主要包括滤镜和色彩效果，以前它们仅适用于影片剪辑，现在利用高级图层，可应用于一个选定帧，从而应用至该帧内得所有内容，包括形状、绘制对象、图形元件等。此外，也可使用传统、形状和跨帧IK补间对图层效果进行补间。42三、使用图层效果42三、使用图层效果（1）什么是图层效果图层效果可以应用到单个或多个帧上，也可以通过选中整个图层将图层效果应用到图层的所有帧上。此外，还可以将图层效果应用到元件的时间轴上。注意：仅ActionScript3文档类型支持图层效果。补间动画和摄像头图层不支持图层效果。

43三、使用图层效果43三、使用图层效果（2）使用帧滤镜要在特定帧上添加滤镜，先选择该帧，然后在“属性”面板中单击“滤镜”下拉列表中的“+”号图标，为该帧对象添加滤镜效果。所有帧滤镜都可以进行补间。44三、使用图层效果44三、使用图层效果（3）使用色彩效果要在特定帧上应用图层效果，先选择该帧，然后在“属性”面板中单击“色彩效果”一栏下的“样式”列表，选择某种色彩样式，包括亮度、色调、高级和Alpha四种。案例：给行走的男孩添加影子。45三、使用图层效果45第四单元：图层的应用4.1引导层与遮罩层应用4.2摄像头动画制作4.3骨骼动画的制作4.4图层父子关系与图层效果第四单元：图层的应用4.1引导层与遮罩层应用内容大纲图层的概念与操作图层的类型制作引导层动画制作遮罩层动画练习与作业47内容大纲2一、图层的概念图层是多数设计类软件都有的术语，可以将其理解为一张透明的胶片，可以在胶片上绘制不同的对象，将多张胶片叠加在一起就可以组成更复杂的画面。所以，图层可以帮助我们来组织不同的对象，在一个图层上绘制和编辑对象，不会影响其他图层上的对象。当给对象做动画时，不同的对象尽量放在不同的图层，以便更好地进行管理和控制。48一、图层的概念3二、图层的操作新建图层与图层文件夹选择图层重命名图层复制与拷贝图层剪切与删除图层排列图层锁定/解锁图层隐藏/显示图层轮廓显示图层49二、图层的操作4三、图层的类型普通图层引导层遮罩层与被遮罩层补间图层骨架图层摄像头图层四、高级图层如何启用高级图层50三、图层的类型5五、引导层动画1.引导层动画简介与案例引导层动画即使用一条线作为对象的运动路径，让对象沿着此条路径运动。这条线即为“引层线”，它所在的图层称为“引导层”。案例展示：蝴蝶飞舞、落叶51五、引导层动画6五、引导层动画2.引导层动画创建过程（1）为动画图层添加引导层（2）绘制引导线（3）将动画对象运动的起始点和结束点都拖到引层线上52五、引导层动画7五、引导层动画3.引导层动画创建条件引导层的对象是线条，被引导的对象是元件实例对象动画的起始和结束时的位置都在引导线上注意引导层和被引导层的引导关系要存在4.一个引导层可以引导多个层练习：蝴蝶飞舞、落叶53五、引导层动画8六、遮罩层动画1.遮罩的概念与案例遮罩即Mask、蒙版，它是一种用来遮挡其它层对象的图形（可以是形状、文字或元件实例）。遮罩就像在图层上挖了一个孔，下方图层与这个孔重叠的区域才可见，而其他区域是被遮住的。用来放置遮罩的图层称为遮罩层，被遮挡的图层称为被遮罩层。被遮罩层与遮罩层相重叠的部分能显示，其它部分会被隐藏。案例：卷轴动画、折扇动画、扫光效果54六、遮罩层动画9六、遮罩层动画2.遮罩的原理与条件遮罩原理与PS中的剪切蒙版很像，用一个图形作蒙版，与其重叠的对象显示，其它隐藏。遮罩对象与被遮罩对象在不同的层，遮罩层在上，被遮罩层在下。遮罩层中的对象与颜色和透明度无关。遮罩层和被遮罩层中的内容可以是形状、元件实例或文字，它和被遮罩层中的对象都可以做动画。一个遮罩层可以有多个被遮罩层。描边轮廓不能作为遮罩层，需转换为填充才可以。55六、遮罩层动画10六、遮罩层动画3.练习（1）简单遮罩效果（2）折扇的展开（3）岁月留声文字动画（4）卷轴动画思考：如何让遮罩的边缘透明（或模糊、羽化）？项目三：“马爹利”网站片头动画56六、遮罩层动画11第四单元：图层的应用4.2摄像头动画制作第四单元：图层的应用4.2摄像头动画制作内容大纲启用摄像头变换摄像头摄像头图层调色摄像头与图层深度摄像头动画制作资源链接：https:///cn/animate/using/working-with-camera-in-animate-cc.html58内容大纲13一、启用摄像头（1）什么是摄像头图层以前要模仿一个镜头的推拉，需要直接缩放图层上的对象，如果画面内容很多，会很麻烦。现在新版AnimateCC提供了摄像头功能，允许动画制作人员模拟真实的摄像机，对视图进行推拉摇移。59一、启用摄像头14一、启用摄像头（2）启用与禁用摄像头单击“工具箱”中的“摄像头”工具或“时间轴”中的“添加/删除摄像头”按钮，可以启用/禁用摄像头。摄像头呈现为一个单独的图层。一个文档只允许有一个摄像头图层，且只能建立于主时间轴中，在元件内部是不能建立摄像头图层的。建立摄像头图层后，看到的其他图层会像透过摄像头来看一样，可以在摄像头图层添加关键帧和补间，以便制作摄像头的镜头变换的动画效果。60一、启用摄像头15二、变换摄像头（1）平移摄像头使用摄像头工具在摄像头边界内拖动。使用属性面板“摄像头属性”中的坐标

X

和

Y

来精确平移摄像头。（2）缩放摄像头使用屏幕上的缩放控件或设置摄像头属性面板中的“缩放”值，可缩放对象。（3）旋转摄像头使用屏幕上的旋转控件或设置摄像头属性面板中的“旋转”值，可旋转对象。61二、变换摄像头16三、摄像头图层调色可通过摄像头给舞台上的所有对象同时调色。方法是启用摄像头属性面板上的“色调”及“调整颜色”功能。“色调”相当于在原来颜色基础上覆盖了一层新的颜色；而“调整颜色”可对视图进行亮度、对比度、饱和度和色相的调整。62三、摄像头图层调色17四、制作摄像头动画可以把摄像头看作一个独立的实例，为其制作传统补间动画和补间动画。如镜头的移动、缩放、旋转及色调的变化都可以记录为动画。案例1：拿剑的武士63四、制作摄像头动画18五、图层附加到摄像头为了让动画的一些对象保持在摄像头的视图中，如游戏中显示的时间表、按钮或血量等，可以将该图层在摄像头移动时同步移动。方法是使用Animate中的“附加到摄像头”功能。64五、图层附加到摄像头19五、图层附加到摄像头两种方法将图层附中到摄像头：1.设置图层的属性，勾选“连接到摄像头”。2.单击时间轴中的“附加摄像头”图标或该图标下对应的图层，来附加或分离摄像头中的图层。65五、图层附加到摄像头20七、摄像头与图层深度所谓图层深度是指各图层相对于视图的纵深感。因为AnimateCC是一个二维动画软件，舞台上的所有图层及对象都处在同一个平面内，当摄像头移动或缩放时，它们的相对速度和位置是完全一样的。而利用摄像头及图层深度，可以模拟三维效果，使同一个平面内的对象具有纵深感，让画面效果更真实。（1）启用图层深度（2）调整图层深度值打开图层深度面板设置各图层深度值或拖动代表深度值的横条案例：一排树。66七、摄像头与图层深度21七、摄像头与图层深度图层深度值与离摄像头的远近以及该图层对象在摄像头视角下的运动速度有什么关系？图层深度值越接近摄像头的深度值，表示该图层对象离摄像头越近，在摄像头视角下的运动速度越快；图层深度值越远离摄像头深度值，表示该图层对象离摄像头越远，运动速度就越慢。案例：案例2。67七、摄像头与图层深度22第四单元：图层的应用4.3骨骼动画的制作第四单元：图层的应用4.3骨骼动画的制作内容大纲骨骼动画案例展示骨骼动画创建条件骨架创建方法与技巧骨架动画实例69内容大纲24一、什么是骨骼动画骨骼动画是AnimateCC中一种特殊的动画形式，它利用反向运动IK（InverseKinematics，反向动力学，即根据末端子关节的位置移动来计算得出每个父关节的旋转）的原理，先给对象绑定骨骼，然后这些骨骼按父子关系链接成线性或枝状的骨架。当一个骨骼移动时，与其连接的骨骼也发生相应的移动。因此，骨骼动画比较适合于制作肢体动作、机械运动等动画效果。70一、什么是骨骼动画25二、骨骼动画案例展示（1）毛毛虫爬行动画（2）骷髅动画（3）卡通猴行走动画71二、骨骼动画案例展示26二、骨骼动画创建条件对象是多个元件实例对象是形状适用于AS3.0和Canvas文档72二、骨骼动画创建条件27三、骨架创建方法与技巧1.形状对象（1）选中所有需要建立同一幅骨架的形状（2）根据角色的骨骼特点使用骨骼工具在形状上拖动，建立骨架（可建立分支）（3）使用移动工具拖动骨骼，改变角色的姿势，在不同的帧上调整姿势73三、骨架创建方法与技巧28三、骨架创建方法与技巧2.元件实例（1）将需要建立骨架的实例按角色姿势摆放好（2）根据角色特点，使用骨骼工具由一个实例拖动鼠标到另一个实例，可连续拖动，也可拖动成分支，建立骨架。（3）使用移动工具拖动骨骼，改变角色的姿势，在不同的帧上调整姿势。74三、骨架创建方法与技巧29四、骨架动画实例实例1：制作毛毛虫爬行动画实例2：制作骷髅运动动画实例3：制作卡通猴行走动画75四、骨架动画实例30第四单元：图层的应用4.4图层关系与图层效果第四单元：图层的应用4.4图层关系与图层效果内容大纲建立图层父子关系使用图层效果拓展：人物基本行走运动规律77内容大纲32知识目标掌握图层父子关系的概念与特点了解人物基本行走动作规律能力目标能为图层建立父子关系并制作动画能为图层和帧添加恰当的效果会制作简单的人物行走动画素质目标培养对艺术创作的兴趣和对技术运用的完美追求能够让学生掌握与人协作能力、创新能力、自我学习和模仿能力78知识目标33一、建立图层父子关系（1）什么是图层父子关系所谓图层父子关系，是指通过将一个图层设置为另一个图层的父项，使一个图层/对象（父）控制另一个图层/对象（子）。当父图层上的对象运动时，子图层自动随它一起运动展示具有父子关系的图层及动画79一、建立图层父子关系34一、建立图层父子关系（2）如何建立图层父子关系启动文档的“高级图层”功能（文档属性中）建立父子关系前，需要将子级图层对象的变形点调整至父级对象上。单击“显示/隐藏父级视图”按钮在关系显示区，将子级图层拖动到父级图层上，或在子级图层上单击，选择对应的父级图层。80一、建立图层父子关系35一、建立图层父子关系（3）如何修改或删除图层父子关系单击任意图层的颜色头，然后拖动虚线并释放，即可删除连接。或者，可以在水平空间上单击，然后再单击“删除父项”练习：给腿建立父子关系81一、建立图层父子关系36一、建立图层父子关系（4）图层父子关系特点：子图层上的对象继承了父图层上对象的位