内容简介 本书贯彻 案例教学和项目教学 的思想, 采用 任务驱动 的教学方式, 坚持 教 学 做 三合一的理念, 由浅入深 循序渐进地介绍了 Flash CS5 的使用方法和操作技巧 ; 通过实用案例介绍 Flash 基础动画的制作方法, 包括绘图基础 逐帧动画 补间动画 形状补间动画 传统补间动画

Transcription

1 中等职业教育 十二五 规划课程改革创新教材中职中专计算机类专业通用教材系列 Flash CS5 经典案例与项目实训 刘斯黄梅香主编吴小菊王林副主编席良宝主审 北京 科学出版社职教技术出版中心

2 内容简介 本书贯彻 案例教学和项目教学 的思想, 采用 任务驱动 的教学方式, 坚持 教 学 做 三合一的理念, 由浅入深 循序渐进地介绍了 Flash CS5 的使用方法和操作技巧 ; 通过实用案例介绍 Flash 基础动画的制作方法, 包括绘图基础 逐帧动画 补间动画 形状补间动画 传统补间动画 引导层动画 遮罩动画 声音与视频 元件与实例及 ActionScript 3.0 交互动画 ; 并在一定的知识储备基础上演练实用项目, 包括公益广告 MTV 短片类 商业广告 教学课件等 在每个实训案例开始部分都有基础知识的补充 实训案例的描述和指导等内容, 具体操作中又有关键技术的提示, 使读者快速掌握案例的制作方法 本书内容丰富 全面, 范例典型, 操作步骤详细, 图文并茂, 通俗易懂, 软件功能与实例紧密结合, 便于提高和拓展读者对 Flash 基本功能的掌握与应用, 又可帮助读者解决实际应用中的难题, 拓展学习思路 本书适合中等职业学校 二维动画制作 课程的教学用书, 还可作为网页动画 课件制作及动漫等商业设计领域从业人员的参考用书 图书在版编目 (CIP) 数据 Flash CS5 经典案例与项目实训 / 刘斯, 黄梅香主编. 北京 : 科学出版社,2014 ( 中等职业教育 十二五 规划课程改革创新教材 中职中专计算机类专业通用教材系列 ) ISBN Ⅰ. 1 F Ⅱ. 1 刘 2 黄 Ⅲ. 1 图像处理软件 - 中等专业学校 - 教材 Ⅳ. 1TP 中国版本图书馆 CIP 数据核字 (2014) 第 号 责任编辑 : 张振华 / 责任校对 : 马英菊责任印制 : 吕春珉 / 封面设计 : 东方人华平面设计部 出版 北京东黄城根北街 16 号邮政编码 : 北京双清印刷厂印刷 科学出版社发行 2014 年 5 月第一版 2014 年 5 月第一次印刷 * 各地新华书店经销 开本 : /16 印张 :15 3/4 字数 : 定价 :35.00 元 ( 含光盘 ) ( 如有印装质量问题, 我社负责调换 < 环伟 >) 销售部电话 编辑部电话 版权所有, 侵权必究举报电话 : ; ;

3 前言 Flash 是最受欢迎的专业二维矢量动画制作软件, 它集绘画 制作 设计 编辑 合成 输出为一体, 其生成的动画具有跨平台 体积小 品质高 交互功能强 进入门槛低等特点, 可嵌入多种声音 视频 图片, 并支持流式播放, 能够满足网络高速传输的需要, 在制作动画 游戏 广告 课件 网站 MTV 游戏等方面都具有灵活 强大 易用的优点, 受到许多设计师的青睐 本书遵循初学者的认知规律, 以 Flash CS5.5 为平台, 由浅入深 循序渐进地介绍了 Flash 软件的操作方法和动画制作技巧 本书是中等职业学校计算机动漫与游戏制作专业的主干教材 本书通过大量典型而易于理解的实例帮助读者掌握 Flash 动画制作的原理 方法, 并引导读者进行演练 本书内容翔实, 语言通俗易懂, 具有很强的可操作性和实用性, 各单元均提供完整的作品源文件和相关素材 ( 见附光盘 ), 使读者爱学易懂 本书案例新颖 图文并茂, 既强调基础知识, 又体现具体操作和技能, 将操作要点穿插至操作过程中, 使用简便 全书分 10 个单元 : 单元 1 介绍使用 Flash 工具面板绘制动漫场景 道具 角色, 通过实例来讲解 Flash 矢量绘图工具的用法, 以及在运用过程中的对象组合 排列和对齐对象, 并在实例中应用对象的变形 旋转 缩放等功能 单元 2 介绍逐帧动画, 从多方面介绍逐帧动画中常用的导入序列帧 洋葱皮 工具 翻转帧命令等功能的实际运用 单元 3 介绍补间动画 3D 动画和骨骼动画, 通过案例介绍 3D 旋转工具 3D 平移工具 骨骼工具 绑定工具 单元 4 介绍形状补间动画, 通过两个案例分析形状补间动画的制作方法及形状提示符的应用技巧 单元 5 介绍传统补间动画, 讲解了重复不间断背景动画和分节动画的制作方法, 并第一次引导网页 Banner 和公益广告这两个应用项目 单元 6 和单元 7 介绍引导层动画和遮罩动画, 从基础知识案例讲解到制作商业广告项目 单元 8 介绍声音与视频的导入及在 Flash 软件中进行简单的编辑 单元 9 介绍 3 种元件类型的使用方法 应用环境与技巧 单元 10 介绍 ActionScript 3.0 的基础语法, 特别介绍动画与脚本结合运用来实现交互动画, 包括事件触发 响应和处理 控制对象属性 控制时间轴播放等 同时引入实例介绍了组件的应用 传统的教程均首先系统全面地介绍基础知识, 再提供实例操作, 在理论学习环节没有案例操作为支撑, 读者遇到问题时要重新回头查找相关内容, 实际操作过程中存在理论和实践相脱离的问题 本书在单元开始引入简单的相关基础知识, 让读者在学习软件应用的同时了解相关行业知识和实际应用 而把重点的操作细节要点放在实训案例相关步骤上, 方便读者操作, 具 科学出版社职教技术出版中心

4 前 言 有鲜明的实用特点 为了方便读者学习, 本书配有光盘, 收录了所有实例的源文件和最终效果文件及相关素材 本书由刘斯 黄梅香任主编, 由吴小菊 王林任副主编, 由席良宝任主审 具体分工如下 : 单元 1 和单元 10 由黄梅香编写, 单元 2 由刘斯编写, 单元 3 由刘巧瑜编写, 单元 4 和单元 5 由吴小菊编写, 单元 6 和单元 7 由王林编写, 单元 8 和单元 9 由郑惠娜编写 厦门大拇哥动漫股份有限公司技术部参与了本书的创意设计及具体内容安排, 使之更符合行业 企业标准 席良宝审阅了本书并提出宝贵意见, 在此表示感谢 由于编者水平有限, 在内容选材和叙述上难免存在不当之处, 竭诚欢迎广大读者批评指正, 请联系电子邮件 :liusi_xm@163.com 编者 2014 年 1 月 ii

5 目录 单元 1 绘图基础 绘制自然景物 : 天空 云彩 花草 小树 绘制交通工具 : 公交车 绘制建筑 : 教室 绘制卡通动物 : 可爱的长颈鹿 绘制卡通人物 :Q 版人物 绘制卡通人物三视图 :Q 版人物转身 34 单元 2 逐帧动画 用导入的静态图片建立逐帧动画 : 小鹿奔跑 绘制矢量逐帧动画 : 人物走路 文字逐帧动画 : 打字效果 47 单元 3 补间动画 移动 透明度 : 移动图片动画 颜色变化 : 变换文字的颜色 变形动画 : 弹簧动画 旋转动画 : 旋转的风车 D 动画 :3D 舞台 骨骼动画 : 皮影动画 71 单元 4 形状补间动画 绘制形状补间动画 : 摇曳的烛光 运用形状提示 : 数字变化 85 科学出版社职教技术出版中心 单元 5 传统补间动画 重复不间断背景动画 : 火车窗外风景移动 89

6 目 录 5.2 分节动画 : 滑落的水滴 网页 Banner 制作 : 商务平板电脑 实战演练 : 节约用水 105 单元 6 引导层动画 普通引导层 : 小瓢虫走迷宫 引导层技巧 : 立交行车 实战演练 : 鱼儿水中游 128 单元 7 遮罩动画 静态遮罩 : 万花筒动画 动态遮罩 : 卷轴动画 逐帧遮罩 : 香水广告 实战演练 : 汽车广告 155 单元 8 声音与视频 声音 : 生命的禁锢 配音 视频 : 视频实例 实战演练 : 水晶苹果相册 175 单元 9 元件与实例 图形元件 : 雨中的楼阁 影片剪辑元件 : 模拟 3D 球体的旋转 按钮元件 : 发音的字母表 MTV 制作 :GOOD MORNING 196 单元 10 ActionScript 3.0 交互动画 简单交互运用 : 学习街舞 影片剪辑属性控制 : 遥控飞机 鼠标跟随控制 : 点蜡烛 条件选择结构 : 填数字游戏 循环结构 : 球员上场 组件应用 : 杂志页面 日历 MP3 播放器 课件制作 : 物理课件 239 iv

7 1 单元 1 绘图基础 单元导读精彩的 Flash 动画十分吸引人, 很多人因此而跃跃欲试 但在学习 Flash 动画之前, 首先要学习绘图, 即学习对 Flash 动画中的物体 场景 角色等进行设计和绘制 本单元将通过绘制自然风景 卡通角色等实例, 讲解 Flash 绘图的方法和技巧 学习目标 学习任务 了解 Flash 常用绘图编辑工具 掌握 Flash 基本工具的使用方法 了解使用调整工具调整规则图形的轮廓的技巧 掌握绘制立体图形的方法和技巧 绘制自然景物 : 天空 云彩 花草 小树 绘制交通工具 : 公交车 绘制建筑 : 教室 绘制卡通动物 : 可爱的长颈鹿 绘制卡通人物 :Q 版人物 绘制卡通人物三视图 :Q 版人物转身 科学出版社职教技术出版中心

8 单元 1 绘图基础 1.1 绘制自然景物 : 天空 云彩 花草 小树 1. 物体表面色彩的形成没有光的照射, 物体就不能被人们看见 物体呈现何种色彩, 由物体色 光源色和环境色 3 个因素综合决定, 如图 1-1 所示 可以看到, 橙子表面的色彩不是一成不变的, 不同的部位有不同的色彩 如果在绘画时, 对物体只填充一种颜色, 即平涂物体色, 则物体就没有了立体感, 显得死板, 如图 1-2 所示 图 1-1 物体表面的色彩呈现 图 1-2 平涂物体色 1) 物体色 ( 或称固有色 ): 物体本身并没有色彩, 物体色是因为光源色的作用, 经过物体的吸收反射后, 显示出发光体中的某种色彩面貌 通常把这些本身并不发光的色彩统称为物体色, 如红旗的物体色是红色, 柠檬的物体色是柠檬黄, 草的物体色是绿色 2) 光源色 : 光源一般有自然光 阳光和灯光等, 光源色是指照射物体光线的颜色 例如, 一座石膏像被红色光照射时, 其受光部位会呈红色, 若改蓝光则呈蓝色 ; 红旗在日光下展现红色, 在蓝光下呈紫色, 而在绿光中会变成黑色 光照的强度及角度也会改变物体色 例如, 红旗在标准日光下呈红色, 在强光下变成淡红色, 弱光下则会呈现偏紫的暗红色 3) 环境色 : 一个物体受到周围物体反向颜色的影响所引起的物体色的变化 例如, 一匹马在草地上, 它的腹部就呈绿色 ; 穿大红上衣的人, 他的下巴部位就呈暗红色 环境色通常出现在物体的阴影部分, 作为一种反射光出现 浅色的物体更容易受到环境色的影响 2. 三面五调由于光的反射和折射, 以及在不同介质上表现出来的不同性质, 所以产生了明暗的不同 光源直接照射的部分称为受光面 ; 光源照射不到的地方称为背光面 当然, 事物不止两个极端, 中间部分称为中间调子, 即侧光面 2

9 绘制自然景物 : 天空 云彩 花草 小树 1.1 物体的明暗层次可概括为三个大面, 细分为五大调子, 它们以一定的色阶关系组成一个统 一的明暗变化的基本规律, 俗称 三面五调 图 1-3 为 三面五调 参考图 图 1-3 三面五调 参考图 1) 受光面 ( 亮面 ): 是物体受光源 90 直射的地方, 这部分受光最大, 调子淡 亮部的受 光焦点叫 亮光, 是物体上最亮的一个点, 一般只有光滑的物体才出现 2) 中间调子 ( 灰面或侧光面 ): 是物体受光侧射的部分, 也是明暗交界线的过渡地带, 色 阶接近, 层次丰富 3) 明暗交界线 : 由于受到环境光的影响, 但又不受主要光源的照射, 因此, 对比强烈, 给 人的感觉是调子颜色较深 4) 反光 : 暗部由于受周围物体的反射作用, 会产生反光 反光作为暗部的一部分, 一般比 亮部最深的中间颜色要深 5) 投影 : 物体本身影子的部分, 它作为一个大的色块出现, 也是五调之一 投影的边缘近 处清楚, 渐远处模糊 物体的受光情况和物体与照射光源之间有密切关系 : 1 物体各部分根据距光源的远近有明暗差异 朝向光源时, 越近越亮 2 物体各部分与光源的照射所成角度也影响明暗变化 朝向光源时, 与光源越垂直越亮 3. 物体立体感的表现方法 三面五调 是塑造物体立体感的主要法则, 也是表现物体质感 量感和空间感的重要手段 以下介绍用 Flash 软件绘制有立体感的物体的方法 图 1-6 所示 先画好物体的基本轮廓, 再平涂物体色, 如图 1-4 所示 图 1-4 石头轮廓及上色 根据光源的位置确定物体的 3 个面, 即亮面 灰面和暗面, 如图 1-5 所示 科学出版社职教技术出版中心 在物体色的基础上将颜色调亮或调暗, 分别填充在物体的亮部 暗部和投影处, 如 3

10 单元 1 绘图基础 图 1-5 亮面 灰面 暗面 图 1-6 石头效果 实训 1 绘制天空 实训目的 : 了解 Flash 常用绘图编辑工具, 掌握 矩形工具 颜料桶工具 渐变变形工具 的设置和使用 操作要求 : 要求能绘制颜色上有渐变层次的天空, 如图 1-7 所示 技能点拨 : 使用 矩形工具 绘制矩形, 使用 颜料桶工具 填充渐变颜色, 并使用 渐变变形工具 进行渐变变形 图 1-7 蓝天效果 实训步骤 01 使用 矩形工具 R 绘制一个无边框的矩形, 填充任意颜色, 如图 1-8 所示 图 1-8 矩形 小贴士 1) 本书, 中的字母表示快捷键 2) 在 Flash 软件中, 舞台上不能直接填充颜色, 需要先绘制形状再填充颜色 3) 使用 Flash 软件绘制的形状由笔触和填充两部分组成, 如图 1-9 所示 图 1-9 形状的组成部分 4) 为保证快捷键的有效使用, 须关闭中文输入法 4

11 绘制自然景物 : 天空 云彩 花草 小树 选中矩形, 单击颜色浮动面板上的 色盘快捷按钮 型为线性渐变, 接着修改渐变色块, 如图 1-10 所示, 选中填充色, 选择填充类 图 1-10 填充渐变色 小贴士 选中绘制的形状, 物体以点状显示 所示 03 选中矩形, 然后使用 渐变变形工具 A, 旋转渐变方向为从上至下, 如图 1-11 图 1-11 调整渐变状态实训 2 绘制云彩 实训目的 : 了解 Flash 常用绘图编辑工具, 掌握 椭圆工具 线条工具 选择工具 的设置和使用 所示 操作要求 : 要求绘制的云彩有立体 柔软的质感, 如图 1-12 技能点拨 : 使用 椭圆工具 绘制椭圆, 使用 选择工具 选取多余线条以便删除, 使用 线条工具 及 选择工具 绘 制和变形光影线 科学出版社职教技术出版中心 图 1-12 白云效果 5

12 单元 1 绘图基础 实训步骤 01 首先使用 椭圆工具 O 绘制一个椭圆, 再在它的右上方绘制一个椭圆, 然 后依次绘制出重叠的 5 个椭圆, 如图 1-13 所示 图 1-13 白云组合圆 02 使用 选择工具 V 选中内部交叉线, 按 Delete 键删除, 使用 线条工具 N 和 选择工具 V 画出明暗交界线, 选中暗面区域, 填充暗面颜色 (#E3EDFD), 最后删除明暗交界线, 即可完成绘制, 如图 1-14 所示 图 1-14 绘制白云小贴士 1) 要选择多根线条, 可以按住 Shift 键依次单击要选择的线条 2) 使用 线条工具 画线, 将 选择工具 放置在线条上, 箭头下方出现一个小弧, 此时按住鼠标左键可以进行变形, 如图 1-15 所示 图 1-15 绘制变形的演示过程 03 运用步骤 02 的方法再绘制一朵小云, 效果如图 1-12 所示 实训 3 绘制花草 实训目的 : 进一步熟练掌握 线条工具 和 选择工具 的使用, 同时提高矢量绘画的技巧 操作要求 : 要求绘制的花草光影对比清晰, 立体感强, 如图 1-16 所示 技能点拨 : 使用 线条工具 绘制花草轮廓, 使用 选择工具 调整出平滑曲线, 使用 颜料桶工具 上色, 再使用 线条工具 绘制亮面和暗面分界线, 然后填充相应的颜色 图 1-16 花草效果 6

13 绘制自然景物 : 天空 云彩 花草 小树 1.1 实训步骤 首先使用 线条工具 N 勾勒出花与叶的大体轮廓, 如图 1-17 所示 使用 选择工具 V 结合 Delete 键删除多余的直线, 如图 1-18 所示 图 1-17 花草粗轮廓 图 1-18 花草修整轮廓 03 使用 选择工具 V 将直线调整为平滑的曲线, 如图 1-19 所示 04 使用 颜料桶工具 K 给线稿填充基本颜色( 叶子 :#36B32F, 花瓣 :#FFFFFF, 花蕊 :#EDD741), 如图 1-20 所示 05 使用 线条工具 N 和 选择工具 V, 用绿线画出叶子与花的亮面和 暗面, 然后将亮面区域填充比基本色亮些的颜色, 暗面区域填充比基本色暗些的颜色, 如图 1-21 所示 图 1-19 花草平滑轮廓图 1-20 填充基本色图 1-21 绘制明暗分界线 小贴士 06 1) 注意叶子与花的 3 个面色彩的过渡和变化 2) 在绘制物体亮面和暗面的分界线时尽量使用与填充不同的颜色, 方便以后的删除 同样, 用绿线画出花蕊的明暗交界线, 填充暗面颜色, 然后双击绿线, 选中所有的 分界线并删除, 效果如图 1-16 所示 小贴士 双击明暗分界线, 可以一次选中所有与之相连且颜色相同的线 科学出版社职教技术出版中心 7

14 单元 1 绘图基础 实训 4 绘制小树 实训目的 : 掌握常用的线稿描摹方法, 提高矢量绘画的技巧与速度 操作要求 : 要求绘制的小树形体真实, 光影对比清晰, 立体感强, 如图 1-22 所示 技能点拨 : 导入线稿, 使用 线条工具 描出线条, 最后使用 颜料桶工具 上色, 最后绘制亮面和暗面分界线, 然后填充相应的颜色 图 1-22 小树效果 实训步骤 01 选择 文件 导入 导入到舞台 命令或按 Ctrl + I 组合键, 导入 素材与源文件 \ 单元 1 绘图基础 \1.1 绘制自然景物 : 天空 云彩 花草 小树 \ 素材 \ 树线稿.jpg 文件, 如图 1-23 所示 02 在上方新建一个图层, 使用 线条工具 N 和 选择工具 V, 用蓝线描出平滑且封闭的线条, 如图 1-24 所示 小贴士线稿可以先在纸上绘制后再扫描到计算机上 图 1-23 小树扫描线稿 图 1-24 小树描线 小贴士 需要填充颜色的区域线条一定封闭, 否则将无法填充 03 框选所有线条, 将颜色设置为黑色, 并调整其透明度为 50%, 如图 1-25 所示 04 使用 颜料桶工具 K 给完成的线稿上出各部分的基本颜色, 树叶为草绿色 (#669933), 树干为淡褐色 (#C29161), 如图 1-26 所示 图 1-25 小树黑色线稿 图 1-26 小树填充基本色 8

15 绘制自然景物 : 天空 云彩 花草 小树 1.1 小贴士 若无法填充颜色, 经过检查找不到绘制区域的缺口, 此时可以单击工具箱下方 选项 中的 间隙大小模式选项 按钮 1) 不封闭空隙 按钮 : 可以使所有未完全封闭的区域不能被填充颜色 2) 封闭小空隙 按钮 : 可以填充间距特别小的不封闭图形区域 3) 封闭中空隙 按钮 : 可以填充间距较小的不封闭图形区域 4) 封闭大空隙 按钮 : 可以填充较大的不封闭图形区域 05 使用 线条工具 N 和 选择工具 V, 用红线画出树干的明暗交界线 06 在树干的暗面填充较暗的颜色 ( 注意色彩对比要强烈 ), 然后删除明暗交界线, 如 图 1-27 所示 同样, 画出树叶的明暗交界线, 并勾勒高光的部分 分别为树叶的暗面与亮面填充较暗与较亮的颜色, 这样树叶的色彩过渡就比较丰富, 树的立体感也更为突出 更加真实 效果如图 1-28 所示 图 1-27 小树树干明暗效果 图 1-28 小树树叶明暗效果 运用所学的技巧绘制一张自然景物风景图, 效果如图 1-29 所示 图 1-29 自然景物风景图 科学出版社职教技术出版中心 9

16 单元 1 绘图基础 小贴士 向日葵的绘制方法如图 1-30 所示 (a) 按 Ctrl + T 组合键变形 (b) 线条 + 分布式对齐 (c) 最终效果 图 1-30 向日葵的绘制方法 1.2 绘制交通工具 : 公交车 实训目的 : 了解基本绘图工具的设置和运用, 以及结合变形工具的运用 操作要求 : 要求绘制的公交车比例协调, 光影效果合理, 如图 1-31 所示 技能点拨 : 使用 矩形工具 绘制车体轮廓结构, 再使用 选择工具 进行线条调整, 使用 线条工具 绘制车体细节线条等 ; 使用 颜料桶工具 上色, 使用 线条工具 结合 选择工具 绘制光影分界线, 使用 颜料桶工具 上色 图 1-31 公交车效果 实训步骤 01 使用 矩形工具 R 在舞台上绘制一个无填充的矩形, 再使用 线条工具 N 绘制公交车的外形轮廓, 如图 1-32 所示 图 1-32 公交车外形轮廓 10

17 绘制交通工具 : 公交车 1.2 小贴士 绘制水平 垂直或 45 的直线时, 按 Shift 键 02 使用 选择工具 V 调整公交车的外形轮廓, 如图 1-33 所示 03 使用 线条工具 N 在车的内部画出车窗和反光镜, 使用 椭圆工具 O 切出轮框等结构线, 如图 1-34 所示 图 1-33 调整后的外形轮廓 图 1-34 绘制公交车的内部结构 04 使用 选择工具 V 修整各部分造型, 使线条圆滑, 如图 1-35 所示 图 1-35 修整后的公交车 05 新建一个图层, 使用 基本椭圆工具 并按住 Shift 键绘制一个正圆, 使用 部分选取工具 A, 拖动内环半径控制点, 调节内径值, 绘制圆环 接着在空白位置绘制一条水平线, 按 Ctrl + T 组合键调出 变形 面板, 输入旋转角度 20, 然后反复单击 重制选区和变形 按钮, 再将两个图形拼装起来, 然后按 Ctrl + B 组合键将圆环打散, 最后将多余的 线删除, 如图 1-36 所示 图 1-36 车轮绘制过程及 变形 面板 科学出版社职教技术出版中心 11

18 单元 1 绘图基础 小贴士 基本椭圆 和 椭圆 的最大区别是它可以容易实现扇形和圆环的绘制 先绘制一个 基本椭圆, 然后使用 选择工具 或 部分选取工具 移动外部的控制点将形成不同角度的扇形, 移动内部的控制点将形成不同半径的圆环, 如图 1-37 所示 图 1-37 基本椭圆 的绘制方法 06 使用 颜料桶工具 K 给完成的线稿填充各部分的基本颜色, 如图 1-38 所示 07 使用 线条工具 N, 设置笔触色为亮绿色 (#00FF00), 画出公交车各部分的 明暗交界线 然后在暗面填充较暗的颜色, 在亮面填充较亮的颜色, 分出层次, 如图 1-39 所示 图 1-38 填充基本色 图 1-39 绘制明暗交界线 08 删除明暗交界线, 最终效果如图 1-31 所示 根据学习的光影原理, 绘制卡通直升飞机, 效果如图 1-40 所示 图 1-40 卡通直升飞机效果 12

19 绘制建筑 : 教室 绘制建筑 : 教室 1. 透视的基本原理 透视的基本原理是 近大远小 近实远虚, 离得近的物体看起来大, 离得远的物体看起来 小 视线中的物体远到差不多将要在视线中消失的时候, 在视觉概念上就变成了一个点, 这个相对观察者来说处于视线可见范围内最远处的位置标记被称为 消失点 1) 视平线 : 与画者眼睛平行的水平线 2) 消失点 : 与画面不平行的成角物体, 在透视中伸远到视平线心点两旁的消失点 3) 心点 : 画者眼睛正对着视平线上的一点 4) 视点 : 画者眼睛的位置 5) 余点 : 在画面的视平线上, 余点有许多个 它是与画面成 90 角或 45 角之外其余角度水平线段的消失点 6) 天点 : 近高远低的倾斜物体 ( 房子房盖的前面 ), 消失在视平线以上的点 7) 地点 : 近高远低的倾斜物体 ( 房子房盖的后面 ), 消失在视平线以下的点 2. 透视种类 (1) 平行透视日常接触的物体以六面体为最多, 如建筑物 桌椅 床 车等, 不管这些物体的形状如何不同, 都可以归结在一个或多个六面体中, 有上下 前后 两侧 3 种面, 只要有一种面与画面成平行的方向, 就叫平行透视, 如图 1-41 所示 由于平行透视只有一个消失点, 因此也叫一点透视 用平行透视可以很好地表现出远近感, 常用来表现笔直的街道 宽阔的室内等场景, 如图 1-42 和图 1-43 所示 科学出版社图 1-41 平行透视原理图 职教技术出版中心 13

20 单元 1 绘图基础 图 1-42 街道透视图 图 1-43 室内透视图 (2) 成角透视当物体的两个面都与画面成一角度, 这种物体在透视中叫作成角透视 物体两个侧面的线条向视平线上左右两个消失点集中, 因此成角透视也叫两点透视, 如图 1-44 所示 成角透视, 多用于表现物体的立体感, 最少可看到两个面 正方体在视平线上时, 可以见到左右两个成角面 ; 正方体在视平线以外时, 可以见到 3 个面, 两个成角面和一个顶面或底面, 如图 1-45 所示 图 1-44 成角透视原理图 图 1-45 墙面成角透视图 14

21 绘制建筑 : 教室 1.3 (3) 倾斜透视倾斜透视, 又称三点透视, 简单理解就是物体 3 个面的顶点正对着我们的眼睛, 多用于仰视和俯视图中 3. 透视背景 (1) 俯视视角的动画背景 01 在舞台中绘制一条水平线, 命名为视平线, 左右两边分别命名为余点 1 和余点 2, 下方为地点, 如图 1-46 所示 图 1-46 绘制辅助线 在视平线以下 两个余点之间绘制一条垂直线段 垂直线段的两个端点分别与两个余点连接, 并连接地点, 如图 1-47 所示 所示 04 图 1-47 绘制俯视透视线 利用平行视角绘制门窗的方法, 就能够完成这幅俯视效果透视图的绘制, 如图 1-48 图 1-48 俯视效果透视图 科学出版社职教技术出版中心 15

22 单元 1 绘图基础 (2) 仰视视角的动画背景仰视视角是指镜头从低处向上看, 物体所产生的透视效果 它多用来表现高大 壮观的物体 01 在舞台中绘制一条水平线, 命名为视平线, 左右两边分别为消失点 A 和消失点 B 在视平线上方确定一点, 命名为天点, 这个点就是物体向上的消失点 在视平线上再确定一点, 这个点叫作心点, 是观察者眼睛的位置, 如图 1-49 所示 02 在视平线与天点之间绘制一条垂直线段, 连接大楼的顶点和消失点 A, 大楼的顶点和消失点 B 及天点分别连接视平线上除了消失点 A 和消失点 B 以外的点, 如图 1-50 所示 图 1-49 绘制辅助线 图 1-50 绘制仰视透视线 03 利用同样的方法绘制其他的物体, 如图 1-51 所示 图 1-51 仰视透视效果图 16

23 绘制建筑 : 教室 1.3 实训 1 绘制教室墙面实训目的 : 熟练掌握 Flash 常用绘图工具, 掌握并运用透视原理 操作要求 : 要求绘制的教室墙面具有空间感, 透视把握合理 教室最终效果如图 1-52 所示 技能点拨 : 使用 线条工具 绘制室内的透视辅助线, 再使用 线条工具 进行墙面的绘制, 使用 颜料桶工具 上色, 最后使用 线条工具 结合 选择工具 绘制光影分界线 实训步骤 图 1-52 教室最终效果 01 使用 线条工具 N 绘制辅助线, 如图 1-53 所示 图 1-53 绘制透视辅助线 02 使用 线条工具 N 和 选择工具 V 绘制教室三面墙的线条, 效果如图 1-54 所示 图 1-54 教室墙面线条效果图 科学出版社职教技术出版中心 17

24 单元 1 绘图基础 03 所示 使用 颜料桶工具 K 给完成的线稿填充各部分的基本颜色, 如图 1-55 图 1-55 墙面填充基本色 04 使用 铅笔工具 Y, 设置笔触色为亮绿色 (#33FF00), 画出各部分的明暗交 界线, 然后在最后面填充较暗的颜色, 高光部分填充较亮的颜色, 分出层次, 突出室内的立体 感, 如图 1-56 所示 图 1-56 墙面添加明暗交界线 05 使用 颜料桶工具 K 填充窗户颜色, 如图 1-57 所示 图 1-57 填充窗户颜色 06 删除绿色线条, 如图 1-58 所示 18

25 绘制建筑 : 教室 1.3 图 1-58 删除绿色线条 实训 2 绘制讲台实训目的 : 熟练掌握 Flash 常用绘图工具 操作要求 : 要求绘制的桌子有立体感, 光影及透视把握合理 技能点拨 : 使用 线条工具 结合 选择工具 绘制讲台的外轮廓, 使用 颜料桶工具 填充基本色, 最后使用 线条工具 结合 选择工具 绘制光影分界线, 并填充阴影色 实训步骤 01 使用 矩形工具 R 线条工具 N 和 选择工具 V 绘制讲台桌的轮廓, 如图 1-59 所示 02 使用 颜料桶工具 K 给讲台桌填充基本色 褐色 (#C17623), 如图 1-60 所示 图 1-59 绘制讲台桌轮廓 图 1-60 填充讲台桌基本色 03 使用 铅笔工具 Y, 设置笔触色为亮绿色 (#33FF00), 画出各部分的明暗交 界线, 然后在最后面填充较暗的颜色, 分出层次, 如图 1-61 所示 实训 3 绘制书桌 图 1-61 讲台桌明暗效果 实训目的 : 熟练掌握 Flash 常用绘图工具, 掌握并运用透视原理 操作要求 : 要求绘制的桌子有立体感, 透视把握合理 技能点拨 : 使用 矩形工具 绘制书桌的外轮廓, 使用 颜料桶工具 上色, 再使用 线 条工具 结合 选择工具 绘制光影分界线, 并填充阴影色 科学出版社职教技术出版中心 19

26 单元 1 绘图基础 实训步骤 01 新建一个图层, 命名为 书桌, 在舞台上绘制两个矩形, 填充色为 #946800, 排列成桌面的样子, 如图 1-62 所示 02 按住 Alt 键同时拖动上面的小矩形, 复制一个矩形, 使用 任意变形工具 Q, 然后按住 Alt + Shift 键的同时拖动右上角的变形点向中间拖动进行透视变形, 如图 1-63 图 1-62 桌面效果所示 图 1-63 桌面透视变形效果 03 使用 矩形工具 R 和 线条工具 N 绘制书桌的两条桌脚, 如图 1-64 所示 04 选择绘制好的两条桌脚, 复制一份到空白位置, 选择 修改 变形 水平翻转 命 令将桌脚水平翻转, 然后移动到合适的位置, 如图 1-65 所示 图 1-64 绘制桌脚 图 1-65 对称复制桌脚 05 选中图 1-65 并按 Ctrl + G 组合键进行书桌组合 06 利用绘制书桌类型的方法绘制椅子, 过程如图 1-66 所示 07 选中椅子并按 Ctrl + G 组合键进行组合, 将其移动到书桌前, 如图 1-67 所示 图 1-66 绘制椅子过程 图 1-67 排列桌椅 08 根据步骤 1~7 的方法, 绘制其他角度的书桌, 效果如图 1-68 所示 20

27 绘制建筑 : 教室 1.3 图 1-68 绘制水平对称的书桌 09 在教室中, 将讲台桌 书桌排列在合适的位置, 如图 1-69 所示 图 1-69 排列教室内的物品 小贴士 借助辅助线绘制左右对称, 进行水平翻转, 如图 1-70 所示 实训 4 绘制日光灯 图 1-70 设置水平翻转 实训目的 : 熟练掌握 Flash 常用绘图工具 操作要求 : 要求绘制日光灯的样子 技能点拨 : 使用 矩形工具 绘制日光灯及灯箱, 使用 颜料桶工具 上色 科学出版社职教技术出版中心 21

28 单元 1 绘图基础 实训步骤 01 新建一个图层, 命名为 日光灯, 使用 矩形工具 线条工具 绘制日光灯灯管的轮廓, 然后选中灯管将其组合, 如图 1-71 所示 图 1-71 日光灯灯管效果 02 绘制一个矩形, 运用 任意变形工具 将矩形变成上窄下宽的梯形灯罩, 如图 1-72 所示, 接着选中灯罩并组合 图 1-72 绘制灯罩过程 03 所示 绘制一个矩形, 填充深紫色 (#6900FF) 并组合, 最后调节上下层次, 如图 使用 线条工具 图 1-73 组合灯罩和灯管 N 绘制日光灯的吊线, 如图 1-74 所示 图 1-74 日光灯最终效果 05 选中并组合日光灯的所有部分, 复制并排列日光灯, 效果如图 1-75 所示 图 1-75 排列日光灯后效果 22

29 绘制建筑 : 教室 1.3 实训 5 绘制教室光线实训目的 : 熟练掌握 Flash 常用绘图工具, 掌握并运用透视原理 操作要求 : 要求绘制光影及透视把握合理 技能点拨 : 使用 线条工具 绘制窗外的光线, 使用 颜料桶工具 上色 实训步骤 01 新建一个图层, 命名为 光线, 从窗口绘制阳光的外轮廓, 如图 1-76 所示 图 1-76 绘制窗口的阳光外轮廓 02 填充白色纯属渐变, 从 0%~40%, 如图 1-77 所示 03 图 1-77 填充光线效果 用前面学习的方法绘制教室内桌椅光影, 效果如图 1-78 所示 科学出版社职教技术出版中心 23

30 单元 1 绘图基础 图 1-78 教室内桌椅光影效果 根据学习的透视原理, 绘制卧室, 效果如图 1-79 所示 图 1-79 卧室效果 1.4 绘制卡通动物 : 可爱的长颈鹿 实训目的 : 熟练 Flash 常用绘图编辑工具, 掌握卡通动物的绘制方法 操作要求 : 要求绘制的长颈鹿比例协调, 神气可爱, 如图 1-80 所示 技能点拨 : 使用 线条工具 绘制长颈鹿的轮廓结构, 再使用 选择工具 进行线条调整, 使用 线条工具 绘制长颈鹿的角及尾巴等细节, 使用 颜料桶工具 上色, 最后使用 线条工具 结合 选择工具 绘制光影分界线, 使用 颜料桶工具 上色 图 1-80 长颈鹿效果实训步骤 01 使用 线条工具 N 在舞台上绘制一个长颈鹿的外轮廓, 如图 1-81 所示 24

31 绘制卡通动物 : 可爱的长颈鹿 使用 选择工具 V 修整各部分造型, 使线条圆润, 如图 1-82 所示 图 1-81 长颈鹿的外轮廓 图 1-82 修整后的外轮廓 03 新建图层, 使用 线条工具 N, 绘制长颈鹿的角和尾巴, 封闭角和尾巴, 避免之后无法填充颜色 再使用 椭圆工具 O 绘制长颈鹿背部的圆圈, 如图 1-83 所示 04 使用 选择工具 使用 椭圆工具 使用 颜料桶工具 图 1-83 细化长颈鹿的头部和尾巴 O 在长颈鹿身上绘制圆圈, 并且绘制长颈鹿的眼睛, 然后 V 选中多余的部分圆圈, 删除它们, 如图 1-84 所示 K 为长颈鹿填充基本色, 如图 1-85 所示 使用 线条工具 N, 设置笔触色为亮蓝色 (#33CC99), 画出明暗交界线, 为其填充较暗的颜色, 分出层次, 如图 1-86 所示 科学出版社职教技术出版中心 图 1-84 丰富长颈鹿身体的其他细节图 1-85 为长颈鹿填充基本色图 1-86 绘制明暗交界线 25

32 单元 1 绘图基础 07 删除明暗交界线, 最终效果如图 1-80 所示 根据学习的绘制动物技法绘制一只树熊, 效果如图 1-87 所示 图 1-87 树熊效果 1.5 绘制卡通人物 :Q 版人物 在所有绘画中, 人物绘画是最难把握的, 而人物绘画中的重点仍是形的把握 因此, 要想设计栩栩如生的动画人物, 首先必须掌握人物绘画的基础, 如人体的结构 比例及各部分的画法, 才能做到灵活运用 下面主要以 Q 版角色人物的特点为例进行介绍 1. 角色特点 Q 版人物有很多种性格类型, 根据外形风格来划分, 一般分为欧美风格和日系风格两大种类 一般的 Q 版人物主要的特点就是大头 窄肩 短手 短脚 脸型夸张而可爱 脸和眼睛大 嘴巴小且可爱 下半身一般比较瘦小, 如图 1-88 所示 图 1-88 Q 版角色 26

33 绘制卡通人物 :Q 版人物 1.5 实际 Q 版角色绘画中具有个性特点的角色在设计时要大胆地夸张人物特有的特点, 大胆地 表现, 如图 1-89 所示 2. 身体结构比例 图 1-89 Q 版卓别林 在绘制 Q 版人物的时候有一定的头身比例范围, 一般是用 2 头身到 4 头身来表现 婴儿 : 胖乎乎 圆墩墩的, 头显得特别大, 宽额头, 看不到脖子, 身长是等分, 脚要短些 儿童 : 头较大, 手脚的线条较细而且比较短 年轻女性 : 线条比较细腻, 肩部略斜, 整体成曲线形, 腰部很细, 胸部隆起, 臀部较大, 脚踝较细 年轻男性 : 线条有力, 肩部较宽, 胸部成扇形, 腰比肩窄, 脖子较粗, 脚大 中年女性 : 要比年轻的女性更强调曲线, 眼睛略小, 微胖, 脚踝较粗 中年男性 : 比年轻男性略胖, 头发较稀疏 老年女性 : 弯腰驼背, 肩部略斜, 膝盖略微弯曲 老年男性 : 弯腰驼背, 两脚分开 略有弯曲, 肩部较窄, 若画上拐杖效果会更好 对头身比例进行变化就是改变人物的体型 通过把握人物的头身比例, 再结合人物特点可 以表现出各种不同的人物角色 图 1-90 以一家祖孙三代为例 图 1-90 一家人祖孙三代 Q 版风格头身比例图 科学出版社职教技术出版中心 27

34 单元 1 绘图基础 3. 头部五官比例在绘制 Q 版人物的脸部时, 脸部的线条会越来越圆润, 根据角色自有的风格, 可以运用各种多边形转变的脸型 虽然人会有男女老少的区别, 但头部五官的比例基本上是一致的, 只要学过绘画的朋友都听过 三庭五眼, 这就是我们头部的五官比例, 如图 1-95 所示 三庭 : 发际线到眉线 = 眉线到鼻底线 = 鼻底线到颚底线, 这 3 部分的距离大致相等 五眼 : 外眼角到耳屏的距离 = 两眼之间的距离 = 一个眼睛的长度, 正面看人的头部宽度是 5 个眼睛的距离 而眼睛的位置在写实头部的比例中正好是从头顶到颚底的 1/2 处, 耳朵的位置大致在眉线和鼻底线之间 4. 脸部结构特点女性 : 眼睛大致在脸部 1/2 的位置 眼睛大大的, 唇 眉 下巴的线条越柔和越有女人味, 如图 1-91 所示 男性 : 眼睛在脸部 2/3 的部位 眼睛细细的, 口 鼻较大, 下巴的线条较粗犷, 眉毛粗一点比较有男人味, 如图 1-92 所示 图 1-91 三庭五眼 示意图 图 1-92 男女脸部结构 幼儿 : 五官都集中在脸部下半部 1/2 的部位, 如图 1-93 所示 儿童 : 眼睛大大的, 口 鼻小小的, 眼睛的位置在脸部 1/2 以下的部位, 下巴的曲线是圆的, 眼睛和眉毛的位置距离远, 如图 1-93 所示 中年人 : 眼睛比年轻人的要细小, 而且眼睛和嘴的周围有细小的皱纹, 男人的脸部块面分明, 女人的脸部则稍微丰满些, 如图 1-94 所示 图 1-93 婴幼儿脸部结构 图 1-94 中年人脸部结构 28

35 绘制卡通人物 :Q 版人物 1.5 老年人 : 脸部的骨骼最为凸出, 女人则稍为丰满些, 他们的口 眼 鼻四周都有很明显的 皱纹, 一般来说眼睛都是细细的, 如图 1-95 所示 5. 面部轮廓的画法 在绘制卡通人物时也会采用夸张 对比 增减等方法来突出表现它们的不同 脸形大至分为方块形 三角形 梨形 菱形 圆形等几种, 如图 1-96 所示 由这几种基本形状衍生出更多的形状, 如圆形可分为正圆 月形 角度圆等 3 种形状, 三角形有正三角与不等边三角之分 图 1-95 老年人脸部结构 图 1-96 卡通面部轮廓 6. 眼睛的画法眼睛是心灵的窗户, 它在角色塑造中是一大关键点, 一双精致且带有丰富情感表现的眼睛能够为角色增添魅力, 也能与其他角色区分开来 而 Q 版的眼睛与一般漫画的眼睛是有区别的, 如何变形就是塑造角色的关键 制作眉毛和眼眶, 如图 1-97 所示 添加眼球 要把眼球的位置放得稍微靠上一点, 去掉眼球的多余部分, 然后画出眼 白的轮廓线 这里绘制轮廓线是为了填充眼白时方便, 轮廓线最后要被删掉, 如图 1-98 所示 03 图 1-97 眉毛和眼眶效果图 1-98 绘制眼球 填充颜色 用以深蓝色为主调的球状渐变填充, 用线性渐变填充效果做出眼白, 为 眼球添加反光, 这样就可以达到 水灵灵的大眼睛 效果了, 再做一点修饰, 可以为眼睛补充 一个瞳孔, 如图 1-99 所示 科学出版社职教技术出版中心 29

36 单元 1 绘图基础 7. 嘴部的画法在漫画里, 嘴巴算是比较容易表现的部位, 有时候只需要一条直线就可以表现出来了 如果要绘制张开的嘴巴, 就一定要知道嘴巴里面的构造 : 牙齿 舌头和咽部 一般来说, 在卡通画中不会画出牙龈和咽部, 也不会画出牙齿的具体形状, 如图 所示 图 1-99 填充和丰富眼睛 图 嘴部表现手法 8. 表情的画法表情是人类表现内心世界的媒介, 也是在人物创作过程中, 如何将动画中的人物变成有血有肉的生命的大问题 角色的魅力不只是有一张出众的面孔, 更多的时候取决于精彩而丰富的表情 脸部表情的变化是刻画人物的关键, 通过人物的面部表情, 可以使欣赏者了解人物内心的感受 丰富的表情富有极大的魅力, 可以让动画达到锦上添花的效果 人物最常用的面部表情有微笑 大笑 愤怒 悲伤 哭泣 疲惫 惊讶 不安 害羞等 笑的特点 : 眉毛和嘴角弯弯的, 弯的幅度与笑的程度成正比 怒的特点 : 眉毛紧拧, 眼睛和眉毛挤在一起, 眉梢向上挑起, 嘴角向反方向弯曲 哭的特点 : 眉毛和眼角搭拉下来, 脸上挂着泪水 画脸部表情, 最好的方法是先从模仿别人的作品开始 平时还要多注意观察, 在绘画时要倾注感情, 才能画好各种表情, 如图 所示 图 表情的表现 9. 手脚的画法我们的工作离不开手, 如果说头脑是一个方向, 手则是这个方向的实现者 以前在画素描的时候总觉得人体的所有部位当中, 手是最难表现的, 长短要适当, 而且手指变化不灵活, 使得画出来的手指显得怪模怪样, 状态很难把握 但在卡通制作中, 我们已经将其简化, 也就是卡通常用的 四指之手, 通常人物都是 5 个手指, 卡通简化成 4 个手指后, 也具有相同的表现 30

37 绘制卡通人物 :Q 版人物 1.5 力, 而且绘制起来简单灵活 用四指手指的手来表现不同的情况, 如图 所示 图 手的绘制技法 实训目的 : 熟练 Flash 常用绘图编辑工具, 掌握卡通人物的绘制方法 操作要求 : 要求绘制的 Q 版人物比例协调, 神气可爱, 如图 所示 技能点拨 : 使用 椭圆工具 线条工具 结合 选择工具 绘制头 眼睛 耳朵, 再使用 线条工具 结合 选择工具 绘制人体其他部分, 使用 颜料桶工具 上色, 最后使用 线条工具 绘制光影分界线, 使用 颜料桶工具 上色 图 Q 版人物效果 实训步骤 01 按 Ctrl + G 组合键新建组, 使用 椭圆工具 O 绘制头的轮廓, 设置笔触颜 色为褐色 (#4B1701), 大小为 2, 无填充色, 如图 所示 图 笔触设置对话框 02 使用 线条工具 N 结合 选择工具 V 制作左耳朵, 按住 Alt 键拖动 复制右耳朵, 选择 修改 变形 水平翻转 命令, 再使用 选择工具 V 调整形状, 如图 所示 图 绘制耳朵 科学出版社职教技术出版中心 31

38 单元 1 绘图基础 小贴士 1) 耳朵的绘制可以用复制 / 粘贴的方法, 这样可以达到完全的对称 2)Flash 复制 / 粘贴的快捷方法 : 按住 Alt 键不放, 同时将复件从原体身上拖出, 然后 放开鼠标再放开 Alt 键 03 使用 线条工具 N 结合 选择工具 V 绘制女孩的发际, 如图 所示 04 使用 椭圆工具 O 线条工具 N 和 选择工具 V 绘制女 孩的五官, 如图 和图 所示 图 女孩的发际效果 图 绘制眼睛过程 所示 05 使用 线条工具 N 和 选择工具 V 绘制辫子的基本形状, 如图 图 绘制鼻子和嘴巴 图 绘制辫子 小贴士 借助这样的发型也可以展示人物性格 06 双击空白位置退出编辑组状态, 按 Ctrl + G 组合键新建组, 使用 线条工具 N 和 选择工具 V 绘制裙子, 如图 所示 07 使用 线条工具 N 和 选择工具 V 绘制女孩的两只手臂, 如图 所示 32

39 绘制卡通人物 :Q 版人物 1.5 图 绘制裙子 图 绘制手臂 08 双击空白位置退出编辑组状态, 按 Ctrl + G 组合键新建组, 使用 线条工具 N 和 选择工具 V 绘制双腿, 如图 所示 小贴士 图 绘制双腿 所示 腿的绘制可以用复制 / 粘贴的方法, 这样可以达到完全的对称 在完成的线稿上定出人物各部分的基本颜色, 并使用 颜料桶工具 上色, 如图 使用 刷子工具 图 给女孩填充基本色 B 在人物脸颊两侧刷出粉色红晕, 如图 所示 科学出版社职教技术出版中心 图 绘制脸上的红晕 33

40 单元 1 绘图基础 11 使用 铅笔工具 Y, 设置笔触色为绿色 (#8CD337), 绘制人物各部分的明暗交界线 然后在暗面填充较暗的颜色, 分出层次, 突出人物的立体感, 如图 所示 12 删除明暗交界线, 最终效果如图 所示 图 绘制明暗交界线 根据学习的人物绘制技法, 绘制小男生, 效果如图 所示 图 小男生效果 1.6 绘制卡通人物三视图 :Q 版人物转身 实训目的 : 掌握角色各视图的绘制方法和技巧 操作要求 : 人物绘制的效果真实, 角度合理, 如图 所示 技能点拨 : 使用 标尺 绘制辅助线, 参照正面视图调整或重新绘制 45 和 90 的视图 图 Q 版人物转身效果 34

41 绘制卡通人物三视图 :Q 版人物转身 1.6 实训步骤 01 打开图 1-103, 按 Ctrl + Alt + Shift + R 组合键打开标尺, 根据人物头顶 脚底及人物左右边界从标尺上拖出辅助线 接着按住 Alt 键, 在右侧复制另一个女孩, 如图 所示 02 选中女孩的五官, 按住键盘左键向左移动, 根据人物透视将女孩的左眼和脸上的红晕使用 任意变形工具 Q 调整得扁一点, 如图 所示 图 复制女孩 图 变形面部五官 03 所示 04 所示 使用 选择工具 V 调整女孩的头发, 再将女孩的耳朵向右移动, 如图 使用 选择工具 V 将女孩的衣领和裙子上的口袋向左调整, 如图 图 移动耳朵 05 使用 选择工具 完成了, 如图 所示 06 图 左移衣领和口袋 科学出版社职教技术出版中心 V 对女孩的手臂和腿进行调整, 这样女孩的 45 侧面图就 选中 45 侧面, 按住 Alt 键拖出另一个女孩, 作为女孩 90 的侧面图, 如图 所示 35

42 单元 1 绘图基础 图 调整手臂和两腿 图 复制 45 侧面女孩 07 使用 选择工具 V 将女孩的五官向左移动, 将一只眼睛删掉, 对鼻子和嘴巴进行修改, 如图 所示 08 将女孩的左耳删掉, 使用 线条工具 N 和 选择工具 V 绘制女孩侧面的头发, 并调整女孩的辫子, 如图 所示 图 修改鼻子和嘴巴 图 调整女孩的辫子 09 使用 线条工具 N 和 选择工具 V 绘制女孩的裙子, 如图 所示 10 将女孩的左手删掉, 使用 线条工具 N 和 选择工具 V 绘制女孩 的手臂和两腿, 如图 所示 图 绘制女孩裙子 图 绘制女孩的手臂和两腿 36

43 绘制卡通人物三视图 :Q 版人物转身 最终效果如图 所示 根据学习的 Q 版人物三视图的绘制方法, 尝试绘制小猴子的三视图, 效果如图 所示 图 小猴子的三视图 科学出版社职教技术出版中心 37

44 2 单元 2 逐帧动画 单元导读逐帧 (frame by frame) 动画是一种常见的动画形式, 其原理是在 连续的关键帧 中分解动画动作, 也就是在时间轴的每帧上逐帧绘制不同的内容, 使其连续播放而形成动画 由于逐帧动画的帧序列内容不一样, 不仅给制作增加了负担, 而且最终输出的文件量也很大, 但它的优势也很明显 : 逐帧动画具有非常大的灵活性, 几乎可以表现任何想表现的内容, 而且它类似于电影的播放模式, 很适合表演细腻的动画, 如人物或动物急剧转身 头发及衣服的飘动 走路 说话及精致的 3D 效果等 通过学习制作简单的逐帧动画, 理解逐帧动画的原理, 了解 Flash 中帧的 3 种类型, 掌握帧的操作, 能够应用逐帧动画的方式制作一些简单效果 学习目标 了解 Flash 中 3 种帧的操作 掌握创建逐帧动画的几种方法 能够制作简单的逐帧动画 学习任务 用导入的静态图片建立逐帧动画 : 小鹿奔跑 绘制矢量逐帧动画 : 人物走路 文字逐帧动画 : 打字效果

45 用导入的静态图片建立逐帧动画 : 小鹿奔跑 用导入的静态图片建立逐帧动画 : 小鹿奔跑 1. 时间轴的构成在所有的动画制作软件中, 时间轴是制作动画的核心, 所有的动画顺序 动作行为 控制命令及声音都在时间轴中进行编排 时间轴是对帧和图层操作的区域, 主要作用是组织和控制动画在一定时间内播放的图层数和帧数, 并可以对图层和帧进行编辑 时间轴 面板位于工作场景的上方, 主要分为图层编辑区 帧编辑区 辅助工具栏及状态栏, 面板的右侧有一个展开菜单按钮, 如图 2-1 所示 图 2-1 时间轴 面板 时间轴 面板中主要的组成部分 : 1) 帧编辑区 : 帧是动画最基本的单位, 大量的帧结合在一起就构成了时间轴 帧编辑区的主要作用就是控制 Flash 动画的播放和对帧进行编辑 2) 播放头 : 时间轴中红色的指针被称为播放头, 它被用来指示当前所在帧 在舞台中按 Enter 键, 即可在编辑状态下运行影片, 此时播放头也会随着影片播放而向右侧移动, 指示播放到的位置 3) 移动播放头 : 如果正在处理大量的帧, 所有的帧无法一次全部显示在时间轴上, 则拖动播放头沿着时间轴移动, 即可定位到目标帧 拖动播放头时, 它会变成黑色竖线 4) 播放头的移动范围 : 播放头的移动是有一定范围的, 最远只能移动到时间轴定义过的最后一帧, 不能将播放头移动到未定义过帧的时间轴范围内 5) 图层编辑区 : 图层在动画中起到了很重要的作用, 由于动画都是由多个图层组成的, 因此可以在图层编辑区进行插入图层 删除图层 更改图层叠放次序等操作 6) 辅助工具栏及状态栏 : 位于时间轴的最下方, 其中包括基本操作工具和对帧进行编辑时用到的辅助工具及状态信息 在状态栏中将显示所选的帧编号 当前帧频及当前帧为止的运行时间, 如图 2-2 所示 图 2-2 辅助工具栏及状态栏 科学出版社职教技术出版中心 39

46 单元 2 逐帧动画 7) 展开菜单按钮 : 单击 时间轴 面板右侧的展开菜单按钮, 弹出下拉菜单, 如图 2-3 所示 在该下拉菜单中可以对 时间轴 面板的显示方式等进行设置 2. 帧的类型帧就是将连续动画均匀地划分为一系列各个时刻的静态画面 在 Flash CS5 中默认的情况下, 每秒动画被划分为 24 份, 每一帧在播放的时候显示为 1/24 秒 人眼难以觉察如此短暂的时间间隔, 因此所看到的动画就是连续的画面 Flash 动画制作就是采用这个原理, 将一个个静止的画面利用帧连接起来, 形成栩栩如生的动画 Flash 中帧的类型有 3 种, 如图 2-4 所示 图 2-3 展开的下拉菜单 图 2-4 帧的类型 (1) 普通帧普通帧就是不起关键作用的帧, 其中的内容与它前面关键帧的内容相同, 起着过渡和延长内容显示的功能 在时间轴中普通帧以空心矩形或单元格表示, 按 F5 键可创建普通帧 在一幅动画中增加普通帧的帧数可延长动画的播放时间 小贴士普通帧起到关键帧之间的缓慢过渡作用 在制作动画时, 如果想延长动画的播放时间, 可以在动画中添加普通帧, 以延续上一个关键帧的内容, 所以普通帧又称延长帧 另外, 普通帧上不可以添加帧动作脚本 (2) 关键帧关键帧是指在动画播放过程中, 呈现出关键性动作或内容变化的帧 关键帧定义了动画关键的变化环节, 在时间轴中用小圆圈来表示, 如果关键帧中有内容则以一个黑色的实心圆圈来表示, 按 F6 键可以创建关键帧 小贴士利用关键帧的方法制作动画, 可以大大简化制作过程 只要确定动画中的对象在开始和结束两个时间的状态, 并为它们绘制开始和结束帧,Flash 会自动通过插帧的方法计算生成中间帧的状态 由于开始帧和结束帧决定了动画的两个关键帧状态, 所以它们被称为关键帧 (3) 空白关键帧空白关键帧中没有内容, 主要用于在画面与画面之间形成间隔 空白关键帧用空心的小圆圈表示, 一旦在空白关键帧中创建了内容, 空白关键帧就会变为有内容的关键帧, 按 F7 键可以 40

47 用导入的静态图片建立逐帧动画 : 小鹿奔跑 2.1 创建空白关键帧 3. 帧在时间轴中的表示方法在 Flash 中, 不同的动画形式其帧的显示状态也有所不同, 因此通过时间轴中帧的不同表示, 就可以区别该动画是哪类动画或哪类状况 当时间轴中有连续的关键帧出现时, 表示该动画为创建成功的逐帧动画, 如图 2-5 所示 当开始关键帧和结束关键帧用一个黑圆点表示, 中间补间帧为淡紫色背景并被一个黑色箭头贯穿时, 表示该动画为设置成功的传统补间动画, 如图 2-6 所示 图 2-5 创建成功的逐帧动画 图 2-6 设置成功的传统补间动画 当起始关键帧和结束关键帧用一个黑圆点表示, 中间补间帧为淡绿色背景并被一个黑色箭头贯穿时, 表示该动画为设置成功的形状补间动画, 如图 2-7 所示 当起始关键帧用一个黑圆点表示, 结束关键帧为一个黑色小菱形表示, 中间补间帧为淡蓝色背景时, 表示该动画为设置成功的补间动画, 如图 2-8 所示 图 2-7 设置成功的形状补间动画图 2-8 设置成功的补间动画 当起始关键帧和结束关键帧之间显示为一条无箭头的虚线时, 表示该动画创建不成功, 如 图 2-9 所示 所示 图 2-9 创建失败的动画 当关键帧上添加了 a 标记, 表示该关键帧已被添加脚本语句, 如图 2-10 所示 科学出版社职教技术出版中心 当关键帧上有一面小红旗或两条斜杠标记, 表示该关键帧被添加了标签或标注, 如图

48 单元 2 逐帧动画 图 2-10 已被添加脚本语句的关键帧 图 2-11 已被添加标签或标注的关键帧 4. 绘图纸工具 绘图纸工具 也称为 洋葱皮工具, 它不是用来直接绘图的, 而是为绘图提供某些方便的工具 其可以同时显示一定范围的多帧, 可以理解为是让多帧同时显示的工具, 或者是同时查看多个帧的工具 因为它能多帧同时显示, 所以就为绘图提供了方便 (1) 绘图纸工具的位置时间轴左下方, 依次为绘图纸外观 绘图纸外观轮廓 编辑多个帧 修改绘图纸标记 (2)4 个子工具的作用 1) 绘图纸外观 : 打开后, 显示播放指针两旁多帧的范围 其范围可以调整, 按住范围 开始 或 结束 位置往两边拖动 当多帧层叠显示时, 当前帧以正常颜色显示, 可以编辑 ; 其他帧以模糊颜色显示, 不可编辑 2) 绘图纸外观轮廓 : 多帧画面以轮廓线的形式显示出来 3) 编辑多个帧 : 可以同时编辑多个关键帧 4) 修改绘图纸标记 : 1 始终显示标记 : 无论 绘图纸外观 是否打开, 总是显示外观标记 2 锚定标记 : 外观标记范围不随播放的改变而改变 3 标记 2 标记 5 标记整个范围: 表示当前帧两边各显多少帧 5. 逐帧动画逐帧动画是指在每个帧上都有关键性变化的动画, 它由多个关键帧组合而成 逐帧动画需要更改每一帧中的舞台内容, 并保存每个完整帧的值 因此, 对于相同帧数的动画, 逐帧动画比其他类型动画的文件要大得多 其 时间轴 面板如图 2-12 所示 6. 创建逐帧动画的几种方法 图 2-12 逐帧动画的 时间轴 画板 1) 用导入的静态图片建立逐帧动画 : 用 JPG PNG 等格式的静态图片连续导入 Flash 中, 42

49 用导入的静态图片建立逐帧动画 : 小鹿奔跑 2.1 就会建立一段逐帧动画 2) 绘制矢量逐帧动画 : 用鼠标或压感笔在场景中一帧帧地画出帧内容 3) 文字逐帧动画 : 用文字做出帧中的元件, 实现文字跳跃 旋转等特效 4) 导入序列图像 : 以导入 gif 序列图像 swf 动画文件或利用第三方软件 ( 如 swish swift 3D 等 ) 产生的动画序列 实训目的 : 熟悉 Flash 中帧的操作, 掌握洋葱皮工具的使用方法 操作要求 : 初步掌握用导入的静态图片建立逐帧动画的方法 技能点拨 : 首先导入草地背景图片, 再新建图层, 导入小鹿奔跑序列图, 通过洋葱皮工具和 变形工具 调整小鹿的大小和位置, 最后通过延长帧来调整时间和节奏, 效果如图 2-13 所示 图 2-13 小鹿奔跑效果 实训步骤 01 导入背景素材并调整其大小位置 新建一个 Flash 文档, 将背景图片 \ 素材与源文件 \ 单元 2 逐帧动画 \2.1 用导入的静态图片建立逐帧动态 : 小鹿奔跑 \ 素材 \ 草地.jpg 素材导入到舞台上, 调整舞台的大小与背景图片相同, 将图片对齐舞台, 如图 2-14 所示 在第 11 帧处按 F5 键, 将帧延长到第 11 帧 图 2-14 草地背景 02 新建图层并重命名为 奔跑, 选择 文件 导入 导入到舞台 命令, 选中 素材与源文件 \ 单元 2 逐帧动画 \2.1 用导入的静态图片建立逐帧动态 : 小鹿奔跑 \ 素材 \ 小鹿奔跑序列图 \10001.png 图片, 会弹出是否导入序列图片对话框, 单击 确定 按钮导入图片序列, 如图 2-15 所示 科学出版社职教技术出版中心 43

50 单元 2 逐帧动画 图 2-15 导入图片序列 03 使用洋葱皮工具和 任意变形工具 同时调整奔跑图层中所有帧上图像的大小, 如图 2-16 所示 04 通过测试动画发现, 小鹿奔跑的节奏令人还很不满意, 接下来, 在关键帧 4~10 帧后各插入一个普通帧来调整动画节奏, 在图层 1 的第 18 帧处按 F5 键插入普通帧延长背景, 反复测试动画直到令人满意为止, 如图 2-17 所示 图 2-16 调整图像大小 图 2-17 调整动画节奏 2.2 绘制矢量逐帧动画 : 人物走路 1. 人物侧面行走的基本运动规律人物侧面行走时, 左右两脚交替向前, 带动躯干朝前运动 为了保持身体的平衡, 配合两条腿的屈伸 跨步, 上肢的双臂就需要前后摆动 人在走路时为了保持重心, 总是一腿支撑, 另一腿才能提起跨步 因此, 在走路动作的过程中, 头顶的高低必然呈波浪状 当迈出步子双脚着地时 ; 头顶就略低, 当一脚支地另一只脚抬起朝前弯曲时, 头顶就略高 介于两者之间的动画就取它们之间的中割高度 另外, 走路动作的过程中, 跨步的那条腿, 从离地到朝前伸展 44

51 绘制矢量逐帧动画 : 人物走路 2.2 落地, 中间的膝关节必然呈弯曲状, 脚踝与地面呈弧形运动线 这条弧形运动线的高低幅度, 与走路时的神态和情绪有很大关系 还要注意脚与地面的关系 2. 日式行走动作分析日式行走动作分析如图 2-18 所示 图 2-18 日式行走动作分析 注意 : 以双脚迈开的原画张走路高度为标准 ( 图 2-18 中 1 和 5), 行走中的中间张 (3) 的高度高于原画张的高度 ; 走路中割张 ( 图 2-19 中 2 和 4) 的高度属于中割动画,6 和 8 相同于 2 和 4 的高度 实训目的 : 制作人物侧面走路动画 操作要求 : 掌握绘制矢量逐帧动画的方法 技能点拨 : 根据人物侧面行走的规律依次绘制走路中动作, 掌握动画中割的方法 人物的行走动作参考如图 2-19 所示, 最终效果如图 2-20 所示 图 2-19 人物侧面行走动作分析 职教技术出版中心 图 2-20 人物走路效果科学出版社 45

52 单元 2 逐帧动画 实训步骤 01 设置一条参考线作为地面, 在第 1 帧上绘制人物侧面走路的第 1 个关键动作, 分别将头 身子 左手 右手 左腿 右腿组合, 叠放次序如图 2-21 所示 02 绘制人物侧面走路的第 5 个关键动作 在第 5 帧处按 F6 键插入关键帧, 并调整左手 右手 左腿 右腿的动作, 如图 2-22 所示 图 2-21 第 1 帧上的动作 图 2-22 第 5 帧上的动作 03 绘制人物侧面走路的第 3 个关键动作 在第 3 帧处按 F6 键插入关键帧, 使用洋葱皮工具观察第 1 帧和第 5 帧的动作, 根据观察到的动作调整左手 右手 左腿 右腿的动作, 如图 2-23 所示 再将人物整体向上移动一小段距离 04 绘制人物侧面走路的第 2 个关键动作 在第 2 帧处按 F6 键插入关键帧, 使用洋葱皮工具观察第 1 帧和第 3 帧的动作, 根据观察到的动作调整左手 右手 左腿 右腿的动作, 如图 2-24 所示 05 绘制人物侧面走路的第 4 个关键动作 在第 4 帧处按 F6 键插入关键帧, 使用洋葱皮工具观察第 3 帧和第 5 帧的动作, 根据观察到的动作调整左手 右手 左腿 右腿的动作, 如图 2-25 所示 图 2-23 第 3 帧上的动作图 2-24 第 2 帧上的动作图 2-25 第 4 帧上的动作 06 用同样的方法绘制第 6~8 帧上的动作, 如图 2-26 所示 46

53 文字逐帧动画 : 打字效果 2.3 第 6 帧 第 7 帧 第 8 帧 图 2-26 第 帧上的关键动作 07 调整时间和节奏 在每个关键帧后插入 2 个普通帧进行延长 调整 时间轴 面板如图 2-27 所示 图 2-27 调整 时间轴 面板 2.3 文字逐帧动画 : 打字效果 实训目的 : 掌握文字逐帧动画的制作方法 操作要求 : 掌握文本工具的使用及帧的基本操作 技能点拨 : 先要制作光标 ( 用字符下划线表示 ) 并闪烁两次 在制作打字效果时, 先显示 第一个字符, 然后依次新建关键帧, 每次比上一帧多显示一个字符, 完成所有字符的显示后, 再将光标闪烁几次 最终效果如图 2-28 所示 图 2-28 打字效果 科学出版社职教技术出版中心 47

54 单元 2 逐帧动画 实训步骤 01 启动 Flash, 新建一个文件, 将文档大小设置成宽为 390 像素 高为 150 像素, 并将 帧频 设置为 3fps, 如图 2-29 所示 02 按 Ctrl + R 组合键, 将素材 \ 素材与源文件 \ 单元 2 逐帧动画 \2.3 文字逐帧动画 : 打字效果 \ 素材 \QQ 对话框.jpg 导入到舞台, 将图层 1 重命名为 背景 在 19 帧处按 F5 键插入普通帧, 将第 1 帧上的内容延长到第 19 帧, 并将 背景 图层锁定, 如图 2-30 所示 图 2-29 设置文档属性 图 2-30 背景 图层 03 单击工具箱中的 文本工具 按钮, 在 属性 面板中设置字体为宋体, 字体大小为 18 点, 字体颜色为黑色, 如图 2-31 所示 04 在舞台左侧输入字符 _, 单击第 3 帧, 按 F6 键插入关键帧, 如图 2-32 所示 图 2-31 文本属性 图 2-32 插入关键帧 单击第 2 帧, 按 F7 键插入空白关键帧, 时间轴 面板如图 2-33 所示 单击第 5 帧, 按 F6 键插入关键帧, 然后单击第 4 帧, 按 F7 键插入空白关键帧, 实现光标闪烁两次的动画, 此时 时间轴 面板如图 2-34 所示 图 2-33 在第 2 帧插入空白关键帧图 2-34 制作光标闪烁两次动画 07 选中第 5 帧, 双击画面中的下划线字符 _, 进入文字编辑状态, 在该字符前插入文字 你, 显示出第 1 个文字 你 _, 如图 2-35 所示 48

55 文字逐帧动画 : 打字效果 单击第 6 帧, 按 F6 键插入关键帧, 单击文本框, 在文字 你 后输入文字 好, 如图 2-36 所示 图 2-35 制作 你 _ 文字出现动画 图 2-36 制作 你好 _ 文字出现动画 09 画面如图 2-37 所示 用同样的方法, 依次在下一帧中多输入一个文字, 直至将全部文字输入完毕, 此时 图 2-37 制作全部文字出现动画 依次在第 15~19 帧处按 F6 键插入关键帧, 编辑第 帧, 单击文本框, 将 这几个帧中的下划线字符 _ 删除, 这样就能再次制作光标闪烁两次的效果 所示 保存文件, 按 Ctrl + Enter 组合键, 预览动画效果 制作毛笔写字逐帧动画, 要求运笔自然, 动作连贯, 符合毛笔写字的规律, 效果如图 2-38 图 2-38 毛笔写字 效果 科学出版社职教技术出版中心 49

56 3 单元 3 补间动画 单元导读 Flash 中基本动画包括 3 种 : 补间动画 传统补间动画和形状补间动画 本单元主要讲解补间动画 补间动画是从 Flash CS4 开始新增加的一个创建动画的方法 新的补间动画集成了绝大部分传统补间动画的功能, 在可编辑性能上也更加丰富, 操作也更加方便 学习目标 了解掌握 Flash 基本工具的使用方法 了解用调整工具调整规则图形的轮廓的技巧 掌握绘制立体图形的方法和技巧 学习任务 移动 透明度 : 移动图片动画 颜色变化 : 变换文字的颜色 变形动画 : 弹簧动画 旋转动画 : 旋转的风车 3D 动画 :3D 舞台 骨骼动画 : 皮影动画

57 移动 透明度 : 移动图片动画 移动 透明度 : 移动图片动画 补间动画是通过为一个帧中的对象属性指定一个值, 并为另一个帧中相同对象的属性指定另一个值创建的动画 补间动画支持的对象类型有影片剪辑元件 图形元件 按钮元件和文本 如果操作的对象不属于以上类型, 将弹出如图 3-1 所示的提示框, 单击 确定 按钮后, 即按照默认的名称将帧中的对象转换成一个影片剪辑元件, 然后创建一个补间动画 图 3-1 补间提示框 可补间的对象属性 : 1)2D X 和 Y 位置 2)3D Z 位置 3)2D 旋转 ( 绕 Z 轴 ) 4)3D X Y 和 Z 旋转 5)3D 动画要求 FLA 文件在发布设置中面向 ActionScript 3.0 和 Flash Player10 6) 倾斜 X 和 Y 7) 缩放 X 和 Y 8) 颜色效果包括 Alpha( 透明度 ) 亮度 色调和高级颜色设置 只能在元件上补间颜色效果, 若要在文本上补间颜色效果, 需将文本转换为元件 9) 所有滤镜属性 补间范围是在时间轴上显示为具有蓝色背景的单个图层中的一组帧 可将这些补间范围作为单个对象进行选择, 并从时间轴中的一个位置拖到另一个位置, 包括拖到另一个图层 在每个补间范围中, 只能对舞台上的一个对象进行动画处理, 此对象被称为补间范围的目标对象 科学出版社职教技术出版中心 实训目的 : 了解 属性关键帧, 掌握补间动画的移动和透明度的制作 操作要求 : 要求能移动对象的位置, 对移动路径进行调整, 并能调整对象透明度 技能点拨 : 补间动画是快速应用针对 对象 的补间, 在制作补间动画的时候可以自动将选中的对象转换成元件 它的制作相对其他补间更加快速, 传统补间动画只能将对象之间的动作补充成直线的渐变, 而补间动画可以直接通过修改线条来修改补间运动轨迹 51

58 单元 3 补间动画 实训步骤 01 新建文件, 宽为 380 像素 高为 540 像素, 其他属性默认 02 导入 素材与源文件 \ 单元 3 补间动画 \3.1 移动 透明度 : 移动图片动画 \ 素材 目录下的 yxrw1.jpg yxrw2.jpg yxrw3.jpg 3 张图片到库中 03 将 yxrw1.jpg 拖动至舞台以外的左下侧, 如图 3-2 所示 04 在图层 1 的第 24 帧处按 F5 键插入普通帧, 在时间轴的灰色区域上右击, 在弹出的快捷菜单中选择 创建补间动画 命令, 此时 时间轴 面板如图 3-3 所示 图 3-2 图片拖动至舞台外 图 3-3 时间轴效果 小贴士 创建补间动画时会弹出如图 3-1 所示的对话框, 单击 确定 按钮, 然后自动转换为 名为 元件 1 的影片剪辑类的元件, 库 面板如图 3-4 所示 图 3-4 库 面板 05 下面制作一个图片运动到舞台的效果 在图层 1 的第 14 帧上右击, 在弹出的快捷菜单中选择 插入关键帧 全部 命令 使用 选择工具 将图片移动到舞台适当的位置, 如图 3-5 所示 可以看见舞台上会出现一条绿线, 这是图片的移动轨迹, 可以使用 选择工具 来调整它, 将移动路径调整得圆滑些, 如图 3-6 所示 52

59 移动 透明度 : 移动图片动画 3.1 图 3-5 移动图片到适当位置 图 3-6 调整路径 小贴士从 Flash CS4 开始, 新增加了 属性关键帧 的概念, 它是在补间动画的特定时间或帧中定义的属性值 通过如图 3-7 所示的 动画编辑器 面板, 可以查看所有补间属性及其属性关键帧, 还可以从补间范围中选择可以在时间轴中显示的属性关键帧类型 图 3-7 动画编辑器 面板 06 选中图层 1 的第 1 帧, 展开 动画编辑器 面板, 选择 色彩效果 Alpha 命令, 设置 Alpha 数量 选项值为 0 小贴士若没看见 Alpha 选项, 则单击右侧的按钮, 选择 Alpha 命令, 如图 3-8 所示 07 图 3-8 选择 Alpha 命令 选中图层 1 的第 14 帧, 展开 动画编辑器 面板, 选择 色彩效果 Alpha 命令, 设置 Alpha 数量 选项值为 选中图层 1 的第 24 帧, 展开 动画编辑器 面板, 选择 色彩效果 Alpha 命令, 设置 Alpha 数量 选项值为 100 科学出版社职教技术出版中心 53

60 单元 3 补间动画 09 按照步骤 3~8 的方法, 新建图层 2 和图层 3, 结合图片 yxrw2.jpg 和 yxrw3.jpg, 分别制作另外两张图片的运动效果, 此时 时间轴 面板如图 3-9 所示 图 3-9 时间轴效果小贴士图片可以从舞台的不同方向进入, 不用拘泥于本书的案例,3 个对象的运动路径采用不同的颜色表示 10 调整图层 2 图层 3 的时间轴位置, 并将 3 个图层的时间轴都延长到第 85 帧 时间轴效果如图 3-10 所示 图 3-10 调整时间轴 11 文件保存后, 按 Ctrl + Enter 组合键测试影片效果 运用所学的创建补间动画的方法制作 3D 小球的移动, 效果如图 3-11 所示 图 3-11 移动的小球效果 3.2 颜色变化 : 变换文字的颜色 虽然补间动画与传统补间动画相比在工作方式上有着极大的差别, 但它们之间的动画效果 54

61 颜色变化 : 变换文字的颜色 3.2 有很多是相互重合的 例如, 使用补间动画可以制作位移动画 色彩变化动画及路径引导动画等, 因此能够大大降低学习的难度 实训目的 : 了解 动作编辑器 面板中的 色彩效果 选项 操作要求 : 要求将文字打散后, 对文字做不同颜色的调整 技能点拨 : 本案例颜色的变换主要用到的是 动作编辑器 面板中 色彩效果 选项中的 色调 选项 若无法添加 色调 选项则是因为对象没有转换成元件 实训步骤 01 新建文件, 将图层 1 改名为 背景 使用 矩形工具 绘制一个和舞台一样大小的矩形, 填充线性渐变 单击第 96 帧, 按 F5 键将 背景 图层延长至第 96 帧 锁定 背景 图层, 如图 3-12 所示 02 用 文本工具 在舞台上输入文字 FLASH, 属性设置如图 3-13 所示, 让文字与舞台中央对齐 图 3-12 背景 图层效果图 3-13 属性设置 03 选中文字, 按 Ctrl + B 组合键将文字打散 再在时间轴上右击, 在弹出的快捷菜单 中选择 分散到图层 命令 时间轴效果如图 3-14 所示 图 3-14 文字打散后的图层 科学出版社职教技术出版中心 55

62 单元 3 补间动画 04 移动 背景 图层到最下方, 显示文字 在所有图层的第 120 帧处按 F5 键, 时间轴如图 3-15 所示 锁定其他图层, 留下 F 图层 图 3-15 调整图层 05 选中文字 F, 再次按 Ctrl + B 组合键, 将文字转换成图形 在 F 图层的时间轴上右击, 在弹出的快捷菜单中选择 创建补间动画 命令 在 F 图层的第 24 帧处按 F6 键创建关键帧, 时间轴如图 3-16 所示 图 3-16 创建补间动画小贴士 1) 创建 补间动画 时会提示是否要将图形转换成元件, 单击 确定 按钮即可 2) 在补间动画的时间轴上创建的关键帧是属性关键帧, 它和传统的关键帧不同, 要注意区别 06 展开 动画编辑器 面板, 选择 色彩效果 选项下的 色调 选项 将播放头放在第 1 帧上, 设置 色调数量 选项值为 0, 如图 3-17 所示 图 3-17 动画编辑器 面板 07 将播放头移动到第 24 帧处, 调整 着色 选项的颜色值为 #FF0000, 色调数量 选项值为 100, 如图 3-18 所示 56

63 颜色变化 : 变换文字的颜色 3.2 图 3-18 调整 色调 选项 08 返回 时间轴 面板 锁定 F 图层, 解锁 L 图层 按步骤 5~7 的方法操作 L 图层 第 24 帧处的 着色 选项的颜色可调整为橙色, 其他图层第 24 帧的 着色 选项的颜色分别为黄 绿 紫 舞台和时间轴效果如图 3-19 所示 09 图 3-19 舞台和时间轴效果 分别向后移动 L A S H 图层, 并以 H 图层为准, 将其他所有图层 的时间轴都延长到与之一样长 时间轴效果如图 3-20 所示 10 图 3-20 时间轴效果 按 Ctrl + Enter 组合键测试影片效果 利用颜色与透明度动画, 制作飞镖动画, 效果如图 3-21 所示 科学出版社职教技术出版中心 57

64 单元 3 补间动画 图 3-21 飞镖动画 3.3 变形动画 : 弹簧动画 当希望运动渐变不是按匀速进行时, 可以调节 缓动 选项 补间动画中设置正缓动值, 可以使动画以一定规律减速运动 可调数值在 0~100 设置负缓动值, 可以使动画以一定规律加速运动, 可调数值在 -100~0, 默认的缓动值为 0 实训目的 : 掌握 属性 面板中的 缓动 选项的设置 操作要求 : 要求制作弹簧的变形动画 技能点拨 : 变形动画的制作要注意变形点的调整 实训步骤 01 新建文件, 使用 矩形工具 在该图层上绘制一个与舞台同样大小的矩形并填充蓝色 02 打开 素材与源文件 \ 单元 3 补间动画 \3.3 变动动画 : 弹簧动画 \ 素材 \ 弹簧振子.fla 素材文件, 如图 3-22 所示 03 拖动 支架 元件到图层 1 在第 80 帧处按 F5 键, 时间轴 面板如图 3-23 所示 图 3-22 导入素材 图 3-23 支架 图层的 时间轴 面板 58

65 变形动画 : 弹簧动画 3.3 具 04 新建图层 2, 将 弹簧 元件拖入图层 2 中, 放置在支架的左侧 使用 任意变形工 将 弹簧 元件的中心点移至左侧, 紧贴支架, 并将弹簧变形成如图 3-24 所示的效果 图 3-24 调整 弹簧 元件 小贴士 中心点的移动是关键点, 若不移动到左侧, 变形时弹簧的左右两边将同时变形 05 图 3-25 所示 新建图层 3, 将 小球 元件拖入图层 3, 调整小球大小, 放置在弹簧的右侧, 如 06 图 3-25 调整 小球 元件 在图层 2 的时间轴上右击, 在弹出的快捷菜单中选择 创建补间动画 命令 在 第 帧处按 F6 键插入关键帧, 对图层 3 执行同样的操作 舞台和时间轴效果如图 3-26 所示 07 隐藏图层 3, 选中图层 2 的第 40 帧 使用 任意变形工具 将 弹簧 向右变形 成如图 3-27 所示的效果 显示图层 3, 选中图层 3 的第 40 帧 使用 选择工具 将 小球 元件移动到 弹簧 元件的右侧, 舞台如图 3-28 所示 科学出版社职教技术出版中心 59

66 单元 3 补间动画 图 3-26 舞台和时间轴效果 图 3-27 弹簧变形效果 08 分别选中图层 2 图层 3 的第 40 帧, 在 属性 面板上设置 缓动 选项值为 100, 如图 3-29 所示 图 3-28 移动小球的位置 图 3-29 设置 缓动 选项值 60

67 旋转动画 : 旋转的风车 3.4 小贴士 步骤 7 和 8 不要交叉设置, 交叉设置容易造成小球和弹簧不同步 09 按 Ctrl + Enter 组合键测试影片 制作足球在草地弹动的变形动画, 效果如图 3-30 所示 图 3-30 足球弹动的变形动画效果 3.4 旋转动画 : 旋转的风车 制作旋转动画, 要注意旋转点的设置 在 属性 面板 旋转 选项里, 可选择 顺时针 (CW), 也可以选择 逆时针 (CCW), 并在 旋转 选项中设置一个参数, 这个参数就是风 车将在第 1~40 帧旋转的圈数 实训目的 : 掌握用 旋转 属性为补间动画添加规则的旋转效果 操作要求 : 要求能制作按要求旋转的风车 技能点拨 : 在创建补间动画后, 除了通过使用 任意变形工具 调整图形旋转角度来实 现图形旋转效果外, 还可以通过在 属性 面板中设置旋转属性, 为补间动画添加更加规则 的旋转效果 实训步骤 科学出版社职教技术出版中心 01 创建一个新文档, 在 颜色 面板中将填充色修改为 线性渐变, 将颜色调整为蓝白渐变, 如图 3-31 所示 将图层改名为 背景, 在该图层的第 1 帧上使用 矩形工具 在舞 台上绘制矩形, 使其符合舞台大小, 使用 渐变变形工具 调整渐变位置 效果如图 3-32 所示 61

68 单元 3 补间动画 图 3-31 颜色 面板 图 3-32 背景 图层效果 02 新建一个图层, 改名为 白云, 绘制天空中的浮云 使用 椭圆工具, 在舞台的上方绘制几组椭圆, 利用 Flash 绘制特性将其组合成云 重复操作, 绘制几组云彩, 如图 3-33 所示 小贴士 图 3-33 绘制云彩 可适当调整 白云 的透明度, 使其更自然 03 创建新图层, 改名为 风车 ; 创建新元件, 制作 风车 元件 按 Ctrl + F8 组合键, 在弹出的 创建新元件 对话框中, 修改元件名称为 风车叶, 类型为 图形, 单击 确定 按钮, 进入新元件内部, 应用单元 1 学习的知识绘制风车叶, 如图 3-34 所示 04 退出 风车叶 元件编辑状态后, 创建类型为 影片剪辑 的新元件 风车 在 风车 元件中添加一个 风车叶 元件后, 按 Ctrl + T 组合键, 在弹出的 变形 面板中选择 约束 选项后, 在 旋转 选项中设置旋转 90 单击 变形 面板右下角的 重制选区和变形 按钮 3 次, 复制后的效果如图 3-35 所示 图 3-34 风车叶 元件 图 3-35 复制变形 风车叶 元件 62

69 旋转动画 : 旋转的风车 3.4 小贴士 旋转复制前, 将风车叶的中心点调整到顶角 05 在 时间轴 面板上选中第 40 帧, 按 F5 键插入普通帧, 再在时间轴上右击, 在弹出的快捷菜单中选择 创建补间动画 命令 执行后会弹出如图 3-36 所示的对话框, 提示对象创建为元件 单击 确定 按钮, 此时时间轴背景变为 蓝色, 如图 3-37 所示 图 3-36 提示对话框 图 3-37 时间轴效果 06 选中第 40 帧, 展开 属性 面板, 设置 旋转 为 1 次, 方向 为逆时针, 属性 面板如图 3-38 所示 返回 场景 1, 库 面板中自动生成名为 元件 1 的影片剪辑元件 07 对画面进行修饰, 为风车添上手柄和固定点, 效果如图 3-39 所示 图 3-38 属性 面板 科学出版社职教技术出版中心 图 3-39 修饰画面 63

70 单元 3 补间动画 小贴士 手柄与固定点可放在不同的图层, 并注意与 风车 图层的上下关系, 使画面和谐 08 在 场景 1 中新建图层, 命名为 风车, 然后分多次将 风车 元件拖入到舞台 中, 并使用 任意变形工具 调整个别风车的大小, 使画面错落有致, 如图 3-40 所示 图 3-40 舞台效果 09 文件保存后, 按 Ctrl + Enter 组合键测试影片效果 制作旋转的花瓣动画, 效果如图 3-41 所示 图 3-41 旋转的花瓣动画效果 3.5 3D 动画 :3D 舞台 简单来说,3D 动画实际上就是依托于 Flash CS5 提供的 3D 编辑工具, 从而让图像在 X 轴 64

71 3D 动画 :3D 舞台 3.5 和 Y 轴上都可以做旋转变化 以往的动画都只是在 Z 轴上进行旋转, 也可称之为顺时针或逆时 针的旋转 在 Flash CS5 中有两个 3D 编辑工具, 即 3D 旋转工具 和 3D 平移工具 通过这 两种工具的应用可以在三维轴上进行旋转和移动, 从而实现三维动画效果 在 Flash CS5 中创 建 3D 对象前, 必须先将对象转换成影片剪辑元件, 然后才可以使用 3D 工具进行编辑 在打开 3D 旋转工具 的同时, 查看 属性 面板, 会发现其中包含 位置和大小 3D 定位和查看 等选项 其中 3D 定位和查看 面板是从 Flash CS4 中新增的面板, 如图 3-42 所示 其中, 透视角度是由一个照相机的图标来表示的, 我们可 以把透视角度看成照相机的镜头 调整透视角度值, 就如同调整焦距一样, 可以让镜头自由收缩 把光标放在系统默认值上, 当光标变成双箭头的时候, 就可以左右拖动鼠标调整数值 当然, 也可以直接输入数值更改 透视角度的取值在 1~180 消失点是在西方美术中经常用到的一个术语 例如, 当你看道路两旁排列整齐的树木时, 两排树木连线交于很远的某一点, 这点在透视中被称为消失点 消失点决定了 Z 轴的走向, Z 轴指向消失点 透视角度属性具有缩放舞台视图的效果, 消失点属性具有图 D 定位和查看 面板在舞台上平移 3D 对象的效果 这些设置只影响应用 3D 变形或平移的影片剪辑的外观 实训目的 : 了解 Flash CS5 提供的 3D 编辑工具, 掌握 3D 旋转工具 和 3D 平移工具 的使用 操作要求 : 要求能制作有 3D 效果的动画 技能点拨 : 在 Flash 制作中, 一个场景只能有一个视点, 或者称为摄像头 默认状态下,FLA 文件的摄像头视图与舞台视图相同 每个 FLA 文件都只含有一个 透视角度 或 消失点 实训步骤 01 新建 Flash 文件 (ActionScript 3.0), 将 素材与源文件 \ 单元 3 补间动画 \3.5 3D 动画 : 3D 舞台 \ 素材 \ds.png 图片导入到库中 02 库中自动生成 元件 1 图形元件, 将 元件 1 改名为 ds, 元件类型改为 影片剪辑 将 ds 元件拖入舞台中, 调整大小以适应舞台大小, 并将该图层改名为 ds 舞台和时间轴效果如图 3-43 所示 03 按 Ctrl + F8 组合键, 新建名为 舞台 的影片剪辑 将素材目录下的 wt.png 导入到库中, 将自动生成的图形元件改名为 wt 将 wt 图形元件拖入舞台, 将 wt 元件对齐舞台中央, 调整大小, 如图 3-44 所示 科学出版社职教技术出版中心 65

72 单元 3 补间动画 图 3-43 舞台和时间轴效果 图 3-44 舞台 影片剪辑 04 将素材目录下的 shu.png 导入到库中, 将自动生成的图形元件改名为 shu, 元件类型改为 影片剪辑 新建图层 2, 将 shu 影片剪辑元件拖入舞台 使用 选择工具 将元件放在舞台的左侧 使用 3D 平移工具, 单击 shu 元件, 将鼠标移动到图片上出现的坐标中间, 此时鼠标会变成一个带有 Z 字的标识, 如图 3-45 所示 05 在 Z 轴位置上拖动, 将 shu 元件向前移动一小段距离, 使它在 3D 位置关系中位于前面位置 66

73 3D 动画 :3D 舞台 3.5 图 3-45 调整 shu 元件 小贴士 1) 在 属性 面板的 透视角度 和 消失点 选项中设置参数, 可以对对象的透视角度和消失点位置进行控制 2) 注意观察, 文件中所有 3D 对象的 透视角度 和 消失点 都是一致的 06 新建图层 3, 再拖动一个 shu 元件到舞台上 使用 选择工具 将元件放在舞台的右侧, 调整大小与位置 使用 3D 平移工具, 单击 shu 元件, 在 Z 轴位置上拖动, 将 shu 元件向后移动一小段距离, 使它在 3D 位置关系中位于后面位置, 如图 3-46 所示 小贴士 图 3-46 拖入第二棵树 在调整元件大小时, 要先将变形点调整到树根的位置 科学出版社职教技术出版中心 67

74 单元 3 补间动画 07 按 Ctrl + F8 组合键, 新建名为 人物 的影片剪辑, 导入素材 rw2_3.png 到舞台, 会弹出如图 3-47 所示的对话框, 单击 是 按钮, 人物 元件及时间轴如图 3-48 所示 图 3-47 提示对话框 图 3-48 人物 元件及时间轴效果 08 在 舞台 影片剪辑元件内, 新建图层 4, 将图层 2 调整到最上面 将 人物 元件拖入舞台, 调整大小, 放置在舞台的左侧, 如图 3-49 所示 小贴士 图 3-49 将 人物 拖入 舞台 影片剪辑元件内 调整元件大小时, 注意先将变形点调整到人物脚下 68

75 3D 动画 :3D 舞台 将所有图层的时间轴延长到第 120 帧 在图层 4 的时间轴上右击, 选择 创建补间动画 命令 在第 60 帧处按 F6 键增加关键帧, 将第 60 帧的 人物 元件调整到舞台的左侧, 如图 3-50 所示 图 3-50 创建补间动画 10 在第 61 帧处按 F6 键增加关键帧, 将 人物 元件水平翻转, 如图 3-51 所示 11 图 3-51 第 61 帧效果 在第 120 帧处按 F6 键增加关键帧, 将 人物 元件调整到舞台的右侧 使用 3D 平 移工具, 单击 人物 元件, 在 Z 轴位置上拖动, 将 人物 元件向后平移一小段距离, 如图 3-52 所示 科学出版社职教技术出版中心 69

76 单元 3 补间动画 图 3-52 使用 3D 平移工具 调整 人物 元件 12 返回 场景 1, 新建图层 2, 将图层 2 改名为 wt 将 舞台 影片剪辑元件拖入舞台, 调整大小, 如图 3-53 所示 13 图 3-53 拖入 舞台 元件到 场景 1 将两个图层的时间轴延长到第 120 帧 在 wt 时间轴上右击, 选择 创建动画补 间 命令 在 wt 时间轴的第 帧处分别按 F6 键增加关键帧 在第 60 帧处, 使用 3D 旋转工具 14, 单击 舞台 元件, 调整 Y 轴的位置, 直到如图 3-54 所示的效果为止 文件保存后, 按 + 组合键测试影片效果 Enter Ctrl 70

77 骨骼动画 : 皮影动画 3.6 图 3-54 使用 3D 旋转工具 调整 舞台 元件 制作变换的 3D 文字动画, 效果如图 3-55 所示 3.6 骨骼动画 : 皮影动画 图 D 文字动画效果 科学出版社职教技术出版中心 骨骼动画又称为 IK 反向运动, 是一种使用骨骼的关节结构对一个对象或彼此相关的一组对 71

78 单元 3 补间动画 象进行动画处理的方法 它可以通过设置对象的骨骼系统来控制其运动状态, 如胳膊 腿和面部表情 可以向单独的元件实例或单个形状的内部添加骨骼 在一个骨骼移动时, 与启动运动的骨骼相关的其他连接骨骼也会移动 使用骨骼动画进行动画处理时, 只需要指定对象的开始位置和结束位置即可 通过骨骼动画, 可以更加轻松地创建自然的运动 骨架链称为骨架 相连的两个物体被称为父子层次结构, 其中占主导地位的被称为父级, 而处于从属地位的被牵制的被称为子级, 骨架的作用就是将父子两级的骨骼彼此相连 在 Flash 中, 可以按以下两种方式使用骨骼动画 1. 使用骨骼工具来创建影片剪辑的骨架通过添加将每个实例与其他实例连接在一起的骨骼, 用关节连接一系列的元件实例 例如, 有一组影片剪辑, 其中的每个影片剪辑表示人体的不同部分, 通过将躯干 上臂 下臂和手连接在一起, 可以创建逼真移动的胳膊 01 在舞台上创建一个矩形, 并把它转换成一个影片剪辑或图形符号 02 复制 4 个刚刚创建的矩形, 如图 3-56 所示 图 3-56 水平对齐的同一符号的多个实例 03 使用 骨骼工具 M, 从第一个矩形拖向下一个矩形, 把它们连接起来, 当松开鼠标左键的时候, 在两个矩形中间将会出现一条实线来表示骨骼段, 如图 3-57 所示 图 3-57 连接两个符号实例的骨骼段 04 重复这个过程把第二个矩形和第三个矩形连接起来, 通过不断从一个矩形拖向另一个来连接它们, 直到所有的矩形都用骨骼连接了起来, 如图 3-58 所示 图 3-58 连接了所有符号实例的完整骨架 05 在第 40 帧处按 F5 键插入普通帧, 调整骨骼位置,Flash 将会在当前帧数上插入一个关键帧, 并在 IK 跨度上进行动作的内插, 如图 3-59 所示 06 按 Ctrl + Enter 组合键测试动画效果 2. 在形状对象的内部添加骨架通过骨骼, 可以移动现状的各个部分并对其进行动画处理, 而无须绘制形状的不同版本或创建补间形状 这种骨骼就像软体动物, 骨骼被包裹在一个完整的形体中, 通常使用这项技术 72

79 骨骼动画 : 皮影动画 3.6 来为动物角色创建摇尾巴动画 01 绘制一个又高又细的矩形, 把顶端部分的一段变窄做成尾巴的样子, 如图 3-60 所示 图 3-59 调整骨骼 图 3-60 尾巴效果 02 使用 骨骼工具 M 从尾巴的底部( 根 ) 开始, 在形状内部点击并向上拖动来创建根骨骼, 在向形状中绘制第一根骨骼的时候,Flash 会把它转换为一个骨骼形状对象, 如图 3-61 所示 03 继续向上一个接一个地创建骨骼, 把头尾相连起来, 注意骨骼的长度逐渐变短, 越到尾部关节会越多, 如图 3-62 所示 04 在第 40 帧处按 F5 键插入普通帧, 调整骨骼位置, 如图 3-63 所示 图 3-61 添加骨骼图 3-62 添加完整骨骼图 3-63 调整骨骼位置 05 按 Ctrl + Enter 组合键测试动画效果 实训目的 : 通过制作皮影的骨骼动画, 掌握 骨骼工具 的应用 操作要求 : 能使用 骨骼工具 将元件连接起来, 并通过姿势的调整使皮影动起来 技能点拨 : 只有文档类型是 ActionScript 3.0 的文档才支持骨骼动画 使用 骨骼工具, 可以向元件内部添加骨骼, 但每个元件的实例只能有一个骨骼 科学出版社职教技术出版中心 73

80 单元 3 补间动画 若要将某个骨骼与其子级骨骼一起旋转而不移动父级骨骼, 需要按住 Shift 键并拖动该骨骼 默认情况下,Flash 将每个元件实例的变形点移动到由每个骨骼连接构成的连接位置 对于根骨骼, 变形点移动到骨骼头部 ; 对于分支中的最后一个骨骼, 变形点移动到骨骼的尾部 在 首选参数 ( 编辑 > 首选参数 ) 的 绘画 选项卡中, 可以禁用变形点的自动移动 使用 部分选取工具, 可以在骨骼形状中添加 删除和编辑轮廓的控制点 默认情况下, 形状的控制点会连接到离它们最近的骨骼 要想编辑单个骨骼和形状控制点之间的连接, 可以使用 绑定工具, 这样就可以控制骨骼移动时笔触移动的方式 如果将多个控制点绑定到一个骨骼或者多个骨骼绑定到一个控制点, 使用 绑定工具 选择控制点或骨骼, 可以看到骨骼和控制点之间的连接 实训步骤 01 新建 Flash 文件 (ActionScript 3.0), 将 素材与源文件 \ 单元 3 补间动画 \3.6 骨骼动画 : 皮影动画 \ 素材 文件中的 7 张图片导入到库中, 并转化为图形元件, 如图 3-64 所示 02 将元件 1~7 一次性拖入舞台, 并使用 任意变形工具 调整元件大小, 如图 3-65 所示 图 3-64 库 面板 图 3-65 调整所有元件的大小 03 使用 选择工具 将元件分开并拼好, 如图 3-66 所示 图 3-66 拼好元件 74