多媒体技术与网页制作 第9讲 2017年5月修订 制作人：马秀麟 2019/6/3.

Presentation on theme: "多媒体技术与网页制作 第9讲 2017年5月修订 制作人：马秀麟 2019/6/3."— Presentation transcript:

1 多媒体技术与网页制作 第9讲 2017年5月修订 制作人：马秀麟 2019/6/3

2 内容回顾 四种动画模式 逐帧动画 形变动画 运动动画 遮罩层动画 传统运动动画 新型运动动画 无引导路径 有引导路径 制作人：马秀麟
2019/6/3

3 一、形变动画技术 1、形变动画的定义 含义 原材料 外形发生变化的动画效果 播放形变动画——效果图 新绘制的图形、已经彻底打散的文字。
不支持位图 制作者：马秀麟 2019/6/3

4 一、形变动画技术 基本流程 最常见的问题 创建首帧图形 创建末帧图形 右单击首帧，选择“创建形状补间” 测试动画效果 问题 解决方案
张冠李戴、变化混乱 解决方案 为形状添加提示点 把各个形变部件分别存放在不同的图层、独立地实施形变 制作者：马秀麟 2019/6/3

5 一、形变动画技术 2. 实用型案例 简单形变（1）——形变的小球 (效果图) 新建文件，在第一 帧绘制一简单图形；
例如绘制一个彩色的圆形。 鼠标指向第60帧后单击，按<F6>,创建关键帧。 鼠标指向第60帧，单击，变第60帧为当前帧，改变原图形的形 状、颜色； (比如：填充小球为另外的颜色，并且用细部选择工具选择后再拖动 关键点，改变图形的细部形状，为小球添加两个耳朵） 鼠标指向第1帧，单击，回到第1帧。 选择“关键帧”，在底部的【属性】（框架）面板中的[补间]项 中选择[形状]。 至此，形变动画创建完毕，可用[控制][播放]播放，观察其效果。 (效果图) 制作者：马秀麟 2019/6/3

6 一、形变动画技术 (效果图) 简单形变——形变的人脸 新建文件，在第一帧绘制一简单图形；
 简单形变——形变的人脸  新建文件，在第一帧绘制一简单图形； （例如绘制一个没有嘴巴的人脸）。 鼠标指向第60帧 后单击，按<F6>,创建关键帧。  单击“新建图层按钮”，新建一个图层，命名为“嘴巴”。 在嘴巴图层第1帧的适当位置绘制一个嘴角下垂的嘴巴。鼠标指向 第60帧，单击，变第60帧为当前帧，键入<F6>变成关键帧； 在第60帧改变新图 层中图形的位置或填充色。 （例如，把嘴巴改成嘴角上扬形式）。 右单击嘴巴图层的第1帧，选择“创建形状补间”  至此，形变动画创建完毕，可用[控制][播放]播放，观察其效果。 (效果图) 制作者：马秀麟 2019/6/3

7 一、形变动画技巧 3、形变动画面临的问题 示意图 原因 张冠李戴的面部 扭曲的小花 在同一个动画效果中有过多的形变对象 制作人：马秀麟
2019/6/3

8 一、形变动画技巧 解决问题的策略 为需要形变的对象添加提示点 把需要形变的对象放到不同的图层中 注意事项 （首帧添加，末帧调整）
修改——形状——添加形状提示 <Ctrl>+<Shift>+H 把需要形变的对象放到不同的图层中 把局部区域剪切到独立到图层中 注意事项 不要一次添加过多的提示点，可边添加，边运行检查添加效果 可综合应用两种策略 制作人：马秀麟 2019/6/3

9 一、形变动画技巧 3、操作实例 (1)添加形变提示点 在完成形变动画并发现错误的形变效果后，可以进行如下操 作：
在完成形变动画并发现错误的形变效果后，可以进行如下操 作：  回到第一帧，可用<Ctrl>+<Shift>+H在当前形变图形上添 加提示点，并用鼠标拖动的方式将提示点拖到图形的关键位 置； 进入末帧，将提示点拖动到对应位置处。 说明：若提示点添加正确，应为绿色，否则为红色。为便于 抓点，我们在添加提示点时应善于使用抓点工具。 （演示操作过程） 制作人：马秀麟 2019/6/3

10 一、形变动画技巧 (2)把子对象分别放到不同的图层中 基本过程 演示操作过程 (效果图) 在首帧，剪切某一局部图形
新建图层，把局部图形粘贴到新图层中 同理，在末帧剪切相应的局部图形 在新图层的首帧创建形变动画 演示操作过程 (效果图) 制作人：马秀麟 2019/6/3

11 一、形变动画技巧 (3)文字形变技法 (4)复杂的形变效果 输入文字 把文字彻底打散 创建末帧，重新设置文字 创建形状补间 形变的小花朵
（效果图） (4)复杂的形变效果 形变的小花朵 (效果图) 制作人：马秀麟 2019/6/3

12 二、运动动画初步——无路径 1. 无路径运动动画——基于实例 操作方法 准备 核心步骤 优化 新建文件，制作元件
从库中把 元件拖到场景内，构建实例 指向末帧处，按<F6>,创建关键帧 指向首帧，右单击后选择“创建传统补间” 测试影片 优化 进入末帧，调整末帧实例的位置、大小、‘颜色 等属性 制作人：马秀麟 2019/6/3

13 二、运动动画初步——无路径 补充说明 注意 实例从起点沿直接运行到终点 可设置实例的效果（颜色、亮度、滤镜） 可设置“补间效果”的属性
旋转 调整到路径 贴紧 同步、缩放等 注意 首帧与末帧应该是同一个实例 制作人：马秀麟 2019/6/3

14 二、运动动画初步——无路径 3、案例展示 (1)逐渐消失的小树叶 创建树叶实例 创建末关键帧 针对首帧，创建传统补间 设置“补间”的属性
制作人：马秀麟 2019/6/3

15 二、运动动画初步——无路径 (2)多字同时飞入的文字效果 (3)多字逐字飞入的文字效果 在首帧，输入文字，打散为单个文字
创建末帧（适当位置<F6>） 针对首帧，创建传统补间。 设置各文字首帧时的状态 (3)多字逐字飞入的文字效果 分散到各个图层 对全部图层创建末帧（适当位置<F6>） 对于每个图层都利用<F6>键分为三段 针对中段的首帧，创建传统补间。 设置各文字第1帧和中段首帧时的位置、状态 制作人：马秀麟 2019/6/3

16 二、运动动画初步——无路径 1、概念的引入 要求 思路——量化生产的思想 提炼： 制作群花绽放的效果 制作一个花朵的绽放 把此花朵做成模版
以模版快速地创建小花朵 提炼： 以模板（元件）作为标准 快速创建具体对象（实例） 利用“属性”修改实例的外观 制作人：马秀麟 2019/6/3

17 二、运动动画初步——无路径 演示此过程 制作模版 产生实例 插入影片剪辑元件 在影片剪辑内部制作小花绽放的效果 回到场景中
从库中拖动元件到场景中 利用【属性】面板调整各花朵的外观 制作人：马秀麟 2019/6/3

18 三、带引导路径的传统运动动画 1、带路径动画的必要性 无引导路径运动动画的缺陷 技术 沿直线到达终点，比较僵硬 改进 传统的引导路径动画
设置引导路径 让实例沿着引导路径运动 技术 传统的引导路径动画 新型的引导路径动画 制作人：马秀麟 2019/6/3

19 三、带引导路径的传统运动动画 2、传统的带引导路径的动画 操作流程 创建无路径动画 添加引导路径 测试影片 在首帧，创建实例
创建末帧（适当帧位置，<F6>键） 对实例层的首帧创建传统补间 添加引导路径 右单击实例层——创建传统引导层 在引导层绘制路径 用铅笔绘制 使用无填充色的图形轮廓线 分别在首帧和末帧把实例挂到路径的两端 测试影片 制作人：马秀麟 2019/6/3

20 三、带引导路径的传统运动动画 注意事项 实用型案例 首帧与末帧的实例必须是同一个实例 实例与路径的挂接可借助“磁铁工具”
注意使用实例的注册点（挂接） 不允许在路径中出现断点 普通图形不可以创建运动动画 实用型案例 沿着指定路径运行的小球 沿着圆周运行的小球 爬山的小女孩 制作人：马秀麟 2019/6/3

21 三、带引导路径的传统运动动画 3、基础型案例 沿轨迹运动的小球 准备元件 准备实例 动画补间 添加路径
新建元件，在元件状态绘制小球（注意中心点） 准备实例 返回场景，把唯一图层作为实例层 在实例层首帧拖入实例 在实例层的末帧处<F6>创建关键帧 动画补间 对实例层的首帧，右击后选择“创建传统补间” 添加路径 添加传统引导层 在引导层绘制路径 把实例挂到路径两端 制作人：马秀麟 2019/6/3

22 三、带引导路径的传统运动动画 拓展型案例——利用外部导入的元件 对小动画的配音 爬山的女孩 奔跑的小猫 飞舞的蜜蜂 导入声音文件
过程略 奔跑的小猫 飞舞的蜜蜂 对小动画的配音 导入声音文件 把声音元件导入到场景的声音层 控制声音的播放 在末帧添加代码：stopAllSounds(); 或者：设置声音对象的属性为：“数据流”同步 制作人：马秀麟 2019/6/3

23 三、带引导路径的传统运动动画 高级应用 实例属性与补间属性 注意添加必要的背景层 适当改变实例的大小 跟随到路径 旋转 添加滤镜效果
制作人：马秀麟 2019/6/3

24 三、带引导路径的传统运动动画 4、复杂型案例 元件的嵌套效果 原子核与电子的运动 案例要求 操作方法 多个电子绕原子核运动
制作单个电子绕原子核运动的影片剪辑元件 新建影片剪辑元件——小电子 新建影片剪辑元件——绕核运转的小电子 注意：建立背景层，把路径复制到背景层 在场景中创建多个实例，并适当调整角度 也可以针对已有实例使用“变形”面板的“复制变形”功能 制作人：马秀麟 2019/6/3

25 三、带引导路径的传统运动动画 地球、月亮、太阳的旋转 案例要求 方法 制作小动画，模拟地球、月亮和太阳的旋转 新建图形元件——月球
新建影片剪辑元件——绕地球旋转的月球 需要使用月球元件 创建沿圆环路径运行的小动画 把路径复制到背景层，并 在背景层添加地球 新建普通动画 以地月动画为实例 创建绕圆周运动的动画 制作背景层，添加太阳效果 制作人：马秀麟 2019/6/3

26 谢谢学习 制作人：马秀麟 2019/6/3