Animate-CC课件汇总整本书电子教案全套课件完整版ppt最新教学教程.ppt

《Animate-CC课件汇总整本书电子教案全套课件完整版ppt最新教学教程.ppt》由会员分享，可在线阅读，更多相关《Animate-CC课件汇总整本书电子教案全套课件完整版ppt最新教学教程.ppt（396页珍藏版）》请在一课资料网上搜索。

1、第一章 初识AnimateAnimate翻转课堂概论Animate CC是基于Adobe Flash Professional CC的基础上发展得来的二维动画制作软件。Animate CC拥有大量的新特性，特别是在保留原本的Flash 开发工具、Flash SWF和AIR格式的同时，还支持HTM5 Canvas、WebGL和其他新格式，并能通过可扩展架构去支持包括SVG在内的几乎任何动画格式。1.1.1 Animate的发展历史n Animate的前身是Future Wave 公司开发的FutureSplash Animator。1996年11月，Future Splash Animator卖

2、给了MM（M）。n 2005年，Adobe公司并购了Macromedia公司，Macromedia Flash也被重新命名为Adobe Flash。12月2日，Adobe公司宣布Flash Professional更名为Animate CC，在支持Flash SWF文件的基础上，加入了对HTML5的支持。n 2016年2月份Adobe公司发布了Animate CC的第一个版本，在Adobe Animate CC中可以实现舞台旋转和调整大小、根据舞台大小缩放内容、将视频以多种分辨率导出以及增强了绘图纸外观等等功能。1.1.1 Animate的发展历史n2016年8月，Adobe公司发布了Adob

3、e Animate CC 2015.2发行版，该版本新增了图案画笔、帧选择器、透明图层等功能，并对Web发布选项、用户定义的彩色绘图纸外观、高级PSD、AI导人选项等功能进行了增强。n 2017年6月，Adobe公司发布了Animate CC 2017发行版，该版本为游戏设计人员、开发人员、动画制作人员及教育内容编创人员推出了激动人心的新功能。n 目前最新的版本是Adobe Animate CC 2020，Adobe Animate CC 2020 维持原有Flash开发工具支持外新增HTML 5创作工具，为网页开发者提供更适应现有网页应用的音频、图片、视频、动画等创作支持。自动关键帧全新流畅

4、画笔增强了视频导出Animate CC 2020新增功能Canvas中支持的新混合模式重新设计了用户界面可以通过为动画添加动作脚本使其具有交互性动画制作简单导出动画的过程中，程序会压缩、优化动画组成元素发布后的.swf动画影片具有“流”媒体的特点Animate特点 动画主要由矢量图组成用Animate软件制作动画可以大幅度降低制作成本Animate动画的优势受网络资源的制约较短小具有交互性优势具有文件小、传输速度快、播放采用流式技术的特点崭新的视觉效果，比传统的动画更加轻易与灵巧，更加“酷”制作成本非常低可以把生成的文件设置成带保护的格式，维护设计者的版权利益1.1.2 FlashCS5的新特

5、性人才、经验不足人物刻画不够完善脚本语言初学时无从下手，一些高难度的如鼠标跟随，swf文件加密，asv反编译等技术暂时无法实现广告创意及产品诉求相对单一。在更新和维护方面不方便,制作的周期长，开发费用高。1.1.3 Animate的应用分类娱乐短片片头广告MTV导航条小游戏产品展示应用程序开发的界面开发网络应用程序1.1.4 Animate的动画制作流程分析剧本文件命名场景设计角色设计镜头动作设计镜头合成编写剧本声音合成1.1.5 Animate的发展趋势 Animate是一种交互式矢量多媒体技术，是传统手工动画与计算机技术紧密结合的产物，它融合了多媒体和互动两个特性，它一改将平面漫画照搬到网

6、络上仍然是静态页面的展现形态，实现了动态页面，生成了一种新的表现形态。目前，Animate动画已成为网络多媒体的主流，网络作为承载Animate这一创作形式的第四媒体，将信息的流通带入了一个全新的阶段，也为新媒体艺术另辟新径。启动界面1.2 认识Animate的工作环境温馨提示:启动Animate时，如果没有出现“开始”页面，则通过单击【文件】|【新建】【常规】|【Animate文档】命令也可以新建一个动画文件。新建Animate动画1.2 认识Animate的工作环境工作界面工作界面文档选项卡如果打开或创建多个文档， “文档名称”将按文档创建先后顺序出现在“文档选项卡”中。单击文件名称，即可

7、快速切换到该文档。时间轴时间轴时间轴用于组织和控制文档内容在一定时间内播放的图层数和帧数。与胶片一样，Animate 文档也将时长分为帧。时间轴的主要组件是图层、帧和播放头。1.3认识Animate工具面板1圆形工具：圆形工具的功能非常强大。它可用来绘制椭圆和正圆，不仅可任意选择轮廓线的颜色、线宽和线型，还可任意选择轮廓线的颜色和圆的填充色。利用圆形工具还可绘制出有表面光泽的球状图形。2矩形工具：它是从圆扩展出来的一种绘图工具，用法与圆形工具基本相同，利用它也可以绘制出带有一定圆角的矩形。长按它出现多边形工具，可在属性面板中设置边数，边粗等一系列效果。1.3认识Animate工具面板3笔刷工具

8、主要用来更改工作区中任意区域的颜色，以及制作特殊效果。利用笔刷工具可以制作书法效果，并且可以把导入的位图作为笔刷来绘画，以及通过调整刷子的压力来达到控制图线的粗细效果等。4滴管工具：前提：在ctrl+B的情况下才能吸取颜色，以及吸取文字的属性（字体、字号、字型、颜色等）应用于其他文字。1.3认识Animate工具面板5橡皮擦工具：橡皮擦工具用于擦除场景中的图形。6任意变形工具：任意变形工具，用于移动、旋转、缩放和变形对象。7选择工具：用于可选取对象、修改对象（改变图形形状，如，拉长或缩短线条长度）。8部分选取工具：移动图形轮廓线上锚点和控制点的位置，修改图形大小和形状。移动路径上锚点和控制点

9、的位置，修改路径。1.3认识Animate工具面板9套索工具：套索工具用于选取多个对象或不规则区域。10颜料桶工具：颜料桶工具可对“封闭”区域进行填充纯色、渐变色、位图等。11线条工具：线条工具有时称为直线工具，用于绘制直线。12铅笔工具：铅笔工具可信手绘制曲线1.3认识Animate工具面板13钢笔工具：钢笔工具用于绘制路径、修改路径。兼备Photoshop中三种钢笔工具功能。14文本工具：文本工具用于制作文字对象。15手形和放大工具:手形工具用于移动场景工作区。缩放工具用于缩放场景比例尺（按Alt缩小）。16线条工具与颜色设置舞台是创建Animate文档时放置图形内容的矩形区域。在【属性】

10、面板中可以修改舞台的大小。时间轴右上角的“显示比例”中设置显示比例可以根据需要改变舞台显示比例的大小。选择【缩放工具】，在舞台上单击可放大或缩小舞台的显示比例。按住键盘上的Ctrl键也可以对舞台进行放大缩小。舞台1.4常用面板介绍1属性面板【属性】面板可以很容易地访问舞台或时间轴上当前选定项的最常用属性。也可以在面板中更改对象或文档的属性。常用面板简介2动作面板【动作】面板是动作脚本的编辑器。常用面板简介3对齐面板【对齐】面板分为5个区域，可以重新调整选定对象的对齐方式和分布。常用面板简介4颜色面板可以创建和编辑“笔触颜色”和“填充颜色”，选择填充类型，调整RGB值和Alpha值等。常用面板简

11、介5颜色样本面板【颜色样本】面板提供了最为常用的“颜色”，并且能“添加颜色”和“保存颜色”。用鼠标单击可选择需要的常用颜色。常用面板简介6信息面板【信息】面板可以查看对象的大小、位置、颜色和鼠标指针的信息。常用面板简介7场景面板一个动画可以有多个场景组成。【场景】面板中显示了当前动画的场景数量和播放的先后顺序。当动画包含多个场景时，将按照它们在【场景】面板中的先后顺序进行播放。常用面板简介8变形面板【变形】面板可以对选定对象执行缩放、旋转、倾斜和创建副本的操作。【变形】面板分为3个区域。常用面板简介9组件面板使用HTML5 Canvas中的【组件】面板可以查看所有“组件”。可以在创作过程中将“

12、组件”添加到动画中。“组件”提供一种功能或一组相关的重用自定义组件，提高设计人员的工作效率。一个“组件”就是一段影片剪辑。所有“组件”都存储在【组件】面板中。利用【组件】面板可以查看所有“组件”。可以在创作过程中将“组件”添加到动画中。“组件”是应用程序的封装构建模块，使设计人员在没有“动作脚本”时也能使用这些功能。一个“组件”就是一段影片剪辑。所有“组件”都存储在【组件】面板中。【组件】面板包含：jQuery UI、视频、用户界面常用面板简介常用面板简介10组件参数面板选中“组件”实例，在“组件属性”面板中有【显示参数】按钮，可以打开【显示参数】按钮打开组件参数面板。常用面板简介11代码片段

13、面板执行【窗口】|【代码片段】命令，可以显示【代码片段】面板。【代码片段】面板可以使非编程人员能够很快就开始轻松使用简单的JavaScript和ActionScript 3.0。借用该面板，可以将代码添加到FLA文件以启用常用功能。利用【代码片段】面板，可以添加能影响对象在舞台上行为的代码，添加时间轴中控制播放头移动的代码和（仅限CS5.5）添加允许触摸屏用户交互的代码。同时可以将你创建的新代码片段添加到面板。常用面板简介12输出面板【输出】面板在测试文档模式下，窗口自动显示提示信息，有助于排除影片中的错误。如果在脚本中使用“trace”动作，影片运行时，可以向【输出】面板发送特定的“信息”，

14、并在面板中显示出来。这些信息包括影片状态说明或者表达式的值。常用面板简介13图层深度面板使用在高级图层中的【图层深度】面板，可以在不同的平面中放置资源，在动画中创建深度感。同时可以修改图层深度，补间深度，并在【图层深度】面板中引入摄像头以创建视差效果。常用面板简介14帧选择器面板选择【窗口】|【帧选择器】面板，显示【帧选择器】面板。在【帧选择器】面板中，选择“列表”或“缩览图”视图可显示所选图形元件所有帧的预览结果。还可以查看帧编号及其标签。使用“滑块”或“缩放按钮”可调整预览或缩览图大小。将“滑块”调整到面板的左下角可在视图中查看更多的帧。将“滑块”移动到右下角则可查看更大的预览。单击任一帧

15、将其设置为所选元件的第一帧。帧的筛选选项有所有帧，关键帧，标签。常用面板简介非常感谢您的观看！第二章 Animate基本图形绘制Animate翻转课堂任务单l学习主题：绘制矢量图形l达成目标：掌握选择工具、矩形工具、椭圆工具、线条工具的使用方法l学习方法建议：在课前观看微课视频学习，并尝试绘制矢量图形l学习任务：制作l重点难点：熟练掌握绘图工具的使用方法，尤其是“选择工具”的调整图形的功能l学习测试：制作一把彩虹雨伞2.1矢量图形绘制n 计算机中显示的图形一般可以分为两大类矢量图和位图。n 矢量图像，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对

16、象。n 位图图像（bitmap）, 亦称为点阵图像或绘制图像，是由称作像素（图片元素）的单个点组成的。n 矢量图优点：文件小、图像可以无级缩放、可采取高分辨率印刷2.1.1课前学习绘制坐标轴及抛物线图2-1 绘制坐标轴及抛物线操作步骤：n 步骤一：在舞台中央绘制一条水平直线，使用线条工具同时按住键盘上的Shift键，可以绘制水平直线。n 步骤二：为了让水平直线位于舞台的正中央，借助对齐面板来自动对齐,使用选择工具(V)，将直线选中，接下来打开对齐面板，将“相对于舞台”按钮选中，并点击“垂直中齐”和“水平中齐”两个按钮，让直线相对于舞台，位于舞台的正中央。同理，再绘制一条垂直线条，用同样的方法让

17、其相对于舞台居中对齐。2.1.1课前学习绘制坐标轴及抛物线图2-1 绘制坐标轴及抛物线操作步骤：n 步骤三：用线条工具，并同时按住键盘上的Shift键，绘制45度的斜线。n 步骤四：若要将45度的斜线，修改成为抛物线形状，需要使用工具箱当中的选择工具(V)，将选择工具放置到斜线周边，光标形状变成弧状，按住鼠标左键，并且往下方拖拽，可以将直线改变为曲线，直到修改成所需要的造型，再松开鼠标，也可以多次修改，直到满意为止。n 步骤五：最后，使用文本工具(T)，加入坐标轴名称X、Y、0，并将坐标轴的线条笔触调整为“3.00”，完成练习2.1.2课堂学习绘制毛笔操作步骤：n 步骤一：首先将笔触颜色调整为

18、黑色，填充颜色调整为无色，这样才能绘制空心图案。n 步骤二：用矩形工具(R)及椭圆工具(O)，绘制毛笔的笔杆子，并用选择工具(V)将某些直线部分修改为曲线，把多余的线条删除。n 步骤三：在笔杆的一侧空白部分，绘制毛笔的笔刷部分，首先将笔触颜色调整为无色，填充颜色调整为黑色使用椭圆工具(O)，绘制笔刷，并用选择工具(V)调整笔刷的造型。图2-9绘制毛笔2.1.2课堂学习绘制毛笔操作步骤：n 步骤四：点击笔刷可以看到很多密密麻麻的小白点，说明笔刷图形是散件，为了更好的管理各个图形部件，我们需要将散件组合，点击笔刷图形将其选中，使用快捷键Ctrl+G，将其组合成为图形，同样，将笔杆子选中，使用快捷键

19、Ctrl+G，也将其组合成为图形。图2-9绘制毛笔2.1.2课堂学习绘制毛笔操作步骤：图2-9 绘制毛笔n 步骤五：将笔刷图形移动到笔杆子下方，最后给笔杆子填充颜色，使其看起来更加立体。填充颜色的方法为：打开颜色面板类型选择“线性渐变”，“流”选择“反射颜色”，在色带上的中间位置点击左键，添加一个墨水瓶。色带上总共有三个墨水瓶，对每一个墨水瓶双击，选择颜色，三个墨水瓶的颜色分别为“橙白橙”，这样就能调制出中间高光的立体圆柱效果，使用工具箱当中的颜料桶工具 ，在笔杆子上单击左键，即给笔杆子上色。2.1.2课堂学习绘制毛笔操作步骤：n 步骤六：选择画笔工具（Y），也叫刷子工具，修改笔触颜色为红色，

20、在笔杆上绘制一条红线，绘制完成后使用选择工具（V）选中红线，按Ctrl+G将其打组，一只毛笔就绘制完成了。图2-9 绘制毛笔2.1.3课堂学习绘制酒杯操作步骤：图2-21 绘制酒杯n 步骤一：绘制两个椭圆，为了方便绘制，可以在绘制矩形时，同时按住键盘上的Alt键，从圆心开始往四周画圆。n 步骤二：使用矩形工具(R)和椭圆工具(O)绘制酒杯的杯脚部分，使用选择工具(V)选中多余的线条，按键盘上的Delete键，将其删除。n 步骤三：为酒杯填充颜色，打开颜色面板，将类型选择为“线性”，两个墨水瓶的颜色分别设置为“白浅蓝”，使用工具箱当中的颜料桶工具 ,以划线的方式，将渐变颜色按照线条方向进行填充。

21、2.1.4任务实施绘制灯笼操作步骤：n 步骤一：使用椭圆工具的同时按住Shift键绘制一个正圆形，并在对齐面板中设置正圆形相对于舞台绝对居中，在正圆形外再绘制一条垂直直线，将直线也设置为相对于舞台绝对居中。n 步骤二：选中正圆形中的一段直线，点击右键选择“复制”，在点击一次右键，选择“粘贴”，将粘贴出来的直线移动到正圆形外边，使用选择工具(V),将直线调整为曲线，再将曲线放回至圆形中。图2-26 绘制灯笼2.1.4任务实施绘制灯笼操作步骤：n 步骤三：用同样的方法，绘制第二条曲线，将绘制好的两条曲线选中，执行“复制粘贴”，使用工具箱当中的任意变形工具(Q)，右键点击已经选中的两条曲线，选择“变

22、形水平翻转”，将曲线位置摆放好。n 步骤四：使用矩形工具和线条工具，将灯笼的其他部件绘制好，并将多余的线条删除掉。n 步骤五：使用放射渐变填充灯笼的颜色，填充方法为：打开颜色面板，将类型选择为“放射状”，两个墨水瓶的颜色分别设置为“白红”。图2-26 绘制灯笼区别2.2 散件及组合图2-34散件结合图 2-35散件镂空 在Animate CC中绘制矢量图，必须学习一个重要的概念，散件和组合的区别。当我们绘制两个椭圆，发现它们会结合到一块成为新的图形，用鼠标点击图形，发现上面有许多密密麻麻的小白点，如图2-34所示 则这个图形是散件，散件直接会发生镂空、贴合等现象，如图2-33所示。有时为了方便

23、各个元素间的编辑，我们要将散件进行组合，如图2-35所示。为了避免散件间发生镂空可以利用图形，同样也可以暂时将散件组合起来，如图2-36所示。散件组合2.2 散件及组合图2-36 将散件组合组合排列2.2 散件及组合为了避免散件间发生镂空可以利用图形，同样也可以暂时将散件组合起来，如图2-36所示。将散件组合，使用快捷键Ctrl+G，取消组合：Ctrl+Shift+G，在组合中编辑某个对象：双击组。组合的对象是不会被放到库中的。先组合的对象是放最下方的。最后组合的图形是放在最上方的。可以通过点击鼠标右键排列，调整各个组合图形的图层次序关系，如图2-37所示。图2-37 调整组合排列顺序打散命令

24、2.2 散件及组合取消组合也可以用分离命令，使用快捷键Ctrl+B，可以将图形或组合打散，这里要注意的是，对于文字要用两次打散命令，第一次打散，是将多个文字打散成为单个文字，如图2-38所示；第二次打散，是将单个文字分离为散件。如图2-39所示。图2-38 执行第一次打散命令图2-39 执行第二次打散命令2.2.1课前学习绘制立体图形图2-40绘制立体图形 为了灵活的运用散件和组合进行创建动画造型，首先学习简单的立体图形绘制，如图2-40所示，在绘制的过程中，体会两者的区别。2.2.1课前学习绘制立体图形1用矩形工具(R)绘制一个长方形，选中长方形，点击右键“复制粘贴”，粘贴一个一模一样的长方

25、形出来，并将第二个长方形放置在第一个长方形的右后方，如图2-41所示，需要注意的是，第二个长方形粘贴出来之后，不要取消选择，要在选中的状态下移动，确定位置无误后，再取消选择，否则图案会被镂空。图2-41复制长方形 2.2.1课前学习绘制立体图形2将其余的边，用线条工具(N)连接起来，线条工具(N)具有捕捉顶点的功能，可以将两个顶点连接，如图2-42所示。图2-42 连接其余线条2.2.1课前学习绘制立体图形3为了将看不到的边设置为虚线，我们要将看不到的三条边选中，由于绘制的图形是散件，线条被分割成为几部分，要使用键盘上的Shift键来连续选择多条线条，选择完全后，找到属性面板上的“填充和笔触样

26、式”，将样式选择为“虚线”，如图2-43所示。长方体绘制完成，最终效果如图2-44所示。图2-43 将线条样式设置为虚线图2-44长方体绘制完成2.2.1课前学习绘制立体图形1绘制一个矩形，以及一个椭圆，为了让椭圆跟矩形更好的接合，我们可以使用快捷键ALT键，从圆心开始画圆。绘制好一个椭圆之后，复制一个椭圆，放置在底部，如图2-45所示。图2-45 绘制矩形及椭圆2.2.1课前学习绘制立体图形2绘制圆柱体的高，并将多余线条选中，按下键盘上的Delete键删除掉，如图2-46所示。图2-46 修剪多余线条2.2.1课前学习绘制立体图形3用如图2-41的方法，将看不到的线条设置为虚线，目前绘制出来

27、的图形是散件，为了让所有的线条都组合在一起，便于移动，我们用框选的方式将整个圆柱体选中，使用Ctrl+G将圆柱体组合，成为一个整体，最终效果如图2-47所示。图2-47 将圆柱体组合2.2.2课堂学习绘制立体文字 使用快捷键Ctrl+B，可以将图形或组合打散，对于文字的打散，要用两次打散命令，第一次打散，是将多个文字打散成为单个文字，第二次打散，是将单个文字分离为散件。这里，我们学习将文字转换为散件进行编辑，制作立体文字，如图2-48所示。图2-48 绘制立体文字2.2.2课堂学习绘制立体文字1使用文本工具(T)输入文字“GTA”，并在属性面板中，设置字体，在属性面板的字符栏中，选择“系列”，

28、在下拉菜单中，选择“Franklin Gothic Heavy”字体，该字体棱角分明，比较适合制作立体文字，如图2-49所示。接下来使用快捷键Ctrl+B将文本分离，使用第一次，将文本分离成为单个文字，如图2-50所示，使用第二次快捷键Ctrl+B，将单个文字分离成为散件，如图2-51所示。图2-49 输入文字图2-50 第一次分离图2-51 第二次分离2.2.2课堂学习绘制立体文字2使用选择工具(V)，将文字的位置调整，把文字间的间距拉开，便于制作立体文字，并使用工具箱中的任意变形工具(Q)，将图形放大，如图2-52。图2-52 调整图形大小和间距2.2.2课堂学习绘制立体文字3为每个字母描

29、边，首先调整笔触颜色为黑色，再使用工具箱中的墨水瓶工具，如图2-53所示，在每个字母上单击鼠标左键，即可为字母描边，如图2-54所示。这里需要注意的是，墨水瓶负责给轮廓上色，颜料桶则负责给填充区域上色，这是墨水瓶和颜料桶的区别，请大家区分好两者的关系。图2-53 使用墨水瓶工具描边图2-54 描边后的效果2.2.2课堂学习绘制立体文字4描边完成后，要将填充色删除掉。使用选择工具(V)，单击填充色部分，按下键盘上的Delete键，即可删除填充色，如图2-55所示。图2-55 删除填充色2.2.2课堂学习绘制立体文字5制作立体投影部分，以字母G为例，将字母G的线条部分选中，执行“复制粘贴”，得出另

30、一个字母G，将第二个字母G放置在第一个字母G的右后方，如图2-56所示。接下来，用线条工具(N)将两个字母间的空隙连接起来，如图2-57所示。最后，用选择工具(V)选中多余的线条，按下键盘上的Delete键删除掉，最终效果如图2-58所示。使用同样的方法制作X和O的立体投影部分，三个字母的立体效果如图2-59所示。图2-56 复制字母图2-57 连接空隙部分图2-58 删除多余线条图2-59 三个字母的立体投影效果1.3认识Animate工具面板6使用颜料桶工具给字母的高光面填充颜色，使用嫩绿色填充，如图2-60所示。再使用墨绿色给字母的暗面部分进行填充，最终效果如图2-61所示。图2-60

31、为字母高光面填充颜色图2-61 为字母暗面填充颜色2.2.3任务实施绘制表盘通过以上实例的学习，相信同学们已经对Animate CC的基本图形绘制有了一些了解，接下来，请用已经掌握的绘制方法，来绘制如图2-62的时钟图形。首先，我们来分析时钟图形的图案构成，外轮廓为正圆形，刻度由线条工具绘制，分针和时针由笔触不同的线条绘制，数字由文本工具创建。我们知道，一个时钟有12个刻度，一共360度，两个刻度之间为30度，如何绘制精准的刻度，是本练习的难点。图2-62 绘制时钟首先，使用椭圆工具，按住shift键，绘制一个正圆形，打开对齐面板，让正圆形相对于舞台居中对齐。并在正圆形左边，绘制一条比直径更长

32、的垂直直线，如图2-63所示。打开对齐面板，让直线相对于舞台居中对齐，如图2-64所示。12.2.3任务实施绘制表盘图2-63 绘制正圆形和直线2选中直线，打开变形面板，在面板上选择“旋转”，并将数值输入为“30”，如图2-65所示。然后多次点击右下角的“重制选区和变形”图标，每点击一次，直线就以30度的角度复制出来，最终效果如图2-66所示。2.2.3任务实施绘制表盘图2-65 设置变形面板图2-66 复制并旋转直线3把光标定位在圆心位置，按下Alt+Shift键，从圆心开始绘制正圆形，比外轮廓的正圆形稍小一些，如图2-67所示。接下来，点击多余的线条，按Delete键将其删除，最终效果如图

33、2-68所示。2.2.3任务实施绘制表盘图2-67 绘制圆形图2-68 删除多余线条4最后，使用线条工具在表盘上绘制时针和分针，并使用文本工具，输入数字，如图2-69所示。2.2.3任务实施绘制表盘图2-69 时钟效果图2.3本章小结本章介绍了图层的概念，矢量图和位图的区别，通过几个实例的操作，让大家对Animate CC基本图形的绘制有了一定的了解。通过绘制坐标轴的练习，学习了水平直线、垂直直线以及45度直线的绘制方法。通过绘制毛笔的练习，学习如何使用选择工具对图形进行变形，以及渐变色的调色和填充方法。通过绘制立体文字的练习，学习如何将文字打散为图形。通过绘制时钟的练习，学习如何将对象进行角

34、度旋转。只有将基本图形的绘制掌握了，才能更好的进行动画创作。2.4课后检测一、单项选择题1修改图形中心点位置应该使用（ ）工具。A任意变形工具 B钢笔工具C渐变变形工具 D线条工具2快捷键（ ）可将对象粘贴到当前位置。ACTRL+V BCTRL+SHIFT+VCCTRL+C DCTRL+SHIFT+C3.在Animate CC中要绘制精确路径可使用( )。A铅笔工具 B钢笔工具C刷子工具 D以上都是2.4课后检测4.在Animate CC中选择滴管工具，当单击填充区域时，该工具将自动变为（ ）。A墨水瓶 B颜料桶C刷子 D钢笔5.将一个字符串填充不同颜色，可先将字符串（ ）。A分离 B组合C转

35、化为元件 D转化为按钮6.要实现某个对象进行旋转37的精确操作，可以使用以下面板中的（ ）。 A“属性”面板 B“动作”面板 C“对齐”面板 D“变形”面板 2.4课后检测二、填空题1.Animate CC的图形系统是基于 的，只需存储少量的 数据就可以描述一个看起来相当复杂的对象。2.橡皮擦工具包含5种擦除状态，分别是 、 、 、 和 。3. 在Animate CC中绘制图形时，可以采用 绘制模式和 绘制模式两种绘制模式。4. Animate CC提供了两种色彩模式，分别为 色彩模式和 色彩模式。2.4课后检测三、小组合作题请小组讨论如图所示的一把彩虹雨伞，由哪些图形构成，如何进行绘制。并通

36、过合作，将雨伞图案绘制出来，要求造型相近，并填充线性渐变色。非常感谢您的观看！第三章基本动画制作逐帧动画Animation翻转课堂任务单学习主题：制作逐帧动画达成目标：掌握插入帧、插入关键帧和插入空白关键帧学习方法建议：在课前观看微课视频学习，并尝试制作一个逐帧动画学习任务：制作动画倒计时动画、打字机效果动画、翻转帧写字动画重点难点：熟练掌握添加帧的操作，以及“绘图纸外观”工具、“编辑多个帧”工具的使用学习测试：制作飞翔的大雁逐帧动画3.1帧和图层的基本概念1.帧的基本概念 帧是Animate CC动画的基本编辑单位，动画实际上是通过帧的变化产生。 Animate CC中最小的时间单位是帧。

37、根据帧的作用区分，可以将帧分为关键帧、空白关键帧、属性关键帧、补间帧（包括动画补间、形状补间和传统动画补间）和静态帧2.图层的基本概念 图层是所有图形图像软件当中必须具备的内容，是我们用来合成和控制元素叠放次序的工具 图层根据使用功能的不同分为三种基本类型：普通层、遮罩层、运动引导层3.2逐帧动画n 逐帧动画这是一种常见的动画形式，它的原理是在“连续的关键帧”中分解动画动作，也就是每一帧中的内容不同，连续播放而成动画。n 优势：因为它相似与电影播放模式，很适合于表演很细腻的动画n 概念：在时间帧上逐帧绘制帧内容称为逐帧动画，由于是一帧一帧地画，所以逐帧动画具有非常大的灵活性，几乎可以表现任何想

38、表现的内容。n 逐帧动画在时间帧上表现为连续出现的关键帧，如图3-2所示图 3-2 逐帧动画文字逐帧动画指令逐帧动画导入序列图像创建逐帧动画的几种方法用导入的静态图片建立逐帧动画绘制矢量逐帧动画新建动画文档，选择“文件”菜单中“新建”，以默认对话框参数新建一个动画文档，如图3-3所示。步骤一制作慢慢盛开的玫瑰动画图3-3 新建对话框步骤二制作慢慢盛开的玫瑰动画在时间轴上单击第1帧，将素材导入舞台，方法是选择“文件”菜单中“导入”选项下的“导入到舞台”，此时出现如图3-4所示对话框，按“是”按钮， 此时将素材依次导入到舞台了。图3-4 插入空白关键帧步骤三制作慢慢盛开的玫瑰动画玫瑰花素材默认导入

39、到了舞台的中心位置，若要将刚导入的素材统一移动舞台的另一位置，其方法是：单击“编辑多个帧”按钮，再按Ctrl+A快捷键，在选区上按住鼠标左键移动舞台的另一位置，若要复位到中心位置，再用对齐工具将所有的素材图像水平中齐与垂直中齐，对齐工具与调整效果如图3-5所示。图3-5 编辑多个帧与对齐制作慢慢盛开的玫瑰动画12步骤四：按下【Ctrl+Enter】测试动画，速度太快，接着调小帧频，方法是菜单“修改”下的“文档”选项，调小帧频为3fps，如图3-6所示。再测试，即可看到在原地缓缓盛开的玫瑰花序列效果，如图3-7所示。图3-6 修改帧频图3-7 玫瑰花盛开序列效果3.2.2课堂学习制作倒计时动画1

40、2步骤一：使用文本工具（T），在舞台上输入文字“5”，如图3-8所示。接下来，依次插入“空白关键帧”，如图3-9所示。分别输入文字“4”、“3”、“2”、“1” ，如图3-10所示。图3-8输入文字图3-9插入空白关键帧3图3-10依次输入数字3.2.2课堂学习制作倒计时动画步骤二将各个帧的数字进行对齐，可以使用“编辑多个帧”，看到之前的所有帧上的图形内容，通过移动操作，可以让新的帧上的数字与前一帧上的数字重合，如图3-11所示。图3-11 将多个帧上的图形重合3.2.2课堂学习制作倒计时动画问题步骤三：通过菜单栏上的“控制”“测试影片”，或者按下快捷键“Ctrl+Enter”，测试影片，观看

41、效果。还有其他的制作方法吗？请大家想一想。方法二：使用“插入关键帧”的方法制作倒计时动画。步骤一：使用文本工具（T），在舞台上输入文字“5”，如图3-8所示。接下来，依次点击鼠标右键，选择“插入关键帧”，插入其余4个关键帧。步骤二：这样，5个关键帧上都输入了文字“5”，并且是相互重合的。接下来，依次将关键帧上的数字，修改成“4”、“3”、“2”、“1”。步骤三：通过菜单栏上的“控制”“测试影片”，或者按下快捷键“Ctrl+Enter”，测试影片，观看效果。3.2.3课堂学习制作打字机效果1选择文本工具（T），在舞台上输入下划线“_”，并将其转换为图形元件，命名为“下划线”，如图3-12所示。图

42、3-12 输入下划线3.2.3课堂学习制作打字机效果2为了制作下划线的闪烁效果，在第3帧和第5帧的位置，插入关键帧，如图3-13所示。在第2帧、第4帧、第6帧的位置插入空白关键帧，如图3-14所示。图3-13插入关键帧图3-14插入空白关键帧3.2.3课堂学习制作打字机效果3在第6帧的空白关键帧位置，输入文 字 “ 欢 ” ， 打 开 菜 单 栏 “ 视图”“标尺” ，可以让其他文字按照“欢”字所在位置底对齐。接下来依次插入关键帧，并依次输入文字“迎”、“来”、“到”、“动”、“画”、“制”、“作”、“课”、“堂”，如图3-15所示，时间轴上的设置如图3-16所示。图3-15 逐帧依次输入文字

43、图3-16 时间轴设置3.2.3课堂学习制作打字机效果4制作句末下划线的闪烁效果，选择图层1，在第19帧上插入帧，延长句子显示的时间。新建图层2，在第15帧的位置，插入空白关键帧，将下划线图形元件拖入舞台，并放置在句末，并在第17帧、19帧上插入关键帧，在第16帧、18帧上插入空白关键帧，如图3-17所示。这样，下划线闪烁的效果就制作完成了如图3-18所示。图3-17时间轴设置图3-18 最终效果3.2.3课堂学习制作打字机效果5将文档保存，并通过菜单栏上的“控制”“测试影片”，或者按下快捷键“Ctrl+Enter”，测试影片，观看效果。在舞台中央输入文字“吉”，设置字符颜色为红色，字符大小为

44、96点，如图3-19所示。步骤一3.2.4课堂学习制作写字效果图3-19输入文字步骤二3.2.4课堂学习制作写字效果使用Ctrl+B命令，将文字分离，如图3-20所示。步骤三在第2帧插入关键帧，并使用工具栏当中的橡皮擦工具，擦除掉吉字的最后一个笔划，如图3-21所示。图3-20将文字分离图3-21擦除笔划在第3帧插入关键帧，擦除掉吉字的倒数第二个笔划，依次在第4、5、6、7帧上插入关键帧，并依次擦除掉吉字的笔划，如图3-22所示。步骤四3.2.4课堂学习制作写字效果图3-22 逐帧擦除吉字这时播放动画我们发现吉字的笔划是倒着的，需要将其翻转回来。将7个帧全部选中，选中的方式有两种，一种是按住键

45、盘上shift键，先点击时间轴上第1帧，再点击第7帧，即可连续选中7个帧；另外一种方法是直接从第1帧开始往最后一帧框选，如图3-23所示。选中了所有帧之后，在帧上点击鼠标右键，选择“翻转帧”，即可让文字按照正确笔划运行。步骤五3.2.4课堂学习制作写字效果图3-23选中所有帧这时播放动画，我们发现文字的笔划书写速度非常快，为了让文字能慢慢的一笔一划书写，我们在每个关键帧之后，插入2个普通帧，最终时间轴上的设置如图3-24所示。将文档保存，并通过菜单栏上的“控制”“ 测 试 影 片 ” ， 或 者 按 下 快 捷 键“Ctrl+Enter”，测试影片，观看效果。步骤六3.2.4课堂学习制作写字效

46、果图3-24插入普通帧1新建一个文档，使用渐变色填充天空。在颜色面板上，类型选择“线性”，设置深蓝浅蓝的线性渐变色，如图3-25所示，使用矩形工具绘制一个与舞台同样大小的矩形。3.2.5任务实施制作飞翔的大雁图3-25渐变色填充2使用工具栏上的“渐变变形工具”调整渐变色的方向，通过旋转角点，改变渐变色填充方向。如图3-26所示，调整后的效果如图3-27所示。3.2.5任务实施制作飞翔的大雁图3-26 渐变变形工具图3-27 绘制天空3将第一个图层命名为“天空”，并在时间轴上第5帧插入帧，新建一个图层，命名为“大雁”，在第1帧的位置，插入空白关键帧，如图3-28所示。并绘制如图3-29所示的大雁

47、图形。3.2.5任务实施制作飞翔的大雁图3-28 图层和时间轴设置图3-29绘制大雁图形4在“大雁”图层第2帧，插入关键帧，并使用工具栏上的“选择工具(V)”,调整翅膀部分的形状，接下来，依次在第3、4、5、6帧插入关键帧，并将每个帧上的大雁翅膀形状做调整，制作出大雁翅膀上下扇动的效果，如图3-30所示。3.2.5任务实施制作飞翔的大雁图3-30 逐帧调整翅膀形状5测试影片观看效果，我们发现大雁的翅膀扇动速度太快，为了调整速度，我们在时间轴上的每个关键帧后插入一个普通帧，延长每个动作停留的时间，如图3-31所示。3.2.5任务实施制作飞翔的大雁3-31时间轴设置3.3本章小结通过学习，可以掌握

48、创建逐帧动画的几种方法： 用导入序列建立逐帧动画 绘制矢量逐帧动画 文字逐帧动画常见的动画形式有五种：逐帧动画、形状补间动画、传统补间动画、遮罩动画、引导层动画中，逐帧动画是其中的一种，也是其中的基础内容，只有将逐帧动画掌握，才能更好的学习其他几种动画形式。课后检测一、问答题常见的动画形式分为哪几类？ 简述逐帧动画的基本原理。 简单介绍图层的概念，在什么情况下使用图层？ 什么是帧？如何对帧进行基本操作？非常感谢您的观看！第四章 基本动画制作形状补间动画Animation翻转课堂 4.1 形状补间动画的概念n 补间动画的概念补间动画，是指计算机根据前后两个关键帧的内容自动设计出的插补帧序列。n

49、补间动画的分类在Animate CC之前的版本中，补间动画分为两种：一种是针对形状变化的形状补间；另一种是针对元件及图形的补间动画。而在Animate CC中，补间动画分为两类：基于对象的补间动画、形状补间动画及传统补间动画。 4.1 形状补间动画的概念n 形状补间动画的概念在Animate的时间帧面板上，在一个时间点（关键帧）绘制一个形状，然后在另一个时间点（关键帧）更改该形状或绘制另一个形状，Animate根据二者之间的帧的值或形状来创建的动画被称为“形状补间动画”。n 构成形状补间动画的元素形状补间动画可以实现两个图形之间颜色、形状、大小、位置的相互变化，其变形的灵活性介于逐帧动画和动作

50、补间动画二者之间，使用的元素多为用鼠标或压感笔绘制出的形状，如果使用图形元件、按钮、文字，则必先“打散”再变形。 4.1 形状补间动画的概念n 形状补间动画在时间帧面板上的表现形状补间动画建好后，时间帧面板的背景色变为淡绿色，在起始帧和结束帧之间有一个长长的箭头，如图4-1所示。n 创建形状补间动画的方法在时间轴面板上动画开始播放的地方创建或选择一个关键帧并设置要开始变形的形状，一般一帧中以一个对象为好，在动画结束处创建或选择一个关键帧并设置要变成的形状，再单击开始帧，在属性面板上单击“补间”旁边的小三角，在弹出的菜单中选择“形状”，此时，时间轴上的变化如图4-1所示，一个形状补间动画就创建完