AnimateCC二维动画设计与制作-第三单元：基本动画制作课件

第三单元：基本动画制作3.1元件的使用3.2帧动画制作3.3形状补间动画与传统补间动画3.4补间动画与动画编辑器第三单元：基本动画制作3.1元件的使用内容大纲元件的概念与特点元件的创建与编辑元件的类型实例及其属性设置元件与实例的编辑元件的应用库的应用练习：小球跳动与控制拓展项目：音乐海报2内容大纲2一、元件的概念与特点1.什么是元件元件是由其它对象构成的用来被重复使用的一种元素集合，是Animate动画的重要组成部分。2.元件的特点元件由其它对象构成，有自身独立的时间轴、图层和工作区元件存在的目的一是为了重复利用，方便管理相同的元素并减小体积；二是补间和传统补间必须要使用元件元件是可以嵌套的3一、元件的概念与特点3二、元件的创建与编辑1.创建元件新建空白元件（Ctrl+F8）将其他对象转换为元件(按F8或右击)注册点：用来确认对象坐标的原点。2.编辑元件从库中双击元件双击舞台上的实例3.删除元件从库中可将元件删除，从舞台上删除只是删除了元件的实例。4二、元件的创建与编辑4三、元件的类型图形元件图形元件一般是静态的对象或与影片主时间轴同步的动画，无法给图形元件添加脚本。其时间轴受制于主时间轴。影片剪辑元件影片剪辑一般是一段小动画，或是静态的对象，具有独立时间轴，它的播放与主时间轴没有直接关系。按钮元件用于感知用户的鼠标动作，创建响应鼠标事件的交互式按钮。按钮元件的几种状态5三、元件的类型5四、实例及其属性设置1.什么是实例实例就是元件在时间轴（舞台）上的一个副本。元件存放在库中，被拖放到舞台上的元件称为实例。2.图形元件的实例属性实例的颜色实例的交换实例播放模式6四、实例及其属性设置6四、实例及其属性设置3.影片剪辑的实例属性实例的混合模式实例的滤镜应用4.按钮元件的实例属性7四、实例及其属性设置7五、元件与实例的编辑1.重命名元件2.更改元件类型3.修改元件一般编辑模式（双击库中元件或按Ctrl+E）当前位置编辑模式（直接双击元件的实例）4.更改实例类型5.分离实例6.交换实例7.对实例的变形8五、元件与实例的编辑8六、元件的应用小球的跳动与控制9六、元件的应用9七、库的应用库的打开与关闭库的构成库项目与库文件夹在影片间共享库公用库的使用自定义库10七、库的应用10八、拓展项目：音乐海报11八、拓展项目：音乐海报11第三单元：基本动画制作3.2帧动画制作第三单元：基本动画制作3.2帧动画制作内容大纲时间轴及其设置帧的概念帧的分类帧的操作逐帧动画的制作洋葱皮工具的应用翻转帧动画13内容大纲13一、时间轴及其设置时间轴是进行图层和帧操作的地方，也是组织动画的地方，主要任务是显示和控制帧。1.时间轴的构成图层及设置帧的刻度及帧播放头帧的信息显示及其它2.帧在时间轴的显示方式更改帧在时间轴的显示方式各种显示方式的区别和特点14一、时间轴及其设置14二、帧的概念一帧可以看作是一个静态的画面，在Animate中，动画就是由一个个帧按一定的时间顺序进行播放的。实例如“狐狸踢球”、人物跑动。帧与影片的关系：影片由帧组成，帧的数量和帧的播放速度决定了影片的长度和影片的播放速度。15二、帧的概念15三、帧的分类关键帧对象变化过程中的关键点。它定义了动画中对象属性的变化或分配了动作，对象属性包括位置、大小、颜色等。关键帧用黑色圆点表示。普通帧（延续帧）延续前一关键帧内容的帧。普通帧中的对象与它前面关键帧中的内容保持一致，用于延长关键帧内容的显示时间。空白关键帧如果关键帧中没有任何对象，则称为空白关键帧，用空心圆表示。16三、帧的分类16三、帧的分类空白帧空白的延续帧，说明前一个关键帧是空白关键帧。过渡帧（普通帧）在两个关键帧之间如果定义了补间动画，则两关键帧之间的所有帧称为过渡帧。不同类型补间的帧呈现的颜色不一样，传统补间帧呈浅蓝色，形状补间帧呈浅绿色，补间动画帧呈深蓝色。其它加入音乐的帧，加入脚本语言的帧，错误过渡帧，帧标签帧等。17三、帧的分类17四、帧的操作帧的选择(注意防止帧的移动)选择单帧选择同一层的不连续帧或连续帧选择多层的不连续帧或连续帧选择层上的所有帧：单击层名称选择时间轴上的所有帧：Ctrl+Alt+A或使用编辑菜单18四、帧的操作18四、帧的操作帧的插入(先选择要插入的位置)（1）使用插入菜单或右键插入帧（2）按F6，如果前面有内容，则插入的是关键帧（此帧内容与前面一致），如果前面无内容或是空白关键帧，则插入的是空白关键帧（3）按F7直接插入空白关键帧（4）如果选择的位置是多个帧，则插入的也将是多个关键帧或空关键帧（5）按F5插入普通帧，内容与前关键帧相同19四、帧的操作19四、帧的操作帧的移动先选择要移动的帧，将鼠标移上去进行拖动即可帧的清除、剪切和删除帧的复制和粘贴帧的其他操作练习：（1）小狗快跑（2）贝克汉姆奔跑（3）小女孩走动20四、帧的操作20五、逐帧动画的制作逐帧动画即动画的帧全是或基本上全是关键帧，其特点是操作复杂，适合于制作动作复杂精确的动画，如角色运动动画练习：（1）人物跑动（2）火柴人动画21五、逐帧动画的制作21六、洋葱皮工具的应用修改绘图纸标记设置绘图纸标记的显示状态和范围。七、翻转帧动画翻转帧就是将选定的一组帧按相反的顺序排列在时间轴上。练习：（1）修改人物向前跑动为向后跑，修改前后空翻（2）手写字作业二：制作一个简单的小火柴人动画22六、洋葱皮工具的应用22八、项目二：网络广告动画项目任务1：背景动画项目任务2：制作扣篮动画项目任务3：LOGO动画和文字动画23八、项目二：网络广告动画23第三单元：基本动画制作3.3形状补间动画与传统补间动画第三单元：基本动画制作3.3形状补间动画与传统补间动画内容大纲什么是补间形状补间的原理与创建条件形变动画的制作方法添加形状提示传统补间的原理与创建条件传统补间的制作方法传统补间属性的设置练习与作业25内容大纲25一、什么是补间补间是指在动画的起始帧和终止帧之间，Animate自动生成的过渡画面。补间有三种方式，分别为：补间形状传统补间补间动画26一、什么是补间26二、形状补间的原理与创建条件形状补间是指形状对象在两个关键帧之间属性发生变化的动画。可记录动画的属性包括位置、大小、角度、颜色、形状等。正确的形状补间在时间轴上以浅绿色背景的单箭头符号表示，错误的呈虚线。形状补间创建的条件：（1）形状补间只作用于形状，即前后两个关键帧中的内容必须是形状。（2）形状补间的对象只能位于同一层。27二、形状补间的原理与创建条件27三、形状补间的制作方法基本步骤：（1）首先确定起始帧和结束帧及它们的内容。（2）选择起始帧（或中间的普通帧），点击插入菜单下的“补间形状”，或直接在帧上单击右键选择“创建补间形状”。补间形状的属性：缓动（用于调节对象运动的加速度，正值表示减速运动，负值表示加速运动，默认为0，即匀速。）28三、形状补间的制作方法28三、形状补间的制作方法练习：（1）任意两个或多个形状之间的动画。（2）制作星星闪烁动画（3）制作蜡烛燃烧动画29三、形状补间的制作方法29四、添加形状提示补间形状动画由于是Animate自动计算的，效果比较难控制，适合于做简单的动画。如果要制作较为复杂或特殊的形变动画，需要借助“形状提示”。演示：五边形变三角形再变心形练习：制作海鸥飞翔动画30四、添加形状提示30五、传统补间的原理与创建条件传统补间动画是指同一个元件的实例在两个关键帧之间发生的过渡动画。正确的动画补间在时间轴上以浅蓝色背景的单箭头符号表示，错误的呈虚线。传统补间主要应用于对象位置、大小、角度和颜色的变化。传统补间创建的条件：（1）传统补间只用于元件实例（2）传统补间的对象只能是同一个元件实例，且只能一对一。（3）传统补间的对象只能在同一层31五、传统补间的原理与创建条件31六、传统补间的制作方法（1）首先确定起始帧它的内容（元件的单一实例）（2）在结束帧按F6，调整对象（3）选择插入“传统补间”，或直接在时间轴的帧上右击选择“创建传统补间”（4）传统补间可以连续做，一段传统补间也可以通过打关键帧划分为多段补间，如果只是移动动画，可以不打关键帧，只接在普通帧上移动对象，会自动打上关键帧。32六、传统补间的制作方法32七、传统补间属性的设置缓动、旋转、调整到路径、沿路径着色、沿路径缩放、同步（只适用于图形元件）。同步可一次性替换此补间上的所有元件实例。练习：制作龟兔赛跑动画33七、传统补间属性的设置33八、练习与作业作业三：网络广告（化妆品或珠宝）拓展项目二：宜家网络广告拓展项目三：长安汽车广告34八、练习与作业34第三单元：基本动画制作3.4新补间动画第三单元：基本动画制作3.4新补间动画内容大纲新的概念补间动画与传统补间的差异创建新补间动画编辑补间的运动路径使用动画编辑器补间的缓动设置应用预设动画练习与作业36内容大纲36一、创建新补间动画先制作一段新补间动画：星际飞船运动（1）选择要补间的对象（文字或某个元件实例，如是多个对象则不能在同一层）（2）选择“插入”>“补间动画”，或者右键单击所选内容或当前帧，然后从上下文菜单中选择“创建补间动画”。（3）创建了补间动画后，普通图层转换为补间图层，创建了补间范围。如果原对象只有一帧，则补间范围自动延长至一秒钟时间。37一、创建新补间动画37一、创建新补间动画（4）在时间轴中拖动补间范围的任一端，以按所需长度缩短或延长范围。（5）若要将动画添加到补间，请将播放头放在补间范围内的某个帧上，然后将舞台上的对象拖到新位置或改变其属性（如颜色、角度等）。一旦在某个帧上更改了对象的属性，则此帧自动记录为属性关键帧，显示有小菱形标记。练习：星际飞船运动38一、创建新补间动画38二、相关概念1.新补间动画补间是指在动画的起始帧和终止帧之间，Animate自动生成的过渡画面。新补间动画是在传统补间的基础上发展起来的一种新的补间形式，具有与传统补间相似的作用，但控制性更强，更易调整，其操作方法也与传统补间有很大的差异。39二、相关概念39二、相关概念2.属性关键帧属性关键帧是在补间范围中为补间对象定义一个或多个属性值的帧。而“关键帧”是指时间轴中其元件实例首次出现在舞台上的帧3.运动路径运动路径，即补间对象在舞台上移动时所经过的路径，只有位置变化时才会显示路径。40二、相关概念40三、补间动画与传统补间的差异传统补间使用前、后两个关键帧，需要同一元件的两个实例。新补间动画只需一个关键帧一个实例，并使用属性关键帧。补间动画和传统补间都只允许对元件实例进行补间补间动画可对文本直接作补间，而传统补间需要将文本转换为元件。可以在时间轴中对补间动画范围进行拉伸和调整大小，并将它们视为单个对象。41三、补间动画与传统补间的差异41三、补间动画与传统补间的差异若要在补间动画范围中选择单个帧，必须按住Ctrl键单击帧。对于传统补间，缓动可应用于任意补间内关键帧之间的帧。对于补间动画，缓动只应用于补间动画范围的整个长度，不能分段使用。若要分段应用缓动，则需要创建自定义缓动曲线。42三、补间动画与传统补间的差异42四、编辑补间的运动路径直接移动对象，改变运动路径。直接用路径编辑工具编辑路径，拖拉路径或编辑节点。先在其他图层绘制路径，再粘贴到补间动画层练习：（1）蝴蝶飞在花丛中（2）制作翘翘板动画43四、编辑补间的运动路径43五、使用动画编辑器动画编辑器是一种对运动状态进行精确调整控制的集成工具，通过它可以轻松地创建复杂的补间动画效果。动画编辑器将补间对象的所有属性显示为由一些二维图形构成的缩略视图，通过修改这些图形来修改其相应的各个补间属性，极大地丰富动画效果，从而模拟真实的运动效果。动画编辑器只适用于补间动画，不适用于传统补间和补间形状44五、使用动画编辑器44五、使用动画编辑器在补间动画帧上双击，即可打开动画编辑器面板，再次双击可关闭。练习：使用动画编辑器方式制作翘翘板动画45五、使用动画编辑器45六、补间的缓动设置46六、补间的缓动设置46七、应用预设动画预设动画即软件自带的已做好的一小段动画效果，可直接用于你的对象上。方法为：（1）选择补间对象（2）在动画预设面板选择一种预设效果（3）点击应用47七、应用预设动画47七、应用预设动画可以将已做好的补间定义为动画预设，以便以后重复使用这一段动画效果，方法为：（1）选中补间动画范围（2）在动画预设面板点击“另存为预设”按钮（3）输入预设名称并保存48七、应用预设动画48八、练习与作业制作一物理运动动画——能量守恒49八、练习与作业49第三单元：基本动画制作3.1元件的使用3.2帧动画制作3.3形状补间动画与传统补间动画3.4补间动画与动画编辑器第三单元：基本动画制作3.1元件的使用内容大纲元件的概念与特点元件的创建与编辑元件的类型实例及其属性设置元件与实例的编辑元件的应用库的应用练习：小球跳动与控制拓展项目：音乐海报51内容大纲2一、元件的概念与特点1.什么是元件元件是由其它对象构成的用来被重复使用的一种元素集合，是Animate动画的重要组成部分。2.元件的特点元件由其它对象构成，有自身独立的时间轴、图层和工作区元件存在的目的一是为了重复利用，方便管理相同的元素并减小体积；二是补间和传统补间必须要使用元件元件是可以嵌套的52一、元件的概念与特点3二、元件的创建与编辑1.创建元件新建空白元件（Ctrl+F8）将其他对象转换为元件(按F8或右击)注册点：用来确认对象坐标的原点。2.编辑元件从库中双击元件双击舞台上的实例3.删除元件从库中可将元件删除，从舞台上删除只是删除了元件的实例。53二、元件的创建与编辑4三、元件的类型图形元件图形元件一般是静态的对象或与影片主时间轴同步的动画，无法给图形元件添加脚本。其时间轴受制于主时间轴。影片剪辑元件影片剪辑一般是一段小动画，或是静态的对象，具有独立时间轴，它的播放与主时间轴没有直接关系。按钮元件用于感知用户的鼠标动作，创建响应鼠标事件的交互式按钮。按钮元件的几种状态54三、元件的类型5四、实例及其属性设置1.什么是实例实例就是元件在时间轴（舞台）上的一个副本。元件存放在库中，被拖放到舞台上的元件称为实例。2.图形元件的实例属性实例的颜色实例的交换实例播放模式55四、实例及其属性设置6四、实例及其属性设置3.影片剪辑的实例属性实例的混合模式实例的滤镜应用4.按钮元件的实例属性56四、实例及其属性设置7五、元件与实例的编辑1.重命名元件2.更改元件类型3.修改元件一般编辑模式（双击库中元件或按Ctrl+E）当前位置编辑模式（直接双击元件的实例）4.更改实例类型5.分离实例6.交换实例7.对实例的变形57五、元件与实例的编辑8六、元件的应用小球的跳动与控制58六、元件的应用9七、库的应用库的打开与关闭库的构成库项目与库文件夹在影片间共享库公用库的使用自定义库59七、库的应用10八、拓展项目：音乐海报60八、拓展项目：音乐海报11第三单元：基本动画制作3.2帧动画制作第三单元：基本动画制作3.2帧动画制作内容大纲时间轴及其设置帧的概念帧的分类帧的操作逐帧动画的制作洋葱皮工具的应用翻转帧动画62内容大纲13一、时间轴及其设置时间轴是进行图层和帧操作的地方，也是组织动画的地方，主要任务是显示和控制帧。1.时间轴的构成图层及设置帧的刻度及帧播放头帧的信息显示及其它2.帧在时间轴的显示方式更改帧在时间轴的显示方式各种显示方式的区别和特点63一、时间轴及其设置14二、帧的概念一帧可以看作是一个静态的画面，在Animate中，动画就是由一个个帧按一定的时间顺序进行播放的。实例如“狐狸踢球”、人物跑动。帧与影片的关系：影片由帧组成，帧的数量和帧的播放速度决定了影片的长度和影片的播放速度。64二、帧的概念15三、帧的分类关键帧对象变化过程中的关键点。它定义了动画中对象属性的变化或分配了动作，对象属性包括位置、大小、颜色等。关键帧用黑色圆点表示。普通帧（延续帧）延续前一关键帧内容的帧。普通帧中的对象与它前面关键帧中的内容保持一致，用于延长关键帧内容的显示时间。空白关键帧如果关键帧中没有任何对象，则称为空白关键帧，用空心圆表示。65三、帧的分类16三、帧的分类空白帧空白的延续帧，说明前一个关键帧是空白关键帧。过渡帧（普通帧）在两个关键帧之间如果定义了补间动画，则两关键帧之间的所有帧称为过渡帧。不同类型补间的帧呈现的颜色不一样，传统补间帧呈浅蓝色，形状补间帧呈浅绿色，补间动画帧呈深蓝色。其它加入音乐的帧，加入脚本语言的帧，错误过渡帧，帧标签帧等。66三、帧的分类17四、帧的操作帧的选择(注意防止帧的移动)选择单帧选择同一层的不连续帧或连续帧选择多层的不连续帧或连续帧选择层上的所有帧：单击层名称选择时间轴上的所有帧：Ctrl+Alt+A或使用编辑菜单67四、帧的操作18四、帧的操作帧的插入(先选择要插入的位置)（1）使用插入菜单或右键插入帧（2）按F6，如果前面有内容，则插入的是关键帧（此帧内容与前面一致），如果前面无内容或是空白关键帧，则插入的是空白关键帧（3）按F7直接插入空白关键帧（4）如果选择的位置是多个帧，则插入的也将是多个关键帧或空关键帧（5）按F5插入普通帧，内容与前关键帧相同68四、帧的操作19四、帧的操作帧的移动先选择要移动的帧，将鼠标移上去进行拖动即可帧的清除、剪切和删除帧的复制和粘贴帧的其他操作练习：（1）小狗快跑（2）贝克汉姆奔跑（3）小女孩走动69四、帧的操作20五、逐帧动画的制作逐帧动画即动画的帧全是或基本上全是关键帧，其特点是操作复杂，适合于制作动作复杂精确的动画，如角色运动动画练习：（1）人物跑动（2）火柴人动画70五、逐帧动画的制作21六、洋葱皮工具的应用修改绘图纸标记设置绘图纸标记的显示状态和范围。七、翻转帧动画翻转帧就是将选定的一组帧按相反的顺序排列在时间轴上。练习：（1）修改人物向前跑动为向后跑，修改前后空翻（2）手写字作业二：制作一个简单的小火柴人动画71六、洋葱皮工具的应用22八、项目二：网络广告动画项目任务1：背景动画项目任务2：制作扣篮动画项目任务3：LOGO动画和文字动画72八、项目二：网络广告动画23第三单元：基本动画制作3.3形状补间动画与传统补间动画第三单元：基本动画制作3.3形状补间动画与传统补间动画内容大纲什么是补间形状补间的原理与创建条件形变动画的制作方法添加形状提示传统补间的原理与创建条件传统补间的制作方法传统补间属性的设置练习与作业74内容大纲25一、什么是补间补间是指在动画的起始帧和终止帧之间，Animate自动生成的过渡画面。补间有三种方式，分别为：补间形状传统补间补间动画75一、什么是补间26二、形状补间的原理与创建条件形状补间是指形状对象在两个关键帧之间属性发生变化的动画。可记录动画的属性包括位置、大小、角度、颜色、形状等。正确的形状补间在时间轴上以浅绿色背景的单箭头符号表示，错误的呈虚线。形状补间创建的条件：（1）形状补间只作用于形状，即前后两个关键帧中的内容必须是形状。（2）形状补间的对象只能位于同一层。76二、形状补间的原理与创建条件27三、形状补间的制作方法基本步骤：（1）首先确定起始帧和结束帧及它们的内容。（2）选择起始帧（或中间的普通帧），点击插入菜单下的“补间形状”，或直接在帧上单击右键选择“创建补间形状”。补间形状的属性：缓动（用于调节对象运动的加速度，正值表示减速运动，负值表示加速运动，默认为0，即匀速。）77三、形状补间的制作方法28三、形状补间的制作方法练习：（1）任意两个或多个形状之间的动画。（2）制作星星闪烁动画（3）制作蜡烛燃烧动画78三、形状补间的制作方法29四、添加形状提示补间形状动画由于是Animate自动计算的，效果比较难控制，适合于做简单的动画。如果要制作较为复杂或特殊的形变动画，需要借助“形状提示”。演示：五边形变三角形再变心形练习：制作海鸥飞翔动画79四、添加形状提示30五、传统补间的原理与创建条件传统补间动画是指同一个元件的实例在两个关键帧之间发生的过渡动画。正确的动画补间在时间轴上以浅蓝色背景的单箭头符号表示，错误的呈虚线。传统补间主要应用于对象位置、大小、角度和颜色的变化。传统补间创建的条件：（1）传统补间只用于元件实例（2）传统补间的对象只能是同一个元件实例，且只能一对一。（3）传统补间的对象只能在同一层80五、传统补间的原理与创建条件31六、传统补间的制作方法（1）首先确定起始帧它的内容（元件的单一实例）（2）在结束帧按F6，调整对象（3）选择插入“传统补间”，或直接在时间轴的帧上右击选择“创建传统补间”（4）传统补间可以连续做，一段传统补间也可以通过打关键帧划分为多段补间，如果只是移动动画，可以不打关键帧，只接在普通帧上移动对象，会自动打上关键帧。81六、传统补间的制作方法32七、传统补间属性的设置缓动、旋转、调整到路径、沿路径着色、沿路径缩放、同步（只适用于图形元件）。同步可一次性替换此补间上的所有元件实例。练习：制作龟兔赛跑动画82七、传统补间属性的设置33八、练习与作业作业三：网络广告（化妆品或珠宝）拓展项目二：宜家网络广告拓展项目三：长安汽车广告83八、练习与作业34第三单元：基本动画制作3.4新补间动画第三单元：基本动画制作3.4新补间动画内容大纲新的概念补间动画与传统补间的差异创建新补间动画编辑补间的运动路径使用动画编辑器补间的缓动设置应用预设动画练习与作业85内容大纲36一、创建新补间动画先制作一段新补间动画：星际飞船运动（1）选择要补间的对象（文字或某个元件实例，如是多个对象则不能在同一层）（2）选择“插入”>“补间动画”，或者右键单击所选内容或当前帧，然后从上下文菜单中选择“创建补间动画”。（3）创建了补间动画后，普通图层转换为补间图层，创建了补间范围。如果原对象只有一帧，则补间范围自动延长至一秒钟时间。86一、创建新补间动画37一、创建新补间动画（4）在时间轴中拖动补间范围的任一端，以按所需长度缩短或延长范围。（5）若要将动画添加到补间，请将播放头放在补间范围内的某个帧上，然后将舞台上的对象拖到新位置或改变其属性（如颜色、角度等）。一旦在某个帧上更改了对象的属性，则此帧自动记录为属性关键帧，显示有小菱形标记。练习：星际飞船运动87一、创建新补间动画38二、相关概念1.新补间动画补间是指在动画的起始帧和终止帧之间，Animate自动生成的过渡画面。新补间动画是在传统补间的基础上发展起来的一种新的补间形式，具有与传统补间相似的作用，但控制性更强，更易调整，其操作方法也与传统补间有很大