第4章Animate CC 2015的高级动画ppt课件.ppt

《第4章Animate CC 2015的高级动画ppt课件.ppt》由会员分享，可在线阅读，更多相关《第4章Animate CC 2015的高级动画ppt课件.ppt（33页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第4章 Animate CC 2015的高级动画第4章 Animate CC 2015的高级动画 本章重点 前一章讲解了Animate CC 2015基础动画的创建方法，本章将在前一章的基础上讲解遮罩动画、引导层动画等高级动画的制作方法。学习本章，读者应掌握利用Animate CC 2015制作高级动画的方法。本章内容包括： 遮罩动画 引导层动画 分散到图层 场景动画4.1 遮罩动画 利用遮罩动画能够制作出许多独特的Animate CC动画效果，比如聚光灯效果、结尾黑场效果等。在日常浏览网页时，经常会看到一些整站为Animate CC动画的网站，然而每一个动画是不可能在一个平面视觉上展示的，只

2、能通过不同变化的遮罩动画来体现。下面就来讲解遮罩动画的制作方法。4.1.1 遮罩动画的概念遮罩动画的概念 遮罩动画就是限制动画的显示区域。在实际动画制作中，遮罩的作用非常大，不少动画制作经常会用到此功能。 遮罩动画的创建至少需要两个图层，即遮罩层和被遮罩层。其中遮罩层位于上方，用于设置待显示区域的图层；而被遮罩层位于遮罩层的下方，用来插入待显示区域对象的图层，图4-1即为遮罩效果的示意图。一般情况下，一个遮罩动画中可以同时存在多个被遮罩图层。图4-1 遮罩效果的示意图遮罩层被遮罩层遮罩效果4.1.2 创建遮罩动画创建遮罩动画 在了解了遮罩动画的基本概念后，下面通过一个实例来讲解创建遮罩动画的方

3、法。具体操作步骤如下： 1）启动Animate CC 2015软件，新建一个ActionScript 3.0文件。 2）执行菜单中的“修改|文档”（快捷键Ctrl+J）命令，在弹出的“文档属性”对话框中设置“舞台颜色”为黑色（#000000），单击“确定”按钮。 3）执行菜单中的“文件|导入|导入到舞台”命令，导入配套光盘中的“素材及结果4.1.2 创建遮罩动画背景.jpg”文件，并利用“对齐”面板将其居中对齐，如图4-2所示。图4-2 将图片居中对齐 4）选择“图层1”的第60帧，按快捷键F5，插入普通帧，此时时间轴分布如图4-3所示。图4-3 时间轴分布 5）单击时间轴下方的 （插入图层）

4、按钮，新建“图层2”。然后利用工具箱中的 （椭圆工具），配合Shift键，绘制一个笔触颜色为 （无色），填充色为绿色的正圆形，并调整位置，如图4-4所示。提示：为了便于查看圆形所在的位置，可以单击“图层2”后面的颜色框，将圆形以线框的方式进行显示，如图4-5所示。图4-4 绘制圆形 图4-5 线框显示 6）执行菜单中的“修改|转换为元件”（快捷键F8）命令，将其转换为元件，效果如图4-6所示。 7）选择“图层2”的第35帧，按快捷键F6，插入关键帧。 8）利用工具箱中的 （任意变形工具），将第1帧的圆形元件放大，如图4-7所示。图4-6 将圆形转换为元件 图4-7 将圆形元件放大 9）在“图层

5、2”的第1帧和第10帧之间单击右键，从弹出的快捷菜单中选择“创建传统补间”命令，此时时间轴分布如图4-8所示。然后按Enter键，播放动画，即可看到圆形从大变小的动画效果。图4-8 时间轴分布 10）右击“图层2”，从弹出的快捷菜单中选择“遮罩层”命令，此时时间轴分布如图4-9所示。图4-9 时间轴分布 11）按Enter键播放动画，即可看到图片可视区域逐渐变小的效果。 12）至此，动画制作完成。执行菜单中的“控制|测试影片|测试”（快捷键Ctrl+Enter）命令，即可观看到遮罩动画效果，如图4-10所示。图4-10 结尾黑场动画效果4.2 引导层动画 利用引导层动画能够制作出一个物体沿着指

6、定路径运动的效果，比如飞机沿路径飞行的效果。下面就来讲解引导层动画的制作方法。4.2.1 引导层动画的概念引导层动画的概念 前面讲解了多种类型的动画效果，大家一定注意到这些动画的运动轨迹都是直线。可是在实际中，有很多运动轨迹是圆形的、弧形的，甚至是不规则曲线的，比如围绕太阳旋转的行星运动轨迹等。Animate CC 2015中我们可以通过引导层动画来实现这些运动轨迹的动画效果。 要制作引导层动画至少需要两个图层，即引导层和被引导层。其中引导层位于上方，在这个图层中有一条辅助线作为运动路径，引导层中的对象在动画播放时是看不到的；而被引导层位于引导层的下方，用来放置沿路径运动的动画。图4-11所示

7、即为引导层和被引导层的示意图。图4-11 引导层和被引导层的示意图4.2.2 创建引导层动画创建引导层动画 在了解了引导层动画的基本概念后，通过一个实例来讲解创建引导层动画的方法。具体操作步骤如下： 1）按快捷键Ctrl+N，新建一个Flash文件（ActionScript 2.0）。 2）选择工具箱中的 （椭圆工具），在笔触颜色选项中选择 （无色），填充颜色选项中选择 （黑 -绿径向渐变），然后在舞台中绘制正圆形。 3）执行菜单中的“修改|转换为元件”（快捷键F8）命令，在弹出的“转换为元件”对话框中进行设置，如图4-12所示，然后单击“确定”按钮。 4）在时间轴的第30帧按快捷键F6，插入

8、一个关键帧。然后右击第1帧，在弹出的快捷菜单中选择“创建补间动画”命令，时间轴分布如图4-13所示。图4-12 “转换为元件”对话框 图4-13 创建补间动画的时间轴分布 5）在时间轴中右击“图层1”，从弹出的快捷菜单中选择“添加传统运动引导层”命令，为“图层1”添加引导层，如图4-14所示。图4-14 添加引导层 6）选择工具箱中的 （椭圆工具），笔触颜色设为 （黑色），填充颜色设为 （无色），然后在工作区中绘制椭圆，效果如图4-15所示。 7）选择工具箱中的 （选择工具），框选椭圆的下半部分，按Delete键删除，效果如图4-16所示。图4-15 绘制椭圆 图4-16 删除椭圆的下半部分提

9、示：每两个椭圆间只能有一个点相连接，如果相接的不是一个点而是线，小球则会沿直线运动，而不是沿圆形路径运动。8）同理，绘制其余的3个椭圆并删除下半部分。 9）利用工具箱中的 （选择工具），将4个圆相接。然后回到“图层1”，在第1帧放置小球，如图4-17所示；在第30帧放置小球，如图4-18所示。图4-14 添加引导层图4-18 在第30帧放置小球的位置 10）执行菜单中“控制|测试影片”(快捷键Ctrl+Enter)命令，即可看到小球依次沿4个椭圆运动的效果。4.3 分散到图层 利用分散到图层可以将同一图层上的多个对象分散到多个图层当中。下面通过一个实例来讲解分散到图层的方法。具体操作步骤如下：

10、 1）按快捷键Ctrl+N，新建一个Flash文件（ActionScript 2.0）。 2）选择工具箱中的 （文本工具），在舞台中输入文字“Flash”，如图4-19所示。 3）利用工具箱中的 （选择工具）选中文字，然后执行菜单中的“修改|分离”命令，将整个单词分离为单个字母，如图4-20所示。图4-19 输入文字“Flash” 图4-20 将整个单词分离为单个字母 4）执行菜单中的“修改|时间轴|分散到图层”命令，即可将分离后的单个字母分散到不同图层中，如图4-21所示。图4-21 将单个字母分散到不同图层中4.4 场景动画 要制作多场景动画，首先要创建场景，然后在场景中制作动画。Flas

11、h在播放影片时，会按照场景排列次序依次播放各场景中的动画。所以，在播放影片前，一定要调整好场景的排列次序并删除无用的场景。4.4.1 创建场景创建场景 执行菜单中的“窗口|其他面板|场景”命令，调出“场景”面板，如图4-22所示。然后单击“场景”面板左下角的 （添加场景）按钮，即可添加一个场景，如图4-23所示。如果需要复制场景，可以选中要复制的场景（此时选择的是“场景2”），单击“场景”面板左下角的 （重制场景）按钮，即可复制出一个场景，如图4-24所示。图4-22 “场景”面板 图4-23 添加场景 图4-24 复制场景4.4.2 选择当前场景选择当前场景 在制作多场景动画时，经常需要修改

12、某场景中的动画，此时应该将该场景设置为当前场景。具体操作步骤为：单击舞台上方的 （编辑场景）按钮，然后从弹出的下拉列表中选择要编辑的场景，如图4-25所示，即可进入该场景的编辑状态。图4-25 选择要编辑的场景4.4.3 调整场景动画播放顺序调整场景动画播放顺序 在制作多场景动画时，经常需要调整各场景动画播放的先后顺序。下面执行菜单中的“窗口|其他面板|场景”命令，调出“场景”面板，然后创建4个场景，如图4-26所示。接着选择要改变顺序的“场景4”，将其拖曳到“场景2”的上方，此时会出现一个场景图标，并在“场景2”上方出现一个带圆环头的绿线，其所在位置为“场景4”移动后的位置，如图4-27所示

13、。最后释放鼠标，即可将“场景4”移动到“场景2”的上方，如图4-28所示。此时播放动画，“场景4”中的动画会先于“场景2”中的动画播放。图4-26 调出“场景”面板 图4-27 移动“场景4” 图4-28 移动“场景4”后的效果4.4.4 删除场景删除场景 在制作Animate CC动画的过程中，经常需要删除多余的场景。此时可以在“场景”面板中选择要删除的场景（此时选择的是“场景2”），如图4-29所示，然后单击“场景”面板左下方的 （删除场景）按钮，在弹出的如图4-30所示的提示对话框中单击“确定”按钮，即可将选择的场景删除，如图4-31所示。图4-29 选择要删除的场景 图4-30 提示对

14、话框 图4-31 删除“场景2”后的效果4.5 3D动画 3D动画其实就是三维立体动画，相对于2D动画而言多了一条Z轴，使其能够进行立体透视，所以创建3D动画是在2D动画上来实现的。下面通过一个实例来讲解制作3D动画的方法。具体操作步骤如下： 1）启动Animate CC 2015软件，新建一个ActionScript 3.0文件。 2）选择工具箱中的 （文本工具），在“属性”面板中设置文字属性，如图4-26所示。然后在舞台中输入文字“Animate CC 2015”，接着利用“对齐”面板将文字中心对齐，如图4-27所示。图4-26 设置文字属性 图4-27 输入文字并中心对齐 3）将文字转换

15、为影片剪辑元件。方法：执行菜单中的“修改|转换为元件”（快捷键F8）命令，在弹出的的“转换为元件”对话框中设置参数如图4-28所示，单击“确定”按钮。图4-28 设置转换为元件参数提示：此时将文字转换为影片剪辑元件而不是图形元件，是因为 （3D旋转工具）只能对影片剪辑元件进行操作而不能对图形元件进行操作。 4）在“图层1”的第30帧按快捷键F5，插入普通帧，如图4-29所示。然后右击时间轴“图层1”的第130帧之间的任意一帧，从弹出的快捷菜单中选择“创建补间动画”命令，此时时间轴分布如图4-30所示。图4-29 在“图层1”的第30帧插入普通帧图4-30 时间轴分布 5）将时间定位在第20帧，

16、然后利用工具箱中的 （3D旋转工具），将文字沿绿色的Y轴旋转一定角度，此时在时间轴“图层1”的第20帧，会自动出现一个关键帧，效果如图4-31a所示。图4-30 时间轴分布 6）将时间定位在第30帧，然后利用工具箱中的 （3D旋转工具），再将文字沿红色的X轴旋转一定角度，效果如图4-31b所示。图4-31b 再将文字沿红色的X轴旋转一定角度 7）执行菜单中“控制|测试”(快捷键Ctrl+Enter)命令，可以发现文字沿Y轴旋转的同时也沿X轴旋转。而我们需要的是文字先沿Y轴旋转，然后在第20帧后再沿X轴旋转。下面利用动画编辑器来解决这个问题。 8）右击时间轴“图层1”的第130帧之间的任意一帧，

17、从弹出的快捷菜单中选择“调整补间”命令，如图4-31c所示，调出动画编辑器，如图4-31d所示。图4-31c 选择“调整补间”命令 图4-31d 调出动画编辑器 7）执行菜单中“控制|测试”(快捷键Ctrl+Enter)命令，可以发现文字沿Y轴旋转的同时也沿X轴旋转。而我们需要的是文字先沿Y轴旋转，然后在第20帧后再沿X轴旋转。下面利用动画编辑器来解决这个问题。 8）右击时间轴“图层1”的第130帧之间的任意一帧，从弹出的快捷菜单中选择“调整补间”命令，如图4-31c所示，调出动画编辑器，如图4-31d所示。图4-31c 选择“调整补间”命令 图4-31d 调出动画编辑器 9）选择动画编辑器右

18、下方的 （在图形上添加锚点）工具，然后在X轴曲线的第20帧单击鼠标，从而添加一个锚点，如图4-31e所示。 10）此时添加的锚点为带有曲率的贝塞尔锚点，而我们需要添加的是不带曲率的角点。下面按住键盘上的Alt键，单击X轴曲线第20帧的贝塞尔锚点，从而将贝塞尔锚点转换为角点，如图4-31f所示。 11）将X轴第20帧的锚点移动到与第1帧水平坐标一致的位置（即水平坐标为0），如图4-31g所示。图4-31e 在X轴曲线的第20帧添加一个锚点图4-31f 将贝塞尔锚点转换为角点图4-31g 将X轴第20帧的锚点移动到与第1帧水平坐标一致的位置 12）执行菜单中“控制|测试”(快捷键Ctrl+Enter)命令，即可看到文字先沿Y轴旋转，然后在第20帧后再沿X轴旋转的动画效果。