Animate动画设计与制作项目教程-整本书教学教程电子教案(.pptx

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,项目一我的第一个作品,【项目描述】,“元元宠物之家”宠物店打算在网上进行宣传，需要应用,Animate,软件制作一个生动的广告。请大家帮元元想一想，应该怎样制作才能够达到宣传效果呢？,【项目目标】,知识与技能目标,掌握,Animate,的启动和退出方法。,了解,Animate,窗口组成：标题栏、菜单栏、常用工具栏、格式栏和状态栏。,掌握,Animate,工具的功能和使用方法。,了解二维动画和三维动画的区别。,情感目标,培养对动画制作的兴趣及积极的学习态度。,通过小组协同创作培养合作精神。,通过互评与自评，形成认真、细致的学习与工作态度。,【项目实施流程】,融入情景,制作素材：背景,制作素材：文字,制作素材：按钮,制作“表情”动画,任务一分析任务制作素材,【任务目标】,掌握更改舞台背景的方法。,掌握公共库的使用方法。,掌握文本工具的使用方法。,【知识点】,一、,Animate,软件介绍,2015,年,12,月,2,日,Adobe,宣布,Flash ProfessionalCC,更名为,Animate CC,，在支持,Flash SWF,文件的基础上，加入了对,HTML5,的支持，并在,2016,年,1,月份发布新版本的时候，正式更名为,Adobe Animate CC,，缩写为,An,，如图,1-1-1,所示。,图,1-1-1 Animate,软件图标,【知识点】,二、,Animate,界面基本介绍,Animate,界面包括“菜单栏”“工作区”“时间轴,/,动画编辑器面板组”“属性,/,库面板组”“工具面板”等。,Animate,的界面与,Flash,有所区别，增加了很多新功能，用户可以更方便地设计动画。,Animate,界面中各组成部分如图,1-1-2,所示。,图,1-1-2 Animate,界面,【知识点】,1.,菜单栏,Animate,菜单栏主要包括“文件”“编辑”“视图”“插入”“修改”“文本”“命令”“控制”“调试”“窗口”“帮助”，如图,1-1-3,所示,.,2.,工作区,工作区是,Animate,最重要的组成部分之一，其作用是显示绘制的图形图像以及辅助绘制的各种参考线。,工作区主要包括场景工具栏和场景两个部分，,如图,1-1-4,所示。,图,1-1-3,菜单栏,图,1-1-4,工作区,【知识点】,3.,时间轴,/,动画编辑器面板组,时间轴是指动画播放所依据的一条抽象的轴线。在软件中，将这套抽象的轴线具象化到一个面板中，即“时间轴”面板，如图,1-1-5,所示。,图,1-1-5,“时间轴”面板,【知识点】,4.,属性,/,库面板组,“属性”面板用于修改物体的属性，如图,1-1-6,所示。,“库”面板类似一个仓库，其中存放着当前打开的影片中的所有元件。用户可直接将“库”面板中的元件拖放到舞台场景中，或对“库”面板中的元件进行复制、编辑和删除等操作。,图,1-1-6,“属性”面板,【知识点】,5.,工具面板,“工具”是软件的重要面板，列有制作动画必不可少的工具，包括用于绘制和编辑矢量图的各种工具，如绘图、色彩、查看和选项等。如图,1-1-7,所示。,图,1-1-7,“工具”面板,【任务实施】,1.,设置背景,单击舞台，“属性”窗口中显示为舞台属性，如图,1-1-8,所示，修改舞台的尺寸、帧频以及背景颜色。,2.,输入文字,单击“工具”面板上的“文本工具”按钮，如图,1-1-9,所示，在舞台中输入“元元宠物之家”。单击文字，修改文字属性。,图,1-1-8,舞台属性,图,1-1-9,文本工具,【任务实施】,3.,制作按钮,选择【插入】菜单中的【新建元件】命令，在“创建新元件”对话框中更改元件名称，将“类型”修改为“按钮”，如图,1-1-10,所示。,还可以继续创建多个图层来编辑按钮元件。,按钮元件有,4,个状态，分别如下：,（,1,）弹起：鼠标指针不在按钮上时触发该状态。,（,2,）指针经过：鼠标指针在按钮上，但是没有按下鼠标左键时触发该状态。,（,3,）按下：鼠标指针放在按钮上，并且按下鼠标左键不松开时触发该状态。,（,4,）点击：按下鼠标后松开时触发该状态。,上述各种状态可以根据自己需要新建关键帧来设置，如图,1-1-11,所示。,图,1-1-10,创建新元件,图,1-1-11,制作按钮,【思考与练习】,试比较,Animate CC,与,Flash Professional CC,在界面和功能上的异同点。,任务二制作“表情”动画,【任务目标】,掌握使用绘图工具绘制卡通造型的方法。,掌握逐帧动画的制作方法。,【知识点】,逐帧动画是什么？,Animate,逐帧动画是指在每一帧中都会更改舞台内容，适用于图像在每一帧中都在变化而不仅是在舞台上移动的复杂动画。,若要创建逐帧动画，需要将每个帧都定义为关键帧，然后为每个帧创建不同的图像。每个新关键帧最初包含的内容和它前面的关键帧是一样的，因此可以以递增的方式修改动画中的帧。,【任务实施】,1.,新建图层,在上个任务完成的源文件中新建图层。,2.,绘制卡通造型猫,用椭圆工具绘制一个圆形，建议此时背景颜色选择无色，方便绘制修改。用选取工具靠近舞台中的圆形，会发现光标变样了，此时可以根据需要拖放鼠标来修改图形形状，如图,1-2-1,所示。线稿绘制效果如图,1-2-2,所示。,图,1-2-1,卡通造型猫的绘制,图,1-2-2,卡通造型猫线稿,【任务实施】,3.,填充颜色,使用颜料桶工具填充颜色。注意，为避免有些线头没有完全闭合，可以选择“空隙大小”“封闭大空隙”，如图,1-2-3,所示。填色效果如图,1-2-4,所示。,图,1-2-3,修改“空隙大小”,图,1-2-4,卡通造型猫填色效果,【任务实施】,4.,绘制腮红,用椭圆工具绘制一个椭圆，填充粉红色到浅粉红色的放射状渐变色。注意更改最右侧的色块的透明度。将腮红复制一份，分别移到合适位置，如图,1-2-5,所示。,图,1-2-5,绘制腮红,【任务实施】,5.,“表情”逐帧动画效果制作,在本图层的时间轴上的第,5,帧中新建关键帧，用选取工具修改动物的表情，如图,1-2-6,所示。,6.,保存,保存源文件，生成影片文件。,图,1-2-6,表情修改,【思考与练习】,请尝试用本任务所学知识绘制一个如图,1-2-7,所示的,QQ,表情动画。,图,1-2-7,表情动画,拓展任务一“垃圾分类”案例素材绘制,【任务描述】,将商业案例中的人物三视图、垃圾桶、易拉罐、扫把、猫咪、鱼骨绘制出来。（留存此作品，在项目六中使用）,图,1-3-1,人物三视图,拓展任务二“小鸡”逐帧动画制作,【任务描述】,商业案例“小小乐园剧情动画”的主角小鸡是一只活泼可爱的小动物，为了体现其活泼的特性，需要制作小鸡上下抖动的鸡冠及表情，如图,1-4-1,所示。,图,1-4-1,“小鸡”的表情,主编：袁晓华 曾曼蕊 徐颖,项目二动漫大赛作品制作,【项目描述】,我们都知道过马路时应“红灯停、绿灯行”，但是当下出现了扎堆结伴闯红灯这种非常不文明的现象。为了提高大家的文明意识，我们选取此内容设计一个公益广告，呼吁大家遵守交通规则，珍惜生命。,【项目目标】,知识与技能目标,理解元件的概念，简单了解元件的种类。,区分逐帧动画、形状补间动画和传统补间动画。,了解镜头的常用处理手法：推镜头、拉镜头、移镜头。,具备熟练创建元件及传统补间动画的能力。,具备结合常用镜头处理手法，修改传统补间动画属性的能力。,情感目标,通过作品赏析，激励自己对美好生活的向往，培养对,Animate,动画的浓厚兴趣，激发强烈的学习动机和创作欲望。,通过作品的制作和展示，培养对美的追求，以及团队协作、勇于展现自我的职业素养。,意识到文明交通的重要性，督促自己改变生活陋习，为文明生活尽一份力。,【项目实施流程】,融入情景,制作素材,人物位移动画,镜头处理,整体合成,任务一融入情景领取任务,【任务目标】,通过视频等资源的警示教育，懂得遵守交通规则的重要性,【任务实施】,（,1,）观看动态图片教学资源,（,2,）观看交通意外现场视频教学资源,（,3,）观看往年获奖作品，并了解学校对参赛的激励机制,【思考与练习】,请大家分组探讨制作思路，并做好记录。,任务二分析任务制作素材,【任务目标】,掌握绘图工具的使用方法和逐帧动画的制作方法。,利用绘图工具，绘制背景及人物造型。,利用逐帧动画，制作人物原地踏步动画和人物表情动画。,【任务实施】,方法一,：背景绘制。,从教学资源包中选取所需素材，用图片处理软件（如,Photoshop,）进行美化处理，如图,2-2-1,所示。,图,2-2-1,网络资源,1,【任务实施】,方法二,：汽车、人物等造型的绘制。,从教学资源包中选取如图,2-2-2,所示的素材，导入,Animate,舞台，在“素材图”图层上新建一个“线稿”图层，在“线稿”图层中，用直线、钢笔等工具描图，也可以根据作品需要进一步加工创作。,图,2-2-2,网络资源,2,【思考与练习】,请用所学的逐帧动画技法模仿制作人物表情动画（可从图,2-2-4,中任选一个造型）。,图,2-2-4,人物表情,任务三制作人物的位移动画,【任务目标】,掌握创建元件和制作传统补间动画的要领。,利用传统补间动画方式，完成各个人物的位移动画制作。,【任务实施】,（,1,）观看动态图片教学资源,（,2,）观看交通意外现场视频教学资源,（,3,）观看往年获奖作品，并了解学校对参赛的激励机制,【思考与练习】,请大家分组探讨制作思路，并做好记录。,任务三制作人物的位移动画,【任务描述】,将商业案例中的人物三视图、垃圾桶、易拉罐、扫把、猫咪、鱼骨绘制出来。（留存此作品，在项目六中使用）,图,1-3-1,人物三视图,【知识点】,元件,（,1,）元件分为“图形”、“影片剪辑”和“按钮”。,“图形”元件：元件的时间轴与主场景时间轴同步运行。,“影片剪辑”元件：完全独立于主场景时间轴且重复播放。,“按钮”元件：只有,4,帧的影片剪辑，但时间轴不能播放。,（,2,）库中的元件改变了，舞台中的所有元件也会改变；而单独修改舞台中的某个元件，其他元件和库中的元件不会改变。,（,3,）元件嵌套：将一个已存在的元件实例放到另一个主元件中，可以实现多层嵌套。,【知识点】,传统补间动画,传统补间动画可以用于产生如下变化：物体的移动，物体大小的改变和简单的形变，物体的旋转，物体的透明度、色调和亮度的改变等。传统补间动画的操作过程归纳如图,2-3-2,所示，我们称之为“传统补间,123,”。,1,个,元件,2,个,关键帧,3,个,属性,样式,缓动,旋转,图,2-3-2,传统补间动画的制作过程,【任务实施】,（,1,）新建文档，并新建影片剪辑元件“粽子原地踏步”，如图,2-3-7,所示。,（,2,）在元件“粽子原地踏步”中，新建图形元件“身体”，如图,2-3-8,所示。,图,2-3-7,新建元件,图,2-3-8,新建元件,【任务实施】,（,3,）在元件“身体”中，用绘图工具绘制粽子的身体，如图,2-3-9,所示。,图,2-3-9,主角形象绘制,【任务实施】,（,4,）新建图形元件“上身动画”，如图,2-3-10,。人走路的时候身体重心是有起伏的，如图,2-3-11,所示，因此，需要将元件“身体”拖放到“上身动画”元件中，在第,1,、,6,、,12,、,18,、,24,帧分别插入关键帧，设置身体的起伏，并右键创建传统补间动画，如图,2-3-12,。,图,2-3-10,新建元件,图,2-3-11,走路运动规律,图,2-3-12,关键帧绘制,【任务实施】,（,5,）在“上身动画”元件中新建图层“手”，画出手，保存为图形元件“手”，并调整圆心，如图,2-3-13,所示。,（,6,）在第,1,、,7,、,13,、,18,、,24,帧分别插入关键帧，分别调整手的位置如图所示。注意第,1,帧和第,24,帧内容必须一致，否则动作会不连贯，如图,2-3-14,所示。,图,2-3-13,圆心调整,图,2-3-14,关键帧绘制,【任务实施】,（,7,）在第,1,、,7,、,13,、,18,、,24,帧之间单击鼠标右键，创建,（,8,）回到“粽子原地踏步”元件中，新建图形元件“脚动画”，如图,2-3-16,所示，画出脚。,图,2-3-15,创建传统补间,图,2-3-16,新建元件,【任务实施】,（,9,）“脚动画”元件中，在第,1,、,11,、,12,、,16,、,17,、,21,、,22,、,24,帧插入关键帧，分别调整脚的位置，如图,2-3-17,所示。,图,2-3-17,关键帧绘制,【任务实施】,（,10,）在第,1,、,11,、,12,、,16,、,17,、,21,、,22,、,24,帧之间单击鼠标右键，创建形状补间动画，如图,2-3-18,所示。,（,11,）“粽子原地踏步”元件中，图层设置如图,2-3-19,所示，其中左脚、右脚图层都放同一个元件“脚动画”。,（,12,）为了做出两个脚前后交替走动的效果，单击“右脚”图层中的“脚动画”元件，设置属性如图,2-3-20,所示，从第,12,帧开始循环播放，并修改脚的颜色。,图,2-3-18,创建形状补间动画,图,2-3-19,图层设置,图,2-3-20,元件属性设置,【任务实施】,（,13,）回到场景,1,中，在图层里放“粽子原地踏步”元件，在第,1,、,30,帧中插入关键帧，将第,30,帧的元件移动到左边，创建传统补间动画，如图,2-3-21,所示。,（,14,）保存。,图,2-3-21,图层设置,特别提示：,此案例中，涉及到了元件的嵌套，逻辑关系如图,2-3-22,所示,图,2-3-22,元件嵌套逻辑关系,【思考与练习】,复习传统补间动画口诀，如图,2-3-23,所示。,图,2-3-23,传统补间动画口诀,任务四镜头处理手法,【任务目标】,了解渐入渐出、推、拉、移镜头镜头的概念的制作方法。,根据常用镜头处理手法，修改传统补间动画属性。,区别,Animate,与,Flash,中关于场景处理的不同之处。,【知识点】,常见镜头处理手法,（,1,）推,/,拉镜头：,画面由小到大或由大到小的缩放过程。,（,2,）摇镜头：,摄像机的位置不动，而是移动镜头的方向。,（,3,）跟镜头：,摄像机跟随运动着的被拍摄物体移动，该物体在画面中心位置不变，前后景在变化。,镜头处理手法,要点,渐入渐出,透明清晰,推、拉镜头,大小,移镜头,左右，上下,【思考与练习】,感兴趣的同学请了解,Flash,中镜头处理手法的使用，与,Animate,软件做个对比。下面介绍,Flash,中常见镜头处理手法。,1.,渐入渐出镜头效果，如图,2-4-3,所示。,图,2-4-3,渐入渐出镜头,【思考与练习】,2.,推拉镜头效果，如图,2-4-4,所示。,3.,移动镜头效果，如图,2-4-5,所示。,图,2-4-4,推拉镜头,图,2-4-5,移动镜头,拓展知识,形状补间动画,形状补间：是由一个物体到另一个物体间的变化过程，像由三角形变成四方形等。时间轴效果如图,2-5-2,所示，请注意时间轴上形状补间和传统补间动画的颜色不同。,图,2-5-2,时间轴效果,拓展知识,引导线动画,引导线动画：物体随着绘制好的路线进行有规律的运动。需要两个图层：物体在下层（需转换为元件,且圆心始终在线上），路线在上层,(,指导物体运动,),，如图,2-7-2,所示。,图,2-7-2,引导线动画,拓展任务一形状补间动画,【任务描述】,在本任务中，你将需要熟练掌握形状补间动画的制作方法，并完成“圣诞快乐”的动画制作，如图,2-5-1,所示。,图,2-5-1,效果图,拓展任务二传统补间动画,【任务描述】,本任务将讲解传统补间动画的制作方法，并完成“灯左右摆动”动画的制作，如图,2-6-1,所示。,图,2-6-1,灯左右摆动,主编：袁晓华 曾曼蕊 徐颖,项目三遮罩动画制作,【导语】,“,在An动画创作中，有一种技法与众不同，它能实现令人惊奇的炫目效果。例如波光粼粼的水倒影、瞬息万变的万花筒、变换整齐的百叶窗，还有探照灯、放大镜、望远镜等。想要创作出优秀的An动画，成为出色的“闪客”，必须精通这种技法。它究竟是什么？为什么具有那么神奇的功能？如何掌握和运用它？本项目将一一为您揭秘,”,【项目描述】,在网络教学平台中，有丰富的使用遮罩动画这个技法去制作的动画效果，大家将在对遮罩动画有个直观印象的情况下，根据交互课件的指引，完成遮罩技法的系列动画，并尝试通关自测游戏，检验自己的学习效果。,【项目目标】,知识与技能目标,养成综合运用、创作、迁移能力。,学会制作遮罩层动画。,理解遮罩的概念及其动画原理。,情感目标：,激发学习动机和创作欲望。,培养合作精神。,【项目准备】,多媒体机房教学设备,网络教学平台,教学课件，视频,动画范例,互联网资源,教学资源库,【项目效果图】,【项目实施流程】,融入情景,动漫原理,实例示范,自测游戏,扩展提升,任务一融入情景,【任务描述】,在本课的网络教学平台上，通过多媒体交互课件，学习“片头导语”、“学习目标”、“动画原理”-“认识遮罩”。点击“认识遮罩”按钮，依次点击右侧的10个An小动画，仔细观察、体会并与小组同学一起讨论这些动画与大家之前学过普通运动动画有何区别？并且尝试总结出这些动画有什么共性？,【任务目标】,通过网络教学平台的教学资源，领略遮罩动画的奇妙之处，融入教学情景。,【任务实施】,播放一段片头导语，吸引学生的注意，激发学习兴趣，引出新课主题，如图3-1-1所示。,图3-1-1 片头,给出10个An小动画，如图3-1-2所示，请同学们仔细观察特点，分小组讨论，并在纸上记录，抛锚引导，带着问题去学习,。,图3-1-2 10个An小动画,1,2,3,5,4,6,【思考与练习】,请大家分组记录下探讨的结果,。,任务二 动画原理,【任务描述】,理解遮罩动画的原理是实现精彩动画效果的关键，也是本课的难点。为了帮助大家突破难点，我们制作了三个原理演示动画，帮助大家从不同的角度理解遮罩动画的原理和基本方法。,【知识点】,理解遮罩动画的原理和基本方法。,【,任务实施,】,观看原理演示一：,假设用2张纸来表示2个图层,在上一个图层上画一个矩形，下一个图形上有图案，最后的遮罩效果就等同于挖空了一块矩形，透过这个矩形看到下面图层的图案，如图3-2-1、3-2-2所示。,图,3-2-1,原理演示一,图,3-2-2,原理演示一,【任务实施】,观看原理演示二：,同学们，你有晚上使用手电筒的经历吗？还记得电影、电视剧或演唱会节目中的探照灯效果吗？把遮罩层比做手电筒（探照灯），当遮罩层移动时，它下面的被遮罩层的对象就像被手电筒（探照灯）照过一样，只有有光的地方才能看到，被遮罩层只显示在遮罩层有对象的地方，如果被遮罩层是一行字，遮罩层中的对象是一个圆，那么做出来的效果显示的是外形为圆内的字。而遮罩层的东西是不显示的，它是什么颜色没有关系，如图3-2-3所示。,图,3-2-3,原理演示二,【,任务实施,】,观看原理演示一：,课堂游戏：拿出一张白纸来，在纸上挖掉一个窟窿，把纸放到照片上。大家看看，透过这个窟窿能看到什么东西？如果没有这个窟窿，又有什么不同？,通过这个游戏，我们明白了，白纸上面的窟窿起到了限制的作用，当这个窟窿是什么形状，我们就只能看到这个形状里面的东西。,同样的，遮罩动画里面的遮罩层和被遮罩层也可以对应到这个游戏中来。遮罩层就相当于白纸上面的窟窿，而被遮罩层就对应于我们要看的东西。,所以，被遮罩层上面的东西，由于有遮罩层的存在，而只能看到一部分，而这一部分究竟有多大呢？就要看遮罩层的形状了。,如图3-2-4、3-2-5、3-2-6所示,图,3-2-4,原理演示三,图,3-2-5,原理演示三,步骤提示，如图3-2-7、3-2-8、3-2-9、3-2-10所示：,图,3-2-7,步骤提示,图,3-2-8,步骤提示,图,3-2-9,步骤提示,图,3-2-10,步骤提示,原理解释：,“原理解释”：,归纳总结了遮罩原理及其实现方法。,“课堂问答”：,通过课堂问答检查学习者是否掌握了最重要的5个知识点，这是下一步操作的知识基础。,图,3-,16,图,3-15,【思考与练习】,请大家用新学的遮罩动画的知识讨论一下，任务一中观看的10个动画你会做哪一个？,任务三 实例示范,【任务描述】,本任务采用分层教学，设置梯度，设置了3个实例制作过程的教学示范，制作复杂性和难度有所增加。通过这三个递进的任务，大家将学会遮罩动画的基本操作。,【任务目标】,掌握遮罩动画的基本操作。,【,任务实施,】,同学们，经过前面的学习，大家认识了遮罩动画，理解了遮罩动画的原理，大家一定跃跃欲试了吧？,让我们一起通过三个范例的示范讲解试着完成三个遮罩动画的制作吧。,实例一,：,提问：,同学们，请大家根据前面,学过的遮罩动画原理，想一想如,何完成下面这个探照灯字的制作。,先独立思考，然后与小组同学交,流遮罩层放什么？被遮罩层放什么？,为什么要这样做？,回答：,如图,3-3-1,所示。,图,3-3-1,分析动画,操作步骤提示：,1.,新建一个文件。,2.,按要求设定影片的宽度和高度：宽度为,320pixes.,高度为,300pixes.,背景为白色。,3.,在图层的第一帧输入文字,“,青春基地,”,。,4.,在图层,1,的第,30,帧按,F5,将帧延长到,30,帧。,5.,增加一个图层，命名为,Mask.,6.,在,mask,图层的第,1,帧画一个园形，并选中这一个圆形，按,F8,将其转换为图形组件。,7.,在,mask,图层的第,30,帧，按,F6,插入关键帧。,8.,在,mask,图层的第,30,帧，将圆形拖到文字的右侧。,9.,在,mask,图层的第,1,到,30,帧之间单击鼠标左键，将这些帧选中，然后单击鼠标右键，选择“创建补间”命令。,10.,在,mask,图层上单击鼠标右键，选择“遮罩层”命令。,11.,按回车键测试影片（或按,Ctrl+Enter,测试,),。,对实例操作仍有疑惑的同学，请在网络教学平台中观看课件中的视频演示一、二和三。,【思考与练习】,请大家温习遮罩动画的制作方法，检验自己是否已经熟练掌握。,任务四 自测游戏,【任务描述】,遮罩动画的制作原理是整个,An,制作中的难点知识，初学者容易搞混遮罩层和被遮罩层的使用，因此，在本任务中，设计了一个教学游戏的情景，即帮助画面中的孩子摘到树上的苹果。,3,种方法分别对应,3,个典型遮罩动画的制作方法。采用大家喜爱的游戏的方式，考察大家是否已经分清楚遮罩层和被遮罩层的使用。,【任务目标】,准确区分遮,准确区分遮罩层和被遮罩层的使用。,罩层和被遮罩层的使用。,【任务实施】,阶段一：,同学们，我们一起玩一个游戏，有个小女孩想吃树上的苹果，可是她够不着，我们分组领取一个锦囊，想办法帮助她，好吗？如图,3-4-1,、,3-4-2,、,3-4-3,、,3-4-4,所示。,图,3-4-1,游戏,图,3-4-2,游戏,图,3-4-3,游戏,图,3-4-4,游戏,阶段二：,各组派代表汇报分析的过程以及评价他组的作品。,（比如：在完成任务的过程中有没有出错？错在哪里？是哪个知识点没掌握好，所以出错了？他组的作品完成质量如何？好在哪里？不好在哪里,?,）。,阶段三：,教师分别简单记录每个同学的回答，并点评。,【思考与练习】,请大家尝试归纳遮罩动画的要点。,（提示：通过“概念”、“原理”、“效果”、“判断”、“设置”五个方面归纳学习要点，如图,3-4-5,所示。）,图,3-4-5,遮罩动画原理归纳,【项目展示】,一、展示内容,展示制作的项目作品，并自我评价。,讲解制作过程中运用的知识内容和过程。,与大家分享制作过程中遇到的问题及解决方法。,二、汇报要求,语言流畅，表述清晰。,【,项目评价,】,评价形式,评价指标,分值,自评,组评,师评,过程性评价,根据教材自主探索任务,10,积极参与小组协作,10,终结性评价,了解项目实施流程,5,完成任务二,15,完成任务三,20,完成任务四,20,课后尝试完成思考与练习,20,合计,综合评分,备注,综合评分,=,自评（,30%,）,+,组评（,30%,）,+,师评（,40%,）,【任务描述】,上述的遮罩系列动画制作过程帮助大家从概念、原理、判断、效果、设置等方面全方位的了解遮罩动画技法。但是动画高手都是从基础反复练习才能达成的，因此，下面将提供多个进阶任务，帮助大家拓展提升。,【任务目标】,通过模仿制作，探索学习，精通遮罩动画，努力成为动画高手。,拓展任务一 举一反三,【任务实施】,阶段一：,同学们，刚才我们学到的遮罩动画原理、方法，大家会不会运用它呢？请同学们以小组为单位，研究一下本课件展示的十种遮罩动画效果，如图,3-5-1,所示。,自学方法提示：,单击遮罩动画剪辑，下载源程序，打开后进行研究，弄清楚其中的秘密，然后再独立地做出来。,An,高手都是从模仿开始的，多研究源文件可以帮助你从简单模仿走向独立创作的高手阶段！,图,3-5-1,十种遮罩动画效果,阶段二：,如果同学想继续挑战难度更大的遮罩动画。大家可以研究本模块中的例子，如图,3-5-2,所示，挑战你的知识迁移能力、想象力和创意！试一试，你会发现不一样的你！,图,3-5-2,遮罩案例,【思考与练习】,老师给大家一些网络教程的地址，如图,3-5-3,所示，请同学们利用课余时间去研究学习。下次课我们请同学们展示你们的学习成果。,自学方法提示：互联网上的资源非常丰富，我们要懂得利用这个宝库，让自己当自己的老师！,图,3-5-3,网络教程地址,【任务描述】,本次任务取自广西一九岂非影视传媒有限公司的“小小乐园剧情动画”，需要为主角制作一个转动的风扇，如图,3-6-1,所示。,拓展任务二,风扇转动动画,图,3-6-1,小小乐园剧情动画,【任务目标】,通过模仿制作，探索学习，继续学习遮罩动画。,【任务实施】,1.,新建文档，长宽为,1920*1080,2.,新建图层，使用矩形形状工具，,将属性中的矩形选项属性改为,500,，,填充颜色改为无，笔触大小为,5,，,颜色为黑色，绘制一个圆角矩形，,如图,3-6-2,所示,图,3-6-2,矩形工具属性,3.,快捷键：,ctrl+c,，复制一个刚刚绘制的圆角矩形，,ctrl+shift+v,，粘贴。快捷键：,ctrl+t,，打开变形工具，将缩放的约束解开，将竖缩放的参数改为,70%,。如图,3-6-3,所示。,4.,新建图层，绘制一个横的圆角矩形，如图,3-6-5,所示。,图,3-6-3,变形效果,图,3-6-5,绘制圆角矩形,5.,绘制两条直线在如图,3-6-6,所示的位置，后删除掉不需要的部分，如图,3-6-7,所示,6.,使用变形工具将风扇头压扁如图,3-6-8,所示。,图,3-6-6,变形效果,图,3-6-7,绘制圆角矩形,图,3-6-8,风扇头变形,7.,绘制一条直线在后部分的中间然后分别填充白色和灰色如图,3-6-9,所示，最后删除直线与边线。,8.,在风扇额中间再绘制一条直线，然后将所有黑色边线改为白色。,9.,再新建一个图层绘制一个圆形填充灰色如图,3-6-10,所示。,图,3-6-9,填充颜色,图,3-6-10,灰色圆形,10.,使用变形工具，将中心点移动到风扇的左边处，如图,3-6-11,所示。,11.,新建一个图层，命名为扇叶，新建一个圆角矩形，将边框删除掉，选中让，快捷键,f8,转换为图形元件，命名为扇叶，如图,3-6-12,所示。,图,3-6-11,中心点调整,图,3-6-12,新建扇叶,12.,新建图层,2,，将图层,1,右键转换为遮罩层将图层,2,，放置在遮罩层的下面，绘制一个长矩形，颜色填充蓝色如图,3-6-13,所示,13.,再使用矩形工具绘制，小矩形，,并且使用对齐工具将矩形对齐,相同间隔，如图,3-6-13,所示。,图,3-6-13,绘制矩形,14.,调整矩形的位置如图,3-6-14,所示，并快捷键,f8,转换为图形元件，如图,3-6-15,所示。,15.,将扇叶调整到图层,1,的位置，图层,2,在,24,帧插入一个关键帧，将长矩形移动到下方，如图,3-6-16,所示。,图,3-6-14,调整位置,图,3-6-15,转换元件,图,3-6-16,位置图,16.,在期间任意一个关键帧，右键插入传统补间，将两个图层上锁，并将风扇扇叶的透明属性减少为,80%,。,17.,进入风扇头元件，将所有图层在,24,帧处都插入帧，并新建一个图层，再次绘制一个矩形并填充灰色，移动到风扇扇头的中间，将图层放置在最后，如图,3-6-17,所示。,图,3-6-17,绘制矩形,18.,选择风扇扇叶元件，添加模糊滤镜，模糊,Y,改为,10,，品质改为高。,19,回到场景,1,，选择刚刚做好的扇头元件，快捷键,f8,，转换为图形元件命名为风扇整体。,20.,进入风扇整体元件，新建,图层，使用矩形工具，修改圆,角属性，绘制圆角矩形作为风,扇的下部分，如图,3-6-18,所示。,图,3-6-18,绘制圆角矩形,21.,新建图层，继续绘制风扇的底座，如图,3-6-18,所示，将所有图层在,24,帧处都添加帧。,22.,将风扇扇头，使用变形工具乡下旋转一定角度，如图,3-6-19,所示。,图,3-6-19,角度调整,【思考与练习】,请尝试调整本案例中风扇的转速，体会细节的不同对最终效果有何影响,。,主编：袁晓华 曾曼蕊 徐颖,项目四 企业仿真项目：笔记本电脑广告制作,【项目描述】,项目组长C君从老总那里接到了一个工作：神奇电脑公司推出了新产品，要在公司主页上进行推广，需要他们制作横幅广告，请大家根据客户需求，设计并制作。（教学资源包：“项目三”-“架设情景.swf”）,【项目目标】,知识与技能目标,熟悉广告公司项目实施的流程；,掌握引导层动画的制作方法；,学会综合运用所学制作An网页广告动画。,情感目标,培养对动画制作的喜爱及积极的学习态度、创作欲望。,通过小组合作创作培养合作精神。,通过项目实施中的互评与自评，形成认真、细致的学习与工作态度。,通过完成模拟企业的仿真项目，初步积累实践工作经验，养成职业实践能力和职业素养。,【项目目标】,项目准备,多媒体机房教学设备、网络教学平台、教学课件，上课实例及相关素材、纸、笔,项目效果图,【项目实施流程】,设置背景,制作“蝴蝶飞入”效果,制作“笔记本出现”效果,制作“文字出现”效果,生成影片文件,任务一 分析并填写项目实施报告,【任务描述】,拿到一个工作项目，在动手制作之前分析项目，明确完成制作需要做哪些工作是非常重要的，熟悉广告公司设计与制作流程，填写项目实施报告，这样做到心中有流程，可以使工作效率大大提高。,【任务目标】,简单了解广告公司项目实施的流程。,【任务实施】,项目实施的流程：,三个阶段：项目调查与分析、项目实施、项目验收。,图,4-1-1,项目实施流程,【,做实施计划,】,客户的需求是最先要明确的，否则会导致我们后面工作的重重困难。因此项目实施之前要进行项目的调查和分析。最好调查的结果能用书面的形式明确下来，做一份实施计划，如图,4-1-2,所示。,图,4-1-,2,项目实施计划,【,做实施计划,】,根据客户的需求和总体目标，文案编写出动画剧本。（这个部分现在暂时由老师帮助完成，同学们也可以再思索其他剧本）,剧本编写如下：,镜头,1,：简约的背景，一只蝴蝶从右边飞入画面。,镜头,2,：一片花丛出现，蝴蝶飞到花丛中，停在花朵上。,镜头,3,：笔记本出现，原来花丛不是真的花丛，是笔记本逼真的效果造成蝴蝶的错觉。,镜头,4,：出现广告词“立体享受来自高清画质，神奇笔记本。”,4.,完成任务分工，如图,4-1-3,所示。,图,4-1-,3,任务分工,【,做实施计划,】,5.,完成了作品的设计和制作后，接下来一个重要的环节，这个环节关系到我们能否如期如数拿到项目款，这个环节就是,-,项目验收。,通常广告公司有专门的验收单，如图,4-1-4,所示，在施工方在场时，由客户进行验收。,图,4-1-,4,项目验收单,【思考与练习】,根据客户的需求和总体目标，同学们能否思索其他动画剧本？,任务二制作“蝴蝶飞入”效果,【任务目标】,掌握引导层动画的制作方法。,再次熟悉运动补间动画的制作方法。,【任务描述】,参照效果图，笔记本网页广告制作中的“蝴蝶飞入”效果是用引导层动画技法来实现的。让我们一起来完成制作。,【任务实施】,引导层动画的制作要点,由至少两个图层组成，引导层放路线，被引导层放元件，在被引导层，创建补间动画实现元件沿着路线走的效果，如图4-2-1所示。,图4-2-1 引导线动画,【任务实施】,操作步骤：,1.新建文档，尺寸为：750*120像素。,2.菜单栏“文件”“导入”“导入到舞台”。导入素材“beijing_007.jpg”到舞台，。,3.在“图层1”的第150帧处插入普通帧，然后在“图层1”上新建“图层2”。,4.在图层2上导入素材“beijing_009.jpg”；按F8，将“笔记本图.jpg”转换成图形元件，起名“元件1”。,5.在“图层2”上新建“图层3”，导入蝴蝶元件命名为“元件2”。效果如图4-2-2所示。,图4-2-2 效果图,6.右键选择“图层3”时间轴“添加传统运动引导层”命令。在“图层3”上面创建了引导层，如图4-2-3所示。,图4-2-3 创建引导层,【任务实施】,操作步骤：,7.在引导层中，使用铅笔工具在舞台中绘制一条“蝴蝶”运动的轨迹，如图4-2-4所示。,图4-2-4 绘制引导线,8.在“图层3”中，分别在第1和第80帧的地方创建关键帧，调整蝴蝶元件的圆心，使其附着在路径上，如图4-2-5所示。,图4-2-5 蝴蝶附着路径,9.在“图层3”中的第1和第80关键帧之间右键“创建传统补间”，如图4-2-6所示。,图4-2-6 创建传统补间,10.保存文件，按快捷键“Ctrl+Enter”测试影片，完成任务“蝴蝶飞入”动画效果制作。,【思考与练习】,完成如图4-2-7所示课堂小测试：,图4-2-7 随堂测试,任务三 制作“笔记本出现”效果,【任务描述】,参照效果图，根据各个对象出现的先后顺序，“蝴蝶飞入”效果后，是“笔记本”由透明变清晰的渐出效果，这个效果是用运动补间动画技法来实现的。让我们一起来完成制作。,【任务目标】,再次熟悉运动补间动画的制作方法。,再次熟悉遮罩动画的制作方法。,综合运用运动补间动画和遮罩动画技法。,【任务实施】,运动补间动画制作要点回顾：,动画前后都是关键帧，且都是同一个元件，可实现元件由小变大、由透明变清晰等效果，如图4-3-1所示。,图4-3-1 运动补间动画,遮罩动画制作要点回顾：,由至少两个图层组成，遮罩层决定形状，被遮罩层决定内容，实现透过遮罩层的形状看到被遮罩层的颜色的效果，如图,4-3-2所示,。,图4-3-2 效果图,【任务实施】,操作步骤：,1.,打开任务一中完成作品的源文件。,“花出现”效果：,2.,在引导层上面新建“图层,5,”，在第,50,帧上插入关键帧，导入素材“,beijing_008.jpg”,，并转换为“元件,3,”。,3.,分别在“图层,5,”的第,60,、,70,帧上插入关键帧，分别在两个关键帧之间单击右键,“创建传统补间”，如图,4-3-3,所示,。,图,4-3-3,创建传统补间,4.,分别点击“图层,5,”的第,60,、,70,帧上的“元件,3,”，修改元件的属性，如图,4-3-4,所示：,图,4-3-4,修改元件属性,【任务实施】,5.,在“图层,5,”上面新建“图层,6,”，在第,50,帧插入关键帧，并用直线绘制如图,4-3-5,所示的四边形，填充任意颜色（注意，四边形大小形状与笔记本电脑屏幕一样）。,图,4-3-5,绘制四边形,6.,右键单击“图层,6,”,“遮罩层”命令。“花出现”效果如下图,4-3-6,所示。,图,4-3-6,创建遮罩,【任务实施】,笔记本电脑渐出效果：,7.,在“图层,2,”的第,80,、,90,帧上插入关键帧，分别在两个关键帧之间单击右键,“创建传统补间”。,8.,在“图层,2,”中有任务一里导入的笔记本电脑“元件,1,”，在第,80,帧修改元件的属性，如图,4-