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

1、二维动画设计与制作二维动画设计与制作第四单元：图层的应用4.1引导层与遮罩层应用4.2摄像头动画制作4.3骨骼动画的制作4.4图层父子关系与图层效果二维动画设计与制作4.1：引导层与遮罩层应用v 内容大纲n图层的概念与操作n图层的类型n制作引导层动画n制作遮罩层动画n练习与作业2二维动画设计与制作4.1：引导层与遮罩层应用一、图层的概念n图层是多数设计类软件都有的术语，可以将其理解为一张透明的胶片，可以在胶片上绘制不同的对象，将多张胶片叠加在一起就可以组成更复杂的画面。所以，图层可以帮助我们来组织不同的对象，在一个图层上绘制和编辑对象，不会影响其他图层上的对象。当给对象做动画时，不同的对象尽量

2、放在不同的图层，以便更好地进行管理和控制。3二维动画设计与制作4.1：引导层与遮罩层应用二、图层的操作n新建图层与图层文件夹n选择图层n重命名图层n复制与拷贝图层n剪切与删除图层n排列图层n锁定/解锁图层n隐藏/显示图层n轮廓显示图层4二维动画设计与制作4.1：引导层与遮罩层应用三、图层的类型n普通图层n引导层n遮罩层与被遮罩层n补间图层n骨架图层n摄像头图层四、高级图层n如何启用高级图层5二维动画设计与制作4.1：引导层与遮罩层应用五、引导层动画1.引导层动画简介与案例引导层动画即使用一条线作为对象的运动路径，让对象沿着此条路径运动。这条线即为“引层线”，它所在的图层称为“引导层”。案例展示

3、：蝴蝶飞舞、落叶6二维动画设计与制作4.1：引导层与遮罩层应用五、引导层动画2.引导层动画创建过程（1）为动画图层添加引导层（2）绘制引导线（3）将动画对象运动的起始点和结束点都拖到引层线上7二维动画设计与制作4.1：引导层与遮罩层应用五、引导层动画3.引导层动画创建条件n引导层的对象是线条，被引导的对象是元件实例n对象动画的起始和结束时的位置都在引导线上n注意引导层和被引导层的引导关系要存在4.一个引导层可以引导多个层练习：蝴蝶飞舞、落叶8二维动画设计与制作4.1：引导层与遮罩层应用六、遮罩层动画1.遮罩的概念与案例遮罩即Mask、蒙版，它是一种用来遮挡其它层对象的图形（可以是形状、文字或元

4、件实例）。遮罩就像在图层上挖了一个孔，下方图层与这个孔重叠的区域才可见，而其他区域是被遮住的。用来放置遮罩的图层称为遮罩层，被遮挡的图层称为被遮罩层。被遮罩层与遮罩层相重叠的部分能显示，其它部分会被隐藏。案例：卷轴动画、折扇动画、扫光效果9二维动画设计与制作4.1：引导层与遮罩层应用六、遮罩层动画2.遮罩的原理与条件遮罩原理与PS中的剪切蒙版很像，用一个图形作蒙版，与其重叠的对象显示，其它隐藏。n遮罩对象与被遮罩对象在不同的层，遮罩层在上，被遮罩层在下。n遮罩层中的对象与颜色和透明度无关。n遮罩层和被遮罩层中的内容可以是形状、元件实例或文字，它和被遮罩层中的对象都可以做动画。n一个遮罩层可以有

5、多个被遮罩层。n描边轮廓不能作为遮罩层，需转换为填充才可以。10二维动画设计与制作4.1：引导层与遮罩层应用六、遮罩层动画3.练习（1）简单遮罩效果（2）折扇的展开（3）岁月留声文字动画（4）卷轴动画思考：如何让遮罩的边缘透明（或模糊、羽化）？项目三：“马爹利”网站片头动画11二维动画设计与制作二维动画设计与制作第四单元：图层的应用4.2摄像头动画制作二维动画设计与制作4.2：摄像头动画制作v 内容大纲n启用摄像头n变换摄像头n摄像头图层调色n摄像头与图层深度n摄像头动画制作n资源链接：https:/ CC提供了摄像头功能，允许动画制作人员模拟真实的摄像机，对视图进行推拉摇移。14二维动画设计

6、与制作4.2：摄像头动画制作一、启用摄像头（2）启用与禁用摄像头单击“工具箱”中的“摄像头”工具或“时间轴”中的“添加/删除摄像头”按钮，可以启用/禁用摄像头。摄像头呈现为一个单独的图层。一个文档只允许有一个摄像头图层，且只能建立于主时间轴中，在元件内部是不能建立摄像头图层的。建立摄像头图层后，看到的其他图层会像透过摄像头来看一样，可以在摄像头图层添加关键帧和补间，以便制作摄像头的镜头变换的动画效果。15二维动画设计与制作4.2：摄像头动画制作二、变换摄像头（1）平移摄像头n使用摄像头工具在摄像头边界内拖动。n使用属性面板“摄像头属性”中的坐标 X 和 Y 来精确平移摄像头。（2）缩放摄像头使

7、用屏幕上的缩放控件或设置摄像头属性面板中的“缩放”值，可缩放对象。（3）旋转摄像头使用屏幕上的旋转控件或设置摄像头属性面板中的“旋转”值，可旋转对象。16二维动画设计与制作4.2：摄像头动画制作三、摄像头图层调色可通过摄像头给舞台上的所有对象同时调色。方法是启用摄像头属性面板上的“色调”及“调整颜色”功能。“色调”相当于在原来颜色基础上覆盖了一层新的颜色；而“调整颜色”可对视图进行亮度、对比度、饱和度和色相的调整。17二维动画设计与制作4.2：摄像头动画制作四、制作摄像头动画可以把摄像头看作一个独立的实例，为其制作传统补间动画和补间动画。如镜头的移动、缩放、旋转及色调的变化都可以记录为动画。案

8、例1：拿剑的武士18二维动画设计与制作4.2：摄像头动画制作五、图层附加到摄像头为了让动画的一些对象保持在摄像头的视图中，如游戏中显示的时间表、按钮或血量等，可以将该图层在摄像头移动时同步移动。方法是使用Animate 中的“附加到摄像头”功能。19二维动画设计与制作4.2：摄像头动画制作五、图层附加到摄像头两种方法将图层附中到摄像头：1.设置图层的属性，勾选“连接到摄像头”。2.单击时间轴中的“附加摄像头”图标或该图标下对应的图层，来附加或分离摄像头中的图层。20二维动画设计与制作4.2：摄像头动画制作七、摄像头与图层深度所谓图层深度是指各图层相对于视图的纵深感。因为Animate CC是一

9、个二维动画软件，舞台上的所有图层及对象都处在同一个平面内，当摄像头移动或缩放时，它们的相对速度和位置是完全一样的。而利用摄像头及图层深度，可以模拟三维效果，使同一个平面内的对象具有纵深感，让画面效果更真实。（1）启用图层深度（2）调整图层深度值n打开图层深度面板n设置各图层深度值或拖动代表深度值的横条案例：一排树。21二维动画设计与制作4.2：摄像头动画制作七、摄像头与图层深度图层深度值与离摄像头的远近以及该图层对象在摄像头视角下的运动速度有什么关系？图层深度值越接近摄像头的深度值，表示该图层对象离摄像头越近，在摄像头视角下的运动速度越快；图层深度值越远离摄像头深度值，表示该图层对象离摄像头越

10、远，运动速度就越慢。案例：案例2。22二维动画设计与制作二维动画设计与制作第四单元：图层的应用4.3骨骼动画的制作二维动画设计与制作4.3：骨骼动画的制作v 内容大纲n骨骼动画案例展示n骨骼动画创建条件n骨架创建方法与技巧n骨架动画实例24二维动画设计与制作4.3：骨骼动画的制作一、什么是骨骼动画骨骼动画是Animate CC中一种特殊的动画形式，它利用反向运动IK（Inverse Kinematics，反向动力学，即根据末端子关节的位置移动来计算得出每个父关节的旋转）的原理，先给对象绑定骨骼，然后这些骨骼按父子关系链接成线性或枝状的骨架。当一个骨骼移动时，与其连接的骨骼也发生相应的移动。因此

11、，骨骼动画比较适合于制作肢体动作、机械运动等动画效果。25二维动画设计与制作4.3：骨骼动画的制作二、骨骼动画案例展示（1）毛毛虫爬行动画（2）骷髅动画（3）卡通猴行走动画26二维动画设计与制作4.3：骨骼动画的制作二、骨骼动画创建条件n对象是多个元件实例n对象是形状n适用于AS 3.0和Canvas文档27二维动画设计与制作4.3：骨骼动画的制作三、骨架创建方法与技巧1.形状对象（1）选中所有需要建立同一幅骨架的形状（2）根据角色的骨骼特点使用骨骼工具在形状上拖动，建立骨架（可建立分支）（3）使用移动工具拖动骨骼，改变角色的姿势，在不同的帧上调整姿势28二维动画设计与制作4.3：骨骼动画的制

12、作三、骨架创建方法与技巧2.元件实例（1）将需要建立骨架的实例按角色姿势摆放好（2）根据角色特点，使用骨骼工具由一个实例拖动鼠标到另一个实例，可连续拖动，也可拖动成分支，建立骨架。（3）使用移动工具拖动骨骼，改变角色的姿势，在不同的帧上调整姿势。29二维动画设计与制作4.3：骨骼动画的制作四、骨架动画实例实例1：制作毛毛虫爬行动画实例2：制作骷髅运动动画实例3：制作卡通猴行走动画30二维动画设计与制作二维动画设计与制作第四单元：图层的应用4.4图层关系与图层效果二维动画设计与制作4.4：图层关系与图层效果v 内容大纲n建立图层父子关系n使用图层效果n拓展：人物基本行走运动规律32二维动画设计与

13、制作4.4：图层关系与图层效果v 知识目标n掌握图层父子关系的概念与特点n了解人物基本行走动作规律v 能力目标n能为图层建立父子关系并制作动画n能为图层和帧添加恰当的效果n会制作简单的人物行走动画v 素质目标n培养对艺术创作的兴趣和对技术运用的完美追求n能够让学生掌握与人协作能力、创新能力、自我学习和模仿能力33二维动画设计与制作4.4：图层关系与图层效果一、建立图层父子关系（1）什么是图层父子关系所谓图层父子关系，是指通过将一个图层设置为另一个图层的父项，使一个图层/对象（父）控制另一个图层/对象（子）。当父图层上的对象运动时，子图层自动随它一起运动展示具有父子关系的图层及动画34二维动画设

14、计与制作4.4：图层关系与图层效果一、建立图层父子关系（2）如何建立图层父子关系n启动文档的“高级图层”功能（文档属性中）n建立父子关系前，需要将子级图层对象的变形点调整至父级对象上。n单击“显示/隐藏父级视图”按钮n在关系显示区，将子级图层拖动到父级图层上，或在子级图层上单击，选择对应的父级图层。35二维动画设计与制作4.4：图层关系与图层效果一、建立图层父子关系（3）如何修改或删除图层父子关系n单击任意图层的颜色头，然后拖动虚线并释放，即可删除连接。或者，可以在水平空间上单击，然后再单击“删除父项”练习：给腿建立父子关系36二维动画设计与制作4.4：图层关系与图层效果一、建立图层父子关系（

15、4）图层父子关系特点：n子图层上的对象继承了父图层上对象的位置和旋转，当移动或旋转父项时，子项会同时移动或旋转。可以创建多个父子关系以创建层次结构。n父子关系视图层次结构中最左侧的颜色头表示父项。父子层次结构从左向右移动。37二维动画设计与制作4.4：图层关系与图层效果一、建立图层父子关系练习：悠闲行走的男孩（layer-parenting）基本步骤：1.各实例拼凑成起始形态2.调整各对象变形点3.建立图层关系4.建立关键帧，调整动作，制作动画38二维动画设计与制作4.4：图层关系与图层效果二、拓展：人物基本行走运动规律人在走路中的基本规律是：左右两脚交替向前，为了求得平衡，当左脚向前迈步时左

16、手向后摆动，右脚向前迈步时右手向后摆动在走的过程中，头的高低形成波浪式运动，当脚迈开时头的位置略低，当一脚直立另一脚提起将要迈出时，头的位置略高。39二维动画设计与制作4.4：图层关系与图层效果二、拓展：人物基本行走运动规律40二维动画设计与制作4.4：图层关系与图层效果二、拓展：人物基本行走运动规律人在走路中的简单基本的节奏规律是：每一步让人物走16帧或8帧的节奏。走16格的节奏更容易（即每步=2/3秒）41二维动画设计与制作4.4：图层关系与图层效果三、使用图层效果（1）什么是图层效果图层效果就是给整个图层添加特效，主要包括滤镜和色彩效果，以前它们仅适用于影片剪辑，现在利用高级图层，可应用

17、于一个选定帧，从而应用至该帧内得所有内容，包括形状、绘制对象、图形元件等。此外，也可使用传统、形状和跨帧 IK 补间对图层效果进行补间。42二维动画设计与制作4.4：图层关系与图层效果三、使用图层效果（1）什么是图层效果图层效果可以应用到单个或多个帧上，也可以通过选中整个图层将图层效果应用到图层的所有帧上。此外，还可以将图层效果应用到元件的时间轴上。注意：仅 ActionScript 3 文档类型支持图层效果。补间动画和摄像头图层不支持图层效果。43二维动画设计与制作4.4：图层关系与图层效果三、使用图层效果（2）使用帧滤镜要在特定帧上添加滤镜，先选择该帧，然后在“属性”面板中单击“滤镜”下拉列表中的“+”号图标，为该帧对象添加滤镜效果。所有帧滤镜都可以进行补间。44二维动画设计与制作4.4：图层关系与图层效果三、使用图层效果（3）使用色彩效果要在特定帧上应用图层效果，先选择该帧，然后在“属性”面板中单击“色彩效果”一栏下的“样式”列表，选择某种色彩样式，包括亮度、色调、高级和Alpha四种。案例：给行走的男孩添加影子。45