内容简介 本书是一本以项目结合理论知识进行讲解的制作 Flash 动画的教程 从最简单的动画入手, 逐步深入, 按照系统 易学的原则, 从实用的角度出发, 并结合项目任务对 Flash CS5 进行详细讲解 本书共分为五大部分 :Flash CS5 基础 Flash 动画基础 Flash 高级动画

Transcription

1 国家中职示范校建设课程改革创新教材 李鹏图陈友明编 制作 FLASH 动画 ZHIZUO FLASH DONGHUA 北京

2 内容简介 本书是一本以项目结合理论知识进行讲解的制作 Flash 动画的教程 从最简单的动画入手, 逐步深入, 按照系统 易学的原则, 从实用的角度出发, 并结合项目任务对 Flash CS5 进行详细讲解 本书共分为五大部分 :Flash CS5 基础 Flash 动画基础 Flash 高级动画 Flash 在网站中的应用和 Flash 作品发布 内容由浅入深, 包括 Flash CS5 基础知识, 逐帧动画, 传统补间动画, 补间动画, 补间形状动画, 运动引导层动画, 遮罩动画, 骨骼动画,Flash 按钮, 鼠标跟随, 网站 Flash 导航, 网页 Flash Banner 动画, 组件应用和 Flash 文件优化 导出与发布等内容 本书适合中职学校计算机专业的学生学习使用, 也可作为相关技术人员的参考用书 图书在版编目 (CIP) 数据制作 Flash 动画 / 李鹏图, 陈友明编. 北京 : 科学出版社,2015 ( 国家中职示范校建设课程改革创新教材 ) ISBN Ⅰ. 1 制 Ⅱ. 1 李 2 陈 Ⅲ. 1 动画制作软件 - 中等专业学校 - 教材 Ⅳ. 1TP 中国版本图书馆 CIP 数据核字 (2015) 第 号责任编辑 : 马琦杰 / 责任校对 : 马英菊责任印制 : 吕春珉 / 封面设计 : 祎祎 出版北京东黄城根北街 16 号邮政编码 : 厚诚则铭印刷科学出版社发行各地新华书店经销 * 年 12 月第一版开本 : / 年 12 月第一次印刷印张 :16 字数 : 定价 :56.00 元 ( 如有印装质量问题, 我社负责调换 厚诚则铭 ) 销售部电话 编辑部电话 版权所有, 侵权必究举报电话 : ; ;

3 前 言 Flash 是由 Adobe 公司开发的动画制作软件, 是目前使用最为广泛的动画制作软件之 一 Flash 软件可以实现多种动画特效, 它是由一帧帧的静态图片在短时间内连续播放而造 成的视觉效果, 表现为动态过程 它是一款交互式矢量图形编辑与动画制作软件, 能够将 矢量图 位图 音频 动画 视频等结合在一起 Flash 生成的动画短小精悍, 采用了跨媒 体技术, 具有很强的交互功能 现在 Flash 被广泛应用在各种媒体环境领域, 有网站开发 方面的产品广告 导航条 产品展示 网页动画, 还有动画短片 动漫 贺卡 教学课件 手机游戏 屏保等 Flash 软件具有简单易学 功能强大 适用范围广等特点 本书改变传统的编写方式, 采用项目任务驱动的方式介绍动画的制作方法和原理, 改 变了传统由绘制图形 编辑图形开始的阐述方式, 从项目 2 开始引入逐帧动画, 由动画的 趣味性引导学生学习基本工具使用 图形绘制与编辑和相关理论知识, 提高学生学习的兴趣和积极性 本书按照 基础 提高 应用 的结构体系, 以项目为单位进行编排, 从 Flash CS5 软件的基础使用入手, 从实用角度出发, 以茶叶网站开发的项目为引导, 循序渐进地介绍 Flash CS5 的使用方法和其在网站开发中的应用 本书共分为五大部分, 包括 Flash CS5 基础 Flash 动画基础 Flash 高级动画 Flash 在网站中的应用和 Flash 作品发布 内容由浅入深, 包括 Flash CS5 基础知识, 逐帧动画, 传统补间动画, 补间动画, 补间形状动画, 运动引导层动画, 遮罩动画, 骨骼动画,Flash 按钮, 鼠标跟随, 网站 Flash 导航, 网页 Flash Banner 动画, 组件应用和 Flash 文件优化 导出与发布等内容 本书素材从网上获取或由作者创作而成 本书由李鹏图和陈友明编写 其中项目 1 和项目 2 由陈友明编写, 项目 3 至项目 14 由李鹏图编写 在编写过程中, 中国茶多网林艺鹏 王已明, 安溪华侨职业中专学校薛梅英 詹永华 韩冬良, 安溪陈利职业中专学校林泽坚等对本书的编写提供了许多有益的意见和建议, 在此表示感谢 由于作者水平有限, 编写时间仓促, 书中难免有不足之处, 恳请广大读者提出宝贵意见 编者 2015 年 5 月

4

5 目 录 第 1 篇 Flash CS5 基础 项目 1 Flash CS5 基础知识 3 任务 1.1 初识 Flash CS5 3 任务 1.2 认识 Flash CS5 工作界面 6 任务 1.3 掌握 Flash CS5 基本操作 10 第 2 篇 Flash 动画基础 项目 2 逐帧动画 17 项目准备 : 逐帧动画 17 任务 2.1 创建文字逐帧动画 17 任务 2.2 绘制矢量逐帧动画 23 任务 2.3 用导入的外部静态图片建立逐帧动画 33 任务 2.4 导入序列图像 39 项目拓展 41 项目 3 传统补间动画 44 项目准备 : 传统补间动画 44 任务 3.1 创建位移变化的传统补间动画 47 任务 3.2 创建旋转的传统补间动画 58 任务 3.3 创建透明度变化的传统补间动画 67 任务 3.4 创建大小变化的传统补间动画 77 项目拓展 86 项目 4 补间动画 88 项目准备 : 补间动画 88 任务 4.1 翻书动画 90 任务 4.2 利用 动画编辑器 创建 Flash banner 95 项目拓展 101 项目 5 补间形状动画 102 项目准备 : 补间形状动画 102 任务 5.1 创建补间形状动画 103 任务 5.2 添加形状提示点创建补间形状动画 108 项目拓展 110

6 iv 制作 Flash 动画 第 3 篇 Flash 高级动画 项目 6 运动引导层动画 115 项目准备 : 运动引导层动画 115 任务制作引导层动画 气球飞升 116 项目拓展 121 项目 7 遮罩动画 124 项目准备 : 遮罩动画 124 任务 7.1 制作竹编簸箕 125 任务 7.2 创建遮罩动画 探照灯效果 134 项目拓展 137 项目 8 骨骼动画 139 项目准备 : 骨骼动画 139 任务 8.1 创建基于元件的骨骼动画 139 任务 8.2 创建基于形状的骨骼动画 146 项目拓展 150 第 4 篇 Flash 在网站中的应用 项目 9 Flash 按钮 155 项目准备 :ActionScript 脚本 155 任务 9.1 制作跳转链接按钮 160 任务 9.2 自动切换图片 165 项目拓展 170 项目 10 鼠标跟随 172 项目准备 : 鼠标跟随 172 任务 10.1 制作茶杯作为鼠标指针 172 任务 10.2 为茶杯跟随添加背景音乐和控制按钮 176 项目拓展 185 项目 11 网站 Flash 导航 186 项目准备 : 网页导航 186 任务 11.1 创建竖向网页按钮导航 186 任务 11.2 创建横向网页按钮导航 193 项目拓展 203 项目 12 网页 Flash Banner 动画 206 项目准备 :banner 206 任务 8 周年庆 Banner 广告 206 项目拓展 216 项目 13 组件应用 219 项目准备 :Flash 的组件 219

7 目 录 v 任务 13.1 在 Flash 文件中播放 FLV 视频 219 任务 13.2 使用组件制作会员注册页面 222 项目拓展 231 第 5 篇 Flash 作品发布 项目 14 Flash 文件优化 导出与发布 235 任务 14.1 优化 Flash 影片 235 任务 14.2 导出动画作品 238 任务 14.3 影片发布 240 参考文献 247

8

9 第 1 篇 Flash CS5 基础

10

11 项目 1 Flash CS5 基础知识 任务 1.1 初识 Flash CS5 Flash 是一款交互式矢量图形编辑与动画制作软件, 是目前使用最为广泛的动画制作软件之一 Flash 从 1995 年产生至今, 逐渐发展到如今的 Flash CS5 版本 通过对 Flash 动画的特点和 Flash 动画的应用领域的介绍, 读者可以对 Flash 动画有一个初步的认识 1. Flash 动画的特点 Flash 是以流控制技术和矢量技术为代表的动画软件, 能够将矢量图 位图 音频 视频 动画和交互动作灵活地结合在一起, 从而制作出新奇 美观 交互性强的动画效果, 与其他动画软件相比,Flash 动画具有以下特点 (1) 画面清晰 :Flash 动画主要由矢量图组成, 矢量图具有存储容量小, 并且在缩放时不会失真的优点,Flash 动画在播放窗口时不会影响画面清晰度 (2) 体积小 : 在将 Flash 动画导出或发布为.swf 影片过程中, 程序会压缩 优化动画组层元素 ( 例如位图图像 音乐和视频等 ), 这就进一步减小了动画的存储容量 (3) 无需等待 : 发布后的.swf 动画影片具有 流 媒体的特点, 在网上可以边下载边播放, 而不像 GIF 动画那样要把整个动画文件全部下载后才能播放 (4) 多媒体与互动性强 :Flash 可以整合图形 音乐 视频等多媒体元素 ; 通过为 Flash 动画添加动作脚本可使其具有交互性 (5) 制作手法简单易学 :Flash 动画的制作比较简单, 只需拥有一台计算机和一套 Flash 软件, 不必掌握高深的动画知识, 就可以制作出美观的动画 (6) 制作成本低 : 与传统动画 3D 动画比较, 利用 Flash 软件制作动画可以降低成本和缩短时间 2. Flash 动画的应用领域 目前,Flash 动画被广泛应用于制作网页动画 Flash 广告 音乐 MTV 和短片 多媒体教学课件 手机应用 Flash 游戏 Flash 网站等 1) 网页动画为了使网页达到一定的视觉冲击力, 许多网站的页面使用 Flash 动画来装饰页面效果,

12 4 制作 Flash 动画 如制作网站的 Logo( 标识 ) Flash Banner( 横幅 ) 等, 如图 1-1 所示 2)Flash 广告 图 1-1 Flash Banner 现在我们在打开网页时, 一般都会发现一些动感十足的 Flash 动画广告, 如图 1-2 所示 图 1-2 Flash 广告 3) 音乐 MTV 和短片在网络发达的今天, 许多人都喜欢把自己制作的 Flash 音乐动画 Flash 短片等通过微博 微信等形式传输到网上与其他人分享, 如图 1-3 所示 4) 多媒体课件教学 图 1-3 音乐 MTV 使用 Flash 制作的课件可以很好地表达教学内容, 增强学生的学习兴趣 Flash 制作的

13 项目 1 Flash CS5 基础知识 5 课件具有强大的交互性, 大大地提高了课堂教学效果 现在越来越多地应用到教学工作中, 如图 1-4 所示 5) 手机应用现在使用 Flash 制作手机中的很多应用动画, 如 Flash 手机游戏 Flash 手机屏保等, 如图 1-5 所示 图 1-4 多媒体教学课件 图 1-5 Flash 手机屏保 6)Flash 游戏利用 Flash 对声音 视频和动画的支持, 通过 Flash 的交互性可以制作出简单有趣的 Flash 小游戏, 如图 1-6 所示 图 1-6 Flash 游戏 7)Flash 网站 Flash 具有良好的动画表现力与强大的后台技术, 并支持 html 与网页编程语言的使用, 使得 Flash 越来越多地应用于网站开发, 如图 1-7 所示

14 6 制作 Flash 动画 图 1-7 Flash 网站 任务 1.2 认识 Flash CS5 工作界面 在默认情况下, 启动 Flash CS5 软件后, 会自动弹出一个启动向导对话框, 如图 1-8 所示 图 1-8 Flash 启动向导对话框在 Flash CS5 启动向导对话框中单击 新建 下方的 ActionScript 3.0 命令, 会创建一个新的 Flash 文档,Flash CS5 默认的工作界面由菜单栏 标题栏 编辑栏 工作区 舞台 时间轴面板 属性面板和工具面板所组成, 如图 1-9 所示

15 作区舞具面板菜项目 1 Flash CS5 基础知识 7 单栏标题栏工属性面板工台时间轴面板1. 菜单栏 图 1-9 Flash CS5 工作界面 菜单栏包括了 Flash CS5 的所有菜单命令 工作区布局按钮 关键字搜索框和工作窗口 的 3 个控制按钮 最小化 最大化 ( 还原 ) 与关闭, 如图 1-10 所示 菜单命令 1) 菜单命令 图 1-10 Flash CS5 菜单栏 菜单命令包括 Flash 中的大部分操作命令, 包括文件 编辑 视图 插入 修改 文本 命令 控制 调试 窗口和帮助 2) 工作区布局按钮 工作区布局按钮关键字搜索框工作窗口按钮 工作区布局按钮用于设置 Flash CS5 的工作界面布局, 单 击该按钮会弹出工作布局菜单, 包括 7 种默认的布局方式, 分别为 动画 传统 调试 设计人员 开发人 员 基本功能 和 小屏幕, 还有自定义布局方式的相关菜单, 如图 1-11 所示 图 1-11 工作布局按钮弹出菜单

16 8 制作 Flash 动画 3) 关键字搜索框关键字搜索框用于快速查询帮助信息 如果用户需要查找某一方面的帮助内容, 在此 输入框中输入相关帮助信息的关键字, 然后按 Enter 键, 就可以通过在线帮助系统查找自己所需要的帮助信息 4) 工作窗口按钮 工作窗口按钮有最小化 最大化 ( 还原 ) 和关闭三个按钮用于控制 Flash CS5 工作窗口 2. 标题栏 标题栏显示 Flash CS5 中打开文档的名称, 如果有多个打开的文档, 那么当前编辑的文档名称以高亮显示, 如图 1-12 所示 需要编辑某个文档时, 只要在该文档的名称上单击, 就可以切换到此文档的编辑窗口中 图 1-12 标题栏 3. 编辑栏 编辑栏用来控制场景与元件 场景与场景 元件与元件之间的编辑窗口的切换, 通过单击右侧按钮, 在弹出的下拉列表中设置舞台窗口的显示比例, 如图 1-13 所示 图 1-13 编辑栏 4. 工作区与舞台 工作区是整个制作动画的区域, 其中白色的舞台区域是动画实际显示的区域, 外面的灰色区域在动画对象播放时不会被显示 舞台是指 Flash 中心的白色区域, 它是动画对象的展示区域, 是最后导出影片实际显示的区域 5. 时间轴 面板 时间轴 面板是进行动画创作的面板, 它包含左侧的图层操作区与右侧的帧操作区两部分, 如图 1-14 所示 图层操作区 帧操作区 图 1-14 时间轴 面板

17 项目 1 Flash CS5 基础知识 9 图层操作区中的图层由下到上排列, 上面图层中的对象叠加到下面图层的上方, 在图层操作区, 可以进行创建图层 删除图层 显示和锁定图层等操作 每个图层在帧操作区中有对应的一行帧系列 在 Flash 中, 动画是按时间轴由左向右顺序播放的, 每播放一帧对应一个画面, 在对动画进行编辑操作时也就是对帧操作区的帧进行编辑操作, 如插入帧 删除帧 复制帧 剪切帧 粘贴帧和翻转帧等 工具区域 6. 工具 面板 工具 面板是为 Flash 动画制作提供用于绘制图形和编辑图形的各种工具, 它分为 4 个区域 : 工具区域 查看区域 颜色区域和选项区域, 如图 1-15 所示 (1) 工具区域 : 包含图形编辑 图形绘制和颜色填充等工具 (2) 查看区域 : 包含缩放和平移工具 (3) 颜色区域 : 包含设置笔触颜色和填充颜色的工具 (4) 选项区域 : 提供当前选择的工具的相关选项设置 7. 属性 面板 颜色区域 查看区域 选项区域 属性 面板中没有固定的参数选项, 它随着选择对象的不同而出现不同的参数选项设置 选择 矩形工具 后出现该工具相应的 属性 面板, 如图 1-16 所示 8. 其他面板 图 1-15 工具 面板 在 Flash CS5 的工作界面中不能把所有面板都展现出来, 如果需要使用它们时, 可以通过单击菜单栏中的 窗口 菜单下的相应命令来打开 通过执行 窗口 颜色 命令, 打开的 颜色 面板如图 1-17 所示 图 1-16 属性 面板 图 1-17 颜色 面板

18 10 制作 Flash 动画 任务 1.3 掌握 Flash CS5 基本操作 了解 Flash CS5 工作界面后, 接着需要掌握一些最基本的 Flash 操作, 为后面学习相关工作操作 对象编辑以及动画创建打下基础 1. Flash CS5 文档管理 Flash 文档管理包括新建文档 打开文档 关闭文档与保存 Flash 文档 1) 从启动向导创建与打开 Flash 文档启动 Flash CS5 后, 在弹出的 Flash 启动向导对话框中可以打开最近编辑过的 Flash 文档, 还可以创建新的项目, 以及通过模板文件创建所需要的工作项目等 (1) 打开最近的项目 在 打开最近的项目 一栏可以显示最近编辑过的 4 个 Flash 文档, 单击相应的 Flash 文档名称, 就可以打开相应文档 如果需要打开其他文档, 在弹出的 打开 对话框中选择需要打开的文档名称即可, 如图 1-18 所示 图 1-18 打开 对话框 (2) 新建 在 新建 一栏中可以选择需要创建的 Flash 文档类型, 用户可以选择创建 ActionScript 3.0 或 ActionScript 2.0 脚本的 Flash 文档 创建的第一个 Flash 文件默认名称为 未命名 -1 用户还可以通过其他类型的 Flash 项目创建出相应的文档, 如选择 Flash JavaScript 文件 命令, 将创建出新的 Flash 脚本文件 2) 通过菜单命令打开与创建 Flash 文档除了使用启动向导对话框打开或新建 Flash 文档外, 还可以通过菜单栏中的相关命令打开已有的 Flash 文档或创建出新的 Flash 文档 (1) 打开最近编辑过的 Flash 文档 执行菜单栏中的 文件 打开最近的文件 命令, 在弹出的最近编辑过的文档名称中选择相应的 Flash 文档名称, 如图 1-19 所示

19 项目 1 Flash CS5 基础知识 11 文档 图 1-19 最近编辑过的文档菜单 (2) 打开文档 通过执行 文件 打开 命令, 在弹出对话框中选择需要打开的 Flash (3) 创建新文档 通过执行 文件 新建 命令, 在弹出的 新建文档 对话框中 选择需要的 Flash 文档类型文件, 然后单击 确定 按钮即可 3) 保存文档 Flash 动画制作完成后, 需要将文档保存 在编辑过程中, 为了防止因意外发生而造成 数据丢失, 也需要随时对文档进行保存 保存 Flash 文档可通过执行菜单栏中的 文件 保存 命令, 在弹出的 另存为 对话框中在 保存在 下拉列表中选择动画文件保存的 路径, 在 文件名 输入框中输入要保存文件的名称, 然后单击 确定 按钮, 就可以将文档保存, 如图 1-20 所示 图 1-20 另存为 对话框

20 12 制作 Flash 动画 对已经保存过的文件, 可以通过执行菜单栏中的 文件 另存为 命令, 在弹出的 另存为 对话框中设置新的文件名称或保存路径, 然后单击 保存 按钮, 即可以备份该文件 4) 关闭文档在编辑栏中 Flash 文档名称右侧有按钮, 单击该按钮可以将当前不使用的文档关闭 如果该文档没有保存, 则会弹出一个提示框, 用于询问用户是否保存编辑的文档, 单击 是 按钮, 则先执行保存文件的命令, 然后关闭文档, 单击 否 按钮时, 则不保存文件直接将其关闭, 如图 1-21 所示 图 1-21 关闭文档时弹出的对话框执行菜单栏中 文件 关闭 命令也可以将 Flash 文档关闭 执行菜单栏中 文件 全部关闭 命令, 可以将全部的 Flash 文档关闭 2. Flash 面板操作 Flash CS5 工作面板中有多个面板, 不同面板完成不同的工作 在实际工作中这些面板并没有全部都打开, 用户可以根据工作需要对这些面板进行打开 / 关闭 收缩 / 展开和移动 / 合并 / 分离等操作 1) 打开 / 关闭面板 Flash CS5 工作界面中有几个默认的工作面板, 如果需要打开新的面板进行操作, 通过执行菜单栏中 窗口 菜单下的相关命名即可 例如, 需要打开 动作 面板, 那么执行菜单栏中 窗口 动作 命令即可 对于不需要使用的面板可以将其关闭, 关闭面板可以通过执行菜单栏中 窗口 下的相关命名或单击面板右上方的按钮将其关闭 2) 收缩 / 展开面板为了节省工作空间, 可以将当前不用的面板暂时收缩起来, 在需要用时再将其展开 单击在面板右上方的按钮, 就将面板收缩, 此时面板会以图标文字的形式进行显示 ; 单击收缩后面板上方的按钮, 就可以将其展开 3) 移动 / 合并 / 分离工作面板 Flash 工作界面中的面板是按照默认方式由多个面板组合在一起形成一个面板组, 用户可以将这些面板随意移动 组合与分离 把鼠标指针移至面板组面板标签的右侧或上方, 按住鼠标左键并拖曳, 则整个面板会随着鼠标指针被拖曳, 松开鼠标后, 则面板被拖曳到松开鼠标的位置处 如果面板被拖曳到其他面板处, 当其他面板以蓝色边框显示时, 松开鼠标后, 则该面板会与其他面板组合在一起 在面板组里某个面板标签处按住鼠标左键并拖曳到工作区中, 可以将它分离出来

21 项目 1 Flash CS5 基础知识 13 4) 隐藏 / 显示所有面板为了获得最大的工作空间, 可以将工作界面中的所有面板隐藏起来 隐藏所有面板可以通过执行菜单栏中 窗口 隐藏面板 命令 ; 通过执行菜单栏中的 窗口 显示面板 命令, 可以将原来的面板显示出来 3. 定义工作布局在 Flash CS5 中, 根据用户的不同需要定义了 7 种默认的工作布局, 分别为 动画 传统 调试 设计人员 基本功能 开发人员 和 小屏幕, 用户可以根据需要选择合适的工作布局方式,Flash CS5 推荐的工作布局为 基本功能 选择工作布局可以通过单击菜单栏上方的 基本功能 按钮, 在弹出的菜单中进行选择, 如图 1-22 所示 图 1-22 选择工作布局 除了使用系统默认提供的工作布局,Flash 支持用户自定义工作布局 通过单击菜单栏 上方的 基本功能 按钮, 在弹出的菜单中执行 新建工作区 命令, 在弹出的对话框中, 在 名称 文本框中输入合适的名称, 然后单击 确定 按钮, 就可以保存自定义的工作布局, 同时定义的工作布局名称会显示在 基本功能 菜单的最上方 4. 设置影片属性 在制作 Flash 动画时, 首先需要确定动画的尺寸 背景以及播放的帧频速度等影片属性, 接着才能在工作界面中进行动画创作 动画的影片属性可以通过 文档设置 对话框进行设置, 打开该对话框的常用方法如下

22 14 制作 Flash 动画 方法一 : 在工作区空白位置处单击, 在 属性 面板的 属性 标签中单击按钮, 会弹出 文档设置 对话框, 如图 1-23 所示 图 1-23 文档设置 对话框方法二 : 在工作区空白位置处右击, 在弹出的菜单中执行 文档属性 命令, 弹出 文档设置 对话框 方法三 : 执行菜单栏中 修改 文档 命令或按 Ctrl+J 组合键, 也会弹出 文档设置 对话框 在 Flash CS5 中, 文档属性 对话框中各个选项的设置如下 (1) 尺寸 用来设置舞台的宽度与高度的参数值, 它的默认单位是 像素 (2) 标尺单位 单击该处, 在弹出的下拉列表中可以选择用于设置舞台宽和高的单位标尺, 系统默认为 像素 (3) 背景颜色 单击右侧的色块, 在弹出的颜色调色板中进行选择, 从而设置舞台的背景颜色 (4) 帧频 用于设置动画的播放速度, 其单位为 f/s, 即每秒播放的帧数

23 第 2 篇 Flash 动画基础

24

25 项目 2 逐帧动画 项目准备 : 逐帧动画 1. 逐帧动画 逐帧动画是一种常见的动画形式, 原理是在时间轴的每帧上逐帧绘制不同的内容, 使其连续播放而成为动画 因为逐帧动画的帧序列内容不一样, 在制作过程中, 需要手动制作每一个关键帧的内容, 不但给制作增加了负担, 而且最终输出的文件量也很大, 但它的优点也很明显 逐帧动画具有非常大的灵活性, 几乎可以表现任何想表现的内容, 而它类似于电影的播放模式, 很适合于表现细腻的动画 例如走路 面部表情和精致的 3D 效果等 2. 创建逐帧动画的几种方法 1) 文字逐帧动画用文字作为帧中的对象, 实现文字跳跃 缩放和旋转等特效 2) 绘制矢量逐帧动画用鼠标或压感笔在 Flash 场景中一帧一帧地画出帧内容 3) 用导入的外部静态图片建立逐帧动画用 JPG GIF 等格式的静态图片连续导入 Flash 中而形成动画 4) 导入序列图像可以导入 GIF 序列图像 SWF 动画文件或者利用第三方软件 ( 如 Swish Swift 3D 等 ) 产生的动画序列 任务 2.1 创建文字逐帧动画 1. 提出任务, 设计构想 目前电子商务发展迅速, 很多商家利用节日当天进行倒计时促销或限时进行团购促销 例如, 在双 11 或双 12 当天 24 小时内进行促销 ; 一些电子商务网站的限制天数内的

26 18 制作 Flash 动画 团购优惠促销 为此, 模拟制作一个倒计时的计数器 根据逐帧动画原理, 利用文字的变化制作动画, 将一组数字倒序地放置在一组连续的帧上来创建逐帧动画, 制作 开抢倒计时 动画, 该方法也可以用来制作顺序计数器等 2. 任务展示创建文字逐帧动画, 即开抢倒计时动画, 如图 2-1 所示 3. 任务分析图 2-1 开抢倒计时动画 (1) 利用广告模板创建文档 (2) 利用文字工具输入文字和设置文字相关属性 (3) 逐一调整每一帧上的文字内容, 创建动画 1. 文本工具在 工具 面板中选择 文本工具 后, 执行 窗口 属性 命令, 打开其 属性 面板, 如图 2-2 所示 Flash CS5 下文本引擎提供了文本布局框架文本 (TLF) 和传统文本两种方式, 通过文本引擎下拉菜单中的 传统文本 下拉列表来选择 下面先介绍传统文本 1) 文本类型在传统文本引擎下, 文本类型分为静态文本 动态文本和输入文本三种, 默认情况下选择静态文本 (1) 静态文本 : 设置此项后, 在生成的 SWF 动画中, 文本框中的文字只能被看到, 文本的内容和外观与创作时一样 (2) 动态文本 : 设置此项后, 在生成的 SWF 动画中, 文本框中的文字在动画播放时可以动态更新 (3) 输入文本 : 设置此项后, 在生成的 SWF 动画中, 文本框用于用户输入文本 图 2-2 文本工具 的 属性 面板 2) 设置字符属性选择舞台中输入的文本或选择 工具 面板中的 文本工具, 可以对文本进行字符属性设置 通过 属性 面板中 字符 选项设置单个字符的属性 (1) 系列 : 用于设置文本的字体 (2) 样式 : 用于设置文本的倾斜 加粗和加粗倾斜样式 (3) 大小 : 用于设置字符的大小 (4) 字母间距 : 用于设置文字之间的距离

27 项目 2 逐帧动画 19 (5) 颜色 : 用于设置文本的颜色 (6) 消除锯齿 : 用于设置文字显示的清晰程度 有使用设备字体 位图文本 动画消除锯齿 可读性消除锯齿和自定义消除锯齿五个选项 (7) 上标 : 将字符移动到稍高于标准线的上方并缩小字符的大小 (8) 下标 : 将字符移动到稍低于标准线的下方并缩小字符的大小 3) 设置段落属性除了对文本进行字符属性设置, 还可以对整段文字进行段落属性设置 通过 属性 面板中 段落 选项设置整个段落的属性 (1) 格式 : 用于设置段落的对齐方式, 包括左对齐 居中对齐 右对齐和两端对齐 (2) 间距 : 包括缩进和行距两个设置项 (3) 边距 : 包括左边距和右边距两个设置项 (4) 行为 : 显示段落的行类型为单行或多行 4) 创建文本在 工具 面板中选择 文本工具, 在舞台中单击, 将出现一个文本框, 然后在文本框中输入文字即可 此时, 文本框的右侧有一个空心的小圆圈, 文本框的宽度会随着文字输入的多少而相应变化, 此文本框称为点文本框, 如图 2-3 所示 在点文本框的四个顶角处拖曳鼠标, 可以将点文本框转换为区域文本框, 此时文本框的右下角显示为空心的矩形, 如图 2-4 所示 使用 文本工具 在舞台中拖曳处一个区域, 直接创建了一个一行区域文本框, 然后可以在区域文本框中输入文本内容, 如文本内容超出文本框的宽度会自动换行 图 2-3 点文本框 2. 时间轴 面板 图 2-4 区域文本框 在 Flash CS5 中, 图层与帧的操作通过 时间轴 面板进行, 按照功能不同, 时间轴 面板分为图层操作区和帧操作区两个部分, 如图 2-5 所示 时间轴 面板通过执行菜单栏 中的 窗口 时间轴 命令或按 Ctrl+Alt+T 组合键进行隐藏或显示的切换 图层操作区 帧操作区 图 2-5 时间轴 面板

28 20 制作 Flash 动画 3. 帧操作 在 时间轴 面板右侧的帧操作区中每一个影格代表一个画面, 一个影格就称为一帧 1) 普通帧 关键帧与空白关键帧 帧的类型主要有三种 : 普通帧 关键帧和空白关键帧 在新建的 Flash 文档中包含一 个图层 一个空白关键帧, 根据需要可以创建多个普通帧 关键帧与空白关键帧 (1) 普通帧 普通帧是延续上一个关键帧或空白关键帧的内容, 该帧与前一关键帧之 间的内容完全相同 普通帧的创建方法如下 方法一 : 执行菜单栏中的 插入 时间轴 帧 命令, 或按 F5 快捷键, 就可以插入一个普通帧 方法二 : 在 时间轴 面板中需要插入普通帧处右击, 在弹出的快捷菜单中, 执行 插入帧 命令, 也可以插入一个普通帧 (2) 关键帧 关键帧是用来定义动画变化 更改状态的帧, 创建关键帧的方法如下 方法一 : 执行菜单栏中的 插入 时间轴 关键帧 命令, 或按 F6 快捷键, 就可以插入一个关键帧 方法二 : 在 时间轴 面板中需要插入普通帧出右击, 在弹出的快捷菜单中, 执行 插 入关键帧 命令, 也可以插入一个关键帧 (3) 空白关键帧 空白关键帧是一种特殊的关键帧, 在舞台中没有任何对象存在, 可 以在舞台中自行加入对象, 加入后就自动转化为关键帧 ; 如果关键帧中的对象被全部删除, 那么该帧自动转化为空白关键帧 创建空白关键帧的方法如下 方法一 : 执行菜单栏中的 插入 时间轴 帧 命令, 或按 F7 快捷键, 就可以插入一个空白关键帧 方法二 : 在 时间轴 面板中需要插入普通帧处右击, 在弹出的快捷菜单中, 执行 插入空白关键帧 命令, 也可以插入一个空白关键帧 2) 选择帧选择帧是对帧进行操作的前提, 选择相应帧的同时也就选择了该帧在舞台中的对象 在 Flash 动画制作过程中, 可以选择一个图层的一个帧或同时选择多个帧, 也可以选择不同图层的一个帧或多个帧, 选择帧的常用方法如下 (1) 选择同一图层的单帧 在 时间轴 面板右侧上单击目标帧, 就可以选择该帧 (2) 选择同一图层多个连续帧 在 时间面板 右侧的时间线上单击选择多个连续帧的第一个帧, 按住 Shift 键的同时, 再次单击多个连续帧的最后一个帧, 就可以选择这两个帧之间的全部帧 (3) 选择连续图层的单帧 选择 时间轴 面板的单帧后, 按住 Shift 键的同时, 单击不同图层的相同单帧, 对连续图层的同一帧进行选择 ; 或者在选择单帧的同时向下或向上拖曳, 同样可以选择连续图层的单帧 (4) 选择连续图层的多个连续帧 选择 时间轴 面板的单帧后, 按住 Shift 键的同时单击连续图层的不同帧, 可以对不容图层的多个帧进行选择 ; 或者在选择多个帧的同时向下或向上拖曳鼠标, 同样可以选择连续图层的多个帧 (5) 选择不连续的多帧 在 时间轴 面板右侧的时间线上单击, 选择单帧, 然后按

29 项目 2 逐帧动画 21 住 Ctrl 键的同时, 再单击其他目标帧 步骤 1: 启动 Flash CS5, 在启动向导对话框中单击 从模板创建 栏目中的 广告, 在弹出的对话框中选择 234*60 半横幅 选项, 新建文档 ; 在 属性 面板中的 属性 选项区设置 FPS 为 1.00 选项, 如图 2-6 所示 图 2-6 文档属性设置 步骤 2: 在 工具 面板中选择 文本工具, 在 属性 面板中 字符 选项下进行设置 系列 为 楷体, 大小 为 20.0, 颜色 为 #0000FF, 如图 2-7 所示 ; 在场景中 输入文字为 距离开始抢购还剩分钟, 如图 2-8 所示 步骤 3: 在场景中输入文字 9, 选中文字, 在 属性 面板中 字符 选项下设置 : 系列 为楷体, 大小 为 50.0 和 颜色 为 #FF0000, 如图 2-9 所示 ; 调整文字 9 的位置, 如图 2-10 所示 步骤 4: 在 时间轴 面板中, 选择 图层 1 的第 2 帧, 执行 插入 时间轴 关键帧 命令或按快捷键 F6 插入关键帧, 并把文字 9 修改为 8, 在舞台外单击确定修改, 如图 2-11 所示 步骤 5: 重复步骤 4, 依次在第 等帧按 F6 键, 并在相应的帧上修改文字为 等, 直至为 0, 如图 2-12 所示

30 22 制作 Flash 动画 图 2-7 文本工具 的属性设置 图 2-8 在舞台中输入文字 图 2-9 文本工具 的属性设置图 2-10 在舞台中输入 9 图 2-11 将文字 9 修改为 8 图 2-12 修改数字 步骤 6: 在 图层 1 的第 11 帧处按 F7 键插入空白关键帧 ; 选择 工具 面板中的 文 本工具, 在 属性 面板中 字符 选项下进行设置 系列 为楷体, 大小 为 44.0, 颜色 为 #00FF00, 如图 2-13 所示 ; 在舞台中输入文字 开抢啦!!, 如图 2-14 所示

31 项目 2 逐帧动画 23 开抢啦!! 图 2-13 文本工具 的属性设置图 2-14 输入文字 开抢啦!! 步骤 7: 在 图层 1 的第 11 帧处按 F5 键插入帧, 保存文档为 开抢倒计时.fla, 按 Ctrl+Enter 组合键测试文档 1. 提出任务, 设计构想 任务 2.2 绘制矢量逐帧动画 根据逐帧动画制作原理, 利用各种制作工具在场景中绘制连续变化的矢量图形, 从而 形成逐帧动画 根据文字的书写顺序, 利用擦除工具逆向地绘制文字书写过程, 再翻转帧, 从而实现写字的动画效果 2. 任务展示 绘制矢量逐帧动画 写 茶 字, 如图 2-15 所示 图 2-15 写 茶 字

32 24 制作 Flash 动画 3. 任务分析 (1) 纸张的绘制 (2) 利用橡皮擦工具, 逐帧绘制文字的逆向书写过程 (3) 利用 翻转帧 把文字书写改变成正向书写 1. 矩形工具 矩形工具 的快捷键为 R, 用于绘制矩形图形 在 工具 面板的 矩形工具 处长按鼠标左键, 会弹出一个工具列表, 如图 2-16 所示 使用 矩形工具 可以绘制出矩形或圆角矩形 在 工具 面板中选择 矩形工具, 在舞台中单击并拖曳鼠标, 就可以绘制出矩形图形, 绘制的矩形图形由外部边框和内部填充颜色构成, 边框为笔触线段, 如图 2-17 所示 选择 矩形工具 后, 在 属性 面板中会出现相关的属性设置 矩形工具 的 属性 设置有 填充和笔触 与 矩形选项 两类, 填充和笔触 用于设置矩形外部笔触线段的属性和填充颜色的属性 ; 矩形选项 用于设置矩形 4 个边角半径的角度值, 如图 2-18 所示 (1) 矩形边角半径 : 设置矩形 4 个边角的半径值 (2) 锁定与解锁 : 如果显示为 锁定 状态, 那么修改其中一个边角半径的参数, 则所有的边角半径修改为同样的图 2-16 工具列表参数值 ; 如果显示为 解锁 状态, 那么可以对矩形的四个边 笔融线段 内部填 充颜色 矩形边角半径的设置 图 2-17 绘制的矩形图形 图 2-18 矩形工具 的 属性 面板

33 项目 2 逐帧动画 25 角半径分别进行单独设置 (3) 重置 : 单击 重置 按钮, 矩形边角半径参数值都设置为 0 2. 橡皮擦工具 橡皮擦工具 用来擦除图形的笔触线段或填充颜色, 可以擦除对象的局部或全部 使用 橡皮擦工具 擦除对象的操作是选择 橡皮擦工具, 按住鼠标左键在要擦除的图形上拖曳, 鼠标经过的图形区域将被擦除, 如图 2-19 所示 图 2-19 使用 橡皮擦工具 1) 橡皮擦模式单击 橡皮擦模式 按钮, 会弹出一个下拉列表可以设置擦除的模式, 包括标准擦除 擦除填充 擦除线条 擦除所选填充和内部擦除 5 种模式 (1) 标准擦除 : 在该模式下, 以常规模式进行擦除, 只要鼠标指针经过的地方的图形会全部被擦除 (2) 擦除填充 : 在该模式下, 只对填充颜色进行擦除, 不会对笔触线段产生影响 (3) 擦除线条 : 在该模式下, 只对笔触线段进行擦除 (4) 擦除所选填充 : 在该模式下, 只对处于选中状态的填充颜色进行擦除 (5) 内部擦除 : 在该模式下, 只擦除图形笔触线段以内的填充颜色, 而且只有鼠标指针起点位于填充区域内, 才可以达到所需要的擦除效果, 如图 2-20 所示 标准擦除擦除填色擦除线条擦除所选填充内部擦除 图 2-20 橡皮擦的各种擦除模式 2) 水龙头单击 水龙头 按钮后, 再在图形上单击, 可以一次性擦除连续的填充颜色或笔触线段, 如图 2-21 所示 3) 橡皮擦形状单击 橡皮擦形状 按钮, 在弹出的下拉列表中可以设置橡皮擦的不同形态, 如图 2-22 所示

34 26 制作 Flash 动画 图 2-21 使用 水龙头 擦除图形 3. 帧操作 1) 剪切帧 复制帧和粘贴帧在 Flash 中可以剪切 复制和粘贴图层中的动画帧, 这样就可以把一个动画复制到多个图层中, 或者复制到不同的文档中, 使制作更加轻松并提高工作效率 (1) 复制帧 复制帧是将目标帧复制到剪贴板中以备用, 原来帧的内容仍然存在 复制帧的操作方法如下 方法一 : 选择各目标帧, 然后执行菜单栏中的 编辑 时间轴 复制帧 命令, 或者按 Ctrl+Alt+C 组合键, 这样就可以将目标帧复制 方法二 : 选择各目标帧, 然后在 时间轴 面板中右击, 在弹出的快捷菜单中执行 复制帧 命令, 这样也可以将目标帧复制 方法三 : 选择需要复制的帧, 然后按住 Alt 键的同时拖曳到目标位置处释放鼠标, 就可将目标帧复制到此 图 2-22 橡皮擦形状 (2) 剪贴帧 剪贴帧是将目标帧剪贴到剪贴板中备用, 剪贴帧的操作方法如下 方法一 : 选择各目标帧, 然后执行菜单栏中的 编辑 时间轴 剪切帧 命令, 或者按 Ctrl+Alt+X 组合键, 这样就可以将目标帧剪切 方法二 : 选择各目标帧, 然后在 时间轴 面板中右击, 在弹出的快捷菜单中执行 剪切帧 命令, 这样也可以将目标帧剪切 (3) 粘贴帧 粘贴帧就是将复制或剪切的帧进行粘贴操作, 方法如下 方法一 : 将鼠标指针放置在 时间轴 面板需要粘贴的帧处, 执行菜单栏中的 编辑 时间轴 粘贴帧 命令, 或者按 Ctrl+Alt+V 组合键, 这样就可以将目标帧粘贴到该处 方法二 : 将鼠标指针放置在 时间轴 面板需要粘贴的帧处, 然后右击, 在弹出的快捷菜单中执行 粘贴帧 命令, 这样也可以将目标粘贴到该处 2) 移动帧在动画制作过程中, 帧的位置调整除了复制帧 剪切帧和粘贴帧操作外, 还可以按住鼠标直接进行动画帧的移动操作 帧的移动操作方法如下 首先选择需要移动的帧, 将光标放在选择帧处, 然后按住鼠标左键将它们拖曳到目标位置, 最后释放鼠标就完成了帧的移动操作

35 项目 2 逐帧动画 27 3) 删除帧在动画制作过程中, 出现操作错误或有多余的动画帧, 需要将其删除, 删除操作方法如下 方法一 : 选择需要删除的帧, 然后右击, 在弹出的快捷菜单中执行 删除帧 命令, 这样就可以将各帧删除 方法二 : 选择需要删除的帧, 然后按 Shift+F5 组合键, 这样也可以将各帧删除 4) 翻转帧翻转帧就是将一段连续帧的顺序进行头尾翻转, 例如, 连续的帧为 1~9 帧, 执行 翻转帧 命令, 就会将第 1 帧和倒数第 1 帧 ( 第 9 帧 ) 的对象内容进行交换, 将第 2 帧和倒数第 2 帧 ( 第 8 帧 ) 的对象内容进行交换, 依此类推, 直到交换完毕 常用的方法如下 方法一 : 选择帧, 然后执行菜单栏中的 修改 时间轴 翻转帧 命令, 可以将选择的帧进行头尾翻转 方法二 : 选择帧, 然后在 时间轴 面板中右击, 在弹出的快捷菜单中执行 翻转帧 命令, 同样也可以将选择的帧进行头尾翻转 步骤 1: 新建一个 ActionScript 3.0 的空白 Flash 文档 在 属性 面板中设置大小, FPS 为 12 步骤 2: 在时间轴面板中, 把 图层 1 重命名为 纸张 ; 在 工具 面板中选择 矩 形工具, 设置笔触颜色为 #FFCC00, 笔触大小为 1, 填充颜色为 #FFFFB3; 在舞台绘制矩 形, 使用 选择工具 选择框选矩形, 在 属性 面板上设置 位置和大小 : 宽 为 320, 高 为 280, 并把矩形放置在舞台中心, 选择第 50 帧并按 F5 键插入帧, 锁定该图层, 如 图 2-23 所示 图 2-23 绘制矩形与锁定图层 步骤 3: 新建图层命名为 文字, 选择 文本工具 并在 属性 面板 字体 选项

36 28 制作 Flash 动画 下进行设置 系列 为华文隶书, 大小 为 150, 颜色 为黑色, 如图 2-24 所示 ; 输入 茶 并把文字放在纸张中心, 如图 2-25 所示 图 2-24 文字工具 的 属性 面板步骤 4: 使用 选择工具 选择文字 茶, 执行菜单栏中 修改 分离 命令或按 Ctrl+B 组合键, 结果如图 2-26 所示 步骤 5: 选择 文字 图层的第 2 帧, 按 F6 键插入关键帧, 使用 橡皮擦工具 擦除 茶 字最后一笔捺的后半部分, 如图 2-27 所示 步骤 6: 根据步骤 5, 进行书写顺序的逆向擦除, 其步骤如图 2-28~ 图 2-52 所示 图 2-25 在舞台中输入文字 茶 图 2-26 分离 后的结果 图 2-27 擦除 茶 字最后一笔捺的后半部分图 2-28 逆向擦除 茶 字 ( 一 )

37 项目 2 逐帧动画 29 图 2-29 逆向擦除 茶 字 ( 二 ) 图 2-30 逆向擦除 茶 字 ( 三 ) 图 2-31 逆向擦除 茶 字 ( 四 ) 图 2-32 逆向擦除 茶 字 ( 五 ) 图 2-33 逆向擦除 茶 字 ( 六 ) 图 2-34 逆向擦除 茶 字 ( 七 ) 图 2-35 逆向擦除 茶 字 ( 八 ) 图 2-36 逆向擦除 茶 字 ( 九 )

38 30 制作 Flash 动画 图 2-37 逆向擦除 茶 字 ( 十 ) 图 2-38 逆向擦除 茶 字 ( 十一 ) 图 2-39 逆向擦除 茶 字 ( 十二 ) 图 2-40 逆向擦除 茶 字 ( 十三 ) 图 2-41 逆向擦除 茶 字 ( 十四 ) 图 2-42 逆向擦除 茶 字 ( 十五 ) 图 2-43 逆向擦除 茶 字 ( 十六 ) 图 2-44 逆向擦除 茶 字 ( 十七 )

39 项目 2 逐帧动画 31 图 2-45 逆向擦除 茶 字 ( 十八 ) 图 2-46 逆向擦除 茶 字 ( 十九 ) 图 2-47 逆向擦除 茶 字 ( 二十 ) 图 2-48 逆向擦除 茶 字 ( 二十一 ) 图 2-49 逆向擦除 茶 字 ( 二十二 ) 图 2-50 逆向擦除 茶 字 ( 二十三 ) 图 2-51 逆向擦除 茶 字 ( 二十四 ) 图 2-52 逆向擦除 茶 字 ( 二十五 )

40 32 制作 Flash 动画 步骤 7: 选择 文字 图层的第 1~ 第 23 帧, 右击, 在弹出的快捷菜单中执行 翻转 帧 命令, 如图 2-53 所示 ; 执行命令后的结果如图 2-54 所示 图 2-53 执行 翻转帧 命令 图 2-54 执行 翻转帧 命令的结果步骤 8: 选择 文字 图层的第 29~ 第 50 帧, 移动到第 2 帧开始处, 如图 2-55 所示 步骤 9: 执行 文件 保存 命令, 保存文件为 写 茶.fla ; 按 Ctrl+Enter 组合键测试结果

41 项目 2 逐帧动画 33 图 2-55 移动帧 任务 2.3 用导入的外部静态图片建立逐帧动画 1. 提出任务, 设计构想 根据逐帧动画制作原理, 利用导入的外部静态图片建立逐帧动画 将一组图片根据一 定的顺序放置在一组连续的帧上创建逐帧动画, 制作 盆栽生长 动画, 该方法也可以用来制作奔跑的豹子等 2. 任务展示 根据逐帧动画制作原理, 利用导入的外部静态图片建立逐帧动画 盆栽成长作品, 如图 2-56 所示 3. 任务分析 (1) 导入外部静态图片序列 (2) 按盆栽的生长顺序放置在舞台的一组连续帧中 (3) 使用 绘图纸外观 工具, 使各帧中不变的花盆重叠在一起

42 34 制作 Flash 动画 图 2-56 盆栽成长作品 Flash 是以矢量图形为基础的动画软件, 使用自带的绘图工具可以满足大部分 Flash 动画对象的创建, 与其他专业绘图软件相比, 不能完成复制图形的创建, 所以 Flash 还允许导入外部矢量图形或位图 1. 矢量图与位图 Flash 可以使用的图像主要有两种, 即 位图 和 矢量图 (1) 位图 位图也叫点阵图或像素图 是使用像素阵列来表示的图像, 每个像素的色彩信息由 RGB 组合表示或者使用灰度值表示 位图的大小和质量取决于图像中像素点的多少, 通常情况下, 每平方英寸的面积上所含像素点越多, 图片效果越好 越真实, 同时文件也就越大 (2) 矢量图 矢量图也叫面向对象的图像 是用数学方式描述的曲线或是用曲线围成的色块制作的图形, 图像由在计算机内部表示的一系列数值通过数学公式决定, 生成的文件容量很小 矢量图的优点是无论放大 缩小或旋转等都不会失真 ; 缺点是难以表现色彩层次更加丰富的逼真效果 矢量图与位图相比, 前者放大不会失真, 适合进行图案设计 文字设计 标志设计 版式设计 计算机辅助设计 (CAD) 等 ; 而位图放大后会失真而出现锯齿, 比较适合表现色彩丰富的图像 2. 导入外部图像 Flash CS5 支持计算机中大部分图形格式, 如 JPG GIF PNG BMP AI PSD TIF 等 Flash CS5 导入外部图像的方法如下 (1) 首先执行菜单栏中的 文件 导入 导入到舞台 命令, 弹出 导入 对话框

43 项目 2 逐帧动画 35 (2) 在 导入 对话框 查找范围 下拉列表中选择需要导入外部图像的路径, 然后 在下方文件中选择要导入的图像文件, 此时导入文件的名称自动显示在 文件名 文本框中, 如图 2-57 所示 图 2-57 导入 对话框 (3) 最后单击 打开 按钮, 此时选择的图像将会被导入舞台中 3. 使用 绘图纸工具 编辑动画帧 在制作动画过程中, 通常只能显示一个关键帧的对象, 如果需要显示多个关键帧对象, 就需要使用 绘图纸工具,Flash 绘图纸工具 位于 时间轴 面板的下方, 如图 2-58 所示 1) 在舞台上同时查看动画的多个帧在 时间轴 面板下方单击 绘图纸外观 按钮 后, 在舞台中可以将起始绘图纸外 观标记和结束绘图纸外观标识两个之间的所有帧显示出来, 当前帧以实体显示, 其他帧以 半透明的方式显示 起始绘图纸外观结束绘图纸外观 绘图纸外观修改绘图纸标记 绘图纸外观轮廓 编辑多个帧 图 2-58 绘图纸工具如果单击 绘图纸外观轮廓 按钮, 那么在舞台中可以将绘图纸外观标识之间的所有帧显示出来, 当前帧以实体显示, 而其他帧以轮廓线的方式显示

44 36 制作 Flash 动画 钮 2) 控制绘图纸外观的显示如果想要编辑绘图纸外观标识之间的多个帧, 那么就可以通过单击 编辑多个帧 按进行操作 单击该按钮后, 舞台中可以显示 时间轴 面板中绘图纸外观标记之间所 有关键帧的内容, 不管它是否为当前工作帧 3) 更改绘图纸外观标记的显示 修改绘图纸标记 按钮用于更改绘图纸外观标记的显示范围与属性, 单击该按钮, 会弹出一个下拉列表, 如图 2-59 所示 图 2-59 弹出的下拉列表 (1) 始终显示标记 : 选择该选项可以显示绘图纸外边的左侧起始绘图纸外观和右侧结 束绘图纸外观两个标记, 如图 2-60 所示 (2) 标记绘图纸 : 通常情况下, 绘图纸外观的两个标记会随选择的帧的更改而移动位置, 但是选择了该选项, 那么就会锁定绘图纸外面两个标记不受影响 (3) 标记范围 2: 选择该选项, 会在当前选择的帧的两侧各显示两帧, 如图 2-61 所示 图 2-60 两个标识 图 2-61 选择 标记范围 2 选项时的显示 (4) 标记范围 5: 选择该选项, 会在当前选择的帧的两侧各显示 5 帧, 如图 2-62 所示 (5) 标记整个范围 : 选择该选项, 会在当前选择的帧的两侧显示所有帧, 如图 2-63 所示 图 2-62 选择 标记范围 5 选项时的显示 图 2-63 选择 所有绘图纸 选项时的显示 步骤 1: 新建一个 ActionScript3.0 的空白 Flash 文档 在 属性 面板中进行设置

45 项目 2 逐帧动画 37 尺寸 为 300 像素 400 像素, 背景 为 #CEFFEF, 帧频 为 4, 如图 2-64 所示 步骤 2: 执行 文件 导入 导入到库 命令, 如图 2-65 所示, 在弹出的对话框中设置 查找范围 为素材 项目 2 逐帧动画, 选择 盆栽成长 1.jpg 盆栽成长 2.jpg 盆栽成长 3.jpg 盆栽成长 4.jpg 和 盆栽成长 5.jpg 到库中, 如图 2-66 所示 图 2-64 文档设置 对话框 图 2-65 执行 导入到库 命令 图 2-66 导入到库 对话框 步骤 3: 从 库 面板中把 盆栽成长 1.jpg 拖曳到舞台中, 如图 2-67 所示 ; 选择 图 层 1 的第 2 帧, 按 F7 键插入空白关键帧, 接着把 盆栽成长 2.jpg 拖曳到舞台中 ; 选择

46 38 制作 Flash 动画 图层 1 的第 3 帧, 按 F7 键插入空白关键帧, 接着把 盆栽成长 3.jpg 拖曳到舞台中 ; 选择 图层 1 的第 4 帧, 按 F7 键插入空白关键帧, 接着把 盆栽成长 4.jpg 拖曳到舞台中 ; 选择 图层 1 的第 5 帧, 按 F7 键插入空白关键帧, 接着把 盆栽成长 5.jpg 拖曳到舞台中, 如图 2-68 所示 图 2-67 拖曳 盆栽成长 1 到舞台 图 2-68 拖曳其他图片到舞台 步骤 4: 选择 图层 1 的第 4 帧, 在 时间轴 面板上单击 绘图纸外观 按钮, 调整绘图纸外观的开始标志在第 4 帧处和结束标志在第 5 帧处, 第 4 帧的图形为蓝色矩形框选状态, 如图 2-69 所示 步骤 5: 使用 移动工具 移动第 4 帧中的图形, 使第 4 帧图形的花盆与第 5 帧的花盆位置重叠, 如图 2-70 所示 图 2-69 使用 绘图纸外观 图 2-70 第 4 帧图形的花盆与第 5 帧的花盆 位置重叠

47 项目 2 逐帧动画 39 步骤 6: 选择 图层 1 的第 3 帧, 使用 移动工具 移动第 3 帧中的图形, 使第 3 帧图形的花盆与第 4 帧的花盆位置重叠 ; 选择 图层 1 的第 2 帧, 使用 移动工具 移 动第 2 帧中的图形, 使第 2 帧图形的花盆与第 3 帧的花盆位置重叠 ; 选择 图层 1 的第 1 帧, 使用 移动工具 移动第 1 帧中的图形, 使第 1 帧图形的花盆与第 2 帧的花盆位置重叠 步骤 7: 在 时间轴 面板上单击 绘图纸外观 按钮, 退出绘图纸外观状态 步骤 8: 文档存储为 盆栽成长.fla, 按 Ctrl+Enter 组合键测试影片 任务 2.4 导入序列图像 1. 提出任务, 设计构想根据逐帧动画制作原理, 导入序列图形创建动画 导入 GIF 文件或 SWF 文件生成动画 2. 任务展示根据逐帧动画制作原理, 导入 GIF 图片制作的逐帧动画作品 铁观音 Banner, 如图 2-71 所示 ; 导入 SWF 文件制作的逐帧动画作品 旋转按钮广告, 如图 2-72 所示 图 2-71 铁观音 Banner 3. 任务分析 (1) 导入 GIF 图片到舞台, 生成动画 (2) 导入 SWF 文件到舞台, 生成动画 图 2-72 旋转按钮广告 1. 导入 GIF 图片导入 GIF 图片和导入 JPEG 图片的方式一样, 通过执行 文件 导入 导入到舞台 命令来实现 2. 导入 SWF 文件导入 SWF 图片和导入 JPEG 等图片的方式一样, 通过执行 文件 导入 导入

48 40 制作 Flash 动画 到舞台 命令来实现 导入 GIF 图片和 SWF 文件 步骤 1: 新建一个 ActionScript 3.0 的空白 Flash 文档 在 属性 面板中进行设置 尺寸 为 695 像素 232 像素, 帧频 为 4 步骤 2: 执行 文件 导入 导入到舞台 命令, 如图 2-73 所示 ; 在弹出的对话框中设置 查找范围 为素材 项目 2 逐帧动画, 选择 铁观音 banner.gif, 如图 2-74 所示 命令执行完后的结果如图 2-75 所示 图 2-73 执行 文件 导入 导入 到舞台 命令 图 2-74 导入 对话框 图 2-75 执行完命令后的结果

49 项目 2 逐帧动画 41 步骤 3: 把文档保存为 铁观音 banner.fla, 按 Ctrl+Enter 组合键测试影片 步骤 4: 新建一个 ActionScript 3.0 的空白 Flash 文档 在 属性 面板中进行设置 尺寸 为 234 像素 60 像素, 背景色设置 为 #FFFFFF, 帧频 为 12 步骤 5: 执行 文件 导入 导入到舞台 命令, 在弹出的对话框中设置 查找范围 为 素材 项目 2 逐帧动画, 选择 旋转按钮广告.swf, 如图 2-76 所示 命令执行完后的结果如图 2-77 所示 步骤 6: 把文档保存为 旋转按钮广告.fla, 按 Ctrl+Enter 组合键测试影片 图 2-76 导入 对话框 图 2-77 命令执行完后的结果 项目拓展 1. 打字效果 (1) 输入文字并分离, 如图 2-78 所示

50 42 制作 Flash 动画 图 2-78 输入文字并分离 (2) 新建图层, 绘制光标, 如图 2-79 所示 图 2-79 新建图层并绘制光标 (3) 从后逐帧删除文字并移动光标位置, 如图 2-80 所示 图 2-80 从后逐帧删除文字并移动光标位置 (4) 翻转帧, 完成动画制作, 如图 2-81 所示 图 2-81 翻转帧并完成动画制作 2. 绘制茶树效果 (1) 把 茶树 图片移动到舞台并分离, 如图 2-82 所示 (2) 使用 橡皮擦工具 由树枝末端逐帧开始擦除茶树叶, 如图 2-83 所示 (3) 擦除完茶树叶后, 由树枝末端逐帧开始擦除树枝, 如图 2-84 所示 (4) 完成所有擦除后, 翻转帧 图 2-82 将 茶树 移动到图 2-83 使用 橡皮擦工具 由树图 2-84 由树枝末端逐帧 舞台并分离枝末端开始擦除茶树叶开始擦除树枝

51 项目 2 逐帧动画 制作逐帧动画 使用铁观音泡茶方法序列图片制作逐帧动画, 如图 2-85 所示 沐霖倾杯 观音入宫 悬壶高冲 春风拂面 关公巡城韩信点兵细闻幽香品啜甘霖 图 2-85 使用铁观音泡茶方法序列图片制作逐帧动画

52 项目 3 传统补间动画 项目准备 : 传统补间动画 1. 传统补间动画传统补间动画是 Flash 中另一种常见的基础动画 它是在制作好的前后两个关键帧上的内容后, 两个关键帧之间的过渡帧由 Flash 自动创建, 制作出对象的位移 大小 变形 旋转 透明度 滤镜或色彩等变化的动画效果 只有关键帧可以进行编辑, 中间的过渡帧可以查看, 但是不能进行编辑 在制作传统补间动画时需满足以下条件 : (1) 至少要有两个关键帧 ; (2) 这两个关键帧中的对象必须是同一个对象 ; (3) 这两个关键帧中的对象必须有一些变化 2. 创建传统补间动画传统补间动画的创建方法有两种 : 一种是通过右键菜单 ; 另一种是通过菜单命令 1) 通过右键菜单创建传统补间动画在 时间轴 面板中选择同一图层的两个关键帧之间的任意一帧, 接着右击, 然后在弹出的快捷菜单中执行 创建传统补间 命令, 这样就创建出传统补间动画 创建的传统补间动画就以蓝色背景 起始关键帧为黑色圆点和中间黑色箭头表示, 如图 3-1 所示 与创建传统补间动画相似, 在 时间轴 面板中选择同一图层的两个关键帧之间的任意一帧, 接着右击, 然后在弹出的快捷菜单中执行 删除补间 命令, 这样就将创建的传统补间动画删除, 如图 3-2 所示 2) 使用菜单命令创建补间动画使用菜单命令创建传统补间动画的过程中, 同样需要在 时间轴 面板中选择同一图层的两个关键帧之间的任意一帧, 接着执行菜单栏 插入 传统补间 命令, 这样就创建出传统补间动画 ; 在 时间轴 面板中选择同一图层的两个关键帧之间的任意一帧, 接着执行菜单栏 插入 删除补间 命令, 这样就可以将创建的传统补间动画删除

53 项目 3 传统补间动画 45 选择的菜单命令 创建传统补间动画后的显示 图 3-1 创建传统补间动画 选择的菜单命令 删除传统补间动画后的显示 图 3-2 删除传统补间动画 3. 传统补间动画属性设置 对于已创建的传统补间动画, 可以通过 属性 面板进行动画的各项设置 选择已创 建的传统补间动画的两个关键帧之间的任意一帧, 接着展开 属性 面板, 然后在其下的

54 46 制作 Flash 动画 缓动 旋转贴紧同步 补间 选项中可以设置动画的缓动 旋转等, 如图 3-3 所示 (1) 缓动 : 通过 缓动 选项可以调整速 率, 取值范围为 -100~+100 负值为加速动画 ; 默认值为 0, 速率不变 ; 正值为减速动画 按钮 (2) 缓动编辑 : 单击 缓动 选项右侧的, 在弹出的 自定义缓入 / 缓出 对话 框中可以设置过渡帧更为复杂的速度变化, 如 图 3-4 所示 其中帧由水平轴表示, 变化的百 分比由垂直轴表示, 第一个关键帧表示为 0%, 最后一个关键帧表示为 100%, 对象的变化 速率用曲线图的曲线斜率表示 曲线为水平时, 变化速率为 0; 曲线为垂直时, 变化速率 最大 编辑缓动旋转次数 图 3-3 传统补间动画的 属性 面板 调整到路径缩放 属性 为所有属性使用一种设置 速率曲线 停止播放图 3-4 自定义缓入 / 缓出 对话框 1 属性 : 取消选中 为所有属性使用一种设置 复选框时才可以用, 单击该处, 弹出 5 个属性列表, 分别为 位置 旋转 缩放 颜色 和 滤镜, 每个属性都会有一条相对应的独立的速率曲线 2 为所有属性使用一种设置 复选框 : 默认为选中状态, 表示所显示的曲线适用于所有属性, 其左侧的 属性 选项不可用 3 速率曲线 : 显示对象的变化速率, 可以通过添加控制点调整曲线 4 停止 按钮 : 单击该按钮, 停止舞台上的动画预览 5 播放 按钮 : 单击该按钮, 以当前定义好的速率曲线预览舞台上的动画 6 重置 按钮 : 单击该按钮, 将当前速率曲线重置为默认的线性状态 (3) 旋转 : 用于设置对象旋转的动画, 单击右侧的 自动 按钮, 弹出如图 3-5 所示的下拉列表, 当选择 无 选图 3-5 弹出的下拉列表

55 项目 3 传统补间动画 47 项时, 不设定旋转 ; 当选择 自动 选项时, 可在需要最少动作的方向上将对象旋转一次 ; 当选择 顺时针 选项时, 将对象进行顺时针旋转, 并在右侧设置旋转次数 ; 当选择 逆时针 选项时, 将对象进行逆时针旋转, 并在右侧设置旋转次数 (4) 贴紧 : 选中该复选框时, 可将对象紧贴到引导线上 (5) 同步 : 选中该复选框时, 可使图形元件实例的动画和主时间轴同步 (6) 调整到路径 : 制作引导线动画时, 选中该复选框, 可使动画对象沿着运动路径运动 (7) 缩放 : 选中该复选框时, 可改变对象的大小 任务 3.1 创建位移变化的传统补间动画 1. 提出任务, 设计构想根据传统补间动画制作原理, 创建位移变化的传统补间动画 采摘铁观音茶叶最好的季节是秋季, 秋高气爽, 采茶女在蓝天白云下, 风景宜人的茶园里, 采摘着茶叶 2. 任务展示根据传统补间动画制作原理, 创建位移变化的传统补间动画 蓝天白云, 作品结果如图 3-6 所示 3. 任务分析 图 3-6 蓝天白云 (1) 使用渐变填充工具绘制背景蓝天 (2) 使用多个椭圆重叠在一起绘制白云 (3) 利用传统补间动画制作白云飘动的效果

56 48 制作 Flash 动画 1. 颜色面板 颜色 面板是 Flash 提供的另一种颜色设置方式, 它提供了丰富的颜色填充模式与颜色设置方式, 通过它可以设置单色 渐变颜色或位图填充效果 执行菜单栏中的 窗口 颜色 命令或按 Alt+Shift+F9 组合键可以打开颜色面板, 如图 3-7 所示 (1) 笔触颜色按钮 : 用来设置图形笔触线段的颜色 (2) 填充颜色按钮 : 用来设置图形内部填充的颜色 (3) 黑白颜色按钮 : 单击该按钮用来快速切换的默认的黑白色, 即外边的笔触线段为黑色, 内部填充的颜色为白色 (4) 不填充颜色按钮 : 单击该按钮, 将笔触线段或填充颜色设置为无色 (5) 交换颜色按钮 : 单击该按钮, 可以将笔触线段和填充颜色互换 (6) 颜色类型按钮 : 单击右侧的按钮, 会弹出一个下拉列表, 包括 无 纯色 线性渐变 径向渐变 和 位图填充 选项 无 选项不设置任何颜色 ; 纯色 选项用来设置单色填充 ; 线性渐变 选项用来设置线性渐变颜色填充 ; 径向渐变 选项用图 3-7 颜色 面板来设置径向渐变颜色填充 ; 位图填充 用来设置以位图填充图形 (7) 颜色选择区域 : 在这个区域可以快速地选择所要的颜色 (8) 颜色的十六进制值 : 可以输入颜色的十六进制值来设置颜色 (9) 颜色预览区域 : 在这个区域可以预览选取的颜色 (10)HSB 颜色模式 : 通过 H( 色相 ) S( 饱和度 ) 和 B( 亮度 ) 参数值来设置颜色 (11)RGB 颜色模式 : 通过 R( 红色 ) G( 绿色 ) 和 B( 蓝色 ) 参数值来设置颜色 (12)Alpha: 用来设置颜色的透明值 (13) 颜色调节杆 : 通过上下拖动黑色小三角进行颜色参数调整而设置选择的颜色值 1) 填充单色在 颜色 面板的 颜色类型 中选择 纯色, 可以进行单一颜色的设置, 如图 3-8 所示 2) 填充线性渐变颜色在 颜色 面板的 颜色类型 中选择 线性渐变, 可以进行线性渐变颜色的设置, 如图 3-9 所示 (1) 流 : 用于设置超出颜色填充范围的颜色填充方式 自左向右分别为 扩展颜色 反射颜色 和 重复颜色 其中 扩展颜色 用于将所指定的颜色应用于渐变末端之外, 为默认模式 ; 反射颜色 以反射镜像效果进行填充, 用指定的渐变颜色从开始到结束, 再以相反顺序填充直到完毕 ; 重复颜色 将渐变颜色从开始到结束重复渐变填充直到完毕, 如图 3-10 所示

57 项目 3 传统补间动画 49 图 3-8 设置纯色填充图形 图 3-9 设置线性渐变颜色填充图形 (2) 线性 RGB: 选择该选项, 创建 SVG 兼容的线性渐变 (3) 颜色调节节点 : 用于调整线性渐变颜色的颜色值和渐变颜色的位置 默认情况下, 线性渐变颜色有两个颜色调节节点, 如想增加多个节点设置过渡颜色, 可以在调节节点所在的横条上单击, 从而增加了颜色调节节点, 接着进行扩展颜色反射颜色重复颜色颜色设置即可 ; 如果需要删除多余的颜色调节节填充模式填充模式填充模式点, 选择颜色调节节点, 按住鼠标左键将其拖曳图 3-10 线性渐变颜色的不同填充模式到 颜色 面板外, 即可删除该颜色调节节点 3) 填充径向渐变颜色在 颜色 面板的 颜色类型 中选择 径向渐变, 可以进行径向渐变颜色的设置, 如图 3-11 所示 径向渐变颜色的设置与线性渐变颜色的设置基本相同 4) 填充位图在 颜色 面板的 颜色类型 中选择 位图填充, 可以将 Flash 中导入的位图填充到选择的图形中, 如图 3-12 所示 图 3-11 径向渐变颜色的设置 2. 渐变变形工具 图 3-12 填充位图 渐变变形工具 用来对填充的渐变颜色或位图进行变形处理, 包括填充的渐变颜色或位图的中心位置 方向和范围大小等 在 工具 面板中, 在 任意变形工具 处长按鼠标左键, 会弹出一个下拉列表, 包括 任意变形工具 和 渐变变形工具, 如图 3-13

58 50 制作 Flash 动画 所示, 可以选择 渐变变形工具 1) 调整线性渐变颜色对图形填充线性渐变后, 选择 渐变变形工具, 然后在图形上单击, 就出现 渐变变形工具 的调整状态, 显示 3 个控制点分别为中心节点 方向节点和范围节点, 如图 3-14 所示 方向节点 范围节点 中心节点 图 3-13 渐变变形工具 图 3-14 线性渐变颜色的调整状态 (1) 中心节点 : 用于调整线性渐变颜色的中心位置 (2) 方向节点 : 用于控制线性渐变颜色的渐变方向 (3) 范围节点 : 用于控制线性渐变颜色的范围 使用 渐变变形工具 调整线性渐变颜色的效果如图 3-15 所示 2) 调整径向渐变颜色对图形填充径向渐变后, 选择 渐变变形工具, 然后在图形上单击, 就出现 渐变变形工具 的调整状态, 显示 5 个控制点分别为中心节点 焦点 宽度节点 方向节点和范围节点, 如图 3-16 所示 焦点 宽度节点范围节点 调整线性渐变颜色的中心点 调整线性渐变颜色的方向 调整线性渐变颜色的渐变范围 中心节点 方向节点 图 3-15 调整线性渐变颜色 图 3-16 径向渐变颜色的调整状态 (1) 中心节点 : 用于调整径向渐变颜色的中心位置 (2) 焦点 : 用于调整径向渐变颜色的焦点位置, 焦点只能在中心线上左右移动 (3) 宽度节点 : 用于调整径向渐变颜色的渐变宽度 (4) 方向节点 : 用于调整径向渐变颜色的渐变方向 (5) 范围节点 : 用于调整径向渐变颜色的渐变范围 使用 渐变变形工具 调整径向渐变颜色的效果, 如图 3-17 所示

59 项目 3 传统补间动画 51 原图 调整渐变颜色的中心点 调整渐变颜色的焦点 调整渐变颜色的宽度 调整渐变颜色的范围 调整渐变颜色的方向 图 3-17 调整径向渐变颜色 3) 调整填充的位图对图形填充位图后, 选择 渐变变形工具, 然后在图形上单击, 就出现 渐变变形工具 的调整状态, 显示 7 个控制点分别为中心点 宽度节点 方向节点 范围节点 水平倾斜节点 垂直倾斜节点和高度节点, 如图 3-18 所示 水平倾斜节点方向节点 宽度节点垂直倾斜节点 范围节点高度节点 图 3-18 位图填充的调整状态 (1) 中心节点 : 用于调整填充位图的中心位置 (2) 宽度节点 : 用于调整填充位图的渐变宽度 (3) 方向节点 : 用于调整填充位图的渐变方向 (4) 范围节点 : 用于调整填充位图的渐变范围 中心节点 (5) 水平倾斜节点 : 用于调整填充位图进行水平倾斜 (6) 垂直倾斜节点 : 用于调整填充位图进行垂直倾斜 (7) 高度节点 : 用于调整填充位图的高度 使用 渐变变形工具 调整填充位图的效果, 如图 3-19 所示

60 52 制作 Flash 动画 原图 调整位图填充的中心节点调整位图填充的水平倾斜节点调整位图填充的垂直倾斜节点 调整位图填充的宽度节点调整位图填充的高度节点调整位图填充的方向节点调整位图填充的范围节点 图 3-19 调整位图填充 3. 椭圆工具 椭圆工具 的快捷键为 O, 用于绘制椭圆图形 在 工具 面板的 矩形工具 位置处长按鼠标左键, 会弹出一个工具列表, 如图 3-20 所示 1) 使用 椭圆工具 及其属性设置 椭圆工具 的使用与 矩形工具 的使用类似 选择 椭圆工具 后, 在 属性 面板中也会出现相关的属性设置, 如图 3-21 所示 图 3-20 矩形工具 或 椭圆工具 图 3-21 椭圆工具 的属性设置

61 项目 3 传统补间动画 53 (1) 开始角度与结束角度 : 设置椭圆图形的开始角度值和结束角度值 如果都设置为 0.00, 绘制的图形为椭圆或圆形, 如图 3-22 所示 ; 修改参数值, 绘制出的图形如图 3-23 所示 图 3-22 椭圆的开始角度和结束角度为 0.00 图 3-23 椭圆的开始角度为 和结束角度为 (2) 内径 : 设置椭圆的内径, 参数值范围为 0~99 设置参数置为 0 和 10, 绘制的图 形如图 3-24 所示 (3) 闭合路径 : 设置椭圆的路径是否闭合 默 认情况下为闭合路径 ; 如果没有选中该复选框, 绘制的图形为一条开放的路径, 则生成的图形不会填充颜色 (4) 重置 : 单击 重置 按钮, 椭圆工具 的开始角度 结束角度和内径参数值都重置为 0 图 3-24 椭圆的内径参数为 0 与 10

62 54 制作 Flash 动画 2) 基本矩形工具 与 基本椭圆工具 使用 基本矩形工具 与 基本椭圆工具 同样可以绘制矩形或椭圆, 通过 属性 面板可以自由设置 矩形选项 或 椭圆选项 属性, 从而调整矩形图形的边角半径或椭圆图形的开始角度 结束角度及内径, 也可以用鼠标直接在矩形图形或椭圆图形上进行调整 任务实施 : 蓝天白云 任务实施一 : 绘制蓝天背景步骤 1: 新建一个 ActionScript 3.0 的空白 Flash 文档 在 属性 面板中设置大小为 550 像素 300 像素, 如图 3-25 所示 图 3-25 新建文档及设置步骤 2: 将图层重命名为 蓝天 执行 窗口 颜色 命令, 打开 颜色 面板, 设置 笔触颜色 为 无 和填充颜色为 径向渐变 : 从左到右颜色为 #FFFFFF~ #06BBFF, 如图 3-26 所示 ; 选择 矩形工具, 在舞台上绘制矩形, 使用 选择工具 选中绘制的矩形, 在 属性 面板设置 位置和大小 X 为 0.00, Y 为 0.00, 宽 为 , 高 为 , 如图 3-27 所示 步骤 3: 选择 渐变变形工具, 移动渐变中心点将光源的位置调整一下, 最后把 蓝天 图层锁定, 如图 3-28 所示

63 项目 3 传统补间动画 55 图 3-26 颜色面板的设置 图 3-27 矩形及其 属性 面板设置 图 3-28 调整径向渐变中心点位置 任务实施二 : 绘制白云步骤 4: 新建图层命名为 白云 选择 椭圆工具, 设置笔触颜色为黑色, 填充颜色为白色, 在舞台上按住鼠标左键拖曳一些椭圆重叠在一起组成白云形状, 如图 3-29 所示 步骤 5: 选择 选择工具, 双击笔触线条, 删除全部笔触线条, 如图 3-30 所示 步骤 6: 选择 墨水瓶工具, 在白云边缘填充笔触线段, 如图 3-31 所示 ; 选择 移动工具, 双击笔触线段, 选择全部笔触线段, 按住 Alt 键, 用 移动工具 拖动笔触线段, 如图 3-32 所示 ; 留下下面闭合区域的笔触线段, 删除其他笔触线段, 如图 3-33 所示 步骤 7: 选择 颜料桶工具, 设置 填充颜色 为 #EFEFEF, 在闭合区域填充颜色 ; 选择 移动工具, 双击边缘全选笔触线段, 按 Delete 键删除线条, 结果如图 3-34 所示

64 56 制作 Flash 动画 图 3-29 在舞台中绘制多个椭圆 图 3-30 删除笔触线条 图 3-31 填充笔触线段 图 3-32 移动笔触线段 图 3-33 删除不要的笔触线段 图 3-34 填充及删除笔触线段

65 项目 3 传统补间动画 57 步骤 8: 依此方法绘制其他白云, 如图 3-35 所示 图 3-35 绘制多朵白云任务实施三 : 制作传统补间步骤 9: 在图层 蓝天 的第 60 帧处, 按 F5 键插入帧 ; 在图层 白云 的第 30 帧 第 31 帧和第 60 帧处按 F6 键插入关键帧, 如图 3-36 所示 图 3-36 帧操作 步骤 10: 选择图层 白云 的第 30 帧, 把舞台中的图形移动到舞台右侧外部, 如图 3-37 所示 ; 选择图层 白云 的第 31 帧, 把舞台中的图形移动到舞台左侧外部, 如图 3-38 所示 ; 在第 1 帧和第 30 帧之间的任意帧处, 右击, 在弹出的快捷菜单中执行 创建传统补间动画 命令, 同样在第 31 帧与第 60 帧之间创建传统补间动画, 如图 3-39 所示 图 3-37 将图形移动到右侧 图 3-38 将图形移动到左侧 图 3-39 创建传统补间动画 步骤 11: 在图层 白云 2 的第 45 帧 第 46 帧和第 60 帧处按 F6 键插入关键帧 选择图层 白云 2 的第 45 帧, 把舞台中的图形移动到舞台右侧外部 ; 选择图层 白云 2

66 58 制作 Flash 动画 的第 46 帧, 把舞台中的图形移动到舞台左侧外部 ; 在第 1 帧和第 45 帧之间的任意帧处, 右击, 在弹出的快捷菜单中, 执行 创建传统补间动画 命令, 同样在第 46 帧与第 60 帧 之间创建传统补间动画, 如图 3-40 所示 图 3-40 在 白云 2 图层创建传统补间动画步骤 12: 在图层 白云 的第 18 帧 第 19 帧和第 60 帧处按 F6 键插入关键帧 选择图层 白云 3 的第 45 帧, 把舞台中的图形移动到舞台右侧外部 ; 选择图层 白云 3 的第 46 帧, 把舞台中的图形移动到舞台左侧外部 ; 在第 1 帧和第 18 帧之间的任意帧处, 右击, 在弹出的快捷菜单中, 执行 创建传统补间动画 命令, 同样在第 19 帧与第 60 帧之间创建传统补间动画, 如图 3-41 所示 图 3-41 在 白云 3 图层创建传统补间动画 步骤 13: 执行 文件 保存 命令, 要保存文件的名称为 蓝天白云.fla ; 按 Ctrl+Enter 组合键测试动画 任务 3.2 创建旋转的传统补间动画 1. 提出任务, 设计构想根据传统补间动画制作原理, 创建旋转的传统补间动画 元旦快到了, 很多商家都会举行打折促销自己的商品, 下面为铁观音制作一个元旦促销广告, 用一个旋转的多边形来吸引顾客的眼球, 提示客户在元旦期间, 铁观音礼品打折促销回馈顾客 2. 任务展示根据传统补间动画制作原理, 创建旋转的传统补间动画 旋转按钮广告, 作品如图 3-42 所示 3. 任务分析 图 3-42 旋转按钮广告作品 (1) 多边形绘制与渐变填充 (2) 利用传统补间动画制作旋转的多边形 (3) 添加礼品图片与文字

67 项目 3 传统补间动画 多角星形工具 多角星形工具 用来绘制星形或多边形 在 工具 面板的 矩形工具 位置 处长按鼠标左键, 会弹出一个工具列表, 选择列表最下方的 多 角星形工具 后, 在 属性 面板的 工具设置 选项中单 击 选项 按钮, 会弹出如图 3-43 所示的 工具设置 对话框, 用来设置多角星形的相关属性 (1) 样式 : 有多边形和星形两种用来设置绘制图形的样 式, 如图 3-44 所示 图 3-43 工具设置 对话框 (2) 边数 : 设置绘制多边形或星形的边数 图 3-44 多边形和星形样式 (3) 星形顶点大小 : 设置星形顶角的尖锐程度, 数值越小, 星形顶角角度越小, 就越尖锐 2. 图层操作 在 Flash CS5 中, 图层操作区位于 时间轴 面板的左侧, 图层好比一张透明纸, 各图层按一定的顺序进行叠加, 各个图层操作互相独立, 互不影响 图层的排列顺序决定了在舞台中的显示情况, 其中顶层的对象将始终显示于最上方, 如图 3-45 所示 显示或隐藏所有图层锁定或解除锁定所有图层将所有图层显示为轮廓 图层 图层文件夹 当前工作图层 新建图层 新建图层文件夹 删除图层 图 3-45 时间轴 面板左侧的图层结构 1) 创建图层与图层文件夹新建空白 Flash 文档轴, 在 时间轴 面板中仅有一个名称为 图层 1 的图层, 在动

68 60 制作 Flash 动画 画制作过程中, 用户可以根据动画制作需要创建图层和创建文件夹 创建的文件夹以树形结构排列, 可以在图层文件夹中创建多个图层, 也可以在图层文件夹中创建多个图层文件夹和多个图层 创建图层和图层文件夹的常用操作方法如下 (1) 通过按钮创建 单击 时间轴 面板下方 新建图层 按钮进行图层的创建, 单击一次创建一个普通图层, 如图 3-46 所示 ; 单击 时间轴 面板下方 新建图层文件夹 按钮进行图层文件夹的创建, 同样每单击一次创建一个图层文件夹, 如图 3-47 所示 图 3-46 新建图层 按钮图 3-47 新建图层文件夹 按钮 (2) 通过菜单命令创建 执行菜单栏 插入 时间轴 图层 或 图层文件夹 命令创建图层和图层文件夹 (3) 通过 时间轴 面板右键菜单创建 在 时间轴 面板的左侧的图层处右击, 在弹出的快捷菜单中执行 插入图层 或 插入文件夹 命令, 创建图层和图层文件夹, 如图 3-48 所示 在 时间轴 面板中, 新建的图层或图层文件夹会出现在当前所选图层的上面, 而且成为当前工作层或当前工作图层文件夹, 以蓝色背景显示且名称后带有图标, 如图 3-49 所示 当前工作图层 当前工作图层文件夹 图 3-48 用右键菜单创建图层 图 3-49 当前工作图层和当前工作图层文件夹的显示

69 项目 3 传统补间动画 61 2) 为图层或图层文件夹命名在 时间轴 面板中新建图层或图层文件夹后, 系统会自动命名为 图层 1 图层 2 和 文件夹 1 文件夹 2 为了方便管理, 根据需要设置新名称 在 时间轴 面板的某个图层 ( 或图层文件夹 ) 的名称处快速双击, 进入编辑状态, 接着输入新的名称, 最后按 Enter 键即可完成重命名操作, 如图 3-50 所示 双击名称进入编辑状态输入新的名称按 Enter 键完成操作 图 3-50 为图层重命名的步骤 3) 选择图层与图层文件夹选择图层与图层文件夹是图层编辑的基本操作, 选择图层与图层文件夹的操作方法相同, 可以选择一个或多个, 被选择的图层 ( 或图层文件夹 ) 会以蓝色背景显示, 常用方法如下 (1) 选取单个图层或图层文件夹 在 时间轴 面板左侧图层区的图层 ( 或图层文件夹 ) 名称处单击, 这样该图层 ( 或图层文件夹 ) 就被直接选择 (2) 选取多个连续图层或图层文件夹 在 时间轴 面板中选择第一个图层 ( 或图层文件夹 ), 然后按住 Shift 键的同时选择最后一个图层 ( 或图层文件夹 ) (3) 选取多个不连续图层或图层文件夹 在 时间轴 面板中, 在按住 Ctrl 键的同时单击需要选择的图层名称, 这样就可选择多个不连续的图层 ( 或图层文件夹 ), 如图 3-51 所示 选择单个图层选择多个连续图层选择多个不连续图层 图 3-51 选择图层的显示 4) 调整图层与图层文件夹排序在 时间轴 面板创建图层或图层文件夹时, 会按自下而上的顺序进行添加, 在动画制作过程中, 可以根据需要更改顺序, 常用的方法如下 (1) 更改图层 ( 或图层文件夹 ) 的顺序 首先选择需要更改顺序的图层 ( 或图层文件夹 ), 然后按住鼠标左键, 将其拖曳到目标位置, 释放鼠标即可 (2) 将图层 ( 或图层文件夹 ) 移动到目标图层文件夹中 首先选择需要更改顺序的图层 ( 或图层文件夹 ), 然后按住鼠标左键, 将其拖曳到目标文件夹中, 释放鼠标即可

70 62 制作 Flash 动画 5) 删除图层与图层文件夹 在动画制作过程中, 由于误操作等原因会制作出一些多余或没用的图层或图层文件夹, 就需要将这些多余的图层或图层文件夹删除, 删除的方法如下 方法一 : 首先选择需要删除的图层或图层文件夹, 然后在 时间轴 面板下方的 删 除 按钮 处单击, 就可以将所选择的图层或图层文件夹删除 方法二 : 首先选择需要删除的图层或图层文件夹, 然后按住鼠标左键, 将其拖曳到 时 间轴 面板下方的 删除 按钮 处, 释放鼠标, 即可以完成删除操作 6) 显示与隐藏图层与图层文件夹 默认情况下, 图层与图层文件夹处于显示状态, 有时为了方便观察, 可以将某个图层 或图层文件夹进行隐藏, 方法如下 (1) 全部图层的显示或隐藏 在 时间轴 面板中, 单击上方的 显示或隐藏所有图 层 图标, 可以将所有图层 ( 或图层文件夹 ) 全部显示或隐藏 如果所有表示的图层 ( 或 图层文件夹 ) 右侧图标 对应的列的黑点 显示为红色叉号, 表示全部为隐藏状态, 否 则表示显示状态 (2) 单个图层的显示或隐藏 在 时间轴 面板中, 如果要对某个图层 ( 或图层文件 夹 ) 进行显示或隐藏, 单击该图层 ( 或图层文件夹 ) 右侧图标 对应的列的黑点, 该黑 点 显示为红色叉号, 表示为全部隐藏状态, 否则表示显示状态, 如图 3-52 所示 所有图层显示状态 所有图层隐藏状态 单个图层隐藏状态 图 3-52 图层的显示或隐藏状态 7) 锁定与解除锁定图层与图层文件夹 默认情况下, 图层与图层文件夹处于解除锁定状态, 在动画制作过程中, 工作区中 有时候会有很多个对象, 在编辑某个对象时, 就可能出现其他对象干扰的误操作, 那么 就可以将不需要的图层或图层文件夹暂时给予锁定 图层与图层文件夹的锁定与解除锁 定的操作方法如下 (1) 全部图层的锁定或解除锁定 在 时间轴 面板中, 单击上方的 锁定或解除锁 定所有图层 图标, 可以将所有图层 ( 或图层文件夹 ) 全部锁定或解除锁定 如果所有 表示的图层 ( 或图层文件夹 ) 右侧图标 对应的列的黑点 显示为黑色小锁, 表示全部 图层处于锁定状态, 否则表示处于解除锁定状态 (2) 单个图层的锁定或解除锁定 在 时间轴 面板中, 如果要对某个图层 ( 或图层 文件夹 ) 进行锁定或解除锁定, 单击该图层 ( 或图层文件夹 ) 右侧图标 对应的列的黑 点, 该黑点 显示为黑色小锁, 表示处于锁定状态, 否则表示处于解除锁定状态, 如图 3-53 所示

71 项目 3 传统补间动画 63 所有图层解除锁定状态所有图层锁定状态单个图层锁定状态图 3-53 锁定或解除锁定状态 8) 层与图层文件夹对象的轮廓显示默认情况下, 在动画对象以实体状态显示, 根据需要还可以以轮廓状态显示 图层与图层文件夹的轮廓显示方法如下 (1) 将全部图层显示为轮廓 在 时间轴 面板中, 单击上方的 将所有图层显示为轮廓 图标, 会将所有图层与图层文件夹的对象显示为轮廓 (2) 单个图层对象显示为轮廓 在 时间轴 面板中, 选择需要显示为轮廓的图层, 单击图层名称右侧的图标, 就可以将当前图层的对象以轮廓显示 9) 图层属性的设置除了前面介绍的图层设置外, 还可以通过 图 层属性 对话框进行图层属性的其他设置 执行菜单栏 修改 时间轴 图层属性 命令, 或在 时间轴 面板的某个图层处右击, 在弹出的快捷菜单中执行 属性 命令, 会弹出如图 3-54 所示的 图层属性 对话框 (1) 名称 : 在 名称 文本框输入文字对图层重命名 显示 : 选中该复选框时, 显示图层对象的内容 ; 取消选中时, 隐藏图层对象的内容 锁定 : 选中该复选框时, 设置图层为锁定状态, 取消选中时, 设置图层为解除锁定状态 (2) 类型 : 设置图层的种类 名称类型轮廓颜色图层高度 一般 : 选中该单选按钮时, 设置选择的图层为普通图层 遮罩层 : 选中该单选按钮时, 设置选择的图层为遮罩图层 被遮罩 : 选中该单选按钮时, 设置选择的图层为被遮罩图层 文件夹 : 选中该单选按钮时, 将选择的图层设置为文件夹 图 3-54 图层属性 对话框 引导层 : 选中该单选按钮时, 设置选择的图层为引导层 (3) 轮廓颜色 : 用于设置当前图层中对象的轮廓颜色 选中 将图层视为轮廓 复选框时, 将当前图层中的对象以轮廓显示 (4) 图层高度 : 单击下三角按钮会弹出下拉列表, 有 100% 200% 和 300% 三种用于设置图层的高度

72 64 制作 Flash 动画 任务实施 : 旋转按钮广告 任务实施一 : 制作多角星形 步骤 1: 新建一个 ActionScript 3.0 的空白 Flash 文档 在 属性 面板中设置大小 为 234 像素 60 像素, 背景色设置为 #FFFFFF, 如图 3-55 所示 图 3-55 新建文档步骤 2: 选择 多角星形工具, 在 属性 面板中的 工具设置 选项下单击 选项 按钮, 在弹出的对话框中进行设置 样式 为星形, 边数 为 20, 星形顶点大小 为 1.00, 如图 3-56 所示 在场景中绘制一个多角星形, 如图 3-57 所示 图 3-56 工具设置 对话框 图 3-57 绘制多角星形 步骤 3: 所绘图形在选择状态下, 执行 窗口 颜色 命令, 在打开的 颜色 面 板中设置 : 笔触颜色 为无, 填充颜色 为径向渐变 渐变颜色从左到右设置为 #FF6600~ FF0000, 如图 3-58 所示 场景中的结果如图 3-59 所示

73 项目 3 传统补间动画 65 图 3-58 颜色 面板的设置 图 3-59 舞台中的图形 任务实施二 : 创建传统补间动画 步骤 4: 在 图层 1 的第 40 帧处, 按 F6 键插入关键帧 ; 在 图层 1 的第 1 帧至第 40 帧之间的任意一帧处右击, 在弹出的快捷菜单中执行 创建传统补间 命令, 如图 3-60 所示 步骤 5: 在 属性 面板的 补间 选项处进行设置 缓动 为 50 和 旋转 为顺 时针, 如图 3-61 所示 步骤 6: 在 时间轴 面板上单击 新建图层 按钮, 新建图层为 图层 2, 鼠标 在图层名称 图层 2 处双击, 输入名称为 文本 ; 选择 文本工具, 对 属性 面板 的 字符 选项进行设置 系列 为黑体, 大小 为 30, 颜色 为 #FFFF00, 如图 3-62 所示 在场景中输入文字 5 折, 如图 3-63 所示 图 3-60 创建传统补间动画

74 66 制作 Flash 动画 图 3-61 创建传统补间动画的 属性 面板的设置 图 3-62 文字工具 的属性设置 任务实施三 : 添加礼品图片与文字步骤 7: 在 时间轴 面板上单击 新建图层 按钮, 新建图层为 图层 3, 重命名为 茶礼 执行 文件 导入 导入到舞台 命令, 导入 素材 项目 3 礼盒.jpg, 将图片导入舞台并调整位置, 如图 3-64 所示 图 3-63 输入文字后的效果 图 3-64 导入 礼盒.jpg 到舞台 步骤 8: 在 时间轴 面板上单击 新建图层 按钮, 新建图层为 图层 3, 重命 名为 文本 2 选择 文本工具, 对 属性 面板的 字符 选项进行设置 系列 为黑体, 大小 为 30, 颜色 为 #FFFF00, 如图 3-65 所示 在舞台中输入文字 元旦促销, 如图 3-66 所示 图 3-65 文本工具 的属性设置图 3-66 在舞台中输入 元旦促销 步骤 9: 保存文件为 旋转按钮广告.fla, 按 Ctrl+Enter 组合键测试动画

75 项目 3 传统补间动画 67 任务 3.3 创建透明度变化的传统补间动画 1. 提出任务, 设计构想创建透明度变化的传统补间动画, 制作图片由透明慢慢地全部显示出来的效果 ; 依照此方法也可以制作图片慢慢模糊到全部消失的效果, 这种技术应用在动画或电影制作技术中, 称为淡入淡出 2. 任务展示创建透明度变化的传统补间动画 淡入背景广告, 作品如图 3-67 所示 3. 任务分析 图 3-67 淡入背景广告作品 (1) 导入背景图片 (2) 将背景图片转换为元件, 修改 Alpha 值, 利用传统补间动画制作淡入动画 (3) 利用文字工具输入 安溪铁观音 1. 库 面板 展开 库 面板可以通过执行菜单栏中的 窗口 库 命令或按 F11 键或按 Ctrl+L 组合键 Flash 中库是用于存放各种动画元素的场所, 默认情况下, 新建的 Flash 文档中的 库 面板里面没有任何对象, 库 面板的结构如图 3-68 所示 (1) 打开的文档 : 单击该处会弹出一个显示当前打开的所有文档名称的下拉列表, 通过选择可以查看被选择文档的 库 面板

76 68 制作 Flash 动画 右键菜单 打开的文档 新建库面板 固定当前库 预览窗口 属性显示 搜索 新建元件新建文件夹 删除 属性图 3-68 库 面板 (2) 右键菜单 : 单击该处会弹出一个右键菜单 (3) 新建库面板 : 单击该按钮会创建一个与当前文档相同的 库 面板 (4) 预览窗口 : 库 面板中被选择的元素会显示在当前窗口中 (5) 搜索 : 在此处输入关键字进行元素名称的搜索, 从而快速查找对象 (6) 属性显示 : 库 面板的对象共有 5 种属性显示 名称 链接 使用次数 修改日期和类型, 单击不同属性显示后, 可以进行按相关属性排序 ; 单击 切换排列顺序 按钮, 可以进行倒序排列 (7) 新建元件 : 单击该按钮会弹出一个如图 3-69 所示的 转换为元件 对话框, 接着就可以创建一个新元件 图 3-69 转换为元件 对话框 (8) 新建文件夹 : 单击该按钮会创建一个新元件文件夹 (9) 属性 : 选择 库 面板中某一对象后, 单击该按钮会弹出一个相关的属性对话框用于修改其属性 (10) 删除 : 选择 库 面板中某一对象后, 单击该按钮会把当前选择的对象删除

77 项目 3 传统补间动画 元件 1) 元件的类型 元件是构成 Flash 动画的基础 元件有 影片剪辑 按钮 和 图形 3 种类型, 用 户可以根据需要创建不同类型的元件 (1) 影片剪辑元件 影片剪辑元件拥有自己独立的时间轴, 在舞台中播放不会受到主 场景时间轴的影响 (2) 按钮元件 用户使用按钮元件可以实现与动画交互, 当创建一个按钮元件时, 会 创建一个拥有 弹起 指针经过 按下 和 点击 4 帧的时间轴 (3) 图形元件 图形元件是动画制作中的最小管理元素, 它也具有时间轴, 但在舞台 中播放会受到主场景时间轴的影响 2) 创建元件 在 Flash 动画制作过程中, 对于使用一次以上的对象, 尽量把它转化为元件再使用 创建元件有以下两种方法 方法一 : 直接创建新元件 通过 创建新元件 对话框完成创建一个空的元件, 接着 在编辑窗口中创建对象 方法二 : 将已经创建好的对象转换为元件 选择已经创建好的对象, 通过 转换为元 件 对话框完成 3) 实例的创建与编辑 (1) 实例的编辑方式 (2) 影片剪辑 实例的属性设置 选择舞台中的 影片剪辑 实例后, 在 属性 面板中就会显示影片剪辑实例的相关 属性设置, 如图 3-70 所示 1 实例类型图标 : 以图标的形式显示当前选择实例的元件类型 2 实例名称 : 用于设置实例的名称, 以便在动画制作中, 通过 ActionScript 动作脚本 对实例进行控制 3 实例行为 : 用于重新设置实例的类型 单击 影片剪辑 的下三角按钮, 在弹出的 下拉列表中选择其他的实例类型, 就可以转换为相应的类型, 如图 3-71 所示 4 元件名称 : 显示当前选择的实例的元件名称, 与 实例名称 不同 5 交换元件 : 单击 交换 按钮, 在弹出的 交换元件 对话框中选择相应的元件 ; 当前实例的前面有一个黑色小圆形, 可以选择其他元件实例替换当前选择的实例, 如图 3-72 所示 位置和大小 选项 : 位置和大小 选项用于设置选择实例的位置和大小, 单击其左 侧的图标, 可以将其展开 3D 定位和查看 选项 : 3D 定位和查看 选项用于设置影片剪辑实例的 3D 位置和 大小 透视角度和消失点 单击其左侧的图标, 可以将其展开

78 70 制作 Flash 动画 图 3-70 属性 面板 图 3-71 弹出的下拉列表 图 3-72 交换元件 对话框 图 3-73 色彩效果 下拉列表选项 色彩效果 选项 : 通过 色彩效果 选项可以对选择实例进行颜色和透明度等颜色属性的设置 首先选择舞台中的影片剪辑实例, 然后单击 属性 面板 色彩效果 选项中 样式 右侧的 无 的下三角按钮, 会弹出一个下拉列表, 如图 3-73 所示 1 无 : 为默认选项, 不产生影响 2 亮度 : 用于设置实例的颜色亮度 选择该项后, 出现关于 亮度 的相关选项, 如图 3-74 所示, 颜色亮度的参数值越大颜色越亮, 当为 100% 时, 实例的颜色为白色 ; 参数值越小颜色越暗, 当为 -100 时, 实例颜色为黑色 3 色调 : 用于在同一色调的基础上调整实例的颜色 选择该项后, 出现关于 色调 的相关选项, 如图 3-75 所示

79 项目 3 传统补间动画 71 图 3-74 亮度 选项的设置 图 3-75 色调 选项的设置 色块 : 用于设置实例色调的颜色 色调 : 用于设置实例色调的饱和度 当参数值为 100% 时, 实例的颜色为完全饱和状态 ; 当参数值为 0% 时, 实例的颜色为透明饱和状态 红 绿 蓝 : 通过设置这 3 种颜色而设置实例色调的颜色 4 高级 : 通过调整红色 绿色 蓝色和透明度值对实例进行设置, 选择该选项后, 出 现关于 高级 的相关选项, 如图 3-76 所示 其中左侧的各选项可以按指定的百分比降低 颜色或透明度的值 ; 右侧的各项可以按常数值降低或增大颜色或透明度的值 5 Alpha: 用于调整实例的透明值, 选择该选项后, 出现关于 Alpha 的相关选项, 如图 3-77 所示, 参数值越小实例越透明, 参数值越大实例越不透明 参数值为 0% 时, 实 例完全透明 ; 参数值为 100% 时, 实例完全不透明 图 3-76 高级 选项的设置 图 3-77 Alpha 选项的设置 显示 选项 : 显示 选项用于为选择的实例添加混合效果, 混合可以将两个叠加在 一起的对象产生混合重叠颜色的独特效果, 混合的对象只是影片剪辑和按钮实例元件 为对象添加混合效果, 首先选择舞台中的影片剪辑和按钮实例, 接着单击 属性 面板 显

80 72 制作 Flash 动画 图 3-78 混合 的下拉列表 示 选项中 混合 中的 一般 的下三角按钮, 会弹出混合模式列表, 如图 3-78 所示 一般 : 默认的混合模式, 常应用于颜色, 不与基准颜色有相互关系 图层 : 层叠各个影片剪辑而不影响各自的颜色 变暗 : 使比混合对象颜色亮的区域变暗, 使比混合对象颜色暗的区域不变, 用于对象进行变暗处理 正片叠底 : 用于将基准颜色与混合颜色复合, 从而产生较暗的颜色 变亮 : 使比混合对象颜色亮的区域不变, 使比混合对象颜色暗的区域变亮, 用于对象进行变亮处理 滤色 : 用于将混合颜色的反色与基准颜色复合, 从而产生漂白效果 叠加 : 用于复合或过滤颜色, 取决于基准颜色 强光 : 用于复合或过滤颜色, 取决于混合模式颜色 增加 : 用于将混合后的颜色与混合颜色相加 减去 : 用于将混合后的颜色与混合颜色相减 差值 : 用于将混合后的颜色减去混合颜色, 或从混合颜色中减去混合后的对象颜色, 取决于哪个颜色的亮度值较大 反相 : 用于反转基准颜色 Alpha: 用于 Alpha 遮罩层, 该对象为不可见状态 擦除 : 用于删除所有基准颜色像素, 包括背景中的颜色 滤镜 选项 : 滤镜 选项用于为选择的实例添加一些模糊 发光等特殊滤镜效果 滤镜效果的添加对象可以是文本 影片剪辑和按钮实例, 不能为图形实例 选择舞台中的实例, 单击 属性 面板 滤镜 选项左侧的图标, 展开 滤镜 选项设置, 如图 3-79 所示 1 添加滤镜操作 : 单击 添加滤镜 按钮, 在弹出如图 3-80 所示的下拉列表中可以为当前选择对象进行添加滤镜操作, 分别是投影 模糊 发光 斜角 渐变发光 渐变斜角和调整颜色, 共 7 种 投影 : 用于为选择的对象产生投影到一个表面上的效果, 添加该滤镜后, 可以对阴影大小 角度 品质 颜色 距离等进行设置 模糊 : 用于为选择的对象产生模糊的效果, 添加该滤镜后, 还可以对模糊的大小和品质等进行设置

81 项目 3 传统补间动画 73 发光 : 用于为选择的对象产生内发光和外发光效果, 添加该滤镜后, 还可以对发光 图 3-79 滤镜 选项 图 3-80 添加滤镜的下拉列表 大小 品质和颜色等进行设置 斜角 : 用于为选择的对象产生立体浮雕的效果, 添加该滤镜后, 还可以对斜角的大小 品质 角度 斜角后产生的阴影和亮部的颜色 距离等进行设置 渐变发光 : 用于为选择对象产生渐变发光的效果, 添加该滤镜后, 还可以对渐变的方 式 发光颜色等进行设置 渐变斜角 : 用于为选择对象产生一种凸起效果 调整颜色 : 用于调整选择对象的颜色属性, 包括对比度 亮度 饱和度和色相 2 删除滤镜 删除滤镜可以是删除单个滤镜或删除全部滤镜 删除单个滤镜 : 选择需要删除的滤镜, 接着单击 属性 面板下方 删除滤镜 按钮 删除全部滤镜 : 单击 删除滤镜 按钮, 在弹出的下拉列表中执行 删除全部 命 令即可 3 剪贴板 单击 剪贴板 按钮, 会弹出一个下拉列表包括 复制所选 复制全部 和 粘贴 3 个选项, 如图 3-81 所示 方便将相同滤镜应用到不同对象 通过下拉 列表的选项, 可以进行复制 粘贴单个滤镜和复制 粘贴全部滤镜的操作 复制 粘贴单个滤镜 : 选择需要复制的滤镜, 单击 剪贴板 按钮, 在弹出的下拉列表中执行 复制所选 命令, 就将选择的滤镜复制到剪贴板中 ; 然后选择需要添加滤镜的对象, 再次单击 滤镜 选项中 剪贴板 按钮, 在弹出的菜单中执行 粘贴 命令, 就将复制的滤镜粘贴到此处 复制 粘贴全部滤镜 : 选择任一滤镜, 单击 剪贴板 按钮, 在弹出的下拉列表中

82 74 制作 Flash 动画 执行 复制全部 命令, 就将所有滤镜复制到剪贴板中 ; 然后选择需要添加滤镜的对象, 再次单击 滤镜 选项中 剪贴板 按钮, 在弹出的菜单中执行 粘贴 命令, 就将复制的全部滤镜粘贴到此 4 启用 禁用滤镜效果操作 在制作动画过程中, 如果不想使用滤镜的效果, 除了直接删除它, 还可以对其进行启用与禁用滤镜的切换 在默认情况下, 添加的各滤镜为启用状态, 将启用状态切换到禁用状态, 滤镜名称右侧显示为图标 5 重置滤镜操作 单击 重置滤镜 按钮, 可以将当前选择的滤镜恢复到默认设置, 再重新进行设置 6 创建预设滤镜库操作 单击 预设 按钮, 在弹出的下拉列表中可以将设置好的滤镜保存为滤镜库, 并可以对其进行重命令和删除等操作, 从而方便以后的使用, 如图 3-82 所示 图 3-81 剪贴板下拉列表图 3-82 预设下拉列表 任务实施 : 淡入背景广告 步骤 1: 新建一个 ActionScript 3.0 的空白 Flash 文档 在 属性 面板中设置大小为 778 像素 282 像素 步骤 2: 执行 文件 导入 导入到舞台 命令, 在弹出的 导入 对话框中进行设置 查找范围 为 素材 项目 3 传统补间动画 背景.jpg, 如图 3-83 所示 步骤 3: 使用 选择工具 选择舞台中的图片, 按 F8 键将其转换为元件, 在弹出的 转化为元件 对话框中进行设置 名称 为背景和 类型 为图形, 如图 3-84 所示 ; 在 属性 面板中的 位置和大小 选项下进行设置 : X 为 0.00 和 Y 为 0.00

83 项目 3 传统补间动画 75 图 3-83 导入 对话框 图 3-84 转换为元件 对话框 步骤 4: 在 时间轴 面板中, 重命名 图层 1 为 背景, 选择该图层的第 12 帧按 F6 键插入关键帧 ; 选择该图层的第 1 帧, 选择舞台中的 背景 图形元件, 在 属性 面板中 色彩效果 选项下设置 : 样式 为 Alpha 和 Alpha 为 0%, 如图 3-85 所示 步骤 5: 在 背景 图层的第 1~ 第 12 帧之间的任意一帧处, 右击, 在弹出的快捷菜单中执行 创建传统补间动画 命令, 如图 3-86 所示 ; 在该图层的第 120 帧处按 F5 键插入普通帧 图 3-85 色彩效果选项的设置 步骤 6: 在 时间轴 面板中, 单击 新建图层 按钮 图 3-86 创建传统补间动画 本 图层的第 12 帧处按 F7 键插入空白关键帧, 如图 3-87 所示, 并重命名为 文本 ; 在 文 图 3-87 新建图层与插入空白关键帧 步骤 7: 选择 文本工具, 在 属性 面板中 字符 选项下进行设置 系列 为 华文行楷, 大小 为 100, 颜色 为 #000000, 如图 3-88 所示

84 76 制作 Flash 动画 图 3-88 文本工具的 属性 设置 步骤 8: 在舞台中输入文字 安溪铁观音 并调整到合适位置, 如图 3-89 所示 图 3-89 输入文字并调整位置步骤 9: 使用 选择工具 选择舞台中的文字, 按 F8 键将其转换为元件, 在弹出的 转换为元件 对话框中进行设置 名称 为文本, 类型 为图形 在 文本 图层的第 24 帧处按 F6 键插入关键帧 ; 选中该图层的第 12 帧, 使用 选择工具 选择舞台中的 文本 图形元件, 在 属性 面板中 色彩效果 选项下进行设置 样式 为 Alpha, Alpha 为 0% 步骤 10: 在 文本 图层的第 12~ 第 24 帧之间的任意一帧处, 右击, 在弹出的快捷菜单中执行 创建传统补间动画 命令 ; 在该图层的第 120 帧处按 F5 键插入普通帧 步骤 11: 把文档保存为 淡入背景广告.fla, 按 Ctrl+Enter 组合键测试影片, 如图 3-90 所示 图 3-90 动画结果

85 项目 3 传统补间动画 77 任务 3.4 创建大小变化的传统补间动画 1. 提出任务, 设计构想 根据传统补间动画制作原理, 创建大小变化的传统补间动画 2. 任务展示 根据传统补间动画制作原理, 创建大小变化的传统 补间动画 闪动背景, 作品如图 3-91 所示 3. 任务分析 (1) 利用钢笔工具绘制放射光芒, 并用线性渐变填 充 ; 利用变形面板, 旋转并复制放射光芒, 完成背景 制作 元件 (2) 利用传统补间动画制作闪动背景 (3) 使用多边形工具绘制五角星, 创建闪动五角星 1. 路径工具 在 Flash 中, 路径工具包括 钢笔工具 和 部分选取工具 钢笔工具 用 来绘制矢量路径, 部分选取工具 1) 路径 用来调整矢量路径 图 3-91 闪动背景作品 路径可以由一个或多个直线段或曲线段组成 线段的起始点和结束点用锚点表示 路径可以是闭合的, 如绘制的椭圆和矩形等 ; 路径也可以是开放的, 有明显的起点和终点, 如线段和曲线 通过拖动图形上路径的锚点 拖动锚点方向线末端的方向点可以改变图形的形状 (1) 锚点 锚点分为平滑点和角点两种 平滑点是指路径平滑过渡的锚点, 它的两端的线段都是曲线段 ; 而角点是指突然改变路径方向的锚点, 它的两端还可以是直线段或曲线段, 如图 3-92 所示 (2) 方向线与方向点 选择路径或锚点时, 连接曲线段的锚点会显示方向手柄, 方向手柄由方向线和方向点组成 方向线的角度和长度决定了曲线段的形状, 如图 3-93 所示

86 78 制作 Flash 动画 角点 平滑点 方向点 锚点 方向线 图 3-92 角点与平滑点 图 3-93 方向点与方向线 2) 使用钢笔工具绘制图形使用 钢笔工具 可以绘制直线路径或曲线路径, 在绘制过程中通过调整锚点或锚点方向线上的方向点可以精确地绘制路径的形状 使用 钢笔工具 绘制路径的方法如下 (1) 在 工具 面板中选择 钢笔工具, 将光标移动到舞台中, 在合适的位置处单击, 确定绘制路径的第一个锚点, 移动鼠标到合适的位置再次单击确定第二个锚点, 两个锚点就连接成一条线段, 如图 3-94 所示 (2) 再次将光标移动到其他合适位置处, 单击鼠标左键并按住拖曳, 拖曳出锚点的方向线, 创建两个锚点之间的曲线, 如图 3-95 所示 ; 改变方向点的位置和方向线的长短会改变曲线的形状 锚点 两个锚点创建的直线 锚点 图 3-94 创建的直线 图 3-95 创建的曲线 (3) 将光标放置在第一个锚点处单击, 可以创建一个封闭的路径, 如图 3-96 所示 3) 锚点工具单击 工具 面板的 钢笔工具 按钮, 会弹出一个下拉列表, 有 添加锚点工具 删除锚点工具 和 转换锚点工具 选项, 如图 3-97 所示 图 3-96 创建封闭的路径 图 3-97 弹出的工具列表

87 项目 3 传统补间动画 79 (1) 添加锚点工具 添加锚点工具 用来在路径上添加锚点 选择 添加锚点工具, 光标会变成 形状显示, 将光标移动到路径上需要添加锚点处, 单击, 就可以在路径上添加一个锚点 (2) 删除锚点工具 删除锚点工具 用来删除路径上的锚点 单击 删除锚点工具 图标, 光标会变成 形状显示, 将光标移动到路径上需要删除的锚点处, 单击, 就会把该锚点删除 (3) 转换锚点工具 转换锚点工具 用于转换锚点的形式 可以将角点转换为平滑点, 也可以将平滑点转换为角点 使用 转换锚点工具 在平滑点上单击, 即可将平滑点转换为角点 ; 使用 转换锚点工具 在角点上单击并按住鼠标左键拖曳, 可以拖曳出锚点的方向线, 通过拖曳方向线上的方向点, 可以改变锚点线段两端曲线的形状, 松开鼠标后, 路径上的角点就转换为平滑点 4) 调整路径在路径绘制完成后, 可以使用 部分选取工具 对其进行调整 通过 部分选取工具 可以对路径进行选择或移动, 还可以选择路径上的锚点 改变锚点的位置或者调整锚点两侧线段的形状 (1) 选择路径 : 在 工具 面板中选择 部分选取工具, 接着在绘制的路径上单击即可将其选择 (2) 移动路径 : 使用 部分选取工具 在绘制的路径上单击并按住鼠标左键拖曳, 可以将其移动 (3) 选择锚点 : 使用 部分选取工具 选择绘制的路径, 然后将光标放置在锚点上 单击, 可以将该锚点选中, 此时该锚点以实心矩形显示 ; 使用 部分选取工具 中按住鼠标左键拖曳, 在拖曳范围内的锚点会被选中 2. 任意变形工具 1) 使用任意变形工具使对象变形 在舞台 任意变形工具 用于改变对象形状, 对对象进行缩放 旋转和倾斜等操作 使用 任 意变形工具 选择对象后, 在对象的中心位置出现一个空心的圆点, 为对象变形的中心 点 ; 四周出现 8 个黑色矩形点, 用于控制对象变形操作, 如图 3-98 所示 (1) 缩放对象 使用 任意变形工具 选择对象后, 将光标放置到对象四周矩形 点上, 当光标变为双向箭头时按住鼠标左键向外或向内拖曳, 则对象随着鼠标移动进行 缩放, 如按住 Shift 键拖曳鼠标, 则对象随着光标移动进行等比例缩放 ; 将光标放置在水 平边框中心处的矩形点, 当光标变成垂直方向的双向箭头时按住鼠标拖曳, 则对象随着 光标移动进行垂直方向的缩放 ; 将光标放置在垂直边框中心处的矩形点, 当光标变成水 平方向的双向箭头时按住鼠标拖曳, 则对象随着光标移动进行水平方向的缩放, 如图 3-99 所示 (2) 旋转对象 使用 任意变形工具 选择对象后, 将光标放置到对象四周矩形点上, 当光标变成形状时, 按住鼠标左键向四周拖动, 如图 所示 (3) 倾斜对象 使用 任意变形工具 选择对象后, 将光标放置到对象上下两个边框中心的矩形点上, 当光标变为水平方向上的箭头时, 按住鼠标左键向左或向右拖曳,

88 80 制作 Flash 动画 控制对象变形的矩形点 对象变形的中心点 任意缩放垂直方向缩放水平方向缩放图 3-98 使用 任意变形工具 选择对象图 3-99 缩放对象则对象随着光标移动进行水平方向的倾斜 ; 将光标放置到对象左右两个边框中心的矩形点, 当光标变为垂直水平两个方向上的箭头时, 按住鼠标左键向上或向下拖曳, 则对象随着光标移动进行垂直方向的倾斜, 如图 所示 水平倾斜对象 垂直倾斜对象 图 旋转对象 图 倾斜对象 2) 任意变形工具的相关选项 在 工具 面板中选择 任意变形工具 后, 在 工具 面板下方的 选项 中会 出现其相关选项, 包括 缩放 套封 旋转与倾斜 和 扭曲 4 种, 如 图 所示 (1) 缩放 : 用于对选择的对象进行缩放的操作 (2) 套封 : 用于对选择的对象进行变形的操作, 改变对象的形状, 通过改变选择对象周围的控制手柄来 改变形状, 与调整图形的路径类似 使用 任意变形工 旋转与倾斜缩放扭曲 具 选择对象后, 单击此按钮, 对象的周围会出现一 封套 个带有 8 个控制点的变形框, 通过移动控制点的位置或 改变控制柄长短和方向而改变对象的形状, 如图 所示 (3) 旋转与倾斜 : 用于对选择的对象进行旋转 与倾斜的操作 (4) 扭曲 : 用于对选择的对象进行扭曲的操 作 选择此按钮后, 将光标放置到对象四周的矩形点上, 按住鼠标左键拖曳, 对象随着鼠标移动发生扭曲, 如图 图 任意变形工具的相关选项 所示

89 项目 3 传统补间动画 81 图 使用封套改变图形形状 图 扭曲对象 3. 变形 面板 变形 面板可以用于对对象进行精确的变形 操作 通过执行菜单栏中 窗口 变形 命令 或按 Ctrl+T 组合键将其打开, 如图 所示 分比 分比 (1) 缩放高度 : 用于设置选择对象高度的百 (2) 缩放宽度 : 用于设置选择对象宽度的百 (3) 重置 : 用于恢复对象到缩放前的状态 (4) 约束 : 锁定宽度与高度的百分比后, 调 缩放高度缩放宽度 水平倾斜 整对象的宽度或高度的任一参数, 另一个参数也图 变形 面板会发生相应的变化 (5) 旋转 : 用于设置选择对象的旋转角度 (6) 倾斜 : 用于设置选择对象的水平倾斜与垂直倾斜的角度值 (7) 重制选区与变形 : 单击此按钮, 对对象进行复制的同时再应用变形, 如图 所示 任务实施 : 闪动背景 图 重制并应用变形 重置约束 垂直倾斜 取消变形重制选区和变形 步骤 1: 新建一个 ActionScript 3.0 的空白 Flash 文档 在 属性 面板中设置大小为 400 像素 300 像素, 如图 所示

90 82 制作 Flash 动画 图 新建文档步骤 2: 选择 钢笔工具 在场景中绘制一个三角形, 如图 所示 步骤 3: 执行 窗口 颜色 命令, 打开颜色面板, 设置 笔触颜色 为无, 填充颜色 值为 100% 的 #FD9900 到 0% 的 #FF9900 的径向渐变, 如图 所示 在 工具 面板中选择 填充工具, 在场景中的三角形底边的顶角处单击, 为三角形填充颜色, 如图 所示 步骤 4: 选择 移动工具, 双击三角形的边框, 选择三角形的笔触线段并将其删除, 结果如图 所示 图 绘制路径图 颜色 面板设置图 填充颜色图 删除笔触线段 步骤 5: 选择 任意变形工具, 在场景中单击三角形, 调整图形的中心点到三角形底

91 项目 3 传统补间动画 83 边顶角下方, 如图 所示 执行 窗口 变形 命令, 打开 变形 面板, 把 旋 转 的参数设置为 20.00, 如图 所示 图 移动变形中心点位置 图 变形 面板设置 步骤 6: 连续单击 变形 面板上的 重制选区和变形 按钮, 完成对图形的复制, 如图 所示 步骤 7: 单击 图层 1 的第 1 帧, 全选舞台中的图形, 执行菜单栏中的 修改 转换为元件 命令, 在弹出的 转换为元件 对话框中进行设置 名称 为背景, 类型 为图形, 单击 确定 按钮, 如图 所示 图 重制并应用变形 图 转换为元件 对话框设置 步骤 8: 使用 任意变形工具 选中舞台中的 背景 图形元件, 对其进行缩放变形, 如图 所示 步骤 9: 背景 图形元件在被选中状态下, 执行菜单栏中的 修改 转换为元件 命令, 在弹出的 转换为元件 对话框中进行设置 名称 为闪动背景, 类型 为影片剪辑, 单击 确定 按钮, 如图 所示 步骤 10: 移动光标到舞台中, 在 闪动背景 影片剪辑元件上双击, 进入影片剪辑编辑状态 ; 在 图层 1 的第 6 帧和第 10 帧处分别按 F6 键插入关键帧, 接着选择第 6 帧, 对舞台中的图形进行旋转任意角度和放大, 如图 所示

92 84 制作 Flash 动画 图 缩放变形 图 转换为元件 对话框 步骤 11: 单击按钮返回场景中, 在图层面板上单击 新建图层 按钮, 新建图层并命名为 星形 在 工具 面板中选择 多角星形工具, 在 属性 面板上的 填充和笔触 标签下, 设置 笔触颜色 为无, 填充颜色 为 #FFCCOO 在 属性 面板上的 工具设置 标签下单击 选项 按钮, 在弹出的 工具设置 对话框进行设置 样式 为星形, 边数 为 5, 星形顶点大小 为 0.50, 如图 所示 图 旋转变形 图 工具设置 对话框 步骤 12: 在场景中, 按住鼠标左键拖曳出一个五角星形, 如图 所示 使用 选择工具 选中五角星形, 执行 修改 转换为元件 命令, 在弹出的对话框中进行设置 名称 为五角星, 类型 为影片剪辑, 并单击 确定 按钮, 如图 所示 步骤 13: 双击 五角星 元件, 进入 五角星 的影片剪辑编辑, 在 时间轴 面板中选择第 6 帧, 执行 插入 时间轴 关键帧 命令, 如图 所示 步骤 14: 执行 窗口 变形 命令, 打开 变形 面板, 设置 缩放宽度 为 150%, 缩放高度 为 150%, 放大五角星, 如图 所示

93 项目 3 传统补间动画 85 图 绘制五角星 图 转换为元件 对话框 图 插入关键帧 图 变形 面板 步骤 15: 在 图层 1 的第 1~ 第 5 帧之间任意一帧上右击, 在弹出的快捷菜单中, 执行 创建传统补间动画 命令, 结果如图 所示 图 创建传统补间动画步骤 16: 单击按钮, 返回到场景中, 选择 五角星 影片剪辑元件, 将光标移动到 五角星 影片剪辑元件上, 按住 Ctrl 键同时按住鼠标左键拖曳, 可以复制 五角星 影片剪辑 ; 复制出多个五角星, 并适当调整大小, 如图 所示

94 86 制作 Flash 动画 图 复制五角星 步骤 17: 把文档保存为 闪动背景.fla, 按 Ctrl+Enter 组合键测试的影片 项目拓展 跳跃文字 (1) 在舞台中输入 观音香飘四海 并分离, 如图 所示 图 输入 观音香飘四海 并分离 (2) 在文字上右击, 在弹出的快捷菜单中执行 分散到图层 命令 ; 在所有文字的图 层的第 12 帧和第 24 帧处分别插入关键帧, 如图 所示 图 插入关键帧 (3) 在所有文字图层的第 12 帧中, 把文字向上移动一段距离 ; 为所有文字图层的第 1~ 第 12 帧之间创建传统补间动画 ; 为所有文字图层的第 12~ 第 24 帧之间创建传统补间动画, 如图 所示

95 项目 3 传统补间动画 87 图 创建传统补间动画 (4) 移动帧, 错开文字的播放时间, 并在所有图层的第 100 帧处插入普通帧延长播放 时间, 如图 所示 图 插入普通帧 (5) 为动画添加背景图片, 其跳跃文字效果如图 所示 图 跳跃的文字效果