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

1、二维动画设计与制作二维动画设计与制作第三单元：基本动画制作3.1元件的使用3.2帧动画制作3.3形状补间动画与传统补间动画3.4补间动画与动画编辑器二维动画设计与制作3.1：元件的使用v 内容大纲n元件的概念与特点n元件的创建与编辑n元件的类型n实例及其属性设置n元件与实例的编辑n元件的应用n库的应用n练习：小球跳动与控制n拓展项目：音乐海报2二维动画设计与制作3.1：元件的使用一、元件的概念与特点1.什么是元件元件是由其它对象构成的用来被重复使用的一种元素集合，是Animate动画的重要组成部分。2.元件的特点n元件由其它对象构成，有自身独立的时间轴、图层和工作区n元件存在的目的一是为了重复

2、利用，方便管理相同的元素并减小体积；二是补间和传统补间必须要使用元件n元件是可以嵌套的3二维动画设计与制作3.1：元件的使用二、元件的创建与编辑1.创建元件n新建空白元件（Ctrl+F8）n将其他对象转换为元件(按F8或右击)注册点：用来确认对象坐标的原点。2.编辑元件n从库中双击元件n双击舞台上的实例3.删除元件从库中可将元件删除，从舞台上删除只是删除了元件的实例。4二维动画设计与制作3.1：元件的使用三、元件的类型n图形元件图形元件一般是静态的对象或与影片主时间轴同步的动画，无法给图形元件添加脚本。其时间轴受制于主时间轴。n影片剪辑元件影片剪辑一般是一段小动画，或是静态的对象，具有独立时间

3、轴，它的播放与主时间轴没有直接关系。n按钮元件用于感知用户的鼠标动作，创建响应鼠标事件的交互式按钮。按钮元件的几种状态5二维动画设计与制作3.1：元件的使用四、实例及其属性设置1.什么是实例实例就是元件在时间轴（舞台）上的一个副本。元件存放在库中，被拖放到舞台上的元件称为实例。2.图形元件的实例属性n实例的颜色n实例的交换n实例播放模式6二维动画设计与制作3.1：元件的使用四、实例及其属性设置3.影片剪辑的实例属性n实例的混合模式n实例的滤镜应用4.按钮元件的实例属性7二维动画设计与制作3.1：元件的使用五、元件与实例的编辑1.重命名元件2.更改元件类型3.修改元件n一般编辑模式（双击库中元件

4、或按Ctrl+E）n当前位置编辑模式（直接双击元件的实例）4.更改实例类型5.分离实例6.交换实例7.对实例的变形8二维动画设计与制作3.1：元件的使用六、元件的应用小球的跳动与控制9二维动画设计与制作3.1：元件的使用七、库的应用n库的打开与关闭n库的构成n库项目与库文件夹n在影片间共享库n公用库的使用n自定义库10二维动画设计与制作3.1：元件的使用八、拓展项目：音乐海报11二维动画设计与制作二维动画设计与制作第三单元：基本动画制作3.2帧动画制作二维动画设计与制作3.2：帧动画制作v 内容大纲n时间轴及其设置n帧的概念n帧的分类n帧的操作n逐帧动画的制作n洋葱皮工具的应用n翻转帧动画13

5、二维动画设计与制作3.2：帧动画制作一、时间轴及其设置时间轴是进行图层和帧操作的地方，也是组织动画的地方，主要任务是显示和控制帧。1.时间轴的构成图层及设置帧的刻度及帧播放头帧的信息显示及其它2.帧在时间轴的显示方式更改帧在时间轴的显示方式各种显示方式的区别和特点14二维动画设计与制作3.2：帧动画制作二、帧的概念一帧可以看作是一个静态的画面，在Animate中，动画就是由一个个帧按一定的时间顺序进行播放的。实例如“狐狸踢球”、人物跑动。帧与影片的关系：影片由帧组成，帧的数量和帧的播放速度决定了影片的长度和影片的播放速度。15二维动画设计与制作3.2：帧动画制作三、帧的分类n关键帧对象变化过程

6、中的关键点。它定义了动画中对象属性的变化或分配了动作，对象属性包括位置、大小、颜色等。关键帧用黑色圆点表示。n普通帧（延续帧）延续前一关键帧内容的帧。普通帧中的对象与它前面关键帧中的内容保持一致，用于延长关键帧内容的显示时间。n空白关键帧如果关键帧中没有任何对象，则称为空白关键帧，用空心圆表示。16二维动画设计与制作3.2：帧动画制作三、帧的分类n空白帧空白的延续帧，说明前一个关键帧是空白关键帧。n过渡帧（普通帧）在两个关键帧之间如果定义了补间动画，则两关键帧之间的所有帧称为过渡帧。不同类型补间的帧呈现的颜色不一样，传统补间帧呈浅蓝色，形状补间帧呈浅绿色，补间动画帧呈深蓝色。n其它加入音乐的帧

7、，加入脚本语言的帧，错误过渡帧，帧标签帧等。17二维动画设计与制作3.2：帧动画制作四、帧的操作n帧的选择(注意防止帧的移动)选择单帧选择同一层的不连续帧或连续帧选择多层的不连续帧或连续帧选择层上的所有帧：单击层名称选择时间轴上的所有帧：Ctrl+Alt+A或使用编辑菜单18二维动画设计与制作3.2：帧动画制作四、帧的操作n帧的插入(先选择要插入的位置)（1）使用插入菜单或右键插入帧（2）按F6，如果前面有内容，则插入的是关键帧（此帧内容与前面一致），如果前面无内容或是空白关键帧，则插入的是空白关键帧（3）按F7直接插入空白关键帧（4）如果选择的位置是多个帧，则插入的也将是多个关键帧或空关键帧

8、（5）按F5插入普通帧，内容与前关键帧相同19二维动画设计与制作3.2：帧动画制作四、帧的操作n帧的移动先选择要移动的帧，将鼠标移上去进行拖动即可n帧的清除、剪切和删除n帧的复制和粘贴n帧的其他操作练习：（1）小狗快跑（2）贝克汉姆奔跑（3）小女孩走动20二维动画设计与制作3.2：帧动画制作五、逐帧动画的制作逐帧动画即动画的帧全是或基本上全是关键帧，其特点是操作复杂，适合于制作动作复杂精确的动画，如角色运动动画练习：（1）人物跑动（2）火柴人动画21二维动画设计与制作3.2：帧动画制作六、洋葱皮工具的应用n修改绘图纸标记设置绘图纸标记的显示状态和范围。七、翻转帧动画翻转帧就是将选定的一组帧按相

9、反的顺序排列在时间轴上。练习：（1）修改人物向前跑动为向后跑，修改前后空翻（2）手写字作业二：制作一个简单的小火柴人动画22二维动画设计与制作3.2：帧动画制作八、项目二：网络广告动画项目任务1：背景动画项目任务2：制作扣篮动画项目任务3：LOGO动画和文字动画23二维动画设计与制作二维动画设计与制作第三单元：基本动画制作3.3形状补间动画与传统补间动画二维动画设计与制作3.3：形状补间与传统补间v 内容大纲n什么是补间n形状补间的原理与创建条件n形变动画的制作方法n添加形状提示n传统补间的原理与创建条件n传统补间的制作方法n传统补间属性的设置n练习与作业25二维动画设计与制作3.3：形状补间

10、与传统补间一、什么是补间补间是指在动画的起始帧和终止帧之间，Animate自动生成的过渡画面。补间有三种方式，分别为：n补间形状n传统补间n补间动画26二维动画设计与制作3.3：形状补间与传统补间二、形状补间的原理与创建条件形状补间是指形状对象在两个关键帧之间属性发生变化的动画。可记录动画的属性包括位置、大小、角度、颜色、形状等。正确的形状补间在时间轴上以浅绿色背景的单箭头符号表示，错误的呈虚线。形状补间创建的条件：（1）形状补间只作用于形状，即前后两个关键帧中的内容必须是形状。（2）形状补间的对象只能位于同一层。27二维动画设计与制作3.3：形状补间与传统补间三、形状补间的制作方法基本步骤：

11、（1）首先确定起始帧和结束帧及它们的内容。（2）选择起始帧（或中间的普通帧），点击插入菜单下的“补间形状”，或直接在帧上单击右键选择“创建补间形状”。补间形状的属性：缓动（用于调节对象运动的加速度，正值表示减速运动，负值表示加速运动，默认为0，即匀速。）28二维动画设计与制作3.3：形状补间与传统补间三、形状补间的制作方法练习：（1）任意两个或多个形状之间的动画。（2）制作星星闪烁动画（3）制作蜡烛燃烧动画29二维动画设计与制作3.3：形状补间与传统补间四、添加形状提示补间形状动画由于是Animate自动计算的，效果比较难控制，适合于做简单的动画。如果要制作较为复杂或特殊的形变动画，需要借助“

12、形状提示”。演示：五边形变三角形再变心形练习：制作海鸥飞翔动画30二维动画设计与制作3.3：形状补间与传统补间五、传统补间的原理与创建条件传统补间动画是指同一个元件的实例在两个关键帧之间发生的过渡动画。正确的动画补间在时间轴上以浅蓝色背景的单箭头符号表示，错误的呈虚线。传统补间主要应用于对象位置、大小、角度和颜色的变化。传统补间创建的条件：（1）传统补间只用于元件实例（2）传统补间的对象只能是同一个元件实例，且只能一对一。（3）传统补间的对象只能在同一层31二维动画设计与制作3.3：形状补间与传统补间六、传统补间的制作方法（1）首先确定起始帧它的内容（元件的单一实例）（2）在结束帧按F6，调整

13、对象（3）选择插入“传统补间”，或直接在时间轴的帧上右击选择“创建传统补间”（4）传统补间可以连续做，一段传统补间也可以通过打关键帧划分为多段补间，如果只是移动动画，可以不打关键帧，只接在普通帧上移动对象，会自动打上关键帧。32二维动画设计与制作3.3：形状补间与传统补间七、传统补间属性的设置缓动、旋转、调整到路径、沿路径着色、沿路径缩放、同步（只适用于图形元件）。同步可一次性替换此补间上的所有元件实例。练习：制作龟兔赛跑动画33二维动画设计与制作3.3：形状补间与传统补间八、练习与作业作业三：网络广告（化妆品或珠宝）拓展项目二：宜家网络广告拓展项目三：长安汽车广告34二维动画设计与制作二维动

14、画设计与制作第三单元：基本动画制作3.4新补间动画二维动画设计与制作3.4：补间动画与动画编辑器v 内容大纲n新的概念n补间动画与传统补间的差异n创建新补间动画n编辑补间的运动路径n使用动画编辑器n补间的缓动设置n应用预设动画n练习与作业36二维动画设计与制作3.4：补间动画与动画编辑器一、创建新补间动画先制作一段新补间动画：星际飞船运动（1）选择要补间的对象（文字或某个元件实例，如是多个对象则不能在同一层）（2）选择“插入”“补间动画”，或者右键单击所选内容或当前帧，然后从上下文菜单中选择“创建补间动画”。（3）创建了补间动画后，普通图层转换为补间图层，创建了补间范围。如果原对象只有一帧，则

15、补间范围自动延长至一秒钟时间。37二维动画设计与制作3.4：补间动画与动画编辑器一、创建新补间动画（4）在时间轴中拖动补间范围的任一端，以按所需长度缩短或延长范围。（5）若要将动画添加到补间，请将播放头放在补间范围内的某个帧上，然后将舞台上的对象拖到新位置或改变其属性（如颜色、角度等）。一旦在某个帧上更改了对象的属性，则此帧自动记录为属性关键帧，显示有小菱形标记。练习：星际飞船运动38二维动画设计与制作3.4：补间动画与动画编辑器二、相关概念1.新补间动画补间是指在动画的起始帧和终止帧之间，Animate自动生成的过渡画面。新补间动画是在传统补间的基础上发展起来的一种新的补间形式，具有与传统补

16、间相似的作用，但控制性更强，更易调整，其操作方法也与传统补间有很大的差异。39二维动画设计与制作3.4：补间动画与动画编辑器二、相关概念2.属性关键帧属性关键帧是在补间范围中为补间对象定义一个或多个属性值的帧。而“关键帧”是指时间轴中其元件实例首次出现在舞台上的帧3.运动路径运动路径，即补间对象在舞台上移动时所经过的路径，只有位置变化时才会显示路径。40二维动画设计与制作3.4：补间动画与动画编辑器三、补间动画与传统补间的差异n传统补间使用前、后两个关键帧，需要同一元件的两个实例。新补间动画只需一个关键帧一个实例，并使用属性关键帧。n补间动画和传统补间都只允许对元件实例进行补间n补间动画可对文

17、本直接作补间，而传统补间需要将文本转换为元件。n可以在时间轴中对补间动画范围进行拉伸和调整大小，并将它们视为单个对象。41二维动画设计与制作3.4：补间动画与动画编辑器三、补间动画与传统补间的差异n若要在补间动画范围中选择单个帧，必须按住Ctrl键单击帧。n对于传统补间，缓动可应用于任意补间内关键帧之间的帧。对于补间动画，缓动只应用于补间动画范围的整个长度，不能分段使用。若要分段应用缓动，则需要创建自定义缓动曲线。42二维动画设计与制作3.4：补间动画与动画编辑器四、编辑补间的运动路径n直接移动对象，改变运动路径。n直接用路径编辑工具编辑路径，拖拉路径或编辑节点。n先在其他图层绘制路径，再粘贴

18、到补间动画层练习：（1）蝴蝶飞在花丛中（2）制作翘翘板动画43二维动画设计与制作3.4：补间动画与动画编辑器五、使用动画编辑器动画编辑器是一种对运动状态进行精确调整控制的集成工具，通过它可以轻松地创建复杂的补间动画效果。动画编辑器将补间对象的所有属性显示为由一些二维图形构成的缩略视图，通过修改这些图形来修改其相应的各个补间属性，极大地丰富动画效果，从而模拟真实的运动效果。动画编辑器只适用于补间动画，不适用于传统补间和补间形状44二维动画设计与制作3.4：补间动画与动画编辑器五、使用动画编辑器在补间动画帧上双击，即可打开动画编辑器面板，再次双击可关闭。练习：使用动画编辑器方式制作翘翘板动画45二维动画设计与制作3.4：补间动画与动画编辑器六、补间的缓动设置46二维动画设计与制作3.4：补间动画与动画编辑器七、应用预设动画预设动画即软件自带的已做好的一小段动画效果，可直接用于你的对象上。方法为：（1）选择补间对象（2）在动画预设面板选择一种预设效果（3）点击应用47二维动画设计与制作3.4：补间动画与动画编辑器七、应用预设动画可以将已做好的补间定义为动画预设，以便以后重复使用这一段动画效果，方法为：（1）选中补间动画范围（2）在动画预设面板点击“另存为预设”按钮（3）输入预设名称并保存48二维动画设计与制作3.4：补间动画与动画编辑器八、练习与作业制作一物理运动动画能量守恒49