flash 8 动画制作 -...
TRANSCRIPT
本书是“电脑互动课堂”系列丛书之一。全书分为 14章,讲述了使用 Flash 8制作动画的方法,内容
包括 Flash 8基础知识、绘制矢量图形、编辑图形与对象、填充图形、素材、元件与库、帧和图层的基本
操作、制作简单动画、制作特殊动画、为动画添加声音、Actions语句基础、Actions语句应用、Flash组件
应用、动画的优化、导出与发布动画等知识。
本书版式新颖,内容浅显易懂,注重实用性。文字讲解与图示紧密配合,在正文中穿插生动活泼的小
卡通以及操作性强的小栏目,如“想一想”、“试一试”等,加强读者的思考能力和动手能力。帮助读者
巩固所学的知识,并能够学以致用。
本书还配有素材光盘,读其中收录了所有实例和习题的素材和源文件,便于读者学习。
本书适合所有 Flash 动画的初学者,也适合 Flash 爱好者学习和参考,可作为大中专院校及各类电脑
培训班的 Flash动画制作课程的教材。
图书在版编目(CIP)数据
Flash 8动画制作/张兴伟等编著.—北京:机械工业出版社,2006.7 (电脑互动课堂) ISBN 7-111-19403-9 Ⅰ.F… Ⅱ.张… Ⅲ. 动画—设计—图形软件,Flash 8 Ⅳ. TP391.41 中国版本图书馆 CIP数据核字(2006)第 067554号
机械工业出版社(北京市百万庄大街 22号 邮政编码 100037)
策 划:胡毓坚 责任编辑:孙 业
责任印制:洪汉军
中国农业出版社印刷厂印刷·新华书店北京发行所发行
2006年 7月第 1版·第 1次印刷
787mm×1092mm 1/16·15.75印张·388千字
0001-5000册
定价:29.00元(含 1CD)
凡购本图书,如有缺页、倒页、脱页,由本社发行部调换 本社购书热线电话(010)68993821
编辑热线电话(010)88379739
封面无防伪标均为盗版
前 言
Flash是一款网页动画制作软件,现在已经广泛应用于网页广告、游戏、MTV等领域,
目前比较流行的 Flash软件版本是Macromedia公司推出的 Flash 8,该版本在以前基础上有了很大改进,在功能上也有所增强,用户操作起来非常方便。该软件可以很好地完成目前
大部分动画制作的需求。为了让更多动画制作者掌握 Flash的制作技巧,我们编写了本书。
■ 本书内容
第 1章:主要介绍 Flash软件的基础知识,包括 Flash的应用领域、Flash 8的工作界面、Flash的文档操作和 Flash动画制作基本步骤等知识。
第 2~4章:主要介绍在 Flash中编辑图形的知识,包括绘制图形、编辑图形和填充图形的方法等知识。
第 5章:主要介绍 Flash动画中帧的概念、作用、类型和基本操作方法,并介绍 Flash中图层的概念、作用、类型和基本操作方法。
第 6章:主要介绍素材的类型、搜集素材和导入素材的方法。还重点介绍了元件、实
例和库的概念、设置及使用方法。
第 7~8章:主要介绍 Flash动画的制作,包括简单的逐帧动画和补间动画制作,特殊的引导动画和遮罩动画制作。
第 9章:主要介绍给动画添加声音的方法,并介绍编辑声音、压缩声音和输出声音的方法等。
第 10~12章:主要介绍为动画添加 Actions语句的方法,还介绍了 Actions语句的语法规则、控制动画播放的 Actions语句和对 Flash组件的使用等。
第 13章:主要介绍测试与优化 Flash作品的方法,另外还介绍了导出和发布 Flash的方法等。
第 14章:主要运用所学的 Flash知识,制作一个 MTV动画,以此熟悉用 Flash制作复杂动画的方法。
■ 本书知识结构
每一章的结构为“本章导读+基础知识+实战演练+练一练”。其中: 本章导读:简要介绍本章将涉及的知识点,并提示读者哪些是基础知识,哪些是重点
知识,哪些是提高部分,便于读者学习时分清主次、重点、难点; 基础知识:以理论辅以实例的方式帮助读者理解各个知识点; 实战演练:结合基础知识制作一个综合实例,练习已学知识点的综合应用; 练一练:紧密联系本章内容,并提出了本章涉及到的需要深入讲解的知识点,达到温
故而知新的目的。 小栏目:在正文中穿插生动活泼的小卡通以及操作性强的小栏目,如“想一想”、“试
一试”等,加强读者的思考能力和动手能力,帮助读者巩固所学的知识,开拓读者思维,
真正做到融会贯通。
■ 本书特色
1、版式轻松、风格简洁明快 快节奏、高效率的生活使得越来越多的人们趋向于接受版式轻松活泼、风格简洁明快
的图书。基于这个原因,本书将读者需要注意的问题或对某些比较复杂的操作的提示、技
巧以卡通的形式体现出来,既能引起读者的注意,又能使版式轻松活泼。另外,语言简洁
明快也是本书的一大特色,在本书中,尽量以图代字,将 Flash 的各知识点和操作方法以图形表示,便于读者识别与记忆。
2、拓展思维、举一反三 Flash 8是很有实用价值的软件,只要自己动手操作、尝试,不断强化训练,就能快速
步入 Flash 制作高手的行列。基于这一点,本书在适当的地方穿插了“试一试”、“想一想”等小任务,通过这些小任务来培养读者的动手能力、思考问题、解决问题的能力,以
达到拓展思维、举一反三的目的。 3、任务驱动 本书中的实战演练部分主要通过完成某一任务来掌握和巩固基础知识和基本操作,使
读者产生成就感,极大的提高读者的学习兴趣。也通过每章的练一练来巩固所学习的知识,
使读者随时了解自己的学习情况。
■ 本书作者
本书由张兴伟、向宏伟、吴劲松、何莹、文艳、邓春华、张瑾、陈波、冯淑斌、罗凤
华、李梅、唐义彬、黎严、辛雨珂、陈茂生、韦柱杰、陈明、卢颖、刘亚利、徐璐、王涛、
张小红、刘建康、吴开铭、吴世会、管红毅、谭鸿等人编写、排版及校对。由于编者经验
有限,书中难免会有疏漏和不足之处,恳请专家和读者不吝赐教。
编者 2005年 10月
目 录
目 录
第 1章 编辑图形与对象...............................1 第 1节 什么是 Flash 8 ..............................2
1. 认识 Flash 8.......................................2 2. Flash 8的应用领域 ............................2
第 2节 启动与退出 Flash 8 ......................5 1. 启动 Flash 8.......................................5 2. 退出 Flash 8.......................................5 第 3节 Flash 8工作界面 ..........................5 第 4节 Flash 8文档操作 ..........................6
1. 打开文档...........................................6 2. 新建文档...........................................7 3. 保存文档...........................................7 4. 关闭文档...........................................8 第 5节 Flash动画制作基本步骤..............8
1. 前期策划...........................................8 2. 搜集素材...........................................8 3. 制作动画...........................................9 4. 优化与调试动画 ...............................9 5. 测试动画...........................................9 6. 发布动画...........................................9 第 6节 动画场景与面板设置 ...................9
1. 文档属性的设置 ...............................9 2. 场景的创建 .....................................10 3. 场景的编辑 .....................................11 4. 网格和标尺 .....................................12 5. 场景大小的设置 .............................12 6. 面板的隐藏、显示与移动 ..............12 第 7节 实战演练——创建 Flash文档 ...13 第 8节 练一练 ........................................16 第 2章 绘图工具与文本工具 .....................17 第 1节 绘图工具栏 ................................18
1. 工具区域.........................................18 2. 查看区域.........................................19 3. 颜色区域.........................................19 4. 选项区域.........................................19 第 2节 绘制线条 ....................................20
1. 线条工具 ........................................ 20 2. 铅笔工具 ........................................ 22 3. 钢笔工具 ........................................ 23 第 3节 绘制几何图形............................ 24
1. 椭圆工具 ........................................ 25 2. 矩形工具 ........................................ 26 3. 多角星形工具................................. 27 4. 刷子工具 ........................................ 27 第 4节 添加文字.................................... 29
1. 输入文字 ........................................ 29 2. 设置文字属性................................. 30 3. 调整效果 ........................................ 32 第 5节 实战演练——制作标志图形..... 36 第 6节 练一练 ....................................... 39 第 3章 编辑图形与对象 ............................ 41 第 1节 选择图形.................................... 42
1. 选择工具 ........................................ 42 2. 套索工具 ........................................ 43 第 2节 编辑图形.................................... 45
1. 选择工具 ........................................ 45 2. 任意变形工具................................. 45 3. 部分选取工具................................. 47 4. 橡皮擦工具 .................................... 47 第 3节 图形操作.................................... 49
1. 移动图形 ........................................ 49 2. 复制与粘贴图形............................. 49 3. 群组与打散图形............................. 49 4. 对齐图形 ........................................ 51 第 4节 查看图形.................................... 53
1. 缩放工具 ........................................ 53 2. 手形工具 ........................................ 53 第 5节 实战演练——绘制电脑图形..... 54 第 6节 练一练 ....................................... 57 第 4章 填充图形........................................ 59 第 1节 颜料桶工具................................ 60 第 2节 墨水瓶工具................................ 61
II
II
Flash 8动画制作
1. 填充线条颜色 .................................61 2. 为色块添加边框 .............................61 第 3节 滴管工具 ....................................62
1. 吸取矢量色块属性..........................62 2. 吸取矢量线条属性..........................62 3. 吸取位图属性 .................................63 4. 吸取文字属性 .................................64 第 4节 混色器 ........................................64
1. 填充纯色.........................................65 2. 填充线性和放射状..........................65 3. 填充位图.........................................67 第 5节 填充变形工具.............................67
1. 调整线性渐变颜色..........................67 2. 调整放射状渐变颜色......................69 第 6节 实战演练——制作美食节广告..70 第 7节 练一练 ........................................74 第 5章 帧与图层的基本操作 .....................75 第 1节 帧的概述 ....................................76
1. 帧的概念.........................................76 2. 帧的作用.........................................76 3. 帧的类型.........................................76 4. 帧的显示.........................................77 第 2节 帧的基本操作.............................78
1. 创建帧.............................................78 2. 选择帧.............................................79 3. 复制帧.............................................79 4. 移动帧.............................................80 5. 删除帧.............................................80 6. 清除帧.............................................81 7. 翻转帧.............................................81 8. 设置帧频.........................................81 第 3节 图层的概述 ................................82
1. 图层的概念 .....................................82 2. 图层的作用 .....................................82 3. 图层的类型 .....................................82
第 4节 图层的基本操作.........................83 1. 新建图层.........................................83 2. 选择图层.........................................84
3. 复制图层 ........................................ 85 4. 移动图层 ........................................ 85 5. 重命名图层 .................................... 86 6. 锁定与解锁图层............................. 86 7. 隐藏与显示图层............................. 87 8. 删除图层 ........................................ 88 9. 管理图层 ........................................ 88 10. 设置图层属性............................... 89
第 5节 实战演练——制作旋转门牌..... 90 第 6节 练一练 ....................................... 93 第 6章 素材、元件、实例与库................. 95 第 1节 素材概述.................................... 96
1. 素材类型 ........................................ 96 2. 搜集素材 ........................................ 97 3. 导入素材 ........................................ 98 第 2节 元件概述.................................. 101
1. 元件类型 ...................................... 101 2. 元件的编辑 .................................. 102 第 3节 实例概述.................................. 105
1. 实例概念 ...................................... 106 2. 实例属性设置............................... 106 3. 调整实例的效果........................... 110 第 4节 库概述 ..................................... 110
1. 库的基本操作............................... 111 2. 调用其他动画的库....................... 114 3. 公用库 .......................................... 114 第 5节 实战演练——制作光盘界面... 116 第 6节 练一练 ..................................... 120 第 7章 制作简单动画.............................. 121 第 1节 动画基本类型.......................... 122 第 2节 制作逐帧动画.......................... 122
1. 逐帧动画特点............................... 122 2. 逐帧动画制作方法....................... 122 第 3节 制作形状补间动画 .................. 123
1. 形状补间动画的特点 ................... 123 2. 形状补间动画制作方法 ............... 123 3. 实例属性 ...................................... 123 4. 形状提示 ...................................... 124
III
III
目 录
第 4节 制作补间动画...........................125 1. 补间动画特点 ...............................125 2. 补间动画制作方法........................125 3. 实例属性.......................................125 第 5节 实战演练一——制作清晨阳光127 第 6节 实战演练二——制作创可贴
广告..........................................131 第 7节 练一练 ......................................134 第 8章 制作特殊动画...............................135 第 1节 引导动画 ..................................136
1. 引导动画概念 ...............................136 2. 引导层...........................................136 3. 引导动画制作方法........................138 4. 制作引导动画注意事项................138 第 2节 遮罩动画 ..................................139
1. 遮罩层...........................................139 2. 遮罩动画制作方法........................140 3. 多层遮罩动画 ...............................140 第 3节 实战演练一——公司网站片头141 第 4节 实战演练二——电影片尾 .......144 第 5节 练一练 ......................................147 第 9章 制作有声动画...............................149 第 1节 添加声音 ..................................150
1. Flash支持的声音格式 ...................150 2. 在动画中添加声音........................150
第 2节 编辑声音 ..................................152 1. 在“属性”面板中编辑声音 ........152 2. 在“编辑封套”对话框中编辑 声音...............................................153
第 3节 压缩与输出声音.......................155 1. 压缩声音.......................................156 2. 输出声音.......................................156 第 4节 实战演练一——制作教学课件157 第 5节 实战演练二——制作音乐卡片161 第 6节 练一练 ......................................164 第 10章 Actions语句基础........................167 第 1节 Actions概述 .............................168
1. 变量...............................................168
2. 函数.............................................. 170 3. 表达式和运算符........................... 171 第 2节 Actions语法规则..................... 172
1. 点语法 .......................................... 172 2. 大括号 .......................................... 172 3. 圆括号 .......................................... 172 4. 分号.............................................. 173 5. 关键字 .......................................... 173 6. 字母的大小写............................... 173 7. 注释.............................................. 173 第 3节 “动作”面板简介 .................. 173 第 4节 添加 Actions的基本方法 ........ 175
1. 为帧添加 Actions.......................... 175 2. 为按钮添加 Actions...................... 175 3. 为影片剪辑添加 Actions.............. 176 第 5节 实战演练——制作名画鉴赏... 176 第 6节 练一练 ..................................... 181 第 11章 常用的 Actions语句 .................. 183 第 1节 场景/帧控制语句 ..................... 184
1. 播放影片语句 Play....................... 184 2. 停止语句 Stop .............................. 184 3. 跳转语句 goto............................... 184 第 2节 条件语句 If/Else....................... 185
1. If语句............................................ 185 2. Else语句 ....................................... 186 3. else if语句..................................... 186 第 3节 调用命令 Call .......................... 187 第 4节 循环语句 Loop......................... 188
1. While语句..................................... 188 2. do While语句................................ 188 3. For语句......................................... 189
第 5节 超级链接命令 getURL............. 189 第 6节 实战演练一——制作智能手表190 第 7节 实战演练二——制作鼠标跟随196 第 8节 练一练 ..................................... 199 第 12章 制作交互式动画 ........................ 201 第 1节 “组件”面板简介 .................. 202 第 2节 复选框组件 CheckBox............. 202
IV
IV
Flash 8动画制作
第 3节 单选框组件 RadioButton..........203 第 4节 下拉列表框组件 ComboBox....205 第 5节 列表框组件 List........................206 第 6节 按钮组件 Button.......................207 第 7节 滚动条组件 ScrollPane.............208 第 8节 实战演练——制作用户注册表209 第 9节 练一练 ......................................214 第 13章 测试、优化与发布动画 .............215 第 1节 测试 Flash动画 ........................216 第 2节 优化 Flash动画 ........................218
1. 优化动画.......................................218 2. 优化动画元素与色彩....................218 3. 优化文本.......................................218
第 3节 导出 Flash动画 ........................218
第 4节 发布动画.................................. 221 1. 设置发布作品的格式 ................... 221 2. 预览发布效果............................... 222 3. 上传 Flash作品到网上................. 223 第 5 节 实战演练——优化和发布智能
手表 ....................................... 224 第 6节 练一练 ..................................... 225 第 14章 综合实例制作 ............................ 227 第 1节 实战演练——制作MTV......... 228
1. 制作元件 ...................................... 228 2. 制作场景 ...................................... 235 3. 添加音乐并发布........................... 239 第 2节 小结 ......................................... 242 第 3节 练一练 ..................................... 242
& Flash 8的应用领域
& Flash 8工作界面
& Flash 8文档操作
& Flash动画制作基本步骤
互联网上可以看见许多优秀漂亮 的 Flash作品,它们应用于网页广
告、动态网页制作、MTV、片头动画和游戏等领域。本章先介绍什么是 Flash动画和其应用领域有哪些方面,接着介绍
Flash 8的启动与退出、工作界面、基本操作和动画制作基本步骤等。 其中 Flash 8的文档操作,读者必须
重点掌握,而 Flash 动画制作的基本步骤,对制作一般的动画都适用,因此也
应熟练掌握。
在
1
认识 Flash 8
2
Flash 8动画制作
第1节 什么是 Flash 8 Flash 8是美国Macromedia公司推出的经典的动画制作软件的最新版本。它对动画制
作者的要求不高,简单易学,并且制作出的效果流畅自然,因此受到许多用户的喜爱,成
为目前使用最广泛的一款动画制作软件。
1.认识 Flash 8
以前制作的动画都是由一幅一幅静止的连续画面快速移动,使人们在视觉上产生运动
的感觉,而 Flash 动画主要由矢量图形组成,通过这些图形的变化和运动而产生动画电影的效果。
Flash动画不像 GIF动画那样需要把整个文件下载完才能播放,而是以“流”的形式,在播放的同时会自动下载后面的文件,并能实现多媒体的交互。
2.Flash 8的应用领域
在网络应用非常广泛的信息化社会中,人们已经习惯在网上进行工作、交流与查找信
息。随意打开一个网站,常常会看到各种动画广告;想听音乐时,网上也有 Flash 制作的各种MTV让你选择,如《白月光》、《思路》等。还有一些公司宣传片也是用 Flash制作的。从广告到游戏、从贺卡到影视片头、从网页到多媒体课件、从搞笑动画到MTV,Flash的应用已经无处不在。
(1) 广告动画
一个大型的网站,因其浏览量较大,会有许多网络广告。用 Flash 制作的网络广告具有直接明了、占用空间小和视觉冲击力强等特点,正好满足在网络这种特殊环境下的要求。
如图 1-1所示就是一个商品广告动画。
图 1-1 广告动画
Flash的另一个优点是独立于浏览器之外,只要给浏览器加入相应的插件就
可以观看 Flash动画。
3
1 认识 Flash 8
(2) 片头动画
Flash可以为网站、宣传片、电影和光盘制作片头动画,如图 1-2所示就是一个公司网站的片头动画。
图 1-2 网站片头动画
(3) 网页
用 Flash可以制作出极具个性的动态网页,比普通网站更有视觉冲击力。但 Flash 8功的能不如专业网页制作软件齐全,因此一般用它制作数据量不大的个人网站,如图 1-3所示就是利用 Flash制作的一个动态网页。
图 1-3 动态网页
(4) 搞笑动画
搞笑动画能让观众开怀一笑,心情愉悦。好的搞笑动画,制作的动画角色形象滑稽、
表情到位、动作有趣,而且内容幽默、喜剧。如图 1-4所示就是搞笑动画中的两个场景。
4
Flash 8动画制作
图 1-4 搞笑动画
(5) MTV
当网速比较慢时,在网上观看视频 MTV 常常会时断时续,而 Flash 文件相对于视频文件来说要小很多,因此很多音乐网站上的都有由 Flash制作的MTV。如图 1-5所示就是根据歌曲《嘻唰唰》制作的MTV中的场景。
图 1-5 “嘻唰唰”MTV
(6) 游戏
年轻人大都对游戏很感兴趣,从小时候在游戏机上玩的俄罗斯方块和超级玛莉等游
戏,到现在的大型网络游戏等都深受大家的喜爱。而利用 Flash 也制作的一些简单有趣的游戏也成为年轻人的新宠,如图 1-6所示就是用 Flash制作的射门游戏。
图 1-6 射门游戏
5
1 认识 Flash 8
第2节 启动与退出 Flash 8 要使用 Flash 8,必须先启动 Flash 8,使用完后还需要退出。下面将分别讲解启动与退
出 Flash 8的方法。
1.启动 Flash 8
在电脑中安装 Flash 8后,启动 Flash 8的方法主要有以下 3种: = 双击桌面上的 Flash 8快捷方式图标 。 = 选择“开始→所有程序→Macromedia→Macromedia Flash 8”命令。 = 在“我的电脑”窗口或“开始→我最近的文档”子菜单中打开一个 Flash 8文档。
2.退出 Flash 8
在 Flash 8中完成文件编辑后便可退出 Flash 8,其方法主要有以下 3种: = 单击 Flash 8工作界面右上角的 按钮。 = 在菜单栏中选择“文件→退出”命令。 = 按<Alt+F4>键退出。
第3节 Flash 8工作界面 启动 Flash 8后,将出现 Flash 8的欢迎界面,在界面中的“创建新项目”栏中单击“Flash
文档”链接可以打开主界面,如图 1-7所示。
图 1-7 欢迎界面
Flash 8的主界面与其他应用软件一样由菜单栏、工具栏、状态栏等部分组成,此外还包括时间轴、“图层”区、“属性”面板、混色器、“库”面板等,如图 1-8所示。其中
单击
6
Flash 8动画制作
菜单栏中的菜单可以执行 Flash 8中的所有命令,其他的部分将在后面的章节中详细介绍。
图 1-8 Flash 8的工作界面
第4节 Flash 8文档操作 在 Flash 8中的文档操作主要包括打开、新建、保存和关闭,下面将分别讲解。
1.打开文档
如果要对已有的 Flash文档进行编辑,首先需要将它打开,其具体操作如下: (1)在 Flash 8中选择“文件→打开”命令,打开“打开”对话框,如图 1-9所示。 (2)在“查找范围”下拉列表框中选择要打开的文档所在路径,在下方的列表中选中需打
开的文档图标,单击【打开】按钮打开该文档。
图 1-9 “打开”对话框
“库”面板
“属性”面板
混色器
时间轴
场景
菜单栏
工具栏
“图层”区
选择文档位置
选中文档
单击
在打开一个 Flash 文档
后,若该文档中有内容,
可按 <Ctrl+Enter>键播
放动画。
7
1 认识 Flash 8
2.新建文档
要制作 Flash动画首先需要新建一个 Flash文档,新建 Flash文档有以下 3种方法: = 启动 Flash 8后,在出现的欢迎界面的“创建新项目”栏中单击“Flash文档”链接新建一个空白文档。
= 选择“文件→新建”命令或按<Ctrl+N>键,打开如图 1-10所示“新建文档”对话框,在“类型”列表框中选择“Flash文档”选项,单击【确定】按钮新建文档。
= 在“新建文档”对话框中单击“模板”选项卡,在其中选择相应的模板文档,这里在“类型”列表框中选择“演示文稿”选项,在“模板”列表框中选择“流行
幻灯片演示文稿”选项,如图 1-11所示,单击【确定】按钮将新建一个基于模板的 Flash文档。
图 1-10 新建动画文档 图 1-11 新建模板文档
3.保存文档
对 Flash文档进行编辑后,可以将其保存起来便于以后使用,如要将刚才新建的 Falsh文档保存到“光盘/第 01章/最终效果”文件夹下并命名为“电影广告”,其具体操作如下: 在 Flash 8的工作界面中选择“文件→保存”命令。 在打开的如图 1-12所示的“另存为”对话框的“保存在”下拉列表框中选择文档保存的路径,这里选择“光盘/第 01章/最终效果”。 默认情况下,“文件名”下拉列表框中的名称为“未命名-1.fla”,在其中输入文档名称“电影广告”。 在“保存类型”下拉列表框中 0选择文档保存的类型,这里选择“Flash 8文档(*.fla)”选项,单击【保存】按钮。
单击 单击
单击
单击
单击
单击
如果要把编辑完的 Flash文档保存到其他
位置,可以将其另存。选择“文件→另存
为”命令,在打开的“另存为”对话框中
进行设置后单击“保存”按钮即可。
单击
当文档包含未保存的更改文档
时,文档标题栏、应用程序标
题栏和文档选项卡中的文档名
称后会出现一个星号“*”。保
存文档后星号消失。
8
Flash 8动画制作
图 1-12 保存文档
4.关闭文档
当不需要使用当前的 Flash文档时,可以选择“文件→关闭”命令、按<Ctrl+W>键或单击该文档标题栏右侧的 按钮将其关闭。如果当前文档没有保存,将打开如图 1-13所示“Flash 8”对话框让用户确认是否需要保存当前文档,用户可以根据需要单击相应的按钮。
图 1-13 “Flash 8”对话框
第5节 Flash动画制作基本步骤 制作一个优秀的 Flash 动画作品,需要经过许多的制作步骤,其中的每一步都直接影
响到作品的最终效果。Flash动画的制作步骤一般有以下 6个。
1.前期策划
在制作动画之前,首先要明确制作动画的目的、动画的整体风格、动画的最终效果和
用什么形式将其体现出来。在制定了一套完整的方案后,就可以为动画作初步的策划,包
括动画中将会出现的背景、人物、文字、音乐和剧情的制作手法和动画片段的过渡等。
2.搜集素材
在对动画作了初步的策划之后,即可对动画中需要使用的素材进行搜集。在搜集时应
有目的性地搜集素材,最好根据动画策划时所拟定好的素材类型进行搜集,这样既能节约
保存完成后,在保存的
位置找到该 Flash文档,
双击文档图标可打开该
文档。
选择保存位置
输入文件名称 单击
新建一个 Flash文档,,按<Ctrl+S>键将其保存到桌面上,并命名为“动态光盘界面”,然
后将文档关闭。以此熟悉对文档的基本操作流程。
9
1 认识 Flash 8
搜集素材的时间,还能有效地缩短动画的制作周期。
3.制作动画
前期策划和对素材的搜集都是为制作动画而做的准备,创作动画最关键的步骤就是制
作 Flash 动画。要将之前的策划完美地表现出来,就需要细致地制作,动画的最终效果绝大程度取决于动画的制作过程,制作精美的动画将提升整个动画的水准。
4.优化与调试动画
动画制作完成后,为了使动画看起来更加流畅、精致,最好对动画进行优化与调试。
优化动画主要对动画的文字、线条、图形和元素等进行调整。调试动画主要对动画中对象
的细节、动画片段场景的衔接、声音与动画播放是否同步等进行调整,以此保证动画的最
终效果与发布质量。
5.测试动画
测试动画是在动画完成时,对动画的效果和品质等进行的检测。因为 Flash 动画的播放是通过电脑对动画中的各个矢量图形、文字、元件的实时运算来实现的,所以动画播放
的效果很大程度上取决于电脑的配置。在测试时应在多个不同配置的电脑上测试动画,然
后根据测试后的结果对动画进行调整和修改,从而使动画在较低配置的电脑上也能取得很
好的播放效果。
6.发布动画
Flash 动画制作完成后即可发布,此时可以对动画的格式、画面品质和声音等进行设置。在进行动画发布设置时,应根据动画的用途和使用环境等进行设置,以免增加文件的
大小而影响动画的传输。
第6节 动画场景与面板设置 对 Flash动画进行设置时,最基础是从动画的场景、网格、标尺和面板等进行设置。 场景可以看作一段相对独立的动画,整个 Flash动画可以由一个场景或多个场景组成。
如果整个动画有多个场景时,动画会按照场景的顺序播放;如果在场景中使用了交互功能,
可改变场景的播放顺序。
1.文档属性的设置
在欣赏各种 Flash动画时,可以看见每个 Flash动画的长宽大小以及背景颜色可能都不相同,是因为这些 Flash 动画作了不同的舞台大小和背景颜色设置。舞台大小和背景颜色可通过“属性”面板进行设置,“属性”面板如图 1-14所示。
= 单击“属性”面板的 右下方的 按钮,在弹出的颜色列表中可以选择动画
的背景色,如图 1-15所示。 = 在“帧频”文本框中输入数值可改变每秒显示的动画帧的数量。
10
Flash 8动画制作
图 1-14 “属性”面板 如果要对 Flash文档的场景大小等进行设置,可以单击“属性”面板中的
按钮,打开如图 1-16所示的“文档属性”对话框,在其中可以设置标题、描述、尺寸、背景颜色和帧频等属性。其中背景颜色和帧频的设置和“属性”面板中一致。
图 1-15 颜色列表 图 1-16 “文档属性”对话框
= 在“标题”文本框中,可以输入 Flash文档的描述性标题。 = 在“描述”文本框中,可以输入包含检索关键字、作者和版权信息、关于内容及用途的简短说明。
= 在“尺寸”栏的“宽”和“高”文本框中可以输入 Flash 文档所需要的宽和高的值以指定舞台的大小。
= 要将新的设置用作所有新文档的默认属性,可单击【设为默认值】按钮。只将新的设置用作本文档的默认属性,可单击【确定】按钮。
2.场景的创建
在制作动画的过程中,如果需要将背景换为其他画面,可以通过创建新场景实现,创
建新场景的方法有以下两种: = 选择“窗口→其他面板→场景”命令,打开“场景”面板,单击【添加场景】按钮 新建一个场景,如图 1-17所示。
选择“修改→文档”
命令也可以打开“文
档属性”对话框。
默认情况下每秒显示的帧数为
12fp,对于大多数计算机显示的动
画,特别是 Web 站点中播放的动
画,8 fps到 12 fps 就足够了。
11
1 认识 Flash 8
= 选择“插入→场景”命令插入新的场景,如图 1-18所示。
图 1-17 新建场景 图 1-18 插入场景
在场景的右上方单击 按钮可以查看和编辑不同的场景。
3.场景的编辑
在“场景”面板中可以对创建的场景进行修改或编辑场景的属性,如更改场景名称、
重制场景和更改场景在文档中的播放顺序、删除场景等。 = 如果要更改场景的名称,可以在“场景”面板中双击场景名称后输入新的名称即可,如图 1-19所示。
= 如果要重制场景,先选中要重制的场景,然后单击“场景”面板中的【重制场景】按钮 ,如图 1-20所示。
图 1-19 更改场景名称 图 1-20 重制场景
= 如果要更改场景在文档中的播放顺序,可以在“场景”面板中将场景拖到不同的位置进行排列,如图 1-21所示。
图 1-21 更改场景顺序
= 如果不需要某个场景,可以在“场景”面板中选中要删除的场景,再单击【删除场景】按钮 将其删除。
更改场景名称
单击重制场景
拖移
12
Flash 8动画制作
4.网格和标尺
在制作 Flash 动画时,可通过标尺和网格来对某些对象进行精确的定位,显示及编辑网格和标尺的具体操作如下:
= 选择“视图→标尺”命令,在舞台的上方和左侧分别显示出水平和垂直标尺,如图 1-22所示。
= 选择“视图→网格→显示网格”命令可显示网格,如图 1-23所示。再次选择“视图→标尺”命令或“视图→网格→显示网格”命令可取消它们的显示。
图 1-22 显示标尺 图 1-23 显示网格
= 选择“视图→网格→编辑网格”命令,将打开如图 1-24所示的“网格”对话框。在该对话框中可以对网格线的颜色、显示网格、对齐网格及对齐精确度等进行设
置。设置完成后单击【确定】按钮。
图 1-24 “网格”对话框
5.场景大小的设置
在制作动画时,为了能清楚地看到细微部分,可以通过场景右上方的 下拉
列表框调整场景的显示比例。 单击 下拉列表框右侧的 按钮,在弹出的下拉列表框中选择场景的缩放比
例。也可以在其中输入数值,来设置场景的缩放比例。
6.面板的隐藏、显示与移动
默认情况下,对象属性需要在多个不同的面板中进行设置,而 Flash 8中并没有显示所有的面板,因此有时需要把某些面板显示出来,有时又需要隐藏、移动、折叠或展开面板
如网格和标尺只是作为将舞台
中的对象进行精确定位的工
具,在最终效果中不会显示出
来。若用户觉得不需要,也可
以不用开启。
标尺
网格
13
1 认识 Flash 8
等。对面板的操作方法如下: = 选择“窗口”命令,在弹出的下拉菜单中选择某一面板命令,可打开相应的面板,如图 1-25所示。
= 若要隐藏所有面板,选择“窗口→隐藏面板”命令即可。 = 若要改变面板位置,可以按住面板左上角的 按钮并拖动,至目标位置释放鼠标。 = 单击面板左上角的 按钮可将面板展开,同时 按钮变为 按钮。再次单击 按钮
可将面板折叠。
图 1-25 打开面板命令
第7节 实战演练——创建 Flash文档 本章实战演练将练习将创建一个名为“电影广告”的 Flash文档(光盘\第 01章\最终
效果\电影广告.fla)。通过文档的创建过程,可以学习启动与退出 Flash 8、文档的新建和保存、文档的设置等基本操作。在练习时应注意观察 Flash 8的界面特点,并熟练掌握文档的操作方法。其具体操作如下: 打开电脑,选择“开始→所有程序→Macromedia→Macromedia Flash 8”命令,启动Flash的程序,如图 1-26所示。
图 1-26 启动 Flash 8
选择相应的面板命令可
打开相应的面板
14
Flash 8动画制作
进入 Flash 8的欢迎界面,单击“创建新项目”栏中的“Flash文档”链接,新建一个空白文档,如图 1-27所示,其默认名称为“无标题-1”。
图 1-27 新建 Flash文档
在场景下方的“属性”面板中单击 按钮,在弹出的颜色列表中选择动画的背
景色为蓝色,如图 1-28所示。 单击 按钮,打开“文档属性”对话框。在“标题”文本框中输入“电影
广告”,在“描述”文本框中输入“信子制作 2005年 11月 8日”。在“尺寸”栏的“(宽)”文本框中输入“300px”,在“(高)”文本框中输入“500px”。 在“帧频”文本框中输入“20”,单击“确定”按钮完成设置,如图 1-29所示。
图 1-28 选择背景颜色 图 1-29 “文档属性”对话框
选择“视图→标尺”命令,在场景中显示出水平和垂直标尺,如图 1-30所示。 选择“视图→网格→显示网格”命令,显示网格,如图 1-31所示。
单击
输入文字
单击
输入文字
输入数值
输入数值
15
1 认识 Flash 8
图 1-30 显示标尺 图 1-31 显示网格 选择“插入→场景”命令,新建“场景 2”,在场景上方单击 按钮可以查看,如图
1-32所示。 选择“窗口→其他面板→场景”命令,打开“场景”面板。在其中双击“场景 1”将其名字改为“介绍”,用同样的方法将“场景 2”重命名为“剧照”,如图 1-33所示。
图 1-32 新建场景并查看 图 1-33 重命名场景
按<Ctrl+S>键,打开“另存为”对话框,在“文件名”下拉列表框中输入文字“电影广告”,在“保存在”下拉列表框中选择保存位置为“光盘/第 01课/最终效果”,单击【保存】按钮,如图 1-34所示。
图 1-34 命名文本文档
重命名场景
选择保存位置
输入文件名称
单击
16
Flash 8动画制作
第8节 练一练 (1)启动 Flash 8后,如何在欢迎界面中创建 Flash文档? (2)有时 Flash 文档标题栏或应用程序标题栏的文档名称后会出现一个星号“*”,
这是什么意思? (3)选择“文件→新建”命令,新建一个 Flash文档,然后以“通知”为名进行保存。 (4)Flash动画制作分为哪 6个基本步骤? (5)创建场景的方法有几种?具体有哪些? (6)网格和标尺的作用有哪些? (7)如果要显示某个面板,应该怎样操作? (8)新建一个 Flash 文档,在“文档属性”对话框的“描述”文本框中输入“2005
年 12月 4日”,设置文档大小为“300×550”像素,背景色为紫色。新建 3个场景,将文档重命名为“演示动画”,并保存在“光盘/第 01 课/最终效果”文件夹下(光盘\第 01章\最终效果\演示动画.fla)。
应用前面所学习的设置文档属性的方法,新建一个名为“笑话”的 Flash文档,在“属性”面板中设置背景色为中黄色,文档大小为“500×350”像素。
& 绘图工具栏
& 绘制线条
& 绘制几何图形
& 添加文字
浏览网上五花八门的网站时,读 者也许对其中的 Flash 动画充满
好奇与向往,特别是 Flash动画中绘制的图形与人物等。想要用 Flash绘制对象,首先需要掌握 Flash 中绘图工具的使用方法,本章将学习在 Flash中绘制基本图形的方法。 其中要注意用不同工具绘制线条和
几何图形时的区别。掌握添加文字和设
置其属性的方法。
在
2
绘图工具与文本工具
18
Flash 8动画制作
第1节 绘图工具栏 在制作 Flash 动画的过程中,许多图像和动画角色都需要用户自己绘制。要使作品生
动、有趣和个性,除了要求用户具有一定的审美和绘画功底外,还需具备熟练的操作技能,
能使用 Flash中的绘图工具绘制图形。
1.工具区域
默认情况下,工具栏位于 Flash主界面的左侧,分为工具、查看、颜色和选项 4个区域。工具区域包含绘画、填色和选择等工具,如图 2-1所示。
图 2-1 工具区域
各工具的作用如下: = 选择工具:选择和移动舞台中的各种对象,也可用来改变对象的大小和形状。 = 部分选取工具:对舞台中的对象进行移动或变形操作。 = 任意变形工具:对舞台中的对象进行任意变形、旋转和缩放操作。 = 填充变形工具:对填充的渐变颜色属性进行编辑、变形。 = 线条工具:绘制任意方向与长短的直线。 = 套索工具:选择舞台中的不规则区域。 = 钢笔工具:绘制直线和曲线,并调整曲线的曲率。 = 文本工具:输入和修改文本。 = 椭圆工具:绘制任意大小的椭圆或正圆。 = 矩形工具:绘制任意大小的矩形或正方形。 = 铅笔工具:绘制任意形状的曲线或直线。 = 刷子工具:绘制任意形状的矢量色块。 = 墨水瓶工具:填充或改变对象的边框属性。
在【矩形工具】按钮上按住左键,
在弹出的列表中可以选择矩形
工具或者多角星形工具。
选择工具 部分选取工具
线条工具 套索工具
文本工具 钢笔工具
矩形工具
刷子工具
填充变形工具
橡皮擦工具
任意变形工具
墨水瓶工具
滴管工具
颜料桶工具
铅笔工具
椭圆工具
19
2 绘图工具与文本工具
= 颜料桶工具:填充或改变图形的颜色属性。 = 滴管工具:吸取已有对象的色彩属性,并将其应用于当前对象。 = 橡皮擦工具:擦除舞台中的对象。
2.查看区域
查看区域包含可以在应用程序窗口内进行缩放和移动的工具,如图 2-2所示。
图 2-2 查看区域
各个工具的作用如下: = 手形工具:按住鼠标左键拖动可以移动舞台画面,以方便观察更多的对象 = 缩放工具:单击可以放大或缩小显示舞台画面
3.颜色区域
颜色区域包含用于笔触颜色和填充颜色的功能键,如图 2-3所示。
图 2-3 颜色区域 各选项的作用如下: = 笔触颜色:设置所选工具的线条和笔触颜色 = 填充色:设置选中对象中要填充的颜色 = 黑白:单击它可使笔触颜色和填充色恢复为默认状态,即笔触颜色为黑色,填充色为白色
= 交换颜色:单击它可交换笔触颜色和填充色的颜色 = 没有颜色:单击它可以使绘制的矢量图形无轮廓或填充色
4.选项区域
选项区域显示选定工具的设置属性,选项区域是随着所选工具的变化而变化的。当选
择某种工具后,在选项区域中将出现相应设置的选项,这些选项会影响工具的填色或编辑
操作。
手形工具 缩放工具
黑白
填充色
笔触颜色
交换颜色
没有颜色
20
Flash 8动画制作
第2节 绘制线条 线条包括直线和曲线,在使用 Flash 制作动画时,通过绘制两种不同的线条可以表现
图形的不同效果。在 Flash 8中,绘制线条的工具包括线条工具、铅笔工具和钢笔工具。
1.线条工具
在 Flash中,线条工具可以直接绘制直线。选择工具栏中的线条工具 ,将鼠标光标
移动到舞台中要绘制直线的位置,这时鼠标光标变为“ ”形状,按住鼠标左键向任意方
向拖动,如图 2-4所示,当线条的长度和位置都达到所需要求时,释放鼠标左键即可绘制出一条直线,如图 2-5所示。按<N>键可以选择线条工具。
线条工具的选项区域如图 2-6所示,选择【对齐对象】按钮 可以使绘制的线条贴紧
对象,选择【对象绘制】按钮 在场景中绘制线条时,不会影响场景上其它的对象。
图 2-4 拖动鼠标 图 2-5 绘制出的直线 图 2-6 线条工具选项区域
用选择工具选中直线时,“属性”面板如图 2-7所示。
图 2-7 绘制直线的“属性”面板
该“属性”面板的各项含义如下: = “宽、高”文本框:表示该直线在水平或垂直方向上的映射长度。 = “X、Y”文本框:表示直线在舞台中的横纵坐标。 = 【笔触颜色】 按钮:用于设置直线的颜色。 = 【填充颜色】 按钮:用于设置填充的颜色,选取线条时,填充颜色为无。 = 【笔触高度】 按钮:用于设置直线的粗细,数值越大,绘制的直线越粗;
反之,直线越细。 = “笔触样式”下拉列表框 :用于选择绘制直线的样式。 = “笔触提示”复选框 :可在全像素下调整直线锚记点和曲线锚记点,
笔触颜色 笔触高度 笔触样式
接合样式 笔触提示 填充颜色
端点样式
21
2 绘图工具与文本工具
防止出现模糊的垂直或水平线。 = “缩放”下拉列表框 :可以限制在播放和发布动画时笔触的缩放,包
括一般、水平、垂直和无 4个选项。 = 【端点】按钮 :用于设置直线终点的样式,其中各项含义如下:
= 无:选择该选项时将对齐直线终点,效果如图 2-8所示。 = 圆角:选择该选项时直线终点为圆角,效果如图 2-9所示。 = 方型:选择该选项时直线终点为方型并超出直线半个笔触宽度,效果如图2-10所示。
图 2-8 “无”选项效果 图 2-9 “圆角”选项效果 图 2-10 “方型”选项效果
= 【接合】按钮 :用于设置两条直线的相接方式,包括尖角、圆角或斜角 3个选项。要更改开放或闭合直线中的转角,先选择一条直线,再选择接合选项。当选
择“尖角”选项时,将激活“尖角”文本框 ,在文本框中输入一个尖角
限制值可以避免尖角接合倾斜。 = 【自定义】按钮 :用于设置个性化的直线,单击该按钮后将打开“笔触
样式”对话框,如图 2-11所示。该对话框中各项含义如下: = “4倍缩放”复选框 :选中该复选框可以使预览比例放大 4倍。 = “粗细”下拉列表框 :用于设置自定义线条的宽度。 = “锐化转角”复选框 :选中该复选框可以使线条的转角更加尖锐。 = “类型”下拉列表框 :用于选择线条的样式。
图 2-11 “笔触样式”对话框 图 2-12 修改属性后绘制的直线
选择线条工具,在“属性”面板中设置线条笔触颜色为蓝色、笔触高度为 3,笔触样式为虚线,在场景中绘制 4条直线,如图 2-12所示。
22
Flash 8动画制作
2.铅笔工具
铅笔工具不但可以绘制直线,还可以绘制曲线。单击工具栏上的铅笔工具 ,移动鼠
标光标到舞台中,当其变为“ ”形状时按住鼠标左键随意拖动可绘制任意直线或曲线,
如图 2-13所示。按<Y>键可以选择铅笔工具。 铅笔工具的选项区域中,单击 按钮将打开如图 2-14 所示的下拉列表。在列表中选
择不同的选项,可以绘制出不同效果的矢量图形,各选项作用如下:
图 2-13 用铅笔工具绘制的羊头 图 2-14 铅笔工具的选项
= 伸直:选择该选项后,绘制的曲线比较规则。利用该选项可以绘制一些比较规则的几何图形,如圆形、矩形、多边形等,如图 2-15所示。
图 2-15 “伸直”选项效果
= 平滑:选择该选项后,绘制的线条比较流畅平滑。利用该选项可以绘制一些比较生动、柔美的图形,平滑选项对绘制卡通图像是最适合的,如图 2-16所示就是应用“平滑”选项后绘制出来的图形。
= 墨水:在该选项下绘制的曲线将如实地反映鼠标光标滑过的路径,就像用钢笔划过的痕迹一样。如图 2-17所示就是利用这一选项绘制出的一幅矢量图。
在绘制直线时按住<Shift>键,
可以绘制水平、与水平成 45
°及垂直的线段。
在“类型”下拉列表框中选择不同
的线条样式后,“笔触样式”对话
框里的选项也可能不相同,用户可
根据各选项提示进行设置。
需要注意的是,使用“伸直”选
项绘制图形的过程中,要有意识
地尽量按预想的效果绘制线条,
只有这样,铅笔工具才能使绘制
的图形趋向于预想的效果。
23
2 绘图工具与文本工具
图 2-16 “平滑”选项效果 图 2-17 “墨水”选项效果
用铅笔工具绘制直线的方法与直线工具相同,这里不再赘述。
3.钢笔工具
钢笔工具是一个不易掌握的绘制工具,用它可以精确的绘制直线和曲线,并可以调节
曲线的曲率,使绘制的线条按照预定的方向弯曲。按<P>键可以选择钢笔工具。 钢笔工具不容易控制与使用,绘制图形时,鼠标光标的形状会不停地变化,如图 2-18
所示。不同形状的鼠标光标代表不同的含义,了解这些鼠标光标的含义对于绘制图形很有
帮助。
图 2-18 钢笔光标含义
= :选择钢笔工具后,移动鼠标光标到舞台中,当其变为“ ”形状时,单击可
确定线条的起始点。 = :将鼠标光标移到绘制曲线上没有句柄的位置,当其变为“ ”形状时,单
击可添加一个句柄。 = :将鼠标光标移到某个句柄上,当其变为“ ”形状时,单击可将弧线的句柄
变为两条直线的连结点。 = :将鼠标光标移到某个句柄上,当其变为“ ”形状时,单击可删除该句柄。 要使用钢笔工具绘制直线,先要创建锚记点,即线条上确定每条线段长度的点。利用
在用铅笔工具绘制线条时,如果按住<Shift>键可以绘
制水平或垂直方向上的直线。
24
Flash 8动画制作
钢笔工具绘制直线的具体操作如下: 选择工具栏中的钢笔工具 ,鼠标光标变为“ ”形状。 在舞台中直线开始的位置单击鼠标左键确定直线起点,起点位置出现一个小圆圈。 释放鼠标左键,将鼠标光标定位到第一条线段结束的位置处再次进行单击,在起点位
置和终点位置会自动出现一条直线,如图 2-19所示。 释放鼠标左键,在舞台中绘制另一条直线。在前一条直线的终点位置单击,确定其为
下一直线的起点,如图 2-20所示。 继续单击创建其他的直线,最后将鼠标光标移到第一条直线的起点位置,当其变为
“ ”形状时单击鼠标左键,封闭绘制的图形,如图 2-21 所示。要结束线条的绘制可单击其他任意工具按钮。
图 2-19 绘制直线 图 2-20 绘制另一条直线 图 2-21 绘制其他线条并封闭
钢笔工具绘制曲线的功能相比于铅笔工具更加强大,它不仅能绘制曲线,还能比较精
确地调整曲线曲率。用钢笔工具绘制曲线的具体操作如下: 选择工具栏中的钢笔工具 ,鼠标光标变为“ ”形状。 在舞台中曲线开始的位置单击,确定曲线的起点。 将鼠标光标移至另一位置,按住鼠标左键不放确定曲线的第二点,然后向任意方向拖
动鼠标即可绘制曲线,同时出现一个调节杆,鼠标光标变为“ ”形状,如图 2-22所示。 当对曲线弧度满意后,释放鼠标左键可绘制出一条曲线。 用相同的方法可绘制出其他曲线,如图 2-23所示。 将鼠标光标移至想要结束曲线段的地方,将曲线的最后一点定位在起始点上单击,可
绘制一个封闭的图形并自动填充默认颜色,如图 2-24所示。当曲线不合适时,可以用选择工具进行修改。
图 2-22 绘制曲线 图 2-23 绘制其他曲线 图 2-24 封闭图形
第3节 绘制几何图形 在制作 Flash 动画时,常常需要自己绘制一些简单的几何图形。而任何一个简单的几
调节杆
25
2 绘图工具与文本工具
何图形,都可以把它们看作是由矩形和椭圆演变而来的。下面学习绘制椭圆、矩形、多边
形和星形的方法。用 Flash 中的矩形工具和椭圆工具可以绘制简单的几何图形,绘制它们的方法并不复杂,只需善于变换组合,即可绘制出生动形象的图形对象。
用刷子工具也可绘制出自然生动的线条和图形,在学习这些绘图工具时要注意区别矢
量线条和矢量色块。
1.椭圆工具
用椭圆工具 可以绘制圆和椭圆。选择工具栏中的椭圆工具 ,在舞台中按住鼠标
左键向任意方向拖动可绘制一个椭圆;按住<Shift>键,同时按住鼠标左键拖动可绘制一个圆。按<O>键可以选择椭圆工具。
绘制一个椭圆,用选择工具 在舞台中单击椭圆内部,可看见其中有许多小点,表示
已经选中了椭圆内部,如图 2-25所示。这时并没有选中整个椭圆,使用默认设置绘制的椭圆除了内部的矢量色块外,还有作为边框的矢量边框。将鼠标光标移到椭圆外围,当鼠标
光标变为“ ”形状时,单击可选中它的矢量边框,如图 2-26所示。
图 2-25 选中矢量色块 图 2-26 选中矢量边框
选择工具栏中的选择工具 ,将鼠标光标移到椭圆左上角的空白舞台中,按住鼠标左
键向右下角拖动可选中整个椭圆,此时“属性”面板变为如图 2-27所示。用户可以同时设置矢量色块和矢量边框的颜色和属性。如图 2-28所示是在颜色列表中选择由绿到黑的放射状渐变色 后绘制圆得到的“青蛙”图形效果。
图 2-27 椭圆工具“属性”面板
在“属性”面板中单击 按钮,在弹出的颜色列表中单击 按钮,使其呈凹
陷状态,可绘制一个无边框颜色的椭圆;单击 按钮,在弹出的颜色列表中
单击 按钮,使其呈凹陷状态,可绘制一个无填充颜色的椭圆线框。
选择工具栏中的选择
工具 ,将鼠标光标
移到图形内部双击,可
选中整个图形。
26
Flash 8动画制作
用椭圆工具可绘制出有趣的图形对象。如图 2-29所示是一个由不同的圆形组成的水果图形。
图 2-28 青蛙图形 图 2-29 水果图形
2.矩形工具
用鼠标左键按住 按钮,在弹出的列表中可选择矩形工具。用矩形工具 可以绘制矩
形、正方形、圆角矩形和多边形等图形。按<R>键可以选择矩形工具。 选择矩形工具 ,在舞台中按住鼠标左键向任意方向拖动可绘制矩形,如图 2-30 所
示。按住<Shift>键,同时按住鼠标左键拖动可绘制一个正方形,如图 2-31所示。
图 2-30 一般矩形 图 2-31 正方形
矩形工具的选项区域如图 2-32 所示,利用【边角半径设置】按钮 可以绘制圆角矩
形。单击【边角半径设置】按钮 ,打开如图 2-33所示的“矩形设置”对话框,在对话框中的“边角半径”文本框中输入相应的数值可以设置圆角矩形的圆角半径,值越大,圆角
的弧度越大,反之则越小,如图 2-34所示为边角半径为“15”的圆角矩形效果。
图 2-32 选项区域 图 2-33 “矩形设置”对话框 图 2-34 圆角矩形
27
2 绘图工具与文本工具
3.多角星形工具
用鼠标左键按住 按钮,在弹出的列表中选择多角星形工具 ,其“属性”面板如图
2-35所示。
图 2-35 多角星形工具“属性”面板
使用多角星形工具可以绘制多边形和星形,其具体操作如下: 按住工具栏中的 按钮,在弹出的列表中选择多角星形工具 。将鼠标光标移到舞台
中,按住鼠标左键向任意方向拖动可绘制一个多边形,如图 2-36所示。 在“属性”面板中单击【选项】按钮,打开“工具设置”对话框,如图 2-37所示。 在该对话框的“样式”下拉列表框中选择“星形”,在“边数”数值框中输入“6”,再在“星形顶点大小”数值框中输入“0.40”,可以绘制出如图 2-38所示星形。
图 2-36 绘制的多边形 图 2-37 “工具设置”对话框 图 2-38 绘制的星形
综合前面介绍的几种工具已经可以绘制出许多简单的图形,如图 2-39所示是利用矩形工具和多角星形工具绘制的图形。
图 2-39 几何图形
4.刷子工具
刷子工具是一个可以创建生动艺术效果的工具,用它绘制的图形不会呆板,很容易表
达出艺术效果。按<B>键可以选择刷子工具。
“工具设置”对话框中的“星
形顶点大小”表示星形向内收
缩的程度。
28
Flash 8动画制作
刷子工具的选项区域如图 2-40所示。其中包括 4个选项,各选项的作用如下: = 【填充模式】按钮 :单击该按钮,在弹出的列表中可以设置刷子的填充模式,
如图 2-41所示。其中各选项间的区别将在后面讲解。
图 2-40 刷子工具的选项区域 图 2-41 刷子工具的 5种模式
= 【锁定填充】按钮 :用于确定渐变色的参照标准。按下该按钮时,用刷子在图
像上涂抹,渐变色会以整个舞台作为参考标准,逐渐变色,如图 2-42所示;如果【锁定填充】按钮没有被按下,用刷子在图像上涂抹,渐变色则是以单个图像作
为参考标准,在每个独立的图像内进行颜色渐变,如图 2-43所示。
图 2-42 以舞台为参考标准填充 图 2-43 以单个对象为参考标准填充 = “刷子大小”下拉列表框 :单击其右边的 按钮,在弹出的下拉列表框中可
以设置刷子的大小,如图 2-44所示,圆越大,刷子越大。 = “刷子形状” 下拉列表框:单击其右边的 按钮,在弹出的下拉列表框中可
以设置刷子的形状,如图 2-45所示。
图 2-44 设置刷子大小 图 2-45 设置刷子形状
对象绘制
设置刷子填充模式
锁定填充
设置刷子大小
设置刷子形状
29
2 绘图工具与文本工具
单击选项栏中的 按钮,在弹出的绘图模式下拉列表框中包含了标准绘画、颜料填充、
后面绘画、颜料选择和内部绘画 5个选项,其中各选项的作用如下: = “标准绘画”模式:选择此模式,刷子工具绘制的图形将完全覆盖所经过的矢量线段和矢量色块,如图 2-46所示。
= “颜料填充”模式:选择此模式,刷子工具将只覆盖矢量色块而不覆盖矢量线段。如图 2-47所示。
图 2-46 “标准绘画”模式 图 2-47 “颜料填充”模式
= “后面绘画”模式:选择此模式,使用刷子工具绘制的图形将从图形的后面穿过,不会对原矢量图形造成影响,如图 2-48所示。
= “颜料选择”模式:选择此模式,只有在选取的矢量色块的填充区域内才适用,如图 2-49所示。如果没选择任何区域,刷子工具将不能在矢量图形上进行绘画。
= “内部绘画”模式:选择此模式,只适合在封闭的区域里填色,并且起点必须在矢量图内部,如图 2-50所示。
图 2-48 “后面绘画”模式 图 2-49 “颜料选择”模式 图 2-50 “内部绘画”模式
第4节 添加文字 在一部 Flash作品中,添加文字能传情达意,使得作品更加真实。Flash提供了文本工
具来添加文字,并可在“属性”面板中编辑文字的属性。
1.输入文字
文本工具 用于输入和设置动画中的文字,输入文字的具体操作如下: 单击工具栏中的文本工具 。将鼠标光标移至舞台中,当其变为“ ”形状时,按住
鼠标左键拖动将出现一个如图 2-51所示的虚线框。 将虚线框拖至适当大小后,释放鼠标左键将出现一个如图 2-52所示的文本框。
30
Flash 8动画制作
图 2-51 拖动虚线框 图 2-52 鼠标拖动出的文本框
在文本框中输入需要的文字,直接按<Enter>键可换行,如果不按<Enter>键,当文字达到文本框边缘时会自动换行,如图 2-53所示。 输入完成后,用鼠标单击文本框外的任意空白处可完成文字的输入,此时文本框将消
失,效果如图 2-54所示。
图 2-53 输入文本 图 2-54 文字效果
双击文本框右上角的小方框,小方框会变为小圆圈,表示无宽度限制的文本框。这时
如果在某一行后继续输入文字,文本框会自动变宽而不会自动换行,如图 2-55所示。
图 2-55 无宽度限制的文本框
2.设置文字属性
选择文本工具,其“属性”面板如图 2-56所示,在其中可以设置文字的各种属性。
图 2-56 文本工具的“属性”面板
输入文字后,如果想修改文本
的内容,只需再次单击文本工
具,再单击含有文字的文本
框,在其中选中要修改的文字
直接修改即可。
我发现我输入的文
字中有错别字,该
怎么修改呢?
31
2 绘图工具与文本工具
该“属性”面板中各选项的作用如下: = “文本类型”下拉列表框 :可创建静态文本、动态文本和输入文本
3种类型的文本,其中各类型的作用如下: = 静态文本:显示不能动态更新字符的文本。 = 动态文本:显示动态更新的文本,如日期、股票报价或天气报告等。 = 输入文本:使用户可以将文本输入到表单或调查表中。
= “字体”下拉列表框 :单击右侧的 按钮,在打开的下拉列
表框中选择字体。 = “字体大小”数值框 :单击右侧的 按钮,在打开的滑动条中拖动滑块调节
字号大小。 = 【文本方向】按钮 :单击该按钮将弹出一个“排列方式”列表框,如图 2-57所示。在该列表框中可以设置文字的排列方式。
= 【粗体】与【斜体】按钮 :选择【粗体】按钮或【斜体】按钮可以设置文
字的加粗与倾斜。 = 【对齐样式】按钮 :可设置文字的对齐方式,依次为左对齐、居中对齐、
右对齐和两端对齐 4种对齐方式。 = “字间距”数值框 :字符间距会在字符之间插入统一数量的空格,可使
用字符间距设置选定字符或整个文本块的间距。 = “字符位置”下拉列表框 :设置被选择文字的显示方式,有正常、
上标和下标 3种字符位置。如图 2-58所示。
图 2-57 文本方向 图 2-58 字符位置
= 【编辑格式】按钮 :单击此按钮,将打开“格式选项”对话框,在其中可以精
确的设置缩进、行距、左边距和右边距,如图 2-59所示。
图 2-59 “格式选项”对话框
= 下拉列表框:可指定字体的消除锯齿属性,对每个文本字
在其中进行设置
32
Flash 8动画制作
段应用锯齿消除,而不是每个字符。其中有使用设备字体、位图文本、动画消除
锯齿、可读性消除锯齿和自定义消除锯齿 5个选项,如图 2-60所示。其中各选项作用如下: = 使用设备字体:可指定 SWF文件使用已经安装在本地计算机上的字体,并显示这些字体。 = 位图文本:选择此选项会关闭消除锯齿功能,此时将不对文本进行平滑处理。 = 动画消除锯齿:可创建较平滑的动画,该选项只适用于部分情况。由于字体轮廓是嵌入的,因此选择此选项会创建较大的 SWF文件。 = 可读性消除锯齿:此选项使用了新的消除锯齿引擎,改进了字体,特别是较小字体的可读性。 = 自定义消除锯齿:可以按照需要修改字体属性,选择此选项将打开“自定义消除锯齿”对话框,如图 2-61所示。其中“粗细”数值框可确定字体消除锯齿转变显示的粗细,较大的值可以使字符看上去较粗。“清晰度”数值框可确定文本
边缘与背景过渡的平滑度。
图 2-60 消除锯齿 图 2-61 “自定义消除锯齿”对话框
3.调整效果
Flash 8中的滤镜可以为文本添加有趣的视觉效果。滤镜有斜角、投影、发光、模糊、渐变发光、渐变模糊和调整颜色等。在“滤镜”面板中可对所选对象应用滤镜效果。
使用“动画消除锯齿”呈现的字体在字体较小时会不太清晰。因此,建议您在指定“动画消除
锯齿”时使用数值为“10”以上的字号。
应用于对象的滤镜类型、数量和质量会影响 SWF 文件的播放性能。对象应用的滤
镜越多,为正确显示创建的视觉效果,Flash Player要处理的计算量也就越大。建议
对于一个给定对象,只应用有限数量的滤镜。
33
2 绘图工具与文本工具
每个滤镜都包含控件,可以调整应用滤镜的强度和质量。在运行速度较慢的计算机上,
使用较低的设置可以提高性能。在不同性能的计算机上创建回放内容,也许不能确定用户
所使用的计算机的计算能力,一般情况下可将质量级别设置为低,以实现最佳的回放性能。 在“滤镜”面板中,可以对选定的对象应用一个或多个滤镜。给 0对象每添加一个新
的滤镜后,在“滤镜”面板中就会将其添加到该对象所应用的滤镜的列表中。可以对一个
对象应用多个滤镜,也可以删除以前应用的滤镜。“滤镜”面板如图 2-62所示。
图 2-62 “滤镜”面板
使用滤镜的方法如下: 在场景中选择要应用滤镜效果的影片剪辑元件实例、按钮元件实例或文本对象。 单击“滤镜”面板中的【添加滤镜】按钮 ,在弹出的菜单中选择一个滤镜命令。 添加了滤镜效果后,【删除滤镜】按钮 将被激活,在滤镜列表中选取一个滤镜命令,
单击【删除滤镜】按钮 可删除此滤镜效果。 选择【添加滤镜】按钮 ,弹出的菜单中各项作用如下: = 预设:在弹出的预设子菜单底部的可用预设列表中,选择要应用的滤镜预设。 = 删除全部:选择此选项,可以删除全部的滤镜效果。 = 启用全部:选择此选项,可以启用全部的滤镜效果。 = 禁用全部:选择此选项,可以禁止使用全部的滤镜效果。 = 投影:可模拟对象向一个表面投影的效果,或者在背景中剪出一个形似对象的洞,来模拟对象的外观。选择此选项后,“滤镜”面板如图 2-63所示,对象效果如图2-64所示。“滤镜”面板中各项作用如下:
图 2-63 “滤镜”面板 图 2-64 投影效果
34
Flash 8动画制作
= 在“模糊 X”数值框和“模糊 Y”数值框中可设置投影的宽度和高度。 = 在“距离”数值框中可设置阴影与对象之间的距离。 = 单击【颜色】按钮,在打开的颜色列表中可以设置阴影颜色。 = 在“强度”数值框中可设置阴影暗度。数值越大,阴影就越暗。 = 在“角度”数值框中可设置阴影的角度。 = 选中“挖空”复选框可从视觉上隐藏对象,并在挖空图像上只显示投影。 = 选中“内侧阴影”复选框,在对象边界内应用阴影。 = 选中“隐藏对象”复选框隐藏对象,并只显示其阴影。使用“隐藏对象”选项可以更轻松地创建逼真的阴影。
= 在“品质”下拉列表框中选择投影的质量级别。把质量级别设置为“高”时近似于高斯模糊。建议把质量级别设置为“低”,以实现最佳的回放性能。
= 模糊:可以柔化对象的边缘和细节。将模糊应用于对象,可以让它看起来好像位于其它对象的后面,或者使对象看起来好像是运动的。选择此选项后,“滤镜”
面板如图 2-65所示,对象效果如图 2-66所示。
图 2-65 “滤镜”面板 图 2-66 模糊效果
= 在“模糊 X”数值框和“模糊 Y”数值框中可设置模糊的宽度和高度。 = 在“品质”下拉列表框中选择模糊的质量级别。把质量级别设置为“高”时近似于高斯模糊。建议把质量级别设置为“低”,以实现最佳的回放性能。
= 发光:可以为对象的整个边缘应用颜色。选择此选项后,“滤镜”面板如图 2-67所示,对象效果如图 2-68所示。
图 2-67 “滤镜”面板 图 2-68 发光效果
= 在“模糊 X”数值框和“模糊 Y”数值框中可设置发光的宽度和高度。 = 单击【颜色】按钮,在弹出的颜色列表中可以设置发光颜色。 = 在“强度”数值框中可设置发光的清晰度。 = 选中“挖空”复选框可从视觉上隐藏对象,并在挖空图像上只显示发光。
35
2 绘图工具与文本工具
= 选中“内侧发光”复选框,可在对象边界内应用发光。 = 在“品质”下拉列表框中可选择发光的质量级别。将质量级别设置为“高”时近似于高斯模糊。建议将质量级别设置为“低”,以实现最佳的回放性能。
= 斜角:应用斜角滤镜就是向对象应用加亮效果,使其看起来凸出于背景表面。可以创建内斜角、外斜角或者完全斜角。选择此选项后,“滤镜”面板如图 2-69所示,对象效果如图 2-70所示。
图 2-69 “滤镜”面板 图 2-70 斜角效果
= 在“类型”下拉列表框中选择要应用到对象的斜角类型。可以选择内斜角、外斜角或者完全斜角。
= 在“模糊 X”数值框和“模糊 Y”数值框中可设置斜角的宽度和高度。 = 单击【阴影】按钮,在弹出的颜色列表中可选择斜角的阴影和加亮颜色。 = 在“强度”数值框中可设置斜角的不透明度,但不影响其宽度。 = 在“角度”数值框中可更改斜边投下的阴影角度。 = 在“距离”数值框中可定义斜角的宽度。 = 选中“挖空”复选框可从视觉上隐藏对象,并在挖空图像上只显示斜角。
= 渐变发光:可在发光表面产生带渐变颜色的发光效果。渐变发光要求选择一种颜色作为渐变开始的颜色,所选颜色的 Alpha 值为“0”,且颜色位置无法移动,但可以改变其颜色。选择此选项后,“滤镜”面板如图 2-71所示,对象效果如图2-72所示。
图 2-71 “滤镜”面板 图 2-72 渐变发光效果
= 可指定发光的渐变颜色。渐变包含两种或多种可相互
淡入或混合的颜色。选择的渐变开始颜色称为 Alpha颜色。 = 要更改渐变中的颜色,可从渐变定义栏下面选择一个颜色指针,然后单击渐变栏正下方显示的颜色空间,将显示颜色列表。滑动这些指针,可以调整该
36
Flash 8动画制作
颜色在渐变中的级别和位置。 = 渐变斜角:可产生一种凸起效果,使得对象看起来好像从背景上凸起,且斜角表面有渐变颜色。渐变斜角要求渐变的中间有一个颜色,颜色的 Alpha值为“0”,此颜色位置无法移动,但可以改变颜色。选择此选项后,“滤镜”面板如图 2-73所示,对象效果如图 2-74所示。
图 2-73 “滤镜”面板 图 2-74 渐变斜角效果
= 调整颜色:可调整所选影片剪辑元件、按钮元件或者文本对象的亮度、对比度、色相和饱和度。选择此选项后,“滤镜”面板如图 2-75所示,对象效果如图 2-76所示。
图 2-75 “滤镜”面板 图 2-76 调整颜色效果
= 对比度调整图像的加亮、阴影及中调。数值范围是“-100”至“100”。 = 亮度调整图像的亮度。数值范围是“-100”至“100”。 = 饱和度调整颜色的强度。数值范围是“-100”至“100”。 = 色相调整颜色的深浅。数值范围是“-180”至“180”。 = 单击【重置】按钮,可以把所有的颜色调整重置为“0”,使对象恢复原来的状态。
第5节 实战演练——制作标志图形 本章节将运用绘制图形和添加文字的方法制作一个标志图形,完成后,将出现有“方
圆科技”文字和标志图形,最终效果如图 2-77所示(光盘\第 02章\最终效果\方圆科技.fla)。
要向渐变中添加指针,可单击渐变定义栏或渐变定义栏的下边。最多可添加 15个颜色
指针,这样最多能够创建 15种颜色的渐变。要重新放置渐变上的指针,可沿着渐变定
义栏拖动指针,将其向下拖离渐变定义栏可以删除它。
37
2 绘图工具与文本工具
通过练习,可以巩固如何使用椭圆工具、矩形工具和刷子工具绘制图形,并应用文本工具
添加文字。在练习时应注意在输入文字后,为文字调整属性和添加滤镜的方法。其具体操
作如下:
图 2-77 标志图形
新建 Flash文档,在“属性”面板中设置文档大小为“200×220”像素,背景色白色。 选择线条工具 ,在“属性”面板中选择笔触颜色为“橘黄色”,笔触高度“1”。 在场景左上方按住鼠标左键向下拖动,绘制出 1条直线,如图 2-78所示。 用同样的方法,在场景中绘制 3条直线,如图 2-79所示。
图 2-78 绘制直线 图 2-79 绘制直线
选择矩形工具,在“属性”面板中选择笔触颜色为“红黑色”,笔触高度为“5”,填充颜色为“无”。在选项区域单击 按钮,在弹出的“矩形设置”对话框中设置边
角半径为“9”,如图 2-80所示。 在场景左上方中按住<Shift>键,并按住鼠标左键向右下方拖动,到一定的位置时释放鼠标左键,绘制一个无填充颜色的圆角矩形,如图 2-81所示。
38
Flash 8动画制作
图 2-80 “矩形设置”对话框 图 2-81 绘制圆角矩形边框
在“属性”面板中选择笔触颜色为“深红色”,在圆角矩形中再绘制一个圆角矩形,
如图 2-82所示。 选择椭圆工具,在“颜色”区域中选择笔触颜色为“暗红色”,笔触高度为“5”,单击【没有颜色】按钮 ,将填充色设置为无。 将鼠标光标移至圆角矩形中,按住<Shift>键,并按住鼠标左键向左下方拖动,绘制一个圆形,如图 2-83所示。
图 2-82 绘制圆角矩形边框 图 2-83 绘制圆形边框
在颜色区域将笔触颜色设置为“深红色”,在刚才绘制的圆形边框中再绘制一个圆形,
如图 2-84所示。 选择刷子工具,在“颜色”区域选择填充颜色为“中黄色”,在选项区域中选择刷子
形状为圆形,刷子大小为列表中的倒数第 3个,并选择刷子模式为“内部绘画”,如图 2-85所示。 在两个矩形边框之间按住鼠标左键向右下方拖动,绘制出如图 2-86所示的图形。
图 2-84 绘制圆形边框 图 2-85 设置属性 图 2-86 绘制图形
39
2 绘图工具与文本工具
用同样的方法绘制另外的图形,如图 2-87所示。 选择文本工具,在“属性”面板中将字体设置为“文鼎新艺体简”、字号设置为“35”、颜色设置为“红黑色”,如图 2-88所示。
图 2-87 绘制图形 图 2-88 “属性”面板
将鼠标光标移至场景下方,鼠标光标变为“ ”形状,按住鼠标左键拖动将出现一个
蓝色线框,这时输入“方圆科技”文字,如图 2-89所示。 在“属性”面板中将字号设置为“18”,在“方圆科技”文字下方输入“FANG YUAN KE JI”文字,如图 2-90所示。
图 2-88 输入文字 图 2-90 输入文字
选取“方圆科技”文字,在“滤镜”面板中选择“斜角”选项并进行设置,如图 2-91所示,完成制作。
图 2-91 斜角效果
第6节 练一练 (1)绘制线条的工具有哪些? (2)怎样用铅笔工具绘制出不同风格的图形效果? (3)在使用钢笔工具绘制图形时,常常会发现鼠标光标的形状有变化,各光标形状
有什么含义呢? (4)怎样使用矩形工具绘制圆角矩形?
结合前面所学的知识,制作一段有不同滤镜效果的广告文字,熟练掌握滤镜的使用。
40
Flash 8动画制作
(5)多边形可以用哪些工具绘制? (6)在设置文本属性的时候只能先选中文本,再设置其属性吗? (7)制作如图 2-88 所示的“卡片”图形(光盘\第 02 章\最终效果\卡片.fla),主要
练习本章所学的绘图工具的使用方法。
图 2-88 卡片图形 (8)制作一份如图 2-89 所示的留言条(光盘\第 02 章\最终效果\意见.fla),用文本
工具输入文字,设置属性,并为不同的文字添加不同的滤镜效果。
图 2-89 留言条
& 选择图形
& 编辑图形
& 图形操作
& 查看图形
Flash中如果绘制的对象不美观或 不符合要求,可以使用工具栏中
的工具对绘制的对象进行线条、形状及
色彩与等属性的编辑。本章将介绍用选
择工具、套索工具选择对象的方法,用
选择工具、任意变形工具和部分选取工
具对图形进行变形、缩放和旋转等操作
的方法,用橡皮擦工具擦除图形的方法
等。 在编辑图形的过程中,常常还需要
结合辅助工具使用。本章还将介绍图形
操作的其他方法,另外,还将介绍查看
在
3
编辑图形与对象
42
Flash 8动画制作
第1节 选择图形 要做出优秀的 Flash 作品,需要反复地调整与编辑。编辑图形首先必须选中图形。在
Flash中,可以选择图形的工具很多,如选择工具、任意变形工具、部分选取工具和套索工具等。
选择“编辑→首选参数”命令,打开“首选参数”对话框,在“常规”类别中,可设
置选取对象的情况: = 只选择被选取框完全包含的对象或点,可取消选中“接触感应选取和套索工具”复选框。此时,只有位于选取区域内的点才会被选中。
= 选择被选取框部分包含的对象或组,可选中“接触感应选取和套索工具”复选框。 当选中“接触感应选取和套索工具”复选框时,使用选择工具、任意变形工具,只需
单击或框选对象即可选中,用部分选取工具只需单击对象边框即可选中。 下面主要介绍取消选中“接触感应选取和套索工具”复选框时,用选择工具和套索工
具选取对象的方法。
1.选择工具
当需要对场景中的对象进行编辑时,首先应该选取对象。用选择工具 选取对象的方
法有如下 4种: = 选择被打散的对象时,可以按住鼠标左键并拖动,框选要选择的部分,被选中的部分以点的形式显示,如图 3-1所示。
= 选择元件或组合图形时,只需在对象上单击,被选择的对象四周会出现蓝色实线框,如图 3-2所示。
图 3-1 选择被打散的对象 图 3-2 选择组合图形
= 选择导入的位图时,被选中对象以花边框显示,如图 3-3所示。 = 选择多个对象时,可以按住鼠标左键并拖动,框选要选择的部分,如图 3-4所示。
图 3-3 选择导入的位图 图 3-4 选择多个对象
43
3 编辑图形与对象
2.套索工具
用套索工具 可以精确选取不规则对象,在工具栏中选择套索工具 ,其选项区域
如图 3-5所示,其中各按钮作用如下: = 【魔术棒】按钮:可以沿对象轮廓进行大范围选取,也可选取颜色范围。 = 【魔术棒属性】按钮:单击该按钮可以打开“魔术棒设置”对话框,在该对话框中可以设置魔术棒选择的颜色范围,如图 3-6所示。其各项含义如下: = 阈值:可定义选取范围内与单击处颜色的容差值。输入的数值越大,相近程度越小,选取的相邻区域范围越大。
= 平滑:可指定选取范围边缘的平滑度。有像素、粗略、正常和平滑 4种选项。
图 3-5 套索工具的选项区域 图 3-6 “魔术棒设置”对话框
= 【多边形套索】按钮:可对不规则对象进行比较精确的选取。
(1) 选择图形轮廓
用套索工具 选取对象中不是很精确部分的范围,其具体操作如下: 在舞台中选中图形,若图形是位图或组合图形,可选择“修改→分离”命令或按<Ctrl+B>键打散图形。 在工具栏中选择套索工具 ,鼠标光标变为“ ”形状。将鼠标光标移到要选取的
图形周围,按下鼠标左键并随意拖动,当绘制的曲线包含想选取的范围后松开鼠标左
键即可,如图 3-7所示。
图 3-7 直接选取范围
在舞台空白处单击,再
按<Ctrl+A>键可选择舞
台中所有对象。
按住<Shift>键,用鼠标依
次单击需要选择的对象可
选中多个对象。
魔术棒 魔术棒属性
多边形套索
套索工具只对打散的位图、矢量图和文字有效。
如果要绘制直线线段,可按住<Alt>键后,依次在
起始点和终点位置单击。
44
Flash 8动画制作
(2) 选取色彩范围相近的区域
在图形色彩界限分明时,可使用套索工具在图形中选取色彩相近的范围,相近程度可
通过“魔术棒设置”对话框设置,其具体操作如下: 选择套索工具 ,在选项区域中单击【魔术棒】按钮 ,光标变为“ ”形状。 单击【魔术棒属性】按钮 ,在打开的“魔术棒设置”对话框的“阈值”文本框中
输入色彩的容差值,这里输入“60”;在“平滑”下拉列表框中设置点阵图边缘的平滑度,这里选择“正常”选项,如图 3-8所示。 单击【确定】按钮回到舞台,将鼠标光标移至图形内,当其变为“ ”形状时,单击
图形上的任意一点,魔术棒将选取与单击处颜色相近的区域。 单击并拖动被魔术棒工具选中的部分,可将其移出原图像,如图 3-9所示。
图 3-8 设置魔术棒属性 图 3-9 移出被选中的部分
(3) 选取颜色不相近、区域不规则的图形
单击套索工具的选项区域中的【多边形套索】按钮 可选择颜色不相近、区域不规则
的图形,其具体操作如下: 在舞台中选中图形,如果是位图或组合图形需要先将其打散。 选择套索工具 ,在选项区域单击【多边形套索】按钮 ,鼠标光标变为“ ”形状。 在对象上任意处单击,作为多边形的起点,这里单击图形下边的左侧。 拖动光标时,一条直线会随光标移动。在适当位置单击确定第一条线段的终点,如图
3-10所示。 继续移动鼠标,在适当的地方单击确定第二条线段的终点。使用同样的方法,继续绘
制出其他各边,组成一个多边形区域,如图 3-11所示。 双击鼠标左键封闭选择区域,完成选择,如图 3-12所示。
图 3-10 确定第一条线段 图 3-11 组成多边形区域 图 3-12 完成多边形区域选择
45
3 编辑图形与对象
第2节 编辑图形 在创建 Flash动画时,常常要对绘制的矢量图形或位图进行各种编辑,如变形、旋转、
缩放和擦除等。
1.选择工具
选择工具不但能选取和移动图形,还能修改图形的形状。但这种功能只能用于打散的
位图、矢量图以及文字。下面以一个实例来讲解选择工具的变形功能,其具体操作如下: 绘制一个蓝灰色的圆角矩形,单击选择工具,将鼠标光标移到矩形的上边线,鼠标光
标变为“ ”形状,按住鼠标左键向下拖动,如图 3-13所示。 到达适当的位置时松开鼠标左键可使边线变为弧线,如图 3-14所示。 用同样的方法将矩形的三边都向内拖动,得到如图 3-15所示的效果。
图3-13 修改一边的形状 图3-14 修改一边后的效果 图3-15 修改3边后的效果
绘制一个蓝灰色的矩形,将鼠标光标移到矩形的左上角,指针变为“ ”形状,如图
3-16所示。 按住鼠标左键向右下角拖动,如图 3-17所示。当到达适当位置时松开鼠标左键,得到如图 3-18所示效果。
图 3-16 移到鼠标到交点 图 3-17 按住鼠标左键拖动 图 3-18 变形效果
2.任意变形工具
用任意变形工具可以对选取对象进行缩放和旋转操作,还可以进行变形操作并制作出
特殊效果。选择工具栏中的任意变形工具 ,选项区域如图 3-19 所示,其中各按钮的作用如下:
= 【旋转与倾斜】按钮 :单击该按钮,将鼠标光标移到图形的任意一角上,当其
变为“ ”形状后按住鼠标左键并拖动,可对图形进行旋转和倾斜操作,效果如
图 3-20所示。
46
Flash 8动画制作
图 3-19 任意变形工具的选项区域 图 3-20 “旋转与倾斜”效果
= 【缩放】按钮 :单击该按钮后,将鼠标光标移到图形的任意一角上,当其变为
双向箭头后按住鼠标左键并拖动,可以按比例缩放图形而不会使对象变形,效果
如 3-21所示。
图 3-21 “缩放”效果
= 【扭曲】按钮 :单击该按钮后,将鼠标光标移到图形的任意一角上,按住鼠标
左键并拖动,可对图形进行扭曲变形以增强透视效果,效果如 3-22所示。
图 3-22 “扭曲”效果
= 【封套】按钮 :单击该按钮后,图形周围出现很多控制柄,拖动这些控制柄可
对图形进行更细微的变形,效果如 3-23所示。
旋转与倾斜
扭曲 封套
缩放
47
3 编辑图形与对象
图 3-23 “封套”效果
3.部分选取工具
用部分选取工具 可改变打散的矢量图的形状。选择部分选取工具 ,在绘制好的图
形边缘上单击,被选中的图象 0边框上会出现许多小节点。部分选取工具在不同情况下有不同的光标形状,如图 3-24所示,各种光标含义如下:
图 3-24 部分选取工具不同的光标形状
= :当鼠标光标移到没有节点的曲线上时,会变为“ ”形状,按住鼠标左键
并拖动可以移动整个图形。 = :当鼠标光标移到节点上时,会变为“ ”形状,按住鼠标左键并拖动可以
改变该节点的位置。 = :当鼠标光标移到节点的调节柄上时,会变为“ ”形状,按住鼠标左键并拖
动可以调整与该节点相连的线段的弯曲程度。
4.橡皮擦工具
橡皮擦工具 可以擦除整个图形或图形中不需要的部分。它只能用于打散后的图形,
选中图形后选择“修改→分离”命令或按<Ctrl+B>键,选择橡皮擦工具 ,其选项区域如
图 3-25所示,其中选项区域各按钮的作用如下: = 【水龙头】按钮 :单击该按钮后在需要擦除的色块上单击,可快速擦除矢量色
块和线段。 = “橡皮擦形状”下拉列表框 :单击该下拉列表框右侧的 按钮,在弹出的
在用任意变形工具改变图形形状时,按住<Alt>键可
以使图形的一边保持不变,便于用户定位。
48
Flash 8动画制作
下拉列表中可选择橡皮擦的大小和形状。 = 【擦除模式】按钮 :单击该按钮,在弹出如图 3-26 所示的下拉列表中可选择擦除的模式。
图 3-25 橡皮擦工具选项区域 图 3-26 擦除模式
= 标准擦除:可擦除矢量色块和矢量线条,如图 3-27所示。 = 擦除填色:只擦除填充的矢量色块,而不会擦除矢量线条,如图 3-28所示。
图 3-27 标准擦除 图 3-28 擦除填色
= 擦除线段:只擦除矢量线条,而不会擦除填充的矢量色块,如图 3-29所示。 = 擦除所选填充填:擦除选中区域中的某部分或全部,而未选中的部分不受影响,如图 3-30所示。
= 内部擦除:可擦除封闭图形内部区域,橡皮擦的起点必须在封闭图形内,否则不能进行该操作,如图 3-31所示。
图 3-29 擦除线段 图 3-30 擦除所选填充颜色 图 3-31 内部擦除
擦除模式 水龙头工具
橡皮擦形状
在使用水龙头工具擦除对象时,
最好将对象放大后再擦除,这样
可以避免误擦除。
在需擦除的对象上按住鼠标左
键并拖动可擦除鼠标光标经过
的区域。
49
3 编辑图形与对象
第3节 图形操作 在制作 Flash 动画时,常常还需要对图形的进行移动、复制、粘贴、群组、打散和对
齐的操作,下面将详细讲解。
1.移动图形
如果绘制的对象需要在场景中变换位置,可以用选择工具移动对象。 选择工具栏中的选择工具 ,在场景中选中要移动的对象,按下鼠标左键不放并拖动
对象到合适的位置后,释放鼠标左键即可移动对象,如图 3-32所示。
图 3-32 移动对象
2.复制与粘贴图形
如果要绘制多个相同图形,或者要绘制的图形和已有图形相同时,可以用复制和粘贴
功能,而不必逐个绘制。在 Flash中,复制图形的方法有如下 3种: = 选中要复制的对象,按<Ctrl+C>键复制。 = 用选择工具选择对象后,按住<Ctrl>键不放并拖动鼠标进行复制。 = 用任意变形工具选择对象后,按住<Alt>键不放并拖动鼠标进行复制。 在 Flash中,粘贴图形的方法有如下 2种: = 按<Ctrl+V>键粘贴将对象粘贴到中心位置。 = 按<Shift+Ctrl+V>键将对象粘贴到原位置。
3.群组与打散图形
在制作 Flash 动画过程中,如果需要对相关的多个图形进行整体操作,可以将其群组成一个整体。同时也可以将一个图形分离开来进行局部 0操作。
群组图形的方法是先用选择工具选择需要群组的多个图形,如图 3-33所示。然后选择“修改→组合”命令,或按<Ctrl+G>键将图形群组,群组后多个图形变为一个图形,在群组图后的形外围有一个蓝色边框,如图 3-34所示。
在用选择工具移动图形时,图形四周可能会出现垂直或水平的虚线。利用这些虚
线可以准确地定位图形,使之与原图形在某个方向上对齐。
50
Flash 8动画制作
图 3-33 选择图形 图 3-34 组合后的图形
需要将多个对象群组成一个整体的 3种情况如下: = 如果需要对多个对象进行整体的变形等编辑,可将它们群组起来。 = 如果需要对多个对象进行整体的移动,可将它们群组起来,这样在移动时可以保持对象的相对位置不变。
= 如果在舞台中有多个对象,对其中某对象进行操作会影响到其他对象时,可先将需要编辑的对象群组成一个整体,再进行编辑就不会影响其他对象。
选中群组后的对象,选择“编辑→编辑所选项目”命令或双击群组对象,进入编辑状
态,可以对该群组中的对象分别进行编辑,而舞台中的其他对象将变淡,不能编辑,如图
3-35所示。双击空白区域可回到正常状态。
图 3-35 编辑所选项目
打散图形是指将位图、文字或群组后的图形打散成单个的像素点,以便对其中的一部
分进行编辑。 选择“编辑→首选参数”命令,在“首选参数”对话框中选中“接触感应选取和套索
工具”复选框。用选择工具框选位图的一部分会选中整个位图。位图四周出现灰色边框时
选择“修改→分离”命令或按<Ctrl+B>键打散位图,再用选择工具框选位图的一部分,此时只有选框内的部分被选中,切只能对这部分进行编辑。如图 3-36所示是选中的位图,如图 3-37所示是打散后编辑的位图。群组后的图形也可以打散。
可编辑对象
不可编辑对象
51
3 编辑图形与对象
图 3-36 选中的位图 图 3-37 打散后编辑的位图
4.对齐图形
在 Flash中,可以用辅助线和“对齐”面板排列和对齐图形。
(1) 辅助线排列图形
在 Flash 8中可以使用辅助线对齐图形。在移动图形时,图形的边缘会出现水平或垂直的虚线,该虚线自动与另一图形的边缘对齐。使用辅助线对齐图形的具体操作如下: 用工具栏中的绘图工具,在舞台中任意位置绘制几个简单的图形,如图 3-38所示。 选中左方的圆形,按住鼠标左键并向下拖动,此时图形边缘会出现水平或垂直的虚线,
标明其他图形的边界线,如图 3-39所示。
图 3-38 绘制的图形 图 3-39 向下拖动圆形
出现虚线时停止拖动可将该图形的一边对齐另一个图形的一边。如图 3-40、图 3-41所示分别是按左对齐和顶边对齐排列后的效果。
图 3-40 左对齐效果 图 3-41 顶边对齐效果
52
Flash 8动画制作
(2) 对齐面板排列图形
当有多个对象需要按特定方式排列时,可以利用 Flash 8的辅助线来对齐对象,还可以利用“对齐”面板来对齐对象。选择“窗口→对齐”命令或按<Ctrl+K>键,打开如图 3-42所示的“对齐”面板。
图 3-42 “对齐”面板
当【相对于舞台】按钮 处于按下状态时,调整图像位置将以整个舞台为标准,使
图像相对于舞台左对齐、右对齐或居中对齐等。如果该按钮没有处于按下状态,则是以各
图形的相对位置为标准对齐图形。 对齐区域中各按钮的作用如下: = 【左对齐】 :可使选中的对象靠左端对齐。 = 【水平中齐】按钮 :可使选中的对象沿垂直线居中对齐。 = 【右对齐】按钮 :可使选中的对象靠右端对齐。 = 【上对齐】按钮 :可使选中的对象靠上端对齐。 = 【垂直中齐】按钮 :可使选中的对象沿水平线居中对齐。 = 【底对齐】按钮 :可使选中的对象靠底端对齐。 分布区域中各按钮的作用如下: = 【顶部分布】按钮 :可使选中的对象在水平方向上顶端间距相等。 = 【垂直居中分布】按钮 :可使选中的对象在水平方向上中心间距相等。 = 【底部分布】按钮 :可使选中的对象在水平方向上底端间距相等。 = 【左侧分布】按钮 :可使选中的对象在垂直方向上左端间距相等。 = 【水平居中分布】按钮 :可使选中的对象在垂直方向上中心间距相等。 = 【右侧分布】按钮 :可使选中的对象在垂直方向上右端间距相等。 匹配大小区域中各按钮的作用如下: = 【匹配宽度】按钮 :以选中的对象最大宽度为基准,在水平方向上等尺寸变形。 = 【匹配高度】按钮 :以选中的对象最大高度为基准,在垂直方向上等尺寸变形。 = 【匹配宽和高】按钮 :以选中的对象中宽度和高度最大的为基准,在水平和垂
直方向上同时等尺寸变形。 间隔区域中各按钮的作用如下: = 【垂直平均间隔】按钮 :可使选中的对象在垂直方向上间距相等。 = 【水平平均间隔】按钮 :可使选中的对象在水平方向上间距相等。
53
3 编辑图形与对象
第4节 查看图形 Flash 8提供了缩放工具和手形工具来帮助用户编辑图形。手形工具和缩放工具都是辅
助工具,本身不具有绘画功能,但在绘制和编辑图形时能够辅助操作。
1.缩放工具
在 Flash 场景中如果图形太小,不仅不能看清图形而且无法编辑图形的细节;如果图形太大,则难以看到图形的整体。使用缩放工具 可以缩放图形以满足需要。
选择缩放工具 ,选项区域如图 3-43所示,单击【放大】按钮 ,在场景中单击可
放大显示场景;单击【缩小】按钮 ,在场景中单击则可缩小显示场景。
图 3-43 缩放工具选项区域
2.手形工具
在 Flash 中,如果图形过大,超出场景范围而无法看到整个图形,这时可以使用手形工具来移动图形,以便查看,其操作步骤如下: 单击查看栏中的手形工具 ,将鼠标光标移动到在场景中,变为“ ”形状,此时场
景如图 3-44所示。 按住鼠标左键向任意方向拖动可移动场景在Flash界面中的位置。用手形工具将图3-44所示的场景向上拖动后,场景如图 3-45所示。
图 3-44 使用手形工具前 图 3-45 使用手形工具后
按住<Alt>键可以在放大和缩
小场景之间转换。在缩放工
具上双击可以使舞台以
“100%”比例显示。
54
Flash 8动画制作
第5节 实战演练——绘制电脑图形 本章节将绘制电脑图形,最终效果如图 3-46所示(光盘\第 03章\最终效果\电脑.fla)。
通过练习,可以巩固使用选择工具、任意变形工具、缩放工具和手形工具等的方法,并掌
握对图形的操作方法,使绘制的图形更加细腻、丰富。其具体操作如下:
图 3-46 “电脑”最终效果
新建一个 Flash 文档,在“属性”面板中设置文档大小为“300×380”像素,背景色为浅蓝色。 选择线条工具,在场景上方绘制显示器图形,如图 3-47所示。 选择工具栏中的选择工具 ,将鼠标光标移到需要调整的显示器的轮廓线条旁,当鼠
标光标变为“ ”形状时,按住鼠标左键并拖动,改变线条的形状,如图 3-48所示。
图 3-47 绘制显示器图形 图 3-48 调整线条
使用选择工具对显示器图形的轮廓线条进行修改,完成后效果如图 3-49所示。
55
3 编辑图形与对象
选择矩形工具和铅笔工具,在场景中绘制键盘图形,如图 3-50所示。
图 3-49 调整完成的显示器 图 3-50 绘制键盘图形
选择任意变形工具,框选键盘图形并将鼠标光标移至右上方的控制柄处。当鼠标光标
变为“ ”形状,按住鼠标左键并向逆时针方向拖动,将图形旋转,如图 3-51所示。 将鼠标光标移至右下方的控制柄处,当鼠标光标变为“ ”形状时,按住鼠标左键并
拖动,以调整图形大小,如图 3-52所示。
图 3-51 旋转图形 图 3-52 调整图形大小
用选择工具对键盘图形的轮廓线条进行修改,如图 3-53所示。 选择铅笔工具绘制如图 3-54所示的图形,并用选择工具进行调整。
图 3-53 调整键盘图形的轮廓线条 图 3-54 绘制图形
用铅笔工具绘制鼠标图形,如图 3-55所示。 用椭圆工具和线条绘制花盆图形,如图 3-56所示。
56
Flash 8动画制作
图 3-55 绘制鼠标图形 图 3-56 绘制花盆图形
用选择工具框选花盆图形,将其移到如图 3-57所示的位置。 用铅笔工具和线条工具绘制插头图形,如图 3-58所示。
图 3-57 移动花盆图形 图 3-58 绘制插头图形
选择缩放工具,在场景中单击,将图形放大,如图 3-59所示。 用选择工具选取线条间多余的线段,按<Delete>键删除,如图 3-60所示。
图 3-59 放大场景 图 3-60 删除线段
选择手形工具,在场景中当鼠标光标变为“ ”形状时,按住鼠标左键向左上方拖动,
移动场景在 Flash界面中的位置,如图 3-61所示。
为什么不直接删除多余的线段而要放大后再删除呢?
57
3 编辑图形与对象
用选择工具选取花盆等地方多余的线段,按<Delete>键删除,如图 3-62 所示。至此,完成电脑图形的绘制。
图 3-61 移动场景 图 3-62 删除线段
第6节 练一练 (1)可以使用哪些工具来选择图形? (2)要对小尺寸图片进行编辑时,可使用什么工具将图片放大后再进行编辑? (3)为什么在使用任意变形工具 编辑某些图形时,其选项区域的【扭曲】按钮 和
【封套】按钮 按钮不能用? (4)怎样使用任意变形工具将图形旋转变形? (5)选择不规则的图形时,最好使用什么工具?具体有哪些方法? (6)橡皮擦工具可以直接擦除位图吗? (7)要将舞台中所有图形水平居中分布,应使用什么工具来操作,应该怎么操作? (8)应用本章所学知识,绘制巧克力广告图形,效果如图 3-63所示(光盘\第 03章\
最终效果\巧克力广告.fla)。主要练习使用部分选取工具调整绘制的图形,用任意变形工具复制和缩放图形的方法。
图 3-63 “巧克力广告”最终效果
(9)绘制小狗图形并进行编辑。然后将其复制一份,用任意变形工具缩小,效果如图 3-64所示(光盘\第 03章\最终效果\小狗.fla)。主要练习选择工具和任意变形工具的使
& 颜料桶工具
& 墨水瓶工具
& 滴管工具
& 混色器
& 填充变形工具
个优秀的 Flash作品,画面是否漂 亮,除了要求制作者有良好的绘
画功底外,对色彩的应用是否合理也是
很重要的。因此,掌握图形填色的方法,
是制作出优秀 Flash作品的重要环节。本章将介绍 Flash中填色工具的使用,包括颜料桶工具、墨水瓶工具、滴管工具和
混色器等,以及为图像填充颜色的方法。 其中使用填充变形工具调整图形的
颜色的方法应用十分广泛,应重点掌握。
一
4
填充图形
60
Flash 8动画制作
在 Flash 中绘制图形后,为了使图形更加生动、形象、个性化,就需要为绘制的图形填充颜色。而填充图形主要是对色块和线条进行填充。进行图形填充前需要熟练掌握 Flash的填充工具,下面将详细讲解各种填充工具的用法。
第1节 颜料桶工具 用绘图工具绘制线条后,常常需要为线条之间的区域填充颜色。而颜料桶工具就是用
于对矢量图的某一区域进行填充。颜料桶工具的使用方法如下: 在场景中用绘图工具绘制出图形,如图 4-1所示。 选择工具栏中的颜料桶工具 ,在“属性”面板中单击 按钮,在弹出的颜色列表
中选择蓝色。将鼠标光标移至舞台中,当去其变为“ ”形状时,在图形左边的区域
内单击可为该区域填充蓝色。 用相同的方法为图形的其他区域填充其他颜色,完成填充后的效果如图 4-2所示。
图 4-1 绘制图形 图 4-2 填充颜色
在填充时,我们会发现有的区域不能被填充,这是因为在默认填充模式下,只能在完
全封闭的区域内进行填充。 选择工具栏中的颜料桶工具 ,在选项区域中单击【空隙大小】按钮 ,打开如图 4-3
所示的下拉列表,其中各选项的作用如下:
图 4-3 填充模式选项
= 不封闭空隙:选择这种模式后只有完全封闭的区域才能被填充颜色。 = 封闭小空隙:选择这种模式后颜料桶工具可以忽略较小的缺口,对一些具有小缺口的区域也可以填充。
= 封闭中等空隙:选择这种模式后颜料桶工具可以忽略比上一种模式略大的空隙,
当颜料桶工具的选项区域中的【锁定填
充】按钮 处于按凹陷状态时,可以
让填充的颜色相对于舞台锁定。
61
4 填充图形
对其进行填充 = 封闭大空隙:选择这种模式后,即使线条之间还有一段距离,用颜料桶工具也可以填充线条内部的区域
使用颜料桶工具还可对图形进行渐变颜色的填充。在颜色栏中单击【填充色】按钮
,在打开的颜色列表中选择线性渐变填充 或放射状渐变填充 。如图 4-4 所示就是对图形进行了渐变颜色填充后的效果。
图 4-4 渐变颜色填充
第2节 墨水瓶工具 墨水瓶工具 可以为矢量线段填充颜色,也可为指定的色块加上边框,但墨水瓶工具
不能对矢量色块进行填充。
1.填充线条颜色
使用墨水瓶工具填充线条颜色的具体操作如下: 用铅笔工具绘制任意线条。 选择工具栏中的墨水瓶工具 ,单击颜色栏中的【填充色】按钮 。 在弹出的颜色列表中选择需要的颜色,这里选择天蓝色。 将鼠标光标移到场景中,此时鼠标光标变为“ ”形状。 将鼠标光标移到要进行填充的线条上,单击鼠标左键对该线条进行填充,填充后效果
如图 4-5所示。
图 4-5 填充线条
2.为色块添加边框
使用墨水瓶工具为色块添加边框的具体操作如下: 绘制一个封闭的图形,选择工具栏中的墨水瓶工具 。 单击颜色栏中的【填充色】按钮 。
放射状渐变填充
线性渐变填充
默认填充色时的直线 改变填充色后的直线
62
Flash 8动画制作
在弹出的颜色列表中选择一种颜色作为边框色。 将鼠标光标移到要添加边框的图形上,单击鼠标左键为该图形添加上指定颜色的边
框,如图 4-6所示。
图 4-6 为色块添加边框
第3节 滴管工具
使用滴管工具 可以吸取 0场景中指定位置的色块、线条、位图和文字的属性并应用于其他对象。滴管工具可以吸取矢量色块属性、矢量线条属性、位图属性以及文字属性。
1.吸取矢量色块属性
矢量填充色块包括纯色和渐变色,滴管工具只能吸取纯色填充色块,其具体操作如下: 在场景中绘制灯泡图形并复制,将其中之一填充颜色。 在工具栏中选择滴管工具 ,将鼠标光标移到填充了颜色的灯泡图形上。当鼠标光标
变为“ ”形状时,单击鼠标吸取滴管工具所在位置的矢量色块为“黄色”,如图
4-7所示。 吸取颜色后鼠标光标自动变为“ ”形状,将鼠标光标移到需要填充颜色的空白图
形上并单击,为该图形填充颜色。 用同样的方法为灯泡图形的其他区域填充颜色,填充后效果如图 4-8所示。
图 4-7 吸取颜色 图 4-8 填充后的效果
2.吸取矢量线条属性
滴管工具可以吸取矢量线条的颜色、样式和长度等属性,并将其应用于目标矢量线条
只有填充色块的图形
添加边框后的图形
单击目标
色块
填充颜色
63
4 填充图形
上,其具体操作如下: 在舞台中绘制书图形后复制一份,对左边的书图形的线条样式和颜色进行设置。 在工具栏中选择滴管工具 ,将鼠标光标移到左边的书图形的弧形边框上,这时鼠标
光标变为“ ”形状,如图 4-9所示。单击该边框,获取滴管工具所在位置的矢量线条的属性,鼠标光标变为“ ”形状。 将鼠标光标移到目标矢量线条上单击,填充后的效果如图 4-10所示。
图 4-9 应用线条属性前的效果 图 4-10 应用线条属性后的效果
3.吸取位图属性
滴管工具还能吸取从外部导入的位图作为填充颜色,使得滴管工具的作用大大加强。
使用滴管工具为一个圆角矩形填充位图的具体操作如下: 在场景中绘制一个圆角矩形,再选择“文件→导入→导入到舞台”命令,打开如图 4-11所示的“导入”对话框。 在“查找范围”下拉列表框中选择要导入的位图,这里选择“狮子.jpg”(光盘\第 04章\实例素材\狮子.jpg)。单击【打开】按钮,将位图导入到舞台中并缩小,如图 4-12所示。
图 4-11 “导入”对话框 图 4-12 导入素材
导入位图后将其打散。因为滴管工具不能直接吸取位图的属性。选中位图,再选择“修
改→分离”命令将位图打散成矢量图。 选择工具栏中的滴管工具 ,当鼠标光标将变为“ ”形状时,单击打散的位图,
吸取属性,如图 4-13所示。
选择图片位置
选择图片
单击
64
Flash 8动画制作
鼠标光标变为“ ”形状,单击需要填充的圆角矩形内部区域,填充后的效果如图
4-14所示。
图 4-13 吸取位图的属性 图 4-14 填充后的效果
4.吸取文字属性
吸取文字属性的方法和吸取他们对象属性类似,其具体操作如下: 选中要改变属性的文字。 选择滴管工具 ,将鼠标光标移到被吸取属性的文字上,鼠标光标变成“ ”形状,
如图 4-15所示。单击鼠标左键吸取文字属性并改变选中文字的属性,如图 4-16所示。
图 4-15 吸取文字的属性 图 4-16 填充后的效果
第4节 混色器 在前面应用颜色时常常用到颜色列表,在颜色列表中可以选择各种纯色和几种渐变
色。但是颜色列表提供的颜色是有限的,要绘制出绚丽多彩的图像,就需要使用混色器。
利用混色器可以为选中的图形填充任意颜色。 选择“窗口→混色器”命令打开混色器。混色器只能填充打散的对象,其填充类型包
单击吸取位图属性
填充位图属性
若没有将位图打散,使用滴管工具吸取位图时,
单击鼠标左键将无法吸取位图属性,且鼠标光标
不会变成“ ”形状。
65
4 填充图形
括纯色、线性、放射状和位图 4种。
1.填充纯色
为图形填充颜色时,如果图形需要单一的颜色,可以使用纯色填充。选择需要填充颜
色的,在混色器的“类型”下拉列表框 中选择“纯色”选项,面板如图 4-17所示。设置好后就可以对图形进行填充了。
图 4-17 纯色填充类型
在“纯色”选项中,混色器中各选项作用如下: = 单击【笔触颜色】按钮 ,在打开的颜色列表中可选择图形的线条颜色,单击
【填充颜色】按钮 ,在打开的颜色列表中可选择图形的填充颜色。 = 单击【黑白】按钮 ,可将图形设置为黑白色,单击【没有颜色】按钮 将不填
充颜色,单击【交换颜色】按钮 ,可交换线条和填充区域的颜色。 = 在混色器下方的颜色选择区的颜色框中单击要选择的大致颜色范围,再在其右边的竖条形方框中精确选择要设置的颜色可将其应用于图形。
= 在颜色调节区中可以调整选择的颜色的色调。 选中需要填色的对象,在“混色器”面板中单击”类型”下拉列表框 左边的
【填充颜色】按钮 ,在打开的颜色列表中选择需要的颜色可为对象填充。也可在混色
器的颜色选择区中选择所需颜色。
2.填充线性和放射状
由于“线性”和“放射状”的“混色器”面板基本相同,下面将它们一并讲解。 在混色器的“类型”下拉列表框 中选择“线性”选项,面板如图 4-18所示,
可以为图形内部填充从一种颜色到另一种颜色的线性过渡渐变色。选择“放射状”选项,
面板如图 4-19所示,颜色从中间向周围呈放射状分布。
选择某种填色工具后,如颜
料桶工具或墨水瓶工具,在
混色器中进行设置,然后单
击需填充的对象也能进行
填充。
66
Flash 8动画制作
图 4-18 线性填充类型 图 4-19 放射状填充类型
选中要填充颜色的图形后,在混色器中进行如下操作: = 在 中单击其中的一个 图标,在下面的颜色框中选中需要的基
本色,将其应用于该图标。 = 若要扩大或缩小某种颜色的应用范围,可将其对应的 图标向左或向右拖动。 = 若要填充多种渐变色,在 中间单击可增加一个 图标,再在下
面的颜色框中选中需要的颜色,将其应用于该图标。此时 上出
现 3种颜色的渐变模式 。用同样的方法可添加更多颜色渐变。 = 若要删除某种颜色,可将其对应的 图标向左或向右拖动至消失。 = 若要改变颜色的渐变方向,只需将颜色对应的 图标向相反方向拖动。 如图 4-20和图 4-21所示为线性渐变和放射状渐变的效果。
图 4-20 线性填充效果 图 4-21 放射状填充效果
使用混色器填充颜色时可以先绘制图形,然后在混色器中设
置颜色。也可以先在混色器中设置颜色,然后绘制图形。
67
4 填充图形
3.填充位图
在混色器的“类型”下拉列表框 中选择“位图”选项,其中包括了以前曾经
导入过的图片。导入位图后的面板如图 4-22所示。设置好后就可以对图形进行填充了。 将要填充的位图导入到舞台,在“混色器”面板的“类型”下拉列表框 中选
择“位图”选项。选中要填充位图的对象,在“混色器”面板中单击要填充的位图,即可
在该对象内填充该位图。
图 4-22 位图填充类型
第5节 填充变形工具 填充变形工具主要用于对填充颜色的方向、范围和位置等进行设置,可以更好地设置
颜色的填充效果。 使用填充变形工具 可以对线性渐变和放射状渐变进行设置,并且对于不同的渐变方
式有不同的处理方法。
1.调整线性渐变颜色
使用填充变形工具 调整线性渐变的具体操作如下: 在工具栏中选择矩形工具,并在混色器的“类型”下拉列表框 中选择“线性”
选项,在颜色条中设置多种颜色渐变。然后在舞台中绘制一个线性渐变填充的矩形,
如图 4-23所示。 在工具栏中选择填充变形工具 ,在矩形内部单击鼠标,此时矩形周围出现一个旋转
控制柄、一个宽度控制柄、一个中心点和两条天蓝色竖线,如图 4-24所示。
在上一章绘制的电脑图形中,分别用混色器的 3种填充类型,填充显示器图形部分,体会各填充类
型的区别和它们的特点。
如果以前没有导入过位图,可
以单击【导入】按钮,打开“导
入”对话框,在其中选择要填
充的位图。
68
Flash 8动画制作
图 4-23 绘制的线性渐变矩形 图 4-24 调整线性渐变
将鼠标光标移到矩形右上角的旋转控制柄上,鼠标光标变为如图 4-25所示的形状。按住该控制柄并旋转,可调整颜色的渐变方向,如图 4-26所示。
图 4-25 按住旋转控制柄 图 4-26 旋转后的效果
将鼠标移动到宽度控制柄上,鼠标光标变为如图 4-27所示的形状。按住该手柄向矩形内部或外部拖动,可调整颜色的渐变范围,如图 4-28所示。
图 4-27 按住矩形控制柄 图 4-28 缩小宽度的效果
将鼠标光标移动到矩形的中心点上,鼠标光标变为如图 4-29所示的形状。按住该中心点并拖动,可调整颜色的渐变位置,如图 4-30所示。
图 4-29 按住中心点 图 4-30 移动中心点后的效果
中心点
旋转控制柄
宽度控制柄
旋转填充色
缩小填充色
移动中心点
69
4 填充图形
2.调整放射状渐变颜色
使用填充变形工具 调整放射状渐变的具体操作如下: 选择矩形工具,在混色器的“类型”下拉列表框 中选择“放射状”选项,在
下面的颜色条中设置任意几种渐变色,再在场景中绘制一个矩形,如图 4-31所示。 选择填充变形工具 并在矩形内部单击鼠标,此时图形周围将出现一个宽度控制柄、
一个大小控制柄、一个旋转控制柄、一个中心点和一个焦点,如图 4-32所示。
图 4-31 绘制放射状渐变矩形 图 4-32 调整放射状渐变
将鼠标光标移到矩形右侧竖线的宽度控制柄上,鼠标光标将变成如图 4-33 所示的形状。按住该控制柄向矩形内部拖动,可调整填充色的间距,如图 4-34所示。
图 4-33 按住矩形控制柄 图 4-34 调整填充色间距后的效果
将鼠标移到大小控制柄上,鼠标光标将变成如图 4-35所示的形状。按住该控制柄向矩形内部或外部拖动,可使颜色范围沿中心位置缩小或扩大,如图 4-36所示。
图 4-35 按住大小控制柄 图 4-36 调整填充色范围后的效果
中心点
旋转控制柄
宽度控制柄
大小控制柄
焦点
调整填充色间距
调整填充色范围
70
Flash 8动画制作
将鼠标光标移到旋转控制柄上,鼠标光标变为如图 4-37所示的形状。按住该控制柄并旋转,可调整渐变色的填充方向,如图 4-38所示。
图 4-37 按住旋转控制柄 图 4-38 调整填充色方向后的效果
将鼠标光标移到中心点上,鼠标光标变为如图 4-39所示的形状。按住该中心点并拖动,可调整渐变色的填充位置,如图 4-40所示。
图 4-39 按住中心点 图 4-40 调整填充色位置后的效果
将鼠标光标移到焦点上,鼠标光标变为如图 4-41所示的形状。按住该焦点并拖动,可调整渐变色的焦点位置,如图 4-42所示。
图 4-41 按住焦点 图 4-42 调整焦点位置后的效果
第6节 实战演练——制作美食节广告 本章节将绘制“美食节广告”图形并填充颜色,最终效果如图 4-43所示(光盘\第 04
章\最终效果\美食节.fla)。通过练习,可以熟练掌握使用颜料桶工具和混色器等填充图形的方法,并应用填充变形工具调整渐变颜色,其具体操作如下: 新建一个 Flash 文档,在“属性”面板中设置文档大小为“550×400”像素,背景色为“明黄色”。 选择矩形工具,在“属性”面板中设置笔触颜色为“深蓝色”,笔触高度为“1”,
调整填充色方向
调整填充色位置
调整焦点位置
71
4 填充图形
填充颜色为“无”。
图 4-43 “美食节”最终效果
在场景中绘制一个矩形线框,如图 4-44所示。 用选择工具选取矩形线框,按住<Alt>键拖动鼠标,将其复制 13份,并在“对齐”面板中设置为左对齐和垂直居中分布,完成后如图 4-45所示。
图 4-44 绘制矩形线框 图 4-45 复制并对齐矩形线框
选择铅笔工具,选择笔触颜色为“深红色”,在场景外绘制鱼图形,进行调整后将其
拖至场景右方,如图 4-46所示。 删除鱼与矩形线框相交的地方,如图 4-47所示。
图 4-46 绘制鱼图形 图 4-47 删除线条
选择文本工具,在“属性”面板中设置为“华康简魏碑、60、深红色、加粗”,在场景左上方中输入“美食对对碰”。再设置为“黑体、15、深红色、加粗”,在场景左下方输入“活动时间:10月 1日~10月 21日”和“活动地址:车龙新街”,如图 4-48所示。 选取“美食对对碰”文本,在“滤镜”面板中选择“斜角”滤镜效果,设置阴影为“深
72
Flash 8动画制作
红色”,加亮为“白色”,如图 4-49所示。
图 4-48 输入文字 图 4-49 添加“斜角”效果
选择颜料桶工具,在颜色区域选择填充色为“浅黄色”,在间隔的矩形线框中单击填
充,如图 4-50所示。 在“属性”面板中选择“橘黄色”,在间隔的矩形线框中单击填充,如图 4-51所示。
图 4-50 填充颜色 图 4-51 填充颜色 按【Shift+F9】键打开混色器,在“类型”下拉列表框 中选择“放射状”选项,
将色彩图标调整为“浅天蓝色、蓝色、浅蓝紫色”,如图 4-52所示。 选择颜料桶工具,在左边的鱼图形的线框内单击,为其填充设置的放射状渐变色,如
图 4-53所示。 在混色器的“类型”下拉列表框 中选择“放射状”选项,将色彩图标调整为“浅
红色、玫红色、粉红色”,如图 4-54所示。
图 4-52 设置填充色 图 4-53 填充颜色
73
4 填充图形
选择颜料桶工具,在右边的鱼图形的线框内部单击,为其填充设置的放射状渐变色,
如图 4-55所示。
图 4-54 设置填充色 图 4-55 填充颜色
在混色器的“类型”下拉列表框 中选择“线性”选项,将色彩图标调整为“草
绿色、浅绿色、草绿色”,用颜料桶工具为葱段图形填充颜色,如图 4-56所示。 为鱼眼睛图形填充白色和深红色,为葱段图形下部填充绿色,如图 4-57所示。
图 4-56 填充颜色 图 4-57 填充颜色
在混色器的“类型”下拉列表框 中选择“线性”选项,将色彩图标调整为“土
黄色、浅黄色、土黄色”,为烧烤签图形填充颜色,如图 4-58所示。 选择填充变形工具 ,在场景中单击烧烤签图形,图形周围将出现 3个控制柄,如图4-59所示。
图 4-58 填充颜色 图 4-59 调整渐变
74
Flash 8动画制作
将鼠标光标移到右侧竖线的旋转控制柄上,当其变为“ ”的形状时,按住该控制柄
向逆时针方向旋转,如图 4-60所示。 将鼠标光标移到宽度控制柄上,当其变为“ ”形状时,按住该控制柄向图形内部拖
动,使填充色的渐变范围缩小,如图 4-61所示。
图 4-60 旋转后的效果 图 4-61 缩小渐变范围后的效果
用同样的方法,将其他渐变色进行调整,完成后,效果如图 4-43所示。
第7节 练一练 (1)用哪些工具可以为图形填充颜色? (2)混色器包含的颜色比颜色区域包含的颜色多吗? (3)滴管工具可以吸取什么对象的属性? (4)用墨水瓶工具和颜料桶工具填充颜色有什么区别? (5)绘制的图形中,有的地方可以上色,而有的地方不能上色,该怎么解决? (6)绘制一幅名为“暗夜传说”的图形(光盘\第 04章\最终效果\暗夜传说.fla),最
终效果如图 4-62所示。主要用墨水瓶工具、颜料桶工具、混色器和填充变形工具进行填充。
图 4-62 “暗夜传说”最终效果
对图形进行填色时,在颜色区域和“属性”面板的颜色列表框中找不到想要的颜色,应该怎么办?
& 帧的概述
& 帧的基本操作
& 图层的概述
& 图层的基本操作
前面学习了 Flash动画的基础知 识,并学习了图形、文字的绘制
与编辑等内容。而单凭这些知识还不能
制作出完整的动画,“帧”和“图层”
是动画中最基本的元素,也是学习动画
制作的基础。 本章将介绍 Flash 动画中帧和图层
的概念、作用、类型和基本操作方法,
使读者掌握动画制作前的必要基础知
识。
在
5
帧与图层的基本操作
76
Flash 8动画制作
第1节 帧的概述 Flash 动画的播放是由时间轴控制的,因此要了解帧和图层的概念,就必须先熟悉时
间轴的构成。如图 5-1所示,时间轴左边为图层区,右边由播放指针、帧、时间轴标尺及状态栏组成。单击时间轴左上角的【时间轴】按钮,可以显示和隐藏时间轴。
图 5-1 时间轴
帧是构成 Flash动画的基本单位,也是学习 Flash必须掌握的重点内容。下面就对 Flash帧的概念、作用以及类型进行讲解。
1.帧的概念
在 Flash中,组成动画的每一个画面就是一个帧,可以把帧看作是 Flash动画中在最短时间单位里出现的画面。一个完整的 Flash 动画就是由许多帧组成,播放时依次显示每一帧中的内容,通过连续播放这些帧,从而实现所要表达的动画效果。
2.帧的作用
帧在 Flash 动画中的作用就象每格电影胶片在电影中所起的作用,可以表现画面的内容。而特定的帧还能够添加帧标签或 Actions语句,对 Flash动画中的元件进行运算和控制。
3.帧的类型
帧有两种类型,普通帧和关键帧,其中关键帧又分为关键帧和空白关键帧,如图 5-2所示。
图 5-2 帧的类型
(1) 普通帧
在创建动画时时间轴中每一小格都是一个普通帧,其中的内容与它前面的关键帧的内
空白关键帧 关键帧
图层区 时间轴标尺 播放指针
状态栏
帧
普通帧
77
5 帧与图层的基本操作
容完全相同。在动画中增加普通帧可以延长动画的播放时间。
(2) 关键帧与空白关键帧
在播放动画时,呈现出关键性动作或内容变化的帧叫做关键帧。关键帧决定了动画的
变化环节,在时间轴中用圆圈来表示。当关键帧中有内容时,以黑色实心圆圈表示;当关
键帧中没有内容时,以空心圆圈表示,这时称为空白关键帧,可用于在画面之间的插入间
隔,得到停顿效果。 创建不同类型的动画时,关键帧的表达方式如下: = 当创建补间动画时,关键帧间以浅紫色背景的黑色箭头表示,如图 5-3所示。 = 当创建形状补间动画时,关键帧间以浅绿色背景的黑色箭头表示,如图 5-4所示。 = 当补间动画创建失败或创建动作时操作错误,关键帧间以虚线表示如图 5-5所示。
图 5-3 补间动画 图 5-4 形状补间动画 图 5-5 操作错误
= 将单个关键帧的内容延续到后面的帧时,以灰色背景表示,如图 5-6所示。 = 给关键帧添加 Actions语句时,关键帧上将出现小写的“a”符号,如图 5-7所示。 = 在关键帧中既设定了交互动作又设定了标签时,关键帧上将出现小红旗标记表示在该帧上设定了标签或注释,如图 5-8所示。
图 5-6 延续关键帧 图 5-7 有Actions语句的关键帧 图 5-8 有标签或注释的关键帧
4.帧的显示
在 Flash 中时间轴上帧的显示状态可以根据实际需求进行设置。单击时间轴标尺右侧的【帧的视图】按钮 ,弹出如图 5-9所示的菜单,选择其中的选项可控制帧的显示状态,各选项的含义如下:
= “很小”、“小”、“标准”、“中等”、“大”、“较短”选项用于控制单元格的视图状态。帧的默认状态是细小的单元格,“大”状态有利于显示声音的细
节波形,“小”状态可使各帧之间的行距变短。 = “预览”选项是以缩略图的形式显示每帧的状态,有利于浏览动画和观察动画形状的变化,但会占用较多的屏幕空间。
= “关联预览”显示对象在各帧中的位置,有利于观察对象在整个动画过程中的位
Flash 动画的播放由两个关键帧的内容决定,中间的帧
内容在创建动画时由 Flash自动完成。
78
Flash 8动画制作
置变化,显示的图像一般比“预览”选项小一些。 = “彩色显示帧”选项用于控制单元格色彩,默认选中此选项。取消选中该选项时间轴如图 5-10所示。
图 5-9 帧视图菜单 图 5-10 取消选中“彩色显示帧”选项
= 选中“预览”选项,帧的视图效果如图 5-11所示。选中“关联预览”选项,帧的视图效果如图 5-12所示。
图 5-11 预览显示 图 5-12 关联预览显示
第2节 帧的基本操作 编辑帧是制作动画的一个重要环节。通过编辑帧可以确定每一帧中显示的内容,动画
的播放状态和播放时间等。
1.创建帧
要创建动画首先必须创建帧。创建普通帧的方法有以下几种: = 选中需要创建普通帧的帧格,选择“插入→时间轴→帧”命令,如图 5-13所示。 = 在需要创建普通帧的帧格上单击鼠标右键,在弹出的快捷菜单中选择“插入帧”命令,如图 5-14所示。
= 选中需要创建普通帧的帧格,按<F5>键创建普通帧。
创建的普通帧中有前一关键帧中的全部内容。插入普通帧,可以延续关键帧中的画面,在
动画中得到持续画面的效果。
79
5 帧与图层的基本操作
图 5-13 插入普通帧 图 5-14 快捷菜单
创建关键帧的方法有以下几种: = 选择“插入→时间轴→关键帧”命令,插入的关键帧中有前一关键帧的内容。 = 在需要创建关键帧的帧上单击鼠标右键,在弹出的快捷菜单中选择“插入关键帧”命令。
= 按<F6>键可在选择的帧上创建关键帧。 创建空白关键帧的方法有以下几种: = 如果前一个关键帧中没有内容,插入关键帧可得到空白关键帧。 = 如果前一个关键帧中有内容,选择需要创建空白关键帧的帧,选择“插入→时间轴→空白关键帧”命令。
= 在需要创建空白关键帧的帧上单击鼠标右键,在弹出的快捷菜单中选择“插入空白关键帧”命令。
= 按<F7>键可在选择的帧上创建空白关键帧。
2.选择帧
要编辑帧首先必须选择帧,在时间轴中选择帧的方法有以下 3种: = 要选择单个帧只需单击帧所在位置。 = 要选择不连续的多个帧时,按住<Ctrl>键并单击要选择的帧,如图 5-15所示。 = 要选择连续的多个帧时,按住鼠标左键并拖动选中所需的帧,如图 5-16所示。
图 5-15 选择不连续的多个帧 图 5-16 选择连续的多个帧
3.复制帧
在制作动画时,有时需要对所创建的帧进行复制,复制帧的具体操作如下: 在要复制的帧上单击鼠标右键,在弹出的快捷菜单中选择“复制帧”命令。 鼠标右键单击目标帧,在弹出的快捷菜单中选择“粘贴帧”命令,将复制的帧及其内
容粘贴到目标帧中,如图 5-17所示。
80
Flash 8动画制作
4.移动帧
在制作动画时,有时需要对所创建的帧进行移动,移动帧的方法有以下两种: = 选中要移动的帧,按住鼠标左键并拖动到需要的地方释放鼠标,如图 5-18所示。 = 在要移动的帧上单击鼠标右键,在弹出的快捷菜单中选择“剪切帧”命令,然后在目标位置上单击鼠标右键,在弹出的快捷菜单中选择“粘贴帧”命令。
图 5-17 粘贴帧 图 5-18 移动帧
5.删除帧
在制作动画时,若所创建的帧不符合要求或不再需要,可以将其删除。删除帧的方法
是在要删除的帧上单击鼠标右键,在弹出的快捷菜单中选择“删除帧”命令即可,如图 5-19所示。
图 5-19 删除帧
81
5 帧与图层的基本操作
6.清除帧
在制作动画时,有时不再需要所创建的帧中的内容,可以将内容清除。 要清除帧中的内容可以将当前帧转化为空白关键帧,方法为:在要清除的帧上单击鼠
标右键,在弹出的快捷菜单中选择“清除帧”命令。 要清除关键帧中的内容,可以将关键帧转化为普通帧,方法为:选中要清除的关键帧,
单击鼠标右键,在弹出的快捷菜单中选择“清除关键帧”命令。
7.翻转帧
使用“翻转帧”命令可以将选中的多个帧的播放顺序进行翻转,其操作步骤如下: 在时间轴中选中要翻转的帧。 在选中的帧上单击鼠标右键,在弹出的快捷菜单中选择“翻转帧”命令,将选中的帧
播放顺序进行翻转,如图 5-20所示。
图 5-20 翻转帧
8.设置帧频
帧频表示播放动画时每秒钟播放的帧数,它的单位是 fps。时间轴上的 就是帧
频,它表示以每秒钟 12帧播放动画。帧频决定动画播放的连贯性和平滑性,设置帧频就是设置动画的播放速度,帧频越大,播放速度越快,帧频越小,播放速度越慢。设置帧频的
具体操作如下: 在时间轴状态栏上双击 ,打开“文档属性”对话框。
删除帧和清除帧的区别在于,清除帧不会删除帧格上的帧,而只是将帧中的内容清除,
使其变为空白帧。
82
Flash 8动画制作
在“帧频”文本框中输入所需频率,单击【确定】按钮完成帧频设置,如图 5-21所示。
图 5-21 “文档属性”对话框
第3节 图层的概述 要制作一个完整的 Flash动画,常常需要创建多个图层,用于在 Flash文档中组织图形、
动画和其他元素,通过多个图层的组合可以形成复杂的动画效果。
1.图层的概念
在 Flash 动画中,可以将图层看作一叠透明的纸,每张纸上都有不同的内容,将这些纸叠在一起就组成一幅比较复杂的画面。在上一层添加内容,会遮住下一层中相同位置的
内容。如果上一层的某个位置没有内容,透过这个位置就可以看到下一层相同位置的内容。 Flash 中的图层都是相互独立的,拥有独立的时间轴,包含独立的帧,可以在图层上
绘制和编辑对象,而不会影响其他图层上的对象。当创建一个新的 Flash 文档后,时间轴上的图层区会自动创建一个图层。
2.图层的作用
图层的作用主要有两个方面: = 可以对某图层中的对象或动画进行编辑和修改,而不会影响其他图层中的对象。 = 利用特殊的图层可以制作特殊的动画效果,如利用引导层可以制作引导动画,利用遮罩层可以制作遮罩动画,它们的使用方法将在后面章节介绍。
3.图层的类型
要熟练使用 Flash 8,必须掌握图层的类型,图层主要有普通图层、引导层和遮罩层 3种类型,如图 5-22所示。
系统默认帧频为 12fps,
因为这是最适合互联网
的帧频。
输入数值
单击
83
5 帧与图层的基本操作
图 5-22 图层类型
= 普通图层:普通图层的图标为“ ”形状,新建的 Flash文档在默认情况下只有一个普通图层。
= 引导层:引导层的图标为“ ”形状,用于引导与其链接的图层中的对象。 = 遮罩层:遮罩图层用于遮罩图层上的图形,其图标为“ ”形状,被遮罩图层的
图标为“ ”形状。
第4节 图层的基本操作 在对 Flash动画进行修改时,为了避免逐帧重复操作,可以通过编辑图层来修改动画。
1.新建图层
新建的 Flash 文档在默认情况下只有一个图层,可根据实际需要添加或删除图层。系统默认的图层为“图层 1”。新建图层的方法有如下几种:
(1) 通过【插入图层】按钮 新建图层
单击图层区下方的【插入图层】按钮 ,可以在图层 1 上方新建一个图层,系统自动命名为“图层 2”,并自动变为当前层,如图 5-23所示。不断单击【插入图层】按钮将依次新建图层。
(2) 用快捷菜单新建图层
用快捷菜单建立图层的具体操作如下: 选中某一图层,如要在图层 3上方插入新图层,可选中图层 3,并在图层 3上单击鼠标右键,弹出如图 5-24所示的快捷菜单。 选择“插入图层”命令,在图层 3上方插入一个名为“图层 4”的新图层,且图层 4变为当前层,如图 5-25所示。
图 5-23 新建图层 图 5-24 图层快捷菜单 图 5-25 新建“图层 4”
引导层
普通层 遮罩层
84
Flash 8动画制作
(3) 利用菜单命令新建图层
利用菜单命令新建图层的具体操作如下: 如要在图层 1上方插入新图层,则选中“图层 1”。 选择“插入→时间轴→图层”命令,可在图层 1上方插入一个新图层“图层 3”,且图层 3变为当前层,如图 5-26所示。
图 5-26 新建的“图层 3”
2.选择图层
在制作动画时,经常需要对图层进行新建、复制和移动等操作,在操作图层之前,首
先要选取图层。可以选取单个图层,也可以同时选取多个图层。 选取单个图层的方法有以下 3种: = 在图层区中单击需要编辑的图层。 = 在场景中选取要编辑的对象可选中该对象所在的图层。 = 单击时间轴中的一个帧格可选中该帧格所在的图层。 选取多个图层时包括选取相邻和不相邻图层两种情况: = 选取相邻图层:单击要选取的第一个图层,然后按住<Shift>键并单击要选取的最后一个图层,可选取两个图层间的所有图层,如图 5-27所示。
= 选取不相邻图层:单击要选取的任意一个图层,然后按住<Ctrl>键并单击其他需要选取的图层,如图 5-28所示。
图 5-27 选取相邻图层 图 5-28 选取不相邻图层
为什么这里在图层 1上方插入的一个新图层,系统自动命名为“图层 3”,而不是“图层 2”。
选取不相邻图层
选取相邻图层
85
5 帧与图层的基本操作
3.复制图层
在制作动画时,常常需要在新建图层中创建与原有图层中所有帧内容相类似的内容。
这时可以将原图层中的所有内容复制到新图层中再进行修改,从而避免重复工作。复制图
层就是把某一图层中所有帧的内容复制到另一图层中。复制图层的具体操作如下: 单击图层区中的图层名称,选中该图层中的所有帧。 在时间轴右边选中的帧上单击鼠标右键,在弹出的快捷菜单中选择“复制帧”命令。 在目标层的第 1帧上单击鼠标右键,在弹出的快捷菜单中选择“粘贴帧”命令,如图5-29所示。
图 5-29 复制图层
4.移动图层
移动图层是指对图层的顺序进行调整,以改变场景中各对象的叠放次序,其具体操作
如下: 选中要移动的图层,按住鼠标左键并拖动,图层以一条粗横线表示,如图 5-30所示。 当粗横线到达需要放置的位置后释放鼠标完成移动,如图 5-31所示。
图 5-30 拖动图层 图 5-31 完成移动
释放鼠标
选择“编辑→时间轴→粘贴帧”命令可以将复制的所有帧
的内容粘贴到新建的图层中。
拖移图层
86
Flash 8动画制作
5.重命名图层
Flash 会自动为生成的图层命名如“图层 1”、“图层 2”……要易于识别各图层放置的内容,可为各图层取一个名称,这就是图层的重命名。可以直接在图层区中为图层命
名,也可以在“图层属性”对话框中命名图层。
(1) 直接命名
在时间轴的图层区中双击要重命名的图层,进入编辑状态。在文本框中输入新的名称,
单击其他图层或按<Enter>键确认该名称即可直接命名,如图 5-32所示。
图 5-32 重命名图层
(2) 在“图层属性”对话框中命名
在“图层属性”对话框中为图层重命名的具体操作如下: 双击需要重命名的图层前的 图标,打开“图层属性”对话框。 在“名称”文本框中输入新名称,单击【确定】按钮,如图 5-33所示。
图 5-33 在“图层属性”对话框中命名
6.锁定与解锁图层
为了防止误改已编辑好的图层内容,可锁定该图层,锁定图层后可以看到该图层中的
内容,但不能进行编辑。 锁定图层时,先选中要锁定的图层,单击 图标下方该层对应的 图标,当其变为
图标时,说明该图层处于锁定状态。单击该层中的 图标可解除锁定。
单击 双击
输入名称
输入新名称 按<Enter>键确认 双击进入编辑状态
87
5 帧与图层的基本操作
7.隐藏与显示图层
在制作动画时,有时需要单独对某一个图层进行编辑。为了避免误操作,可以将其他
不使用的图层隐藏起来,在隐藏状态下的图层不能被编辑。编辑完成后可将其他图层显示
出来。通过 图标和 图标可以隐藏和显示图层。
(1) 用 图标隐藏与显示图层
其具体操作如下: 单击图层区中 图标下方要隐藏的“动作”和“语言”图层所对应的 图标。当其变
为 图标, 图标变为 图标,图层被隐藏且不能对图层进行编辑,如图 5-34所示。 单击 图标,当 图标变为 图标, 图标变为 图标,表示该图层为显示状态,可
以对其进行编辑,如图 5-35所示。
图 5-34 隐藏图层 图 5-35 显示图层
(2) 用 图标隐藏与显示图层
在制作动画时,如果要使不编辑的图层处于隐藏状态,但又能在场景中看到其中图形
的具体位置,可用线框模式隐藏图层,其具体操作如下: 在“动作”图层中单击 图标,此时该层以线框模式显示,如图 5-36所示。
图 5-36 以线框模式隐藏图层
如果线框颜色与图形颜色相近而不易分辨,可双击该层的 图标打开“图层属性”对
话框,单击【轮廓颜色】按钮 ,在弹出的颜色列表框中设置线框的颜色。
单击图标 隐藏图层 显示图层
单击图标 线框模式
线框模式下显示出
的图层图形
88
Flash 8动画制作
单击“动作”图层上的 图标可显示该层上的图形。
8.删除图层
当不需要图层中的内容时,可以删除图层。选中要删除的图层后,删除图层有以下 3种方法:
= 单击图层区右下方的【删除图层】按钮 ,如图 5-37所示。 = 按住鼠标左键不放,拖动要删除的图层到【删除图层】按钮 上释放鼠标。 = 单击鼠标右键,在弹出的快捷菜单中选择“删除图层”命令,如图 5-38所示。
图 5-37 删除图层 图 5-38 用快捷菜单删除图层
9.管理图层
当动画中的图层较多时,可以通过一些命令同时对多个图层进行操作。在当前图层上
单击鼠标右键,利用弹出的快捷菜单中最上面的 3个命令可对所有图层或选中的多个图层进行管理,如图 5-39所示。这 3个命令的含义如下:
= 显示全部:将所有图层设定为显示状态。 = 锁定其他图层:将当前图层外的其他图层设定为锁定状态。 = 隐藏其他图层:将当前图层外的其他图层设定为隐藏状态。 在 Flash中,可以在图层区中新建层文件夹,重新安排图层和文件夹,从而组织文档。 通过展开或折叠层文件夹可以查看或收起该文件夹包含的图层,而不会影响这些图层
在舞台中的显示状态。文件夹中可以包含图层,也可以包含其他文件夹。对图层文件夹的
编辑会影响该文件夹中的所有图层。
图 5-39 管理多图层
单击图层区最上面的 图标,可将所有图层中的对象以线框形式隐藏。
再次单击可以显示所有图层。
单击
选种图层
将图层或层文件夹拖到目标层文
件夹中,该层或层文件夹将出现在
时间轴中的目标层文件夹中。
89
5 帧与图层的基本操作
用层文件夹管理图层的具体操作如下: 单击图层区下方的【插入图层文件夹】按钮 ,在图层区上新建一个层文件夹。系统
自动命名为“文件夹 1”,并位于当前选中的图层上方,如图 5-40所示。
图 5-40 新建层文件夹
选中需要进行管理的 “流年”图层,按住鼠标左键并向上拖至“文件夹 1”中释放鼠标,如图 5-41所示。要展开或折叠文件夹,可单击文件夹名称左侧的三角形图标。
图 5-41 拖入图层
10.设置图层属性
在 Flash 中可以在“图层属性”对话框中对图层的属性进行设置,如设置图层名称、显示与锁定、图层类型、对象轮廓的颜色、图层的高度等。在任意图层上单击鼠标右键,
在弹出的快捷菜单中选择“属性”命令,打开“图层属性”对话框,如图 5-42所示。
图 5-42 “图层属性”对话框
单击图标
新建层文件夹
拖动图层 建立链接
双击图层名称前的图
标 ,也可以打开“图
层属性”对话框。
90
Flash 8动画制作
“图层属性”对话框中各选项的作用如下: = “名称”文本框:可修改图层的名称。 = “显示”复选框:选中时可显示图层,取消选中该复选框时可隐藏图层。 = “锁定”复选框:选中时可锁定图层,取消选中该复选框时可解锁图层。 = “轮廓颜色”按钮:单击 按钮,在弹出的颜色列表框中选择图层在线框模式时
线框的颜色。 = “将图层视为轮廓”复选框:可将图层内容以线框模式显示。 = “图层高度”下拉列表框:选择不同的数值可以调整图层区中各个图层的高度。 “类型”栏中各单选项的含义如下: = “一般”单选项:选中时可将图层设为普通图层。 = “引导层”单选项:选中时可将图层设为引导层,图层前图标变为 图标。 = “被引导”单选项:该单选项只有在引导图层下方的图层才可用。选中该单选项可使图层与前面的引导层建立路径关系,成为被引导层,同时该图层的图标变为
图标。 = “遮罩层”单选项:将图层设定为遮罩层。 = “被遮罩”单选项:该单选项只有在遮罩层下方的图层才可用。选中该单选项可将使图层与其前面的遮罩层建立链接关系,成为被遮罩层,同时该图层的图标变
为 图标。 = “文件夹”单选项:将普通图层转换为图层文件夹,用于管理图层,其功能与在图层区中的 按钮相同。
第5节 实战演练——制作旋转门牌 本章节将制作名为“旋转门牌”的动画,完成后,房子的门牌先顺时针旋转,然后再
逆时针旋转,最终效果如图 5-43所示(光盘\第 04章\最终效果\旋转门牌.fla)。通过练习,可以熟练掌握图层和帧的操作方法,其具体操作如下:
图 5-43 “旋转门牌”最终效果
新建一个 Flash 文档,在“属性”面板中设置文档大小为“550×400”像素,背景色为白色。
91
5 帧与图层的基本操作
在混色器中设置“白色、粉红色”的放射状渐变填充色,选择矩形工具绘制一个与场
景大小一致的无边框矩形,如图 5-44所示。
图 5-44 绘制矩形
单击图层区下方的【插入图层】按钮 ,在图层区中新建一个图层,系统自动命名为
“图层 2”,位于“图层 1”上方,并自动变为当前层,如图 5-45所示。 选择“文件→导入→导入到舞台”命令,打开“导入”对话框,在“查找范围”下拉
列表框中选择要导入的图片的位置,再在列表框中选中要导入的“房子.png”图片(光盘\第 05章\实例素材\房子.png),如图 5-46所示。
图 5-45 新建“图层 2” 图 5-46 “导入”对话框
单击【打开】按钮将图片导入到 Flash场景中并缩小,如图 5-47所示。 选中图层 2后,选择“插入→时间轴→图层”命令,在图层 2上方插入一个新图层“图层 3”,如图 5-48所示。 在图层区双击图层 1,进入编辑状态,在文本框中输入新名称“背景”,按<Enter>键
92
Flash 8动画制作
确认该名称,如图 5-49所示。
图 5-47 导入图形 图 5-48 新建“图层 3” 图 5-49 重命名图层 1
用同样的方法将图层 2和图层 3重命名为“房子”和“门牌”,如图 5-50所示。 单击图层区中 图标下方“背景”图层和“房子”图层各对应的 图标,将图层锁定,
如图 5-51所示。 在“门牌”图层中用椭圆工具和矩形工具绘制门牌图形,如图 5-52所示。
图 5-50 重命名图层 图 5-51 锁定图层 图 5-52 绘制门牌图形
选中“门牌”图层的第 3帧帧格按<F6>键插入关键帧,用任意变形工具将绘制的门牌图形顺时针旋转一定角度,如图 5-53所示。 在第 5帧帧格上单击鼠标右键,在弹出的快捷菜单中选择“插入关键帧”命令,再将门牌图形顺时针旋转一定角度,如图 5-54所示。
图 5-53 旋转图形 图 5-54 旋转图形
用同样的方法,在第 7、9、11、13、15、17和 19帧插入关键帧,将各关键帧中的门牌图形顺时针旋转,到第 19帧时,刚好旋转 360度,如图 5-55所示。 在时间轴中选取第 1帧到第 19帧,在选中的帧上单击鼠标右键,在弹出的快捷菜单中选择“复制帧”命令,如图 5-56所示。
93
5 帧与图层的基本操作
图 5-55 第 19帧图形 图 5-56 复制帧
选中第 20帧到第 80帧,在帧上单击鼠标右键,在弹出的快捷菜单中选择“粘贴帧”命令,如图 5-57所示。 在时间轴中选取第 20帧到第 38帧,在选中的帧上单击鼠标右键,在弹出的快捷菜单中选择“翻转帧”命令,将选中的帧的播放顺序进行翻转,如图 5-58所示。 选取“背景”图层和“房子”图层的第 38帧,按<F5>键插入普通帧。 按【Ctrl+Enter】键测试动画效果,最终效果如图 5-43所示。
图 5-57 粘贴帧 图 5-58 翻转帧
第6节 练一练 (1)Flash中帧的类型有哪些?简述各类型帧的作用。 (2)要在某帧中创建动画,需在该帧中插入哪种类型的帧? (3)在制作动画时,要调换一些帧的播放顺序,应该怎么办? (4)简述各类型图层的作用。 (5)在对图层进行重命名时,最好根据哪些情况进行重命名? (6)当图层太多的情况下,应该怎样进行管理? (7)在制作动画时,如果要使不编辑的图层处于隐藏状态,但又能在场景中看到其
参照本实战演练的制作方法,制作一个风车旋转的动画。注意对帧和图层操作的灵活应用。
94
Flash 8动画制作
中图形的具体位置,应使用哪种方法将图层隐藏? (8)制作名为“美味海鲜馆”的动画,在图层 1的第 1、10、20、30和 40帧插入关
键帧,再分别导入“海鲜 1.jpg~海鲜 5.jpg”图形(光盘\第 05章\实例素材\海鲜 1.jpg~海鲜5.jpg)到各关键帧的场景中,并在第 50帧插入普通帧。新建图层 2,在场景右上方输入文字“美味海鲜馆”,并添加投影和发光效果,再在第 50帧插入普通帧,完成制作。最终效果如图 5-59所示(光盘\第 05章\最终效果\美味海鲜馆.fla)。
图 5-59 “美味海鲜馆”最终效果
& 素材概述
& 元件概述
& 实例概述
& 库概述
6
素材、元件、实例与库
果需要重复使用一些图片或声音 时,可以将它们做成元件以便以后
使用。元件可以在文档中重复使用,避
免重复工作还能减小文件大小,而库可
以管理各种不同的元件。 本章将介绍素材的类型、搜集和导
入素材的方法。重点介绍了元件、实例
和库的概念、设置及使用方法,使用户
能结合前面所学的知识,制作出复杂的
动画。
96
Flash 8动画制作
第1节 素材概述 在观看 Flash 动画时,常常会看到各种精美的图片,听到各种各样的声音,在创作动
画的过程中也常常需要重复使用一些图片、声音和动画片断等,这些图片和声音都是由图
片和声音等素材编辑而来的。Flash 8对其他软件制作的作品具有很强的兼容性,因此在制作动画时可以引用很多常见类型的文件,如位图、矢量图、MP3、WAV 音乐文件等。引用的这些文件就称为素材。
获取合适的素材并合理利用是制作优秀动画作品的重要前提,这样不但可以节省时
间,提高工作效率,还可以在一定程度上提高动画作品的质量。
1.素材类型
在 Flash 动画中看到的图片、听到的声音等,都可以称为素材。根据素材的作用和属性,可将素材分为图片素材、声音素材和视频素材。
(1) 图片素材
在 Flash 8 中,可以导入的图片素材格式有 JPG、BMP、PNG、GIF、EPS、WMF、DXF、EMF等。根据图像显示原理,可以将图形分为位图和矢量图:
= 位图:是指用点来描绘的图形,图形中的每个点可以独立显示不同的色彩。如 JPG、BMP和 PNG等格式的图像为位图。
= 矢量图:是指用矢量化元素描绘的图形,由矢量线条和填充色块组成。在 Flash中绘制的图形都是矢量图,EPS和WMF等格式的图形为矢量图。
在 Flash 中判断位图和矢量图的方法如下:用选择工具选中位图后,位图周围会出现一个灰色边框,如图 6-1所示;选中矢量图后,图形以点的形式显示,如图 6-2所示。
图 6-1 位图 图 6-2 矢量图
位图和矢量图的区别如下: = 位图的文件大小由图形尺寸和色彩深度来决定;矢量图的文件大小由图形的复杂程度决定,与图形的尺寸和色彩无关。
= 改变位图的尺寸大小会影响图形的显示效果,如果将位图过分放大,会使点与点间的距离增大,导致图片模糊甚至变形,如图 6-3所示;改变矢量图的尺寸大小不会影响图形的显示效果,如图 6-4所示。
97
素材、元件、实例与库 6
图 6-3 位图放大前后的效果 图 6-4 矢量图放大前后的效果
(2) 声音素材
为 Flash 动画添加生动有趣的声音效果或悦耳的背景音乐,可使作品更具有感染力。在 Flash 8可导入的声音素材文件格式包括MP3、WAV等。
(3) 视频素材
为了减少制作 Flash动画的工作量,节省制作时间,可以直接导入有动画的视频素材。在 Flash 8中可导入的视频素材文件格式包括 MOV、AVI、MPEG等,最后能以 SWF或MOV格式的文件发布出来。
= MOV:这种格式在 Windows 平台上得到支持,许多游戏的片头动画就是 MOV格式的。
= AVI:是Microsoft公司发布的音频视频交错格式,它兼容性好、图像质量高,但该文件格式数据量较大,导入不太方便。
= MPEG:这种格式画面清晰,数据量较小,是目前应用比较广泛的视频格式。VCD光碟中使用的就是MPEG文件格式。
2.搜集素材
通过以下途径可以获取不同类型的素材:
(1) 搜集图片素材
从以下几个途径可以搜集图片素材: = 通过扫描仪扫描图片。 = 通过在图片文件中提取图片素材。 = 通过光盘图库获取。 = 通过提供图片素材下载的网站下载。 = 通过 Flash作品分离出所需的图片素材。
(2) 搜集声音素材
从以下几个途径可以搜集声音素材: = 通过光盘音乐库获取。
98
Flash 8动画制作
= 通过提供声音素材的网站下载。 = 通过录音机录制声音。 = 通过在声音文件中提取声音素材。 = 用专门的软件从 Flash作品中分离出所需的声音素材。
(3) 搜集视频素材
从以下几个途径可以搜集视频素材: = 通过提供动画素材的网站下载。 = 通过专门的软件将其他格式的视频素材文件转化为 Flash支持的动画素材。 = 通过专门的软件在 Flash作品中分离出所需的动画素材。
3.导入素材
要使用搜集到的素材,还需要将素材导入到 Flash中。
(1) 导入图片素材
在 Flash中除了可以手动绘制图形,还可将外部的图片导入进来。在 Flash中导入图片的具体操作如下: 选择“文件→导入→导入到舞台”命令,打开“导入”对话框。 在“查找范围”下拉列表框中选择要导入的图片的位置,再在列表框中选中要导入的
图片,如图 6-5所示。 单击【打开】按钮将图片导入到 Flash场景中,如图 6-6所示。
图 6-5 “导入”对话框 图 6-6 导入的图片
选择图片位置
选取图片
单击
在电脑中建立一个“素材库”文件夹,在“素材库”文件夹下再建 3个名为“图像素材”、“声音素
材”和“视频素材”的文件夹,将搜集的素材分别放置在这 3个文件夹下。以后便可直接调用了。
99
素材、元件、实例与库 6
(2) 导入声音素材
为了使 Flash作品更具感染力,可以为作品导入声音素材,其具体操作如下: 选择“文件→导入→导入到库”命令,打开“导入到库”对话框。 在“查找范围”下拉列表框中选择要导入的声音文件的位置,再在列表框中选中要导
入的声音文件,如图 6-7所示。 单击【打开】按钮将声音文件导入到库中。 按<F11>键打开“库”面板,在该面板中的“名称”栏下可以看到图标 ,说明已成
功导入声音文件,图标 后面的文字为导入的声音文件的名称,如图 6-8所示。 单击“库”面板中的 按钮可以测试导入的声音素材的效果。
图 6-7 “导入到库”对话框 图 6-8 导入声音素材
(3) 导入视频素材
不同格式的视频素材的导入方法基本相同,下面以导入WAV格式的视频素材文件为例进行讲解,其具体操作如下: 选择“文件→导入→导入到舞台”命令,打开“导入”对话框。选中要导入的视频素
材文件“回忆.wav”。 单击【打开】按钮将打开“导入视频”对话框,在该对话框中选择视频文件的路径,
如图 6-9所示。 单击【下一个】按钮在打开的对话框中选择部署视频的类型。这里选中“在 SWF 中嵌入视频并在时间轴上播放”单选项 。 单击【下一个】按钮将打开如图 6-10所示的对话框,在其中选择嵌入视频的类型。 单击【下一个】按钮将打开如图 6-11所示的对话框,在其中选择 Flash视频编码配置文件的类型。
如果要导入多张图片,可在如图 6-5所示的“导入”对话框
中按住<Ctrl>键并单击所需的图片,再单击【打开】按钮。
选择声音位置
选取声音文件
单击
可测试声音效果
导入的声音素材
100
Flash 8动画制作
图 6-9 “导入视频 选择视频”对话框 图 6-10 “导入视频 嵌入”对话框
单击【下一个】按钮将打开如图 6-12所示的对话框,提示完成视频设置的输入后可能出现的情况,在弹出的对话框中单击【确定】按钮。
图 6-11 “导入视频 编码”对话框 图 6-12 “导入视频 完成视频导入”对话框
单击【完成】按钮,系统将导入视频素材,
如图 6-13所示。 导入完成后,场景中将出现该视频素材文件
的第一帧中的画面。按<Ctrl+Enter>键可播放该视频素材,如图 6-14所示。 按<F11>键打开“库”面板,在 “名称”栏下可以看到图标 ,说明已成功导入视频
素材文件,图标 后面的文字为导入的视
频素材文件的名称,如图 6-15所示。
图 6-13 “Flash视频编码进度”对话框
101
素材、元件、实例与库 6
图 6-14 播放视频 图 6-15 “库”面板
第2节 元件概述 元件是动画中可以反复调用的小部件,它可以是图形、按钮或动画片段,它可以独立
于主动画进行播放,并且每个元件都有各自的时间轴、舞台和图层。
1.元件类型
Flash中的元件包括 3种类型:图形元件、影片剪辑元件和按钮元件。
(1) 图形元件
图形元件用于创建可重复使用的图形,它可以是静止图片,可以是用来创建连接到主
时间轴的动画片段,也可以是由多个帧组成的动画。图形元件是制作动画的基本元素之一,
但它不能添加声音控制和交互动作。
(2) 按钮元件
按钮元件用于创建动画的交互控制按钮,以响应鼠标事件,如经过、单击或其他动作。
按钮元件包括“弹起”、“指针经过”、“按下”和“点击”4 种状态,可以定义与各种按钮状态关联的图形,然后将动作指定给按钮。在按钮元件的不同状态上创建不同的内容,
可以使按钮对鼠标事件进行相应的响应。另外,还可以给按钮添加事件的交互动作,使按
钮具有交互功能。
若不立即对素材进行编辑,最好将素材导入到库中,待需要时再从库中调用。
102
Flash 8动画制作
(3) 影片剪辑元件
影片剪辑元件是动画的组成部分,使用影片剪辑元件可以创建可重复使用的动画片段
并可独立播放。影片剪辑元件拥有独立于主时间轴的时间轴,可以将影片剪辑看作是主时
间轴内嵌入的时间轴,可以包含交互动作、声音甚至其他影片剪辑元件,也可以将影片剪
辑实例放在按钮元件的时间轴内,以创建动画按钮。当播放主动画时,影片元件也在循环
播放。
2.元件的编辑
元件在文档中的作用决定了所创建元件的类型。元件是构成动画的基础,创建完成后
可以重复使用,因此不必重复制作相同的部分。
(1) 创建图形元件
当需要重复使用某个图形时,可以将其创建为图形元件,其具体操作如下: 选择“插入→新建元件”命令或按<Ctrl+F8>键,打开“创建新元件”对话框。 在“名称”文本框中输入要创建的元件名,这里输入“天使”,再在“类型”栏中选
中“图形”单选项,如图 6-16所示。
图 6-16 “创建新元件”对话框
单击【确定】按钮创建一个名为“天使”的图形元件,Flash自动进入图形元件编辑状态,在元件编辑区的左上方出现图形元件图标 ,如图 6-17所示。
图 6-17 图形元件编辑状态
选择“文件→导入→导入到舞台”命令,将“天使.jpg”图片(光盘\第 06 章\实例素材\天使.jpg)导入到元件编辑区,如图 6-18所示。在“库”面板中可以看到导入的图形已被转换为一个图形元件,如图 6-19所示。
输入元件名称
选择元件类型
单击
图形元件图标
103
素材、元件、实例与库 6
图 6-18 导入图片到元件编辑区 图 6-19 转换成图形元件的图片
(2) 创建按钮元件
制作 Flash 动画时,常常需要添加各种按钮,如【开始】按钮、【结束】按钮等。这些按钮都需要通过按钮元件来制作。按钮元件包括“弹起”、“指针经过”、“按下”和
“点击”4个帧,每个帧代表不同的状态,各帧的含义如下: = 弹起:在该帧中可创建在正常情况下按钮的状态。 = 指针经过:在该帧中可创建当鼠标指针移到按钮上时按钮的状态,在该帧中必须插入关键帧后才能创建。
= 按下:在该帧中可以创建当按下鼠标左键时按钮的状态。如当按钮被按下时,比未被按下时小一些或者颜色变暗。在该帧中也必须插入关键帧后才能创建。
= 点击:在该帧中可以指定在某个范围内单击鼠标时会影响到按钮,用来表示作用范围,可以不进行设置,也可绘制一个图形来表示范围。
下面将创建“开始”按钮,其 4个帧的不同状态如图 6-20所示。
图 6-20 按钮 4个帧的不同状态
创建按钮元件的具体操作如下: 选择“插入→新建元件”命令或按<Ctrl+F8>键打开“创建新元件”对话框。在“名称”文本框中输入创建元件的名称,这里输入“开始”,在“行为”栏中选中“按钮”单
除了可以用单独的图形外,还可以用由多个帧组成的动画创建图形元件。创建这种图
形元件后,需要在使用这种图形元件的图层中添加与图形元件相应的帧,这样才能在
播放时看见这个动画。
“弹起”帧 “指针经过”帧 “按下”帧 “点击”帧
104
Flash 8动画制作
选项。 单击【确定】按钮进入元件编辑区,其中包括“弹起”、“指针经过”、“按下”和
“点击”4个帧。 单击“弹起”帧,在其中制作如图 6-21所示的图形。 单击“指针经过”帧并按<F6>键插入关键帧,插入的帧中将显示“弹起”帧中的内容,对其中的对象进行调整,如图 6-22所示。
图 6-21 “弹起”帧 图 6-22 “指针经过”帧
单击“按下”帧并插入关键帧,该帧中将显示“指针经过”帧中的内容,对其中的对
象进行调整,如图 6-23所示。 单击“点击”帧并按<F5>键插入普通帧,在该帧中可以不进行设置,作为“按下”帧的延续,如图 6-24所示,表示只有当鼠标光标移到该按钮区域时才能起作用。 单击 图标回到场景中,在“库”面板中可以看到 图标,将其拖动到场景
中即可使用。
图 6-23 “按下”帧 图 6-24 “点击”帧
(3) 创建影片剪辑元件
影片剪辑元件是组成动画的基础,为了避免重复创建相同的动画片段,可以将动画片
断创建为影片剪辑元件,其具体操作如下: 选择“插入→新建元件”命令或按<Ctrl+F8>键打开“创建新元件”对话框。 在“名称”文本框中输入创建元件的名称,这里输入“旋转手柄”,在“行为”栏中
选中“影片剪辑”单选项,如图 6-26所示。 单击【确定】按钮进入影片剪辑元件编辑区。 将图形素材“手柄.png”(光盘\第 06章\实例素材\手柄.png)导入到场景中并缩小,
105
素材、元件、实例与库 6
如图 6-25所示。 在元件编辑区的时间轴上单击第 2帧并按<F6>键插入关键帧。选中第 2帧中的对象,单击工具栏中的任意变形工具 ,将图形进行顺时针旋转,效果如图 6-26所示。
图 6-25 导入图形 图 6-26 旋转图形
在第 3帧和第 4帧插入关键帧,依次将这两帧中的对象进行旋转。完成对“旋转手柄”影片剪辑元件的编辑。 单击 图标回到场景中,将“旋转手柄”影片剪辑元件从“库”面板中拖入到场
景中即可使用。
(4) 转换为元件
为了方便使用素材,可以将素材转换为元件存放在“库”面板中。方法为:选中舞台
中的素材后,按<F8>键打开“转换为元件”对话框,如图 6-27 所示,在“名称”文本框中输入文件名称,在“类型”栏中选择要转换成的元件类型单选项。
图 6-27 “转换为元件”对话框
(5) 修改元件
元件创建完成后,如果对元件不满意,还可以对其进行修改。在“库”面板中双击元
件进入对应的元件编辑窗口,根据需要,完成编辑后单击场景图标回到场景。
第3节 实例概述 元件制作完成后,可以将其拖入到场景中的任意地方或其他元件中,移动元件的过程
就是创建实例的过程。在前面讲解元件的编辑时实际已经进行了创建实例的操作了,如将
图形元件、按钮元件和影片剪辑元件拖放到场景中都是创建一个实例的过程。
106
Flash 8动画制作
1.实例概念
将元件拖入到场景中时,在时间轴上只需要一个关键帧即可将元件中的所有内容包
括,但由多个帧组成的图形元件例外。如果在图形元件中创建了一个小动画,那么将其拖
入到场景中时,在时间轴上也必须占用相同的帧数,否则不能完全播放该图形元件。
2.实例属性设置
将元件拖入到场景中,选中该元件对应的实例,在“属性”面板和“滤镜”面板中调
整实例的各种属性,如实例名称、颜色、混合选项和滤镜等。不同类型的元件对应的实例
属性也不同。新建一个 Flash 文档,在该文档中任意创建 3种类型的元件,然后依次将它们从“库”面板拖入到舞台中。
(1) 图形实例的属性设置
选中图形元件对应的实例,其“属性”面板如图 6-28所示。
图 6-28 图形实例的“属性”面板
该“属性”面板中各项的含义如下: = 下拉列表框:其中的选项表示当前实例的类型,通过该下拉列表框也
可改变当前实例的类型。 = 下拉列表框:选择其中的选项可以定义实例中动画的播放情况,包含 3个选项,各选项的含义如下: = 循环:以无限循环的方式播放实例。 = 播放一次:只播放一次实例。 = 单帧:当选取实例中的某一帧时,动画效果无效。
= 文本框:设置实例中的动画从第几帧开始出现。 = 下拉列表框:设置实例的亮度、色调和 Alpha值等。
= 无:选择“无”选项,将取消实例的颜色效果。 = 亮度:选择“亮度”选项后会出现如图 6-29所示的数值框,用于设置实例的亮度,取值范围为-100%~100%。数值越大,实例越亮,直到变为白色,反之则越暗,直到变为黑色。
= 色调:选择“色调”选项后“属性”面板右侧如图 6-30所示。该选项主要用于设置实例的色调。单击“颜色”下拉列表框右侧的【颜色】按钮,在弹出
的颜色列表框中选择色调颜色;【颜色】按钮右侧的数值框用于设置 RGB颜色对实例的影响程度,数值越大,影响越大,数值为 0时没有任何影响;
107
素材、元件、实例与库 6
通过下面的 RGB三原色数值框可以改变实例色调。
图 6-29 “亮度”选项 图 6-30 “色调”选项
= Alpha:选择“Alpha”选项后会出现如图 6-31所示数值框,用于设置实例的透明度,取值范围为 0%~100%,数值越小,实例越透明,反之越不透明,数值为 100%时为正常状态,完全不透明。
= 高级:选择“高级”选项,“属性”面板的右边变为如图 6-32所示。主要用于对实例的颜色、亮度和透明度的综合调整,单击【设置】按钮将打开如图
6-33所示的“高级效果”对话框,在其中可根据需要对各项数值进行设置。
图 6-31 “Alpha”选项 6-32 “高级”选项 图 6-33 “高级效果”对话框
(2) 按钮实例的属性设置
选中按钮元件对应的实例,其“属性”面板如图 6-34所示。下面介绍与图形实例的“属性”面板不同的部分。
图 6-34 按钮实例的“属性”面板
= 文本框:为实例定义一个名称,便于在添加 Actions语句时引用。 = 下拉列表框:定义该实例是以普通按钮的形式存在,还是以下
拉菜单的形式存在。 = 下拉列表框:使用混合模式,可以混合重叠影片剪辑中的颜色,
创建复合图像,从而创造独特的效果。其中各选项含义如下:
108
Flash 8动画制作
= 一般:正常应用颜色,与基准颜色无关系,如图 6-35所示。 = 图层:可以层叠各个影片剪辑但不影响其颜色,如图 6-36所示。
图 6-35 “一般”选项效果 图 6-36 “图层”选项效果
= 变暗:替换比混合颜色亮的区域,比混合颜色暗的区域不变,如图 6-37所示。 = 色彩增殖:将基准颜色复合以混合颜色,而产生较暗的颜色,如图 6-38所示。
图 6-37 “变暗”选项效果 图 6-38 “色彩增殖”选项效果
= 变亮:替换比混合颜色暗的区域。比混合颜色亮的区域不变,如图 6-39所示。 = 荧幕:将混合颜色的反色复合以基准颜色,而产生漂白效果,如图 6-40所示。
图 6-39 “变亮”选项效果 图 6-40 “荧幕”选项效果
= 叠加:进行色彩增值或滤色,具体情况取决于基准颜色,如图 6-41所示。 = 强光:进行色彩增值或滤色,具体情况取决于混合模式颜色。该效果类似于
109
素材、元件、实例与库 6
用点光源照射对象,如图 6-42所示。
图 6-41 “叠加”选项效果 图 6-42 “强光”选项效果
= 增加:从基准颜色增加混合颜色,如图 6-43所示。 = 减去:从基准颜色减去混合颜色,如图 6-44所示。
图 6-43 “增加”选项效果 图 6-44 “减去”选项效果
= 差异:从基准颜色减去混合颜色,或者从混合颜色减去基准颜色,具体情况取决于哪个的亮度值较大。该效果类似于彩色底片,如图 6-45所示。
= 反转:取基准颜色的反色,如图 6-46所示。
图 6-45 “差异”选项效果 图 6-46 “反转”选项效果
= Alpha:应用 Alpha遮罩层,如图 6-47所示。 = 擦除:删除包括背景图像中的所有基准颜色像素,如图 6-48所示。
110
Flash 8动画制作
图 6-47 “Alpha”选项效果 图 6-48 “擦除”选项效果
= “使用运行时位图缓存”单选项:选中后会在运行时为元件实例创建位图。
(3) 影片剪辑实例的属性设置
影片剪辑类型实例的“属性”面板如图 6-49所示。该“属性”面板中的各项含义与图形元件和按钮元件相同,这里不再赘述。
图 6-49 影片剪辑实例的“属性”面板
3.调整实例的效果
在 Flash 8中还可以为按钮元件实例和影片剪辑元件实例添加滤镜效果,并使用补间动画让应用的滤镜活动起来。
第4节 库概述 在制作 Flash动画的时候,常常需要创建元件,而库是存放与组织在 Flash中创建的各
种元件的地方,它也用于存储和组织导入的素材,包括图片、声音和视频剪辑。当需要使
用素材或元件时,可以直接从库中调用。在 Flash文档中,选择“窗口→库”命令或按<F11>键打开库面板。在“库”面板左上方将显示库的名称和包含对象的数量。
由于每个动画使用的素材和元件都不相同,因此“库”面板中的内容也可能不相同。 在“库”面板中选中一个元件时,在库预览窗口中将显示元件的内容,“库”面板如
图 6-50所示。
将元件从库中拖入到场景中,就生成了该元件的一个实例。实例实际是元件的复制品,将元
件拖入到场景后,元件本身仍位于库中。改变场景中实例的属性,并不改变库中元件的属性;
但改变元件的属性,使用该元件创建的所有实例的属性都将随之变化。
111
素材、元件、实例与库 6
图 6-50 “库”面板
1.库的基本操作
在库中可对元件进行各种操作,如新建“库”元件、更改“库”元件属性、删除“库”
元件、利用“库”文件夹管理元件、导入素材和调用其他“库”中的元件等操作。
(1) 选择库
在“库”面板上方的 下拉列表框中可以选择需要使用的库。
(2) 固定库
在“库”面板上方单击【固定当前库】按钮 ,可以保持当前“库”面板不被切换,
这时【固定当前库】按钮将自动变为 按钮。
(3) 新建“库”元件
单击“库”面板左下方的【新建元件】按钮 ,打开如图 6-51所示的“创建新元件”对话框,在该对话框中可以新建所需要的元件。单击【新建库面板】 按钮,将新建一个
“库”面板,其内容将当前库中的内容相同。
(4) 更改“库”元件属性
如果选中的是图形元件、影片剪辑元件或按钮元件,单击“库”面板左下方的 按钮,
在打开的如图 6-52所示的“元件属性”对话框中可以设置元件的属性。
图 6-51 “创建新元件”对话框 图 6-52 “元件属性”对话框 如果选取的是位图元件,单击左下方的【属性】按钮 后会打开“位图属性”对话框,
选择影片剪辑元件时
的“库”面板
选择位图时的
“库”面板
112
Flash 8动画制作
如图 6-53所示,在对话框中可以设置元件的属性。 如果选取的是声音元件,单击左下方的【属性】按钮 后会打开“声音属性”对话框,
如图 6-54所示,在对话框中可以设置元件的属性。
图 6-53 “位图属性”对话框 图 6-54 “声音属性”对话框
(5) 直接复制元件
在库中某个元件上单击鼠标右键,在弹出的菜单中选择“直接复制”命令,打开“直
接复制元件”对话框,在其中可对复制的元件进行设置,如图 6-55所示。
图 6-55 “复制元件”对话框
(6) 编辑元件排列顺序
单击“库”面板右上方的 按钮可颠倒“库”中元件排列的顺序,同时 按钮变为 按
钮。再次单击 按钮可使元件恢复原来的排列顺序。
(7) 编辑“库”视图
“库”视图有窄库视图和宽库视图两种视图形式,单击“库”面板右侧的 按钮或 按
钮可以将“库”面板展开或收缩。宽库视图将显示元件的名称、类型、使用次数、链接和
最后一次修改日期等,而窄库视图只显示元件的名称和类型,如图 6-56和图 6-57所示。
在“库”面板中选中要进行设置的元件,单击鼠标右键,在
弹出的菜单中选择相应的命令也可以设置元件的属性。
选择类型
输入名称
复制元件后,原有的元件依
然存在,只是将新创建的元
件复制到“库”面板中。
113
素材、元件、实例与库 6
图 6-56 宽库视图 图 6-57 窄库视图
(8) 删除“库”元件
如果不需要库中的某些元件,可以将其删除。在“库”面板中删除不需要的元件有以
下 3种方法: = 在“库”面板中选取不需要的元件,按<Delete>键,将其从库中删除。 = 在“库”面板中选取不需要的元件,单击左下方的 按钮,将其从库中删除。 = 在“库”面板中选取不需要的元件,单击鼠标右键,在弹出的菜单中选择“删除”命令,将其从库中删除。
(9) 用“库”文件夹管理元件
如果库中的元件比较多,可以将它们整理归类。可以用“库”面板中的文件夹管理库
中的元件,新建一个元件后可将它存放在所选择的文件夹下,其具体操作如下: 在“库”面板中单击【新建库文件夹】按钮 新建一个文件夹,在库中出现一个提示
文本框,在文本框内输入新文件夹的名称,如图 6-58所示,单击<Enter>键完成输入。 选取要放到创建的文件夹中的元件,用鼠标拖到文件夹中,这时的“库“面板如图 6-59所示。
图 6-58 新建文件夹 图 6-59 将元件拖到文件夹中
文件夹中的对象
输入名称
114
Flash 8动画制作
(10) 导入素材到“库”
制作 Flash 动画时,常常需要导入素材。为避免重复导入相同的素材,可以将素材导入到库中,需要使用时直接从库中拖出即可。导入到库中的素材可以是图片、声音和视频
剪辑,下面介绍如何将素材导入到库中。其具体操作如下: 选择“文件→导入→导入到库”命令,打开“导入到库”对话框。 在“查找范围”下拉列表框中选择素材所在的位置,在“文件名”文本框中输入需要
导入素材的名称,如图 6-60所示。 单击【打开】按钮将素材导入到 Flash的库中,如图 6-61所示。
图 6-60 “导入到库”对话框 图 6-61 导入的图片
2.调用其他动画的库
除了可以调用自己创建的元件和公用库中的元件外,还可以将其他动画的元件调用到
当前动画中,其具体操作如下: 选择“文件→导入→打开外部库”命令,打开如图 6-62所示的“作为库打开”对话框。 在“查找范围”下拉列表框中选择动画所在的位置,在下面的列表框中选择需要的动
画文件,单击【打开】按钮,打开该动画的库,但不会打开该动画,如图 6-63所示,此时库列表框以灰色显示,用户可以调用其中的元件但不能对元件进行编辑。 选中要调用的元件,将其从“库”面板中拖入到当前动画的场景中。Flash自动将该元件复制并存入当前动画的库中。
3.公用库
公用库是 Flash自带的库,里面包含了多种已经制作好的元件。公用库包括学习交互、按钮和类 3种类型。
选择图片位置
选取图片
单击
115
素材、元件、实例与库 6
图 6-62 “作为库打开”对话框 图 6-63 打开的已有动画的库
可以使用 Flash 自带的公用库向文档中添加按钮或声音,也可以自行创建公用库并将其用于创建的文档,用户可以直接从中调用元件,以提高工作效率。使用公用库的具体操
作如下: 选择“窗口→公用库”命令,在弹出子菜单中包括学习交互、按钮和类 3种公用库。 根据需要选择相应的库,如图 6-64 所示,选择“按钮”命令,将打开“库-按钮”面板,其中包括了系统中自带的许多按钮元件,如图 6-65所示。 在打开的“库”面板中选中要调入场景的元件,按住鼠标左键将其拖入到舞台中即可。
图 6-64 “公用库”命令 图 6-65 “库-按钮”面板
选择文件位置
选取文件
单击
3种公用库
116
Flash 8动画制作
第5节 实战演练——制作光盘界面 本章节将制作名为“光盘界面”的动画,完成后,将鼠标光标移到按钮上,按钮将由
蓝色系线性渐变色变为绿色系线性渐变色,最终效果如图 6-66所示(光盘\第 06章\最终效果\光盘界面.fla)。通过练习,可以掌握导入素材、创建不同类型的元件和设置元件实例属性的方法,并可以在“库”面板中查看这些元件与素材。其具体操作如下:
图 6-66 “光盘界面”最终效果
新建一个 Flash文档,在“属性”面板中设置文档大小为“550×400”像素,背景色为白色。 选择“文件→导入→导入到舞台”命令,打开“导入”对话框,在“查找范围”下拉列
表框中选择要导入的图片位置,再在列表框中选中要导入的图形“蓝色背景.jpg”(光盘\第 06章\实例素材\蓝色背景.jpg),如图 6-67所示。 单击【打开】按钮将图片导入到 Flash场景中,如图 6-68所示。
图 6-67 “导入”对话框 图 6-68 导入图形到场景
调用其他库和公用库中的元件,制作一个名为“新鲜组合”的动画,在制作的时候注意操
作的正确性,及所使用的元件的风格应较统一。
117
素材、元件、实例与库 6
选中图片素材,按<F8>键打开“转换为元件”对话框,选择元件类型为“图形”,并命名为“背景”,如图 6-69所示。 单击【确定】按钮,将图片“蓝色背景.jpg”转换为图形元件。 选取“背景”图形元件,在 下拉列表框中选择“Alpha”选项,将透明度设置为“20%”,如图 6-70所示。
图 6-69 “转换为元件”对话框 图 6-70 设置实例属性
新建图层 2,在场景中用椭圆工具和矩形工具绘制如图 6-71所示的图形。 选择“文件→导入→导入到舞台”命令,打开“导入”对话框,在“查找范围”下拉列
表框中选择要导入的图片位置,再在列表框中选中要导入的图片“手柄.png”(光盘\第 06章\实例素材\手柄.png),如图 6-72所示。
图 6-71 绘制图形 图 6-72 导入图形
选择文本工具,在“属性”面板中设置为“黑体、40、白色、加粗”,在场景上方的矩形图形内输入文字“游戏入门手册”,并添加发光滤镜效果,如图 6-73所示。 按<Ctrl+F8>键打开“创建新元件”对话框,在“名称”文本框中输入创建元件的名称
这里使用 png格式的图片素材是为了让图片的空白区域为透明,能显示出相应位置下一
层的内容。
设置透明度
118
Flash 8动画制作
为“第 1章”,并选择元件类型为“按钮”,如图 6-74所示。
图 6-73 输入文字 图 6-74 “创建新元件”对话框
单击【确定】按钮,在按钮元件编辑区中选择“弹起”帧,在场景中绘制如图 6-75所示的图形。 在“指针经过”、“按下”和“点击”帧中分别插入关键帧,并将帧中的线性渐变色改
为绿色系,如图 6-76所示。
图 6-75 绘制图形 图 6-76 编辑图形
新建图层 2,选择文本工具,在“属性”面板中设置为“宋体、25、黑色、加粗”,在场景中输入文字“第 1 章”,如图 6-77所示。 按<F11>键打开“库”面板,在“第 1章”按钮元件上单击鼠标右键,在弹出的快捷菜单中选择“直接复制”命令,如图 6-78所示。
图 6-77 输入文字 图 6-78 “直接复制”命令
打开“直接复制元件”对话框,在其中重命名为“第 2章”,如图 6-79所示。
119
素材、元件、实例与库 6
在“第 2章”按钮元件中将“第 1章”文字改为“第 2章”,如图 6-80所示。
图 6-79 “直接复制元件”对话框 图 6-80 修改文字
用同样的方法,复制出“第 3章”按钮元件和“第 4章”按钮元件。 单击场景上方的 图标,回到场景中,将这 4个按钮元件拖入到场景中并对齐,如图 6-81所示。 选取这 4个按钮元件,在“属性”面板的 下拉列表框中选择“减去”
选项,如图 6-82所示。
图 6-81 对齐按钮元件 图 6-82 “减去”选项效果
在“滤镜”面板中选择“投影”选项,进行如图 6-83所示的设置,效果如图 6-84所示。
图 6-83 设置“滤镜”面板 图 6-84 “投影”选项效果
按<Ctrl+Enter>键测试动画效果,最终效果如图 6-66所示。
120
Flash 8动画制作
第6节 练一练 (1)素材的类型有哪些? (2)怎样将视频素材导入到场景中? (3)Flash 8中的元件类型有哪些?它们的作用是什么? (4)按钮元件包含哪些帧?作用是什么? (5)如果为元件选择“差异”混合选项效果,元件有什么变化? (6)如果想让导入的一张图片变成半透明效果,该怎么设置? (7)在导入外部库的元件到当前文档时,为什么外部库列表框显示为灰色? (8)如果“库”面板中的元件和素材太多,应该怎样对它们进行管理? (9)制作名为“龙纹系列”的动画,在图层 1 的场景上方输入文字并添加渐变斜角
效果,然后导入“龙 1.jpg~龙 4.jpg”图形(光盘\第 05章\实例素材\龙 1.jpg~龙 4.jpg)到库中,并拖入到场景中缩小对齐。再将它们转换为按钮元件进行编辑。在图层 1下方新建图层 2,重命名为“底纹”,将“龙 3.jpg”图形拖入到场景中转换为图形元件,并将“Alpha”值设置为“30%”,完成制作。最终效果如图 6-85所示(光盘\第 06章\最终效果\龙纹系列.fla)。
图 6-85 “龙纹系列”最终效果
& 动画基本类型
& 制作逐帧动画
& 制作形状补间动画
& 制作补间动画
果要制作一个广告动画,就要制 作动画效果,前面只学习了 Flash
的基础操作,本章将学习动画的基本类
型和各种简单动画的制作原理,主要学
习逐帧动画、形状补间动画和补间动画
的制作方法,了解形状提示的添加方法。 其中补间动画的属性设置是本章的
难点,缓入缓出的设置对动画的改变很
大,应重点掌握。
7
制作简单动画
122
Flash 8动画制作
第1节 动画基本类型 根据动画的生成原理和制作方法,可将 Flash动画分为逐帧动画和补间动画两种类型。 补间动画又分为补间动画和形状补间动画两种类型。制作补间动画时,只需为动画的
第一个关键帧和最后一个关键帧创建内容,在两个关键帧之间的帧内容由 Flash自动生成。
第2节 制作逐帧动画 在 Flash 动画中,经常能看到一些动画中人物说话、眨眼等动作,这种简单动画效果
就是利用逐帧动画制作的。 由许多关键帧组成的动画叫作逐帧动画,在逐帧动画的每个关键帧中创建不同的内
容,播放动画时,Flash就会一帧一帧地按顺序播放帧中内容,如图 7-1所示。
图 7-1 逐帧动画效果
1.逐帧动画特点
逐帧动画的特点如下: = 逐帧动画中的每一个有不同对象的帧都是关键帧,每个帧的内容都需要手动编辑,工作量很大,一般不采用该方式制作动画。
= 逐帧动画由许多单个的关键帧组合而成,相邻关键帧中的对象变化不大,每个关键帧均可独立编辑。
= 逐帧动画的文件较大,并且不易编辑。
2.逐帧动画制作方法
创建逐帧动画需要将每个帧都定义为关键帧,然后给每个帧创建不同的图像。每个新
插入的关键帧最初包含的内容和它前面的关键帧是一样的,因此可以逐个修改动画中的帧。
123
7 制作简单动画
第3节 制作形状补间动画 补间动画分为补间动画和形状补间动画两种类型,下面介绍形状补间动画的特点、制
作方法和形状提示的添加。
1.形状补间动画的特点
形状补间动画是由两个关键帧和它们之间的普通帧组成的,它可以使一个图形或文字
变为另一个图形或文字。
2.形状补间动画制作方法
形状补间动画是形状逐渐发生变化的动画,图形的变形不用依次绘制,只需绘制变形
前后两个关键帧中的画面,中间的变化过程由 Flash 自动完成。制作形状补间动画时,可以为一个关键帧中的形状指定属性,然后在下一个关键帧中修改绘制另一个形状,然后在
关键帧之间创建动画,其具体操作如下: 在动画的起始帧插入关键帧,并编辑起始帧中的内容。 在结束帧中插入关键帧,再编辑结束帧中的内容。 选择起始帧,在“属性”面板的“补间”下拉列表框中选择“形状”选项。
3.实例属性
创建形状补间动画后,“属性”面板如图 7-2所示。形状补间动画的“属性”面板中各项的作用如下:
图 7-2 形状补间动画的“属性”面板
= “缓动”下拉列表框:可以调整形状补间动画的两个关键帧之间的变化速度,默认情况下变化速度是匀速的。可以通过在“缓动”下拉列表框中逐渐调整变化速
率而创建更加自然的变形效果。 = “混合”下拉列表框:在混合下拉列表框中选择“分布式”选项,可使中间帧的形状过渡得更加随意。选择“角形”选项,可使中间帧的形状保持关键帧上图形
要慢慢地开始补间形状,并朝着动画的结束方向加速补间,可向下拖动滑块或输入
一个“-1”到“-100”的负值;要快速地开始补间形状,并朝着动画的结束方向减
速补间,请向上拖动滑块或输入一个“1”到“100”的正值。
124
Flash 8动画制作
的棱角,此模式只适用于有尖锐棱角的图形变换,否则 Flash 会自动地将此模式变回分布模式。
4.形状提示
创建形状补间动画时,如果要控制复杂的形状变化,可用形状提示标识起始形状和结
束形状中对应的点,这样可使变形的过程更加细致。 利用形状提示可以将一个图形上的某点转换到另外一个图形上的某个点,使物体间的
变形过渡更有目的性,制作出更丰富的变形效果。 形状提示由实心小圆圈和英文字母组成,英文字母表明物体的部位名称。起始关键帧
上的形状提示是黄色的,结束关键帧上的形状提示是绿色的,当不在一条曲线上时为红色。
如图 7-3所示。 选择“修改→形状→添加形状提示”命令,或按<Ctrl+Shift+H>键,可以看见场景中
出现一个显示有英文字母"a"的红色圆圈,即为形状提示。
图 7-3 形状提示状态
要在补间形状时获得最佳效果,需要遵循如下 3条准则: = 在复杂的形状补间动画时,不能只定义起始和结束的形状,需要创建中间形状后再创建补间动画。
= 确保形状提示是符合逻辑的。比如在一个三角形中使用三个形状提示,那么在原始三角形和要补间的三角形中它们的顺序必须是一致的。它们的顺序不能在第一
个关键帧中是 abc,而在第二个中是 acb。 = 按逆时针顺序从形状的左上角开始放置形状提示,效果最好。
形状补间动画的对象是分离的可编辑图形。可以是同一层上的多个图形,也可以是单个图形。
要让多个物体同时变形,可将它们放在不同的层上分别变形,这样比在同一个层上进行变形
的效果好得多。
起始关键帧 结束关键帧 不在一条曲线
要查看形状提示时,可选择“视图→显示形状提示”命令。
只有包含形状提示的层或关键帧处于活动状态下,“显示
形状提示”命令才可用。
125
7 制作简单动画
如果不需要形状提示,可以将其删除,其方法有如下 3种: = 将形状提示拖到画面以外的任何地方。 = 在形状提示上单击鼠标右键,在弹出的快捷菜单中选择“删除提示”命令。 = 要删除全部的形状提示,可在任意一形状提示上单击鼠标右键,在弹出的快捷菜单中选择“删除所有提示”命令。
形状提示包含从 a到 z的字母,用于识别起始形状和结束形状中相对应的点,在 Flash中,一个形状补间动画中最多能添加 26个形状提示。
第4节 制作补间动画 添加补间动画可以让动画中的对象出现移动、旋转、缩放等
1.补间动画特点
补间动画只适用于文字、位图和实例,被打散的对象只能在转换为元件或组合后才能
产生动作的补间过程。
2.补间动画制作方法
在两个关键帧上分别定义不同的属性,如对象的位置、大小、角度等,然后在两个关
键帧之间建立一种运动渐变关系。补间动画的渐变过程很连贯,制作过程也比较简单,只
需建立动画的第一个画面和最后一个画面。其具体操作如下: 在动画的起始帧插入关键帧,然后编辑起始帧中的对象。 选择起始关键帧,在“属性”面板的“补间”下拉列表框中选择“动作”选项。 选择结束帧并插入关键帧,编辑结束帧中的内容。
3.实例属性
补间动画的“属性”面板与形状补间动画的“属性”面板类似,各选项含义也相同,
如图 7-4所示,与形状补间动画不同的选项作用如下:
图 7-4 补间动画的“属性”面板
在要创建补间动画的关键帧上单击鼠标右键,在弹出的快捷菜单中选择“创建补间动画”命令,
也可以创建补间动画,用户可以在 Flash文档中用这种方法创建一个补间动画。
126
Flash 8动画制作
= “旋转”下拉列表框:用于设定物体的旋转运动,其中各选项含义如下: = 无:对象不旋转。 = 自动:对象以最小的角度进行旋转,直到终点位置。 = 顺时针:可设定对象沿顺时针方向旋转到终点位置,在其后的文本框中可输
入旋转次数,输入“0”表示不旋转。 = 逆时针:可以设定对象沿逆时针方向旋转到终点位置,在其后的文本框中可
输入旋转次数,输入“0”表示不旋转。 = “调整到路径”复选框:选中时,可使对象沿设定的路径运动,并随着路径的改变而相应地改变角度。
= “同步”复选框:选中时,可使动画在场景中首尾连续地循环播放。 = “对齐”复选框:选中时,可使对象沿路径运动时,自动捕捉路径。 单击“属性”面板中的【编辑】按钮,打开“自定义缓入/缓出”对话框,如图 7-5所
示,其表示随时间推移动画变化程度的图形。帧由水平轴表示,变化的百分比由垂直轴表
示。第一个关键帧表示为 0%,最后一个关键帧表示为 100%。 曲线图的曲线斜率表示对象的变化速率。曲线水平,无斜率时,变化速率为零;曲线
垂直时,变化速率最大,一瞬间完成变化。其中各选项的含义如下:
图 7-5 “自定义缓入/缓出”对话框
= “为所有属性使用一种设置”复选框:默认状态该复选框为选中状态,这表示所显示的曲线适用于所有属性。
= “属性”下拉列表框:当“为所有属性使用一种设置”复选框未选中时,“属性”下拉列表框将被激活,每个属性都有单独定义其变化速率的曲线。 = 位置:为动画对象的位置指定自定义缓入缓出设置。 = 旋转:为动画对象的旋转指定自定义缓入缓出设置。例如,可以微调舞台上的动画字符转向用户时的速度。
= 缩放:为动画对象的缩放指定自定义缓入缓出设置。例如,可以实现以下效果:对象渐渐远离查看者,再渐渐靠近,然后再次渐渐离开。
127
7 制作简单动画
= 颜色:为动画对象的颜色转变指定自定义缓入缓出设置。 = 滤镜:为动画对象的滤镜指定自定义缓入缓出设置。例如,可以控制模拟光源方向变化的投影缓动设置。
= 【播放】按钮 和【停止】按钮 :单击这些按钮可使用定义的所有当前速率曲
线预览舞台上的动画。 = 【重置】按钮:可将速率曲线恢复成默认的线性状态。 在“自定义缓入/缓出”对话框中可进行如下操作: = 对话框的右下角的数值显示的是所选控制点对应关键帧和位置,如图 7-6所示。如果没有选择控制点,则不显示数值。
= 要在曲线上添加控制点,只需单击对角线即可。通过拖动控制点的位置,可以实现对对象动画的精确控制。
= 单击要减缓或加速对象对角线上的方形手柄,选择该控制点并显示其两侧的调节杆。调节杆由空心圆表示。可以使用鼠标拖动控制点或其调节杆,也可以使用键
盘的箭头键确定其位置,如图 7-7所示。 = 单击控制点之外的曲线区域,可以在将该点添加为曲线的一个新控制点,但不会改变曲线的形状。单击曲线和控制点之外的区域,可以取消选择当前选择的控制
点。
图 7-6 显示数值 图 7-7 调节对角线
第5节 实战演练一——制作清晨阳光 本章节将制作名为“清晨阳光”的动画,完成后,可以看到阳光的光晕在不断的变幻
色彩和大小,最终效果如图 7-8所示(光盘\第 07章\最终效果\清晨阳光.fla)。通过练习,可以巩固补间动画和形状补间动画的制作方法。这里要注意正确的创建形状补间动画,避
免错误的操作,其具体操作如下:
显示数值
拖动调节杆
默认情况下,控制点与网格对齐。可以通过在拖动控制点
时按住<X>键来取消对齐。
128
Flash 8动画制作
图 7-8 “清晨阳光”最终效果
新建一个 Flash 文档,将场景大小设置为“280×350”像素,背景色为黑色,并命名为“清晨阳光”。 选择“文件→导入→导入到舞台”命令,导入“大树.jpg”图片(光盘\第 07 章\实例素材\大树.jpg)到场景中作为背景,如图 7-9所示。 按<Ctrl+F8 >键,新建一个影片剪辑元件,并命名为“光源”,如图 7-10所示。
图 7-9 导入背景图片 图 7-10 新建元件
选择多角星形工具 ,在影片剪辑元件编辑区中心绘制一个 12角星形,并填充由浅黄色、黄色、红色到浅黄色的放射状渐变色。 新建“图层 2”并拖至图层 1下方,在影片元件编辑区中心绘制一个如图 7-11所示的由黄色到透明的圆形,并在第 4帧插入普通帧。 为图层 1的第 4帧插入关键帧,并将 12角星形的填充颜色改为由浅黄色、浅绿色、蓝色到浅黄色的线性渐变色,在第 1 帧和第 4 帧之间创建形状补间动画,如图 7-12所示。 按<Ctrl+F8>键,新建一个影片剪辑元件,并命名为“变色圆”,如图 7-13所示。
129
7 制作简单动画
图 7-11 绘制图形 图 7-12 创建形状补间动画
在影片剪辑元件编辑区中,选择椭圆工具,绘制一个圆形,并填充由半透明白色、浅
紫色到紫色的放射状渐变色,混色器如图 7-14所示。
图 7-13 新建元件 图 7-14 混色器
为图层 2的第 5、10、15、20、25和 28帧插入关键帧,将圆形的填充色系依次改变为蓝紫色、蓝色、绿色、黄色、红色和紫色,并将第 5、15和 25帧的圆形缩小,然后在各关键帧之间创建形状补间动画,如图 7-15所示。
图 7-15 设置“变色圆”影片剪辑元件
按<Ctrl+F8>键,新建一个影片剪辑元件,并命名为“光晕”,如图 7-16所示。 在影片剪辑元件编辑区中,将“光源”影片剪辑元件拖入场景的中心,然后在第 5、32和 35帧处插入关键帧,并在第 1帧和第 5帧、第 32帧和第 35帧之间创建补间动画,再将第 1帧和第 35帧中对象的“Alpha”选项设置为“0%”,如图 7-17所示。
130
Flash 8动画制作
图 7-16 新建元件 图 7-17 创建动作补间动画
新建图层 2,在第 9帧处插入关键帧,将影片剪辑元件“变色圆”拖入到“光源”的右下方,在第 12、29和 32帧处插入关键帧,并在各关键帧之间创建补间动画,如图7-18所示。 在影片剪辑元件编辑区中,选择图层 2,将第 9帧和第 32帧中对象的“Alpha”选项设置为“0%”,并将第 29帧中的对象向下方移动一定距离。 新建图层 3,在第 12帧插入关键帧,将影片剪辑元件“变色圆”拖入图层 2的“变色圆”的右下方所对应的位置,并缩小,在第 15、26和 29帧处插入关键帧,并在各关键帧之间创建形状补间动画,如图 7-19所示。
图 7-18 新建图层并编辑 图 7-19 新建图层并编辑
在影片剪辑元件编辑区中,选择图层 3,将第 12帧和第 29帧中对象的“Alpha”选项设置为“0%”,并将第 26帧中的对象向下方移动。 新建图层 4,在第 15帧插入关键帧,将影片剪辑元件“圆”拖入图层 3的“圆”的右下方,再缩小,在第 18、23和 26帧处插入关键帧,并在各关键帧之间创建补间动画,如图 7-20所示。 在影片剪辑元件编辑区中,选择图层 4,将第 15帧和第 26帧中对象的“Alpha”选项设置为“0%”,并将第 23帧中的对象向下方移动。 单击场景左上方的 图标,回到场景中,将“光晕”影片剪辑元件拖入场景的左
上方,如图 7-21所示。
图 7-20 新建图层并编辑 图 7-21 将元件拖入场景
按<Ctrl+Enter>键测试动画,可以看到阳光变化的效果,最终效果如图 7-8所示。
131
7 制作简单动画
第6节 实战演练二——制作创可贴广告 本章节将制作名为“创可贴广告”的动画,完成后,可以看到手指从右上方渐渐移到
左下方,并产生残影的效果,最终效果如图 7-22所示(光盘\第 07章\最终效果\创可贴广告.fla)。通过练习,可以巩固补间动画的制作方法,这里主要练习对补间实例的属性设置。其具体操作如下:
图 7-22 “创可贴广告”最终效果
新建一个 Flash 文档,将场景大小设置为“550×400”像素,背景色为明黄色,并命名为“创可贴广告”。 导入“运动.jpg”图片(光盘\第 07章\实例素材\运动.jpg)到场景中,并将其转换为“背景”图形元件,在“属性”面板中设置“Alpha”值为“40%”,如图 7-23所示。 在场景左上方输入文字“弹性邦帆创可贴”,设置为“黑体、40、深红色、加粗”,然后将“邦帆”设置为“黑体、50、红色、加粗”,然后复制一份置于其下,设置为“白色”,并为上面的文字添加“斜角”滤镜效果,如图 7-24所示。
图 7-23 设置背景图形 图 7-24 设置文字效果
按<Ctrl+F8>键,新建一个图形元件,并命名为“手指”,在其中绘制如图 7-25 所示的图形。 按<Ctrl+F8>键,新建一个影片剪辑元件,并命名为“手指动”,将“手指”图形元件拖入到其元件编辑区中。
132
Flash 8动画制作
选取第 1帧,在“属性”面板的“补间”下拉列表框中选择“动画”选项,如图 7-26所示。
图 7-25 绘制手指图形 图 7-26 选择“动画”选项
用任意变形工具选取“手指”图形元件,将旋转中心拖至手指图形下方,在第 40 帧插入关键帧并将帧中的图形逆时针旋转,如图 7-27所示。 选择第 1帧,在“属性”面板中单击【编辑】按钮,打开“自定义缓入/缓出”对话框,在其中设置曲线,使手指在运动时,先以较慢的速度移动,然后加速移动,如图 7-28所示,单击【确定】按钮完成编辑。
图 7-27 旋转图形元件 图 7-28 “自定义缓入/缓出”对话框
在第 85帧插入普通帧,并在第 41帧上单击鼠标右键,在弹出的快捷菜单中选择“删除补间”命令,时间轴如图 7-29所示。 单击场景左上方的 图标,回到场景中,在图层 1的第 85帧插入普通帧,然后新建图层 2,将“手指动”影片剪辑元件拖入场景的右方,如图 7-30所示。
图 7-29 时间轴 图 7-30 拖入场景
拖动中心点
设置曲线
133
7 制作简单动画
在图层 1上方新建图层 3,在第 5帧插入关键帧,将图层 2中的“手指动”影片剪辑元件复制,在图层 3中按<Ctrl+Shift+V>键粘贴到原位置。 将图层 2隐藏,在“属性”面板中设置“Alpha”值为“60%”,如图 7-31所示。 在图层 1上方新建图层 4,在第 10帧插入关键帧,将图层 2中的“手指动”影片剪辑元件复制粘贴到原位置,并将图层 3隐藏,在“属性”面板中设置“Alpha”值为“40%”,如图 7-32所示。
图 7-31 设置“Alpha”值 图 7-32 设置“Alpha”值
在图层 1上方新建图层 5,在第 15帧插入关键帧,将图层 2中的“手指动”影片剪辑元件复制粘贴到原位置,并将图层 4隐藏,在“属性”面板中设置“Alpha”值为“20%”,如图 7-33所示,此时时间轴如图 7-34所示。
图 7-33 设置“Alpha”值 图 7-34 时间轴
按<Ctrl+Enter>键测试动画,可以看到手指移动的效果,最终效果如图 7-22所示。
结合本实战演练所学的知识,想一想还可以通过哪些方法制作出相同的动画效果。
设置不透明度 设置不透明度
设置不透明度
134
Flash 8动画制作
第7节 练一练 (1)Flash动画有哪些类型? (2)在制作 Flash动画时,可以只使用逐帧动画的方式来制作吗?如果只使用逐帧动
画制作,有什么利弊? (3)补间动画中各关键帧之间用什么颜色的背景表示? (4)形状提示有什么作用,在什么类型的动画中可以加入形状提示? (5)默认情况下,在形状提示上单击鼠标右键,在弹出的快捷菜单中的“显示提示”
命令前面有一个“√”标记,该标记有什么作用? (6)形状补间动画有什么特点? (7)补间动画的“属性”面板中的“缓动”选项有什么作用? (8)制作名为“电影广告”的动画,在其中应用了补间动画和形状补间动画制作,
完成后,两幅电影图形从右向左运动,左上角的文字将互相变换,最终效果如图 7-35所示(光盘\第 07章\最终效果\电影广告.fla)。(光盘\第 07章\实例素材\电影 1.jpg、电影 2.jpg、三维.jpg)
图 7-35 “电影广告”最终效果
& 引导动画的概念
& 引导层
& 引导动画制作方法
& 遮罩动画的概念
& 遮罩层
& 遮罩动画制作方法
时候要让对象沿某一特定的路径 运动,用普通的动画制作时会比
较复杂,如果用引导动画制作,将变得
非常容易。 我们常常可以看见一些电影播放
完后,在片尾会出现一些导演和演员的
名字,这些名字在场景中的一个区域出
现与渐隐。在 Flash中,一般的动作补间动画难以达到这样的效果,但使用遮罩
动画就可以轻松将其制作出来。 本章就将介绍 Flash 中特殊的引
导动画和遮罩动画的制作方法。 其中难点主要是引导层和遮罩层的
概念与使用方法,熟练掌握这种方法后,
在制作一些特殊的动画时,才会更加得
心应手。
8
制作特殊动画
136
Flash 8动画制作
第1节 引导动画 引导动画和遮罩动画实际都是由基本的 3种动画演变而来的,下面先来了解引导动画
的概念与制作方法。
1.引导动画概念
引导动画是指被引导对象沿着特定的路径运动的动画。比如要制作激光写字、蝴蝶飞
舞和乒乓球的运动轨迹等,用引导动画制作出来就更加真实。 引导动画由引导层和被引导层组成,引导层用于放置对象运动的路径,被引导层用于
放置运动的对象。制作引导动画的过程实际就是对引导层和被引导层的编辑过程。
2.引导层
引导层是一种特殊的图层,它位于被引导层的上方,在引导层中可以绘制各种图形与
元件,但是引导层中的对象只是作为引导对象的路径,因此在播放动画时不会显示出来;
被引导层中的对象会沿着引导层中的路径进行运动。 创建引导层的方法有 3种:通过 按钮创建引导层、用菜单命令创建引导层和将已知
图层变为引导层,下面分别讲解。
(1) 通过 按钮创建引导层
单击图层控制区左下角的 按钮,即可在当前图层之上创建一个空白的引导层,新建
的引导图层与原图层之间建立链接关系,如图 8-1所示。
图 8-1 通过 按钮创建引导层
(2) 用菜单命令创建引导层
选取要创建引导层的图层,单击鼠标右键,在弹出的快捷菜单中选择“添加引导层”
命令,即可在该图层上方创建一个空白的引导层,并与原图层建立链接关系,如图 8-2所示。
(3) 将已知图层变为引导层
制作引导动画时,可以先创建空白引导层,然后在引导层中绘制引导路径,也可以在
普通图层中绘制路径后再将该图层转换为引导层。
137
8 制作特殊动画
图 8-2 通过菜单命令创建引导层
要将普通图层转换为引导层,方法如下: 双击要转换为引导层的图层图标 ,打开“图层属性”对话框。 在“类型”栏中选中 单选项,再单击【确定】按钮,此时图层图标由 形状
变为 形状,如图 8-3所示。 再双击引导层下方图层的图层图标 ,在打开的“图层属性”对话框中选中 单
选项,再单击【确定】按钮这时引导层与其下方的图层就创建了引导链接关系,如图
8-4所示。
图 8-3 通过“图层属性”对话框命令创建引导层
图 8-4 创建引导层的链接关系
双击
选择
单击
选择
单击 双击
138
Flash 8动画制作
3.引导动画制作方法
制作引导动画的具体操作如下: 在普通层中创建一个元件。 在普通层上方新建一个引导层,普通层自动变为被引导层。 在引导层中绘制一条路径,并将引导层中的路径沿用到某一帧。 在被引导层中将元件的中心控制点移动到路径的起点。 在被引导层的某一帧插入关键帧,并将元件移动到引导层中路径的终点。 在被引导层的两个关键帧之间创建动作补间动画,即可完成引导动画的制作。
4.制作引导动画注意事项
在制作引导动画的过程中,如果制作过程不正确,将会造成创建引导动画失败,而使
被引导的对象不能沿引导路径运动。下面是制作引导动画过程中应注意的几个方面: = 引导线应为一条流畅、从头到尾连续贯穿的线条,线条不能出现中断的现象,如图 8-5所示为中断的线条。
= 引导线的转折不宜过多,且转折处的线条弯转不宜过急,以免 Flash 无法准确判定对象的运动路径,如图 8-6所示为转折处弯转过急的线条。
图 8-5 引导线中断 图 8-6 引导线转折过急
= 引导线中不能出现交叉、重叠的现象,如图 8-7所示为引导线出现了交叉与重叠。 = 被引导对象必须准确吸附到引导线上,否则被引导对象将无法沿引导路径运动,如图 8-8所示为被引导对象吸附到引导线上的情况。
图 8-7 引导线出现交叉与重叠现象 图 8-8 将对象吸附到引导线
此方法只有当图层处于引导层上方时才有效。而且通过此方法创建的引导层与其下方的
其他图层不存在链接关系。
139
8 制作特殊动画
第2节 遮罩动画 遮罩动画由遮罩层和被遮罩层组成。遮罩层可以放置遮罩的形状,被遮罩层可以放置
要显示的图像。遮罩动画的制作原理就是通过遮罩层来决定被遮罩层中的显示内容,以此
出现动画效果。
1.遮罩层
遮罩动画通过遮罩层创建。遮罩层和引导层一样是一种特殊的图层,使用遮罩层后,
遮罩层下面的被遮罩层中的对象就像透过一个窗口显示出来一样,这个窗口的形状就是遮
罩层中的对象形状。 遮罩层不能直接创建,只能将普通图层转换为遮罩层,其方法有两种:用菜单命令转
换和用“图层属性”对话框转换,下面分别介绍。
1)用菜单命令转换
在要转换为遮罩层的图层上单击鼠标右键,在弹出的快捷菜单中选择“遮罩层”命令,
即可将该图层转换为遮罩层,并与其下方图层建立链接关系,如图 8-9所示。
图 8-9 用菜单命令创建遮罩层
2)用“图层属性”对话框转换
用“图层属性”对话框将普通图层转换为遮罩层的具体操作如下: 双击要转换为遮罩层的图层 2的图标 ,打开“图层属性”对话框。 在“类型”栏中选中 单选项,单击【确定】按钮,如图 8-10所示。 此时图层图标由 形状变为 形状,如图 8-11所示。 双击遮罩图层下面的图层 2图标 ,在打开的“图层属性”对话框中选中 单
选项即可在遮罩层与其下的图层 2之间创建链接关系,如图 8-12所示。 遮罩层图标为 ,将图层转换为遮罩层,并与下方的图层建立链接关系后,被遮罩层
图标将缩进,其下方的图层图标将更改为被遮罩的层的图标 ,成为被遮罩层。被遮罩层
中的内容会透过遮罩层中的填充区域显示出来。
选择命令
转换为遮罩层
140
Flash 8动画制作
图 8-10 通过菜单命令创建遮罩层 图 8-11 创建遮罩层 图 8-12 创建遮罩层的链接关系
2.遮罩动画制作方法
制作简单遮罩动画的具体操作如下: 选取一个图层,在其中制作将在遮罩动画中出现的对象。 选取该图层,单击图层区域的 按钮,在其上方新建一个图层,作为遮罩用的图层。 在作为遮罩用的图层上制作遮罩用的对象。 选取作为遮罩层用的图层,单击鼠标右键,在弹出的快捷菜单中选择“遮罩层”命令。 锁定遮罩层和被遮罩层,即可在 Flash中显示遮罩效果。
3.多层遮罩动画
多层遮罩动画指一个遮罩层同时遮罩多个被遮罩层的遮罩动画。默认情况下,在制作
遮罩动画时,Flash只默认遮罩层下的一个图层为被遮罩层,如果要使该遮罩层能够遮罩多个图层,可以为遮罩层添加多个被遮罩层,方法有以下两种:
= 如果需要添加的图层位于遮罩层上方,选中该图层,只需将其直接拖至到遮罩层下方,如图 8-13所示。
= 如果需要添加的图层位于遮罩层下方,可双击该图层上的 图标,在打开的“图
层属性”对话框中选中 单选项即可。 要断开图层和遮罩层的链接,可以先选择要断开链接的被遮罩层,再将层拖到遮罩层
的上面或选择“修改→时间轴→图层属性”菜单命令,然后选择 单选项即可。
选择
单击
遮罩层中的任何填充区域
都是完全透明的;而任何
非填充区域都是不透明
的。
遮罩层中绘制的对象具有透明效
果,Flash 会忽略遮罩层中的位
图、渐变色、透明、颜色和线条
样式等属性。
如果要断开链接的被遮罩层下方还有其他链接的图层,将此被遮罩层断开链接后,
其下方其他的被遮罩层也将与遮罩层断开链接关系。
141
8 制作特殊动画
图 8-13 拖移图层创建遮罩层
第3节 实战演练一——公司网站片头 本章节将运用引导动画的制作方法制作一个公司网站的片头动画,完成后,黄绿色的
激光将在画面上打出“方圆科技”的文字,最终效果如图 8-14所示(光盘\第 08章\最终效果\公司网站片头.fla)。通过练习,可以巩固如何使用引导层创建引导动画。在练习时应注意在绘制引导路径时,在转弯过急的地方可以将其调整平滑,并按<Enter>键查看被引导的“激光”图形元件是否随引导线运动。其具体操作如下:
图 8-14 “公司网站片头”最终效果
新建一个文件,将场景大小设为“500×300”像素,背景为灰紫色,并命名为“公司网站片头”。 选择“文件→导入→导入到舞台”命令,将“科技.jpg”图片(光盘\第 08 章\实例素材\科技.jpg)导入到场景中,如图 8-15所示。 按<Ctrl+F8>键,打开“创建新元件”对话框,新建名为“激光”的图形元件,如图8-16所示。
拖移图层
建立链接关系
新建一个 Flash文档,在其中新建 4个图层,用菜单命令将“图层 3”转换为遮罩层,然后
将“图层 4”拖至“图层 3”下方,使其成为被遮罩层。
142
Flash 8动画制作
图 8-15 导入图形素材 图 8-16 “创建新元件”对话框
用铅笔工具绘制 3角形线框,在混色器中选择“线性”填充模式,设置填充色为“黄色、黄绿色、黄绿色”的渐变色,将右边的黄绿色的“Alpha”值设置为“0%”,然后为 3角形填充线性渐变色并调整,再将 3角形的边框删除,如图 8-17所示。
图 8-17 绘制激光图形
单击场景左上方的 图标,回到场景中,新建图层 2,在图层 2中输入文本“方圆科技”,并在“属性”面板中设置为“文鼎新艺体简、白色、80”,如图 8-18所示。选取文本,按两次<Ctrl+B>键打散文本。 新建图层 3,选择铅笔工具,并选取“平滑”选项,根据图层 2中文本的走向绘制一条平滑曲线,如图 8-19所示。
图 8-18 绘制激光图形 图 8-19 绘制引导路径
输入名称
选择元件类型
单击
选择“线性”填充
设置填充颜色
输入数值
填充颜色
143
8 制作特殊动画
在图层 2之上新建图层 4,从“库”面板中将“激光”图形元件拖入场景中放置于平滑曲线的一端,如图 8-20所示。 选择图层 3,单击鼠标右键,在弹出的快捷菜单中选择“引导层”命令,将图层 3转换为引导层,如图 8-21所示。
图 8-20 拖入图形元件 图 8-21 转换引导层
在图层 1、图层 2和图层 3的第 100帧处插入普通帧。 在图层 4的第 60 帧插入关键帧,将“激光”图形元件移到引导线的另一个端点上,如图 8-22所示。 选取第 1帧,在“属性”面板的“补间”下拉列表框中选择“动作”选项,为第 1帧和第 60帧之间创建动作补间动画,如图 8-23所示。
图 8-22 拖移图形元件 图 8-23 创建动作补间动画
在图层 2的第 3帧、第 5帧、第 7帧、第 9帧到 59帧的奇数帧中插入关键帧,如图8-24所示。 将图层 1、图层 3和图层 4锁定,选取图层 3,按 图标下引导层的小圆点,隐藏引
导层中的路径。
图 8-24 插入关键帧
锁定图层 1、图层 3和图层 4是为了
防止后面的擦除操作将这 3 个图层
中的对象擦除掉。隐藏图层 3中的路
径是为了擦除文字时,更加直观,不
受引导线的干扰。
144
Flash 8动画制作
在图层 2的第 1帧中用橡皮擦工具将激光未扫描过的部分擦除,如图 8-25所示。 在图层 2中选取第 3帧,将激光未扫描的部分用橡皮擦全部擦除,如图 8-26所示。
图 8-25 第 1帧效果 图 8-26 第 3帧效果
选取第 5帧中用橡皮擦工具将激光未扫描过的部分擦除,如图 8-27所示。 用同样的方法将其他各关键帧中激光未扫描过的部分擦除,第 23帧如图 8-28所示。
图 8-27 第 5帧效果 图 8-28 第 23帧效果
在图层 4的 100帧插入普通帧,并选取第 61帧,单击鼠标右键,在弹出的快捷菜单中选择“删除补间”命令。 按【Ctrl+Enter】键测试动画效果,最终效果如图 8-14所示。
第4节 实战演练二——电影片尾 本章实战演练将运用遮罩动画的制作方法制作一个“电影片尾”的动画,完成后文字
从屏幕下方出现,再从屏幕上方消失,最终效果如图 8-29所示(光盘\第 08章\最终效果\电影片尾.fla)。通过练习,可以巩固如何用遮罩层创建遮罩动画的方法。在练习时应注意在创建了遮罩动画后,为了使文字的出现比较自然,在遮罩层上方再新建一个图层,绘制
和遮罩层中相同大小的矩形,填充黑色和透明色的线性渐变色。其具体操作如下:
为什么本实例在要在图层 4的 100帧插入普通帧,如果不插入关键帧,效果有什么变化。
145
8 制作特殊动画
图 8-29 “电影片头”最终效果
新建一个 Flash文档,将场景大小设为“300×400”像素,背景颜色设置为黑色。 选择“文件→导入→导入到舞台”命令,将“幕布.jpg”图片(光盘\第 08 章\实例素材\幕布.jpg)导入到场景中,如图 8-30所示。 新建图层 2,在场景左上方绘制填充色为蓝灰色到深蓝色的放射状色彩,无线框颜色,边角半径为“20”的矩形,并输入“射手传说”文字,设置为“隶书、30、浅蓝色、垂直.从左向右”,如图 8-31所示。
图 8-30 导入背景图片 图 8-31 输入文字
新建图形元件“文字”,在其中输入如图 8-32所示的文字。 在图层 1的上方新建图层 3,将“文字”图形元件拖入到场景下方,如图 8-33所示。
为什么不在图层 1 中
绘制矩形和输入文字,
而要新建一个图层输
入文字呢?
因为导入的图片在图层中居于
最上方,在图层中绘制矢量图
形将居于图片下方无法显示,
所以要新建一个图层。
导入背景图片
绘制矩形并输入文字
146
Flash 8动画制作
图 8-32 输入文字 图 8-33 拖入场景
在图层 3的上方新建图层 4,绘制无边框的中黄色矩形作为遮罩,如图 8-34所示。 选取图层 4,单击鼠标右键,在弹出的快捷菜单中选择“遮罩层”命令,将图层 3转换为遮罩层,如图 8-35所示。
图 8-34 绘制矩形 图 8-35 转换为遮罩层
将锁定的图层 4和图层 3解锁,然后复制图层 4中的矩形,并将图层 4隐藏,如图 8-36所示。 在图层 3上方新建图层 5,按<Shift+Ctrl+V>键,将复制的矩形粘贴到场景中。 在混色器中选择线性填充色,将其设置为“黑色、黑色、黑色、黑色”填充色,然后
将中间的两个填充色的“Alhpa”值设置为“0”,如图 8-37所示。 为矩形填充线性填充色,并用填充变形工具将其旋转 90 度,然后再拉伸,如图 8-38所示。 在图层 1、图层 2、图层 5和图层 4的第 240帧插入普通帧。
拖入场景
绘制矩形
147
8 制作特殊动画
图 8-36 隐藏图层 图 8-37 设置颜色 图 8-38 设置填充色
选取图层 3的第 1帧,单击鼠标右键,在弹出的快捷菜单中选择“创建补间动画”命令,在第 240帧插入关键帧,在第 1帧和第 240帧之间创建动作补间动画,如图 8-39所示。 将图层 4显示,并锁定图层 4、图层 5和图层 3,如图 8-40所示。
图 8-39 创建动作补间动画 图 8-40 锁定图层
按<Ctrl+Enter>键播放动画,即可看到制作好的电影序幕的遮罩效果,如图 8-29所示。
第5节 练一练 (1)引导层有什么作用,在哪些情况下,引导动画不能正常播放? (2)创建引导层有哪些方法? (3)如何将普通图层转换为被引导层?有哪些方法? (4)遮罩动画的原理是什么? (5)可以直接创建遮罩层吗?
新建图层 5,将图层 4的矩形粘贴到原位置,然后填充两边为黑色,中间透明的线性填
充色,并用填充变形工具将其旋转 90度,然后再拉伸,是为了让文字进入场景时,达
到渐入与渐隐的效果,使其更加自然。
148
Flash 8动画制作
(6)多层遮罩动画怎么创建? (7)制作一个名为“飞翔”的动画,将“背景.jpg” (光盘\第 08章\实例素材\背景.jpg)
图形素材导入到场景中作为背景,新建一个图层 2,将“鸟.png”(光盘\第 08 章\实例素材\鸟.png)图形导入到场景中,并新建一个引导层绘制引导路径,再为图层 2创建动作补间动画即可,完成后,鸟将从左向右沿着引导路径飞行,最终效果如图 8-41 所示(光盘\第 08章\最终效果\飞翔.fla)。
图 8-41 “飞翔”最终效果
(8)制作一个“影视广告”动画,完成后,两个图片将透过 5 角星形的形状不断转换,最终效果如图 8-42所示(光盘\第 08章\最终效果\影视广告.fla)。
提示:制作步骤如下: 在图层 1导入“电影 1.jpg”(光盘\第 08章\实例素材\电影 1.jpg)图形素材,新建图层 2,导入“电影 2.jpg”(光盘\第 08章\实例素材\电影 2.jpg)图形素材。 新建图层 3,在其中绘制填充色为白色,“Alpha”值为“0”,边框色为白色的 5角星形,并转换为遮罩层。 在图层 1和图层 2的第 120帧插入普通帧,在图层 3的第 1帧、第 60帧和第 120帧之间创建动作补间动画。 将第 60帧的 5角星形缩小,复制图层 3中的所有帧,并粘贴到图层 4。 新建图层 5输入文字并打散。
图 8-42 “影视广告”最终效果
& 添加声音
& 编辑声音
& 压缩与输出声音
个完整的动画,不但要有丰富有 趣的内容,还应有悦耳动听的音
乐。这样可以使动画更加真实,更容易
展现出动画所要表达的内容。 本章将介绍给动画添加声音的基础
知识,并将介绍编辑声音、压缩声音和
输出声音的方法等,使用户能够独立制
作出完整的 Flash动画作品。 不同的动画对声音有不同的要求,
这时可在 Flash中对声音进行编辑,所以编辑声音需要用户重点掌握。
一
9
制作有声动画
150
Flash 8动画制作
第1节 添加声音 在制作动画时,常需要为故事动画添加声音,为 MTV和动态按钮添加音乐等。声音
有传递信息的作用,为 Flash动画添加恰当的声音,可以使 Flash作品更加完整。下面将介绍在 Flash动画中添加声音的方法。
1.Flash支持的声音格式
如果要把声音文件加入到 Flash中,可以先将声音文件导入到当前文档的库。Flash可以导入的声音文件格式很多,一般情况下,在 Flash中可以直接导入MP3格式和WAV格式的声音文件。
(1) MP3格式
MP3格式体积小、传输方便、音质较好。虽然采用 MP3格式压缩音乐时对文件有一定的损坏,但由于其编码技术成熟,音质还是比较接近CD的水平。同样长度的音乐文件,用MP3格式储存比用WAV格式储存的体积小十分之一。现在的 Flash音乐大都采用MP3格式。
(2) WAV格式
WAV格式是 PC标准声音格式。WAV格式的声音直接保存声音数据,没有对其进行压缩,因此音质非常好。Windows系统音乐都使用WAV格式。但是因为其数据没有进行压缩,所以体积相当庞大,占用的空间也就随之变大,不过由于其音质很好,一些 Flash动画的特殊音效也常常使用WAV格式。
2.在动画中添加声音
在 Flash动画中添加声音,可以增强 Flash作品的吸引力。Flash本身没有制作音频的功能,但可以在制作动画的过程中导入声音素材或用其他音频编辑工具录制一段声音文件
后再将其加入到 Flash作品中。
(1) 为按钮添加声音
在制作交互动画时,经常会使用到按钮元件。在 Flash 中,可以为按钮的每种状态添加声音,从而制作出生动的动画效果。如要为“开始”按钮元件的“指针经过”帧和“按
下”帧添加声音,其具体操作如下: 打开“开始”按钮元件,并进入元件编辑区,如图 9-1所示。 选择“文件→导入→导入到库”命令,打开“导入到库”对话框。在该对话框中选择
需要的声音文件“狗声.wav、羊声.wav”(光盘\第 09章\实例素材\狗声.wav、羊声.wav),单击【打开】按钮导入声音文件,如图 9-2所示。
除了 MP3 和 WAV 格式外,在 Flash 中还可以导入 ASF 和
WMV4格式的声音文件。一般情况下,使用 AIFF和 AU格式
的声音文件的频率并不高。
151
9 制作有声动画
图 9-1 按钮元件编辑区 图 9-2 “导入到库”对话框
在“指针经过”帧“属性”面板的“声音”下拉列表框中选择要导入的声音文件“狗
声.wav”,在“效果”下拉列表框中选择“淡入”选项,在“同步”下拉列表框中选择“事件”选项,如图 9-3所示,即可给“指针经过”帧添加声音文件。
图 9-3 为“指针经过”帧添加声音文件
用同样的方法为“按下”帧添加“羊声.wav”声音文件。添加音频后的时间轴效果如图 9-4所示。 单击场景上方的 图标回到舞台中。 将“开始”按钮元件拖动到舞台中,按<Ctrl+Enter>键测试动画,当鼠标光标经过、按下按钮时,都会听见相应的声音效果。
图 9-4 为“按下”帧添加声音效果
(2) 为关键帧添加声音
为关键帧添加特殊的声音或背景音乐后,播放动画到该帧时就会开始播放声音或音
乐。其具体操作如下: 选取图层 1,单击图层区的【新建图层】按钮 新建图层 2作为音频层,并命名为“音乐”。在“音乐”图层的第 20帧上按<F6>键插入关键帧,作为音频播放的开始帧。
选择声音文件
选择淡入
选择事件
未添加声音文件的帧 添加了声音文件的帧
152
Flash 8动画制作
选择“文件→导入→导入到库”命令,打开“导入到库”对话框,导入名为“舒缓.wav”的声音文件(光盘\第 09章\实例素材\舒缓.wav),如图 9-5所示。 在“音乐”图层的“属性”面板的“声音”下拉列表框中选择需要的声音文件,这里
选择“舒缓.wav”。“效果”和“同步”下拉列表框保持默认选项,如图 9-6所示。
图 9-5 “导入到库”对话框 图 9-6 选择声音文件 添加声音文件后,“音乐”图层时间轴的效果如图 9-7所示。
图 9-7 添加音频后的时间轴
第2节 编辑声音 在 Flash 8中不但可使动画和一个音轨同步播放,也可使声音独立于时间轴连续播放。
为了使音轨更加自然,还可以制作出声音淡入淡出的效果。 将声音导入到动画后,为了使其符合创作需求,我们可以将导入的声音进行编辑。可
以在“属性”面板中编辑声音,也可以在“编辑封套”中编辑声音。
1.在“属性”面板中编辑声音
在声音图层的“属性”面板的“效果”下拉列表框中设置声音效果,如图 9-8所示。
导入到库中的声音文件
都会出现在“属性”面板
的“声音”下拉列表框中。
从“库”面板中将声音文
件拖放到时间轴的帧或
场景中,也可以为当前帧
添加声音。
利用将声音导入到库中的方法,将名为“牛声.wav”的声音文件导入到新建文档的库中,并拖
入到按钮元件的“指针经过”帧,以此熟悉将声音导入到库中和为按钮元件添加声音的方法。
153
9 制作有声动画
图 9-8 声音的“效果”下拉列表框
“效果”下拉列表框中各选项的含义如下: = 无:不使用任何效果。选择此选项将删除以前应用过的效果。 = 左声道:只在左声道播放音频。 = 右声道:只在右声道播放音频。 = 从左向右淡出:声音从左声道传到右声道逐渐减小幅度。 = 从右向左淡出:声音从右声道传到左声道逐渐减小幅度。 = 淡入:会在声音的持续时间内逐渐增加其幅度。 = 淡出:会在声音的持续时间内逐渐减小其幅度。 = 自定义:选择此选项将打开“编辑封套”对话框编辑声音。 添加声音后,在“属性”面板中的“同步”下拉列表框中包含 4个选项,各选项的含
义如下: = 事件:使声音与事件的发生同步开始。当动画播放到声音的开始关键帧时,音频事件开始独立于时间轴播放,即使动画停止,声音也会继续播放直到结束。
= 开始:当声音正在播放时,可以有一个新的音频事件开始播放。 = 停止:停止播放指定的声音。 = 数据流:Flash自动调整动画和音频,使它们同步。主要用于在互联网上播放流式音频。在输出动画时,流式音频混合在动画中一起输出。
在“重复”下拉列表框中包含 2个选项,各选项含义如下: = 重复:控制导入的声音文件的播放次数,在其后面的数值框中可以输入重复播放的次数。
= 循环:指让声音文件一直循环播放,不停止。
2.在“编辑封套”对话框中编辑声音
如果要对声音进行比较精细的编辑,可以在“编辑封套”对话框中设置动画的音频效
果。在“属性”的“效果”下拉列表框中选择“自定义”选项或单击其后的【编辑】按钮,
打开“编辑封套”对话框,如图 9-9所示。 “编辑封套”对话框中各部分的作用如下: = 起点游标和终点游标:调整其位置可定义音频开始和终止的位置。 = 控制柄:上下调整控制柄,可以升高或降低音调。在左右声道编辑区中各有对应的控制柄,可以对左右声道进行独立调整。
= 音量控制线:控制播放音量与声音的长短。
154
Flash 8动画制作
图 9-9 “编辑封套”对话框
= 【放大】按钮 和【缩小】按钮 :缩放窗口内音频的显示大小。 = 【秒】按钮 和【帧】按钮 :改变时间轴的单位。 显示的单位为秒, 显示
的单位为帧。 = 【播放】按钮 和【停止】按钮 :控制音频的播放,单击【播放】按钮 可以
测试效果,单击【停止】按钮 可以终止播放。 在“编辑封套”对话框中编辑“开始”按钮元件“按下”帧的声音,其具体操作如下: 选择添加了声音的“按下”帧,在“属性”面板中单击【编辑】按钮,打开“编辑封
套”对话框,在“效果”下拉列表框中选择“淡入”选项,使声音出现淡入的效果,
这时的“编辑封套”对话框如图 9-10所示。 在音频时间轴上拖动起点游标和终点游标改变音频的起点和终点,这里将起点游标拖
到如图 9-11所示的位置。
图 9-10 选择“淡入”选项 图 9-11 改变音频的起点游标
用鼠标光标拖动控制柄,通过改变音量控制线的位置来编辑音量的大小与播放时间的
控制柄
音量控制线
起点游标 音频时间轴
左声道编辑区
右声道编辑区
当控制柄和音量控制线位于最上方时,播放的声音音量最大;当控制柄和音量控制线位
于最下方时,播放的声音音量为零。
拖动起点游标
155
9 制作有声动画
长短,如图 9-12所示。 用鼠标光标拖动音量控制线上的控制柄调整声音的播放范围,这里需要单击音量控制
线加入一个控制柄,如图 9-13所示。
图 9-12 编辑音量与播放时间 图 9-13 调整声音播放范围
在音频时间轴上拖动终点游标到音频的终点,如图 9-14所示位置。完成声音的编辑后,单击【确定】按钮。
图 9-14 改变音频的终点游标
第3节 压缩与输出声音 制作有声音的动画后,可以把声音压缩后再导出,这样可减小动画文件的体积。导出
声音时,可以选择单个事件声音的压缩选项,然后用这些设置导出声音,也可以给单个音
频流选择压缩选项。但是,文档中的所有音频流都将导出为单个的流文件,而且所用的设
置是应用于所有单个音频流的设置中的最高级别,这包括视频对象中的音频流。 采样比率和压缩程度会造成导出的 SWF 文件中声音的品质和大小有很大的不同。声
音的压缩倍数越大,采样比率越低,声音文件就越小,声音品质也越差。可以通过调试找
到声音品质和文件大小的最佳平衡。
在默认情况下,音量控制线只在
起始位置有控制柄,在音量控制
线上单击可以添加控制柄。系统
允许最多添加 8个控制柄。用鼠
标光标将控制柄向两边拖出声音
波形区域即可删除控制柄。
拖动起点游标
156
Flash 8动画制作
1.压缩声音
在输出动画的音频过程中,压缩声音的方法有以下 4种: = 通过采样率和压缩率控制文件体积。 = 设置音频的起点游标和终点游标,将声音文件中的无声部分从 Flash文件中删除。 = 在不同关键帧上尽量使用相同的音频,并对它们设置不同的效果。这样,只用了一个声音文件就可设置多种声音,因此能大大减小文件的体积。
= 利用循环效果将体积很小的音频组织成背景音乐。
2.输出声音
为声音设置输出属性的具体操作如下: 按<F11>键打开“库”面板,如图 9-15所示。 用鼠标右键单击要输出的声音文件,在弹出的快捷菜单中选择“属性”命令,打开“声
音属性”对话框,如图 9-16所示。 在“压缩“下拉列表框中选择不同的压缩格式其设置就不同,如选择“MP3”选项,对话框设置如图 9-17所示。
图 9-15 “库”面板 图 9-16 “声音属性”对话框 图 9-17 “MP3”选项
在“比特率”下拉列表框中可以设置声音的最大传输速率;在“品质”下拉列表框中
可以设置品质高低。 单击【确定】按钮完成输出设置。
“声音属性”对话框的“压缩”下拉列表框中的各项含义如下: = ADPCM:可以进行 8位或 16位声音数据的压缩设置。当导出的是按钮这类短事件声音时,可使用“ADPCM”设置。
单击【测试】按钮测试音频效果,单击【停止】按
钮停止播放。
157
9 制作有声动画
= MP3:适用于导出比较长的音频流,如导出乐曲这类较长的音频流。 = 下拉列表框:确定导出的声音文件中每秒播放的位数。当
导出音乐时,需要将比特率设为 16 Kbps或更高,以获得最佳效果。 = 下拉列表框:“快速”选项的压缩速度最快,但声音品质最
低;“中”选项的压缩速度较慢,但声音品质较高;“最佳”选项的压缩速
度最慢,但声音品质最高。 = 原始:导出声音时将不进行压缩。 = 语音:选择该选项可以使用一个适合于语音的压缩方式导出声音。
第4节 实战演练一——制作教学课件 本章节将制作一个名为“教学课件”的识字辨声动画,完成后,当鼠标光标经过不同
的动物图形时,动物图形将放大,单击时,将发出相应动物的叫声,最终效果如图 9-18所示(光盘\第 09 章\最终效果\教学课件.fla)。制作时,首先制作背景图形与元件,然后为按钮的“按下帧”添加声音。通过本练习,可以巩固为按钮元件添加声音的方法。其具体
操作如下:
图 9-18 “教学课件”最终效果
新建一个 Flash 文档,设置场景的大小为“400×450”像素,背景设为红色,并命名为“教学课件”。 导入“动物.jpg”(光盘\第 09 章\实例素材\动物.jpg)图形素材到场景中,如图 9-19所示。 选择动物图形,按<F8>键将其转换为“背景”图形元件,并在“属性”面板的“颜色”下拉列表框中设置其“Alpha”值为“60%”,如图 9-20所示。
158
Flash 8动画制作
图 9-19 导入图形 图 9-20 设置属性
在混色器中设置填充色为白色到白色的放射状渐变色,将右边白色的“Alpha”值设置为“70%”,如图 9-21所示。 新建图层 2,在场景左上方绘制无边框,圆角半径为“22”的圆角矩形。复制 3个,在“对齐”面板中设置对齐方式,效果如图 9-22所示。
图 9-21 设置“混色器”面板 图 9-22 绘制圆角矩形
在场景上方输入文字“识字辩声练习”,并在“属性”面板中设置为“隶书、50、深红色”。复制一份,将颜色设置为“白色”并添加渐变斜角滤镜效果,如图 9-23所示。
图 9-23 输入文字并设置属性
在圆角矩形中分别输入文字“狗、猫、牛、羊”,并设置为“隶书、40、深红色”,如图 9-24所示。 选择“文件→导入→导入到库”命令,将“狗.eps、猫.eps、牛.eps、羊.eps”导入到库中(光盘\第 09章\实例素材\狗.eps、猫.eps、牛.eps、羊.eps),如图 9-25所示。
设置不透明度
设置不透明度
159
9 制作有声动画
图 9-24 输入文字 图 9-25 导入到库
按<Ctrl+F8>键新建一个名为“狗”的按钮元件,将“狗.eps”图形素材拖入到元件编辑区中,并缩小,如图 9-26所示。 在“指针经过”、“按下”和“点击”帧中插入关键帧,并将“指针经过”帧中的图
形放大,如图 9-27所示。
图 9-26 拖入场景 图 9-27 放大图形
选择“文件→导入→导入到库”命令,将“狗声.wav、猫声.wav、牛声.wav、羊声.wav”导入到库中(光盘\第 09章\实例素材\狗声.wav、猫声.wav、牛声.wav、羊声.wav),如图 9-28所示。 选择“按下”帧,在“属性”面板的“声音”下拉列表框中选择“狗声.wav”选项,如图 9-29所示。
图 9-28 导入到库 图 9-29 选择“狗声.wav”选项
160
Flash 8动画制作
此时时间轴如图 9-30所示。 单击 按钮回到场景中,新建图层 3,将“狗”按钮元件拖入到场景左上方的圆角矩形中,如图 9-31所示。
图 9-30 时间轴 图 9-31 拖入按钮元件到场景
用同样的方法,制作“猫”、“牛”和“羊”按钮元件,分别如图 9-32、9-33和 9-34所示。
图 9-32 “猫”按钮元件 图 9-33 “牛”按钮元件
回到场景中,将“猫”、“牛”和“羊”按钮元件拖入到场景的圆角矩形中,如图 9-35所示。
图 9-34 “羊”按钮元件 图 9-35 将按钮元件拖入场景
按<Ctrl+Enter>键测试动画效果,最终效果如图 9-18所示。
161
9 制作有声动画
第5节 实战演练二——制作音乐卡片 本章节将制作一个名为“音乐卡片”的动画,完成后,可以看到 5线谱不断变色,音
符也起伏移动,并且还能听见悦耳的背景音乐,最终效果如图 9-36 所示(光盘\第 09 章\最终效果\音乐卡片.fla)。制作时,首先制作背景图形与元件,然后新建一个图层作为音频层,为其添加声音并进行编辑。通过本练习,可以巩添加声音和在“编辑封套”对话框
中编辑声音的方法,其具体操作如下:
图 9-36 “音乐卡片”最终效果
新建一个 Flash 文档,设置场景的大小为“550×400”像素,背景为白色,并命名为“音乐卡片”。 导入“小熊.jpg”(光盘\第 09章\实例素材\小熊.jpg)图形素材到场景中作为背景,如图 9-37所示。 新建图层 2,在场景右下方输入文字“每天快乐、开心、健康”,并在“属性”面板中设置为“隶书、25、深红色”,然后添加红色的投影滤镜效果,如图 9-38所示。
图 9-37 导入图形 图 9-38 输入文字并设置
按<Ctrl+F8>键新建一个名为“5线谱”的影片剪辑元件。 用线条工具在元件编辑区中绘制一条曲线,并设置为如图 9-39所示的属性。 在第 5帧、第 10帧和第 15帧插入关键帧,并将第 5帧中的线条设置为“蓝色”,笔触高度为“1”,将第 10帧中的线条设置为“绿色”,笔触高度为“1”。 选取第 1帧,在“属性”面板中的“补间”下拉列表框中选择“形状”选项,在第 1
162
Flash 8动画制作
帧和第 5帧之间创建形状补间动画。用同样的方法在其他关键帧之间创建形状补间动画,如图 9-40所示。
图 9-39 设置曲线属性 图 9-40 创建形状补间动画
按<Ctrl+F8>键新建一个名为“音符”的影片剪辑元件。 在元件编辑区中绘制音符图形,如图 9-41所示。并在该图层第 50帧插入关键帧。 新建引导层并在其中绘制一条曲线,如图 9-42所示,为引导层的第 50帧插入普通帧
图 9-41 绘制音符图形 图 9-42 绘制引导线
为图层 1的第 1帧和第 50帧之间创建补间动画,并将第 50帧中的音符图形移到引导线另一端,如图 9-43所示。 在图层 1上方新建图层 3,在第 9帧插入关键帧并在其中绘制音符图形。在第 50帧出入关键帧,将其中的音符图形移到引导线另一端,并在第 9帧和第 50帧之间创建补间动画,如图 9-44所示。
图 9-43 创建补间动画 图 9-44 新建图层 3并创建补间动画
在图层 3上方新建图层 4,在第 22帧插入关键帧并在其中绘制音符图形。在第 50帧插入关键帧,将其中的音符图形移到引导线另一端,并在第 22帧和第 50帧之间创建补间动画,如图 9-45所示。 回到场景中,将“5 线谱”影片剪辑元件和“音符”影片剪辑元件拖入场景的图层 2中,如图 9-46所示。 新建图层 3作为音频层,选择“文件→导入→导入到库”命令,打开“导入到库”对
163
9 制作有声动画
话框,选择“舒缓.wav”声音素材(光盘\第 09章\实例素材\舒缓.wav),单击【打开】按钮将其导入到库中,如图 9-47所示。
图 9-45 新建图层 4并创建补间动画 图 9-46 拖入场景
为图层 1、图层 2和图层 3的第 64帧插入普通帧。 选择图层 3 的第 1帧,在“属性”面板的“声音”下拉列表框中选择“舒缓.wav”选项,如图 9-48所示。
图 9-47 “导入到库”对话框 图 9-48 “属性”面板
在“属性”面板中单击【编辑】按钮,打开“编辑封套”对话框,在“效果”下拉列
表框中选择“淡入”选项,使声音出现淡入的效果,如图 9-49所示。 将起点游标拖到如图 9-50所示的位置,这时“效果”下拉列表框中为“淡入”选项。
图 9-49 “淡入”选项 图 9-50 设置起点游标
“淡入”选项
“5线谱” “音符”
起点游标
164
Flash 8动画制作
用鼠标光标添加控制柄,通过改变音量控制线的位置来编辑音量的大小与播放时间的
长短,如图 9-51所示。
图 9-51 添加控制柄
将终点游标拖到如图 9-52所示的位置,完成声音的编辑后单击【确定】按钮。 在“属性”面板“同步”栏中选择“数据流”选项,并在后面选择“重复”和“1”次,如图 9-53所示。
图 9-52 设置终点游标 图 9-53 “属性”面板
按<Ctrl+Enter>键测试动画效果,最终效果如图 9-36所示。
第6节 练一练 (1)Flash 8中支持的声音文件包括哪些? (2)在“属性”面板和“编辑封套”对话框中都可以对声音进行编辑吗?应该如何
因为导入的声音一般都不能直接使用,为了使声音听起来连贯自然,这里将声音的终点游标
拖到如图 9-52所示的位置,可以让声音的节奏统一,去掉了后面与开始连接不上的部分。
在学习了本实战演练的制作后,想一想在“编辑封套”对话框中,编辑声音的大小是怎样定义的?
添加控制柄
添加控制柄
终点游标
165
9 制作有声动画
操作? (3)如何为按钮元件的“指针经过”帧添加声音? (4)为什么有时给按钮元件添加了声音,在播放时却不能听到? (5)除了可以在“属性”面板中添加声音,还有其他的方法吗? (6)在“编辑封套”对话框中用鼠标拖动控制柄有什么作用? (7)在输出动画的音频过程中,压缩声音的方法有哪几种? (8)怎样为声音设置输出属性? (9)“声音属性”对话框的“压缩”下拉列表框中有几个选项,各项作用是什么? (10)制作如图 9-54所示的名为“鹅”的动画(光盘\第 09章\最终效果\鹅.fla)。完
成后,点击鹅图形时,可看到鹅变小,向上仰,并可听到鹅的叫声。主要练习为按钮添加
声音的方法,其具体操作如下: 设置场景的大小为“550×400”像素,背景色深绿色。 在场景中绘制一个蓝绿色系放射状渐变的椭圆。 导入“鹅.png”(光盘\第 09章\实例素材\鹅.png)图形素材到库,创建名为“鹅”的按钮元件。 将“鹅.png”图形拖入元件编辑区进行编辑,将“指针经过”帧的图形缩小,并逆时针旋转一点。将“按下”帧的图形放大,并顺时针旋转。 导入“鹅.wav” (光盘\第 09 章\实例素材\鹅.wav)声音素材到库,并添加在“鹅”按钮元件的“按下”帧中。 在“属性”面板中单击【编辑】按钮,在“编辑封套”对话框中对声音素材进行编辑,
使声音不过于冗长。 在“属性”面板中的“同步”栏中选择“事件”选项,并在后面选择“重复”选项和
“1”次。
图 9-54 “鹅”最终效果
(11)制作一个名为“晴天”的动画(光盘\第 09章\最终效果晴天.fla),完成后,天空中将有两朵云彩以不同的速度移动,太阳也慢慢的变化,并能听到悦耳的背景音乐,最
终效果如图 9-55所示。其具体操作方法如下: 设置场景的大小为“450×300”像素,背景色白色。
166
Flash 8动画制作
导入“蓝天.jpg”(光盘\第 09章\实例素材\蓝天.jpg)图形素材到场景作为背景图形。 新建名为“云 1”、“云 2”和“太阳”的影片剪辑元件,在其中创建引导动画和补间动画。 导入“晴天.wav”(光盘\第 09章\实例素材\晴天.wav)声音素材,在场景中新建一个图层添加声音,然后在“编辑封套”对话框中进行设置,使声音听起来连贯自然。
图 9-55 “晴天”最终效果
& “动作”面板简介
& Actions概述
& Actions语法规则
& 添加 Actions的基本方法
观看 Flash动画时,经常会看到漫 天的大雪和交互放大等特殊效果
的 Flash游戏,这些都是用 Actions语句进行编程来实现的。而有些动画可以不
需要任何制作直接使用 Actions 语句就可以实现,大大节约了制作时间。 本章将学习 Actions 语句编程的基
础知识,使读者能制作一些简单 Actions语句编程的特殊动画。
在
10
Actions语句基础
168
Flash 8动画制作
第1节 Actions概述 Actions语句是 Flash中提供的一种动作脚本语言,能够为对象进行编程,具有强大的
交互功能,使动画与用户之间的交互性加强。 通过调用 Action中相应的语句,能使 Flash实现许多特殊的功能。如对动画的播放和
停止进行控制、对鼠标形状进行替换、与网页进行链接、制作游戏和对网页进行交互性的
创建等。因此 Actions是 Flash交互功能不可缺少的重要组成部分。 Actions语句一般由语句、变量和函数组成,主要涉及变量、函数、表达式和运算符等,
下面将介绍它们的属性与应用方法。
1.变量
变量可以看作是用于存储信息的器皿,它可在保持原有名称的同时,使其包含的值随
特定的条件而自动改变。变量可以存储数值、字符串、逻辑值、表达式、对象以及动画片
段等。 一个变量由变量名和变量值组成,变量名可以区分各个不同的变量,变量值可以确定
变量的类型与大小,在动画的不同部分应为变量赋予不同的值。 在使用变量之前,应先指定其存储数据的类型,数值类型将对变量的值产生影响。在
Flash 8中,系统会在给变量赋值时自动确定变量的数据类型。例如:变量“ww=11”,因为此时变量右边的数值为“11”,所以系统会确定变量“ww”为数值型。Flash 8 中的变量有以下 6种类型:
= 逻辑变量:用于判定指定的条件是否成立,其值有两种,True 和 Flase。True即是真,表示条件成立,Flase即是假,表示条件不成立。
= 字符串变量:字主要用于保存特定的文本信息,比如姓名。 = 数值型变量:一般用于存储特定的数值,比如日期、年龄。 = 对象型变量:用于存储对象型的数据。 = 电影片段型变量:用于存储电影片段类型的数据。 = 未定义型变量:当一个变量没有赋予任何值的时候,即为未定义型变量。 变量名可以是一个字母,也可以是由一个单词或几个单词构成的字符串,一般情况下
应为其取一个比较容易记忆与识别的名字。在 Flash 8中为变量命名时必须遵循以下规则: = 变量名在它作用的范围中必须是惟一的。 = 变量名中可以使用数字但不能有空格和特殊符号。 = 变量名通常以小写字母或下划线开头,当出现一个新单词时,新单词的第一个字母大写,如 youName就是一个变量名。
= 变量名不能是逻辑变量或关键字,如 true和 false都是逻辑变量,因此不能作为
在编辑脚本时,明确地知道变量或表达式的数据类型有助于对其具体作用进行了解。使
用 Typeof命令可以对表达式或变量的类型进行确定。
169
10 Actions语句基础
变量名。 = 使用变量时应遵循“先定义后使用”的原则,即在使用变量之前必须先定义这个变量。
变量的作用范围是指该变量能够被识别和应用的区域。在 Actions 中变量可分为全局变量和局部变量两种。全局变量可以在所有引用到该变量的位置使用,而局部变量则只能
在其所在的代码块中使用。 要使用变量,首先应对其作用范围进行声明。在 Actions中使用 set Variables命令能声
明全局变量,使用 var命令能声明局部变量。在“动作-帧”面板左边的命令区域中选择“语句→变量”命令,可以看到 set Variable命令和 var命令,如图 10-1所示。
图 10-1 声明变量
在 Action语句中设置变量的方法很简单。但全局变量和局部变量的定义方法不同。 定义全局变量可以使用等号“=”或 set动作来实现,语法格式如下: 变量名=表达式; set(变量名,表达式); 例如: zhangxiao=221; set("zhangxiao",221) 在这里,我们创建了一个名为 zhangxiao的全局变量,并将其值设置为 221。 定义局部变量可以通过 var语句来实现,语法格式如下: var 变量名; var 变量名=表达式; 例如: var chi; var chi =zc; 在这里,我们创建了一个名为 chi的局部变量,并将其值设置为 zc。
Set Variable命令 var命令
如果对象不含有指定的变量,在第一次为这个变量赋值时,
系统会自动创建该变量。
170
Flash 8动画制作
2.函数
函数是对常量和变量等进行某种运算的方法,是 Actions 语句的基本组成部分之一。函数是一种能够完成一定功能的代码块,它可以在脚本中被事件或其他语句调用。在编写
脚本的过程中,如果一段能够实现特定功能的代码需要经常被使用时,就可编写一个函数
来实现这个功能以代替这段代码。当需要使用这段代码时,只需直接调用这个函数即可,
而不必再写一段代码。 Flash 8中的函数分为系统函数和自定义函数,系统函数是 Flash自带的函数,可以直
接在动画中调用;自定义函数由用户根据需要自行定义,用户可以在自定义函数中定义一
系列的语句,对其进行运算后返回运算结果。 在使用函数之前,首先应对其进行定义,只有在定义函数之后才能调用该函数。在 Flash
中可使用 Function命令进行函数的定义。在“动作-帧”面板左边的命令区域,再选择“语句→用户定义的函数”命令,可看到 Function命令,如图 10-2所示。
图 10-2 定义函数 定义函数时需要使用 Function语句,后面跟一个函数名、传递给函数的参数和指定函
数作用的 Actions语句。参数是指传递给函数的一个命令或值,如 gotoAndplay命令就是以帧编号或帧标签作为参数,以确定跳转并播放哪一帧。
定义函数的格式如下: function functionname ([parameter0, parameter1,...parameterN]){
statement(s); } function ([parameter0, parameter1,...parameterN){
statement(s); } 其中: functionname表示新函数的名称。 parameter是一个标识符,表示要传递给函数的参数。这些参数是可选的。 statement(s)用来为 function的函数体定义动作脚本指令。 例如,下面定义一个名为“yu”的对象,其中有一个参数 yang。
Function命令
如果在调用函数时,提供了函数定
义中不要求的多余参数,这些参数
将被忽略。
171
10 Actions语句基础
function mail (yu) { this. yang=yang;
} 参数是函数代码处理的元素。在调用函数时首先应将该函数要求的参数传递给它,函
数将使用得到的参数取代函数定义中的参数。例如: youyou(1220); 该语句将使用 1220取代函数定义中的参数“finalscore”,将值 1220赋予变量“score”。 当需要从函数中返回值时,可以使用 return命令,例如: function sqr(cm){ return cm * cm } 上述语句的作用是使函数返回参数 cm的平方值。
3.表达式和运算符
表达式是用于为变量赋值的短语。在 Flash 8中包括数值表达式、字符串表达式以及逻辑表达式 3种。
(1) 数值表达式和运算符
数值表达式用于为变量赋予数值,它由数字、数值型变量和算术运算符组成。其算术
运算符包括+、-、*(乘)、/(除)、<>、<=、>=、=。数值表达式的运算法则为先乘除后加减,括号中的内容优先计算,如(36+22)*51/2就是一个数值表达式。
在使用算术运算符时,如果表达式中含有字符串,系统会将字符串转换为数值进行计
算,如"12"+20的值为 32。如果字符串不能被转换为数值,系统会将其赋值为 0后再进行运算,如"yg"+66的值为 66。
(2) 字符串表达式和运算符
字符串表达式是对字符串进行运算的表达式,它由字符串、字符串运算符和以字符串
为结果的函数组成。在 Flash 8中所有双引号括起来的字符都被视为字符串。 如"艳阳"&"依旧"表示将字符串“艳阳”和字符串“依旧”连接,结果是字符串“艳
阳依旧”。 字符串表达式的运算符包括""(字符串号)、&(合并)、= =(等于)、= = =(严
格等于)、!=(不等于)、!= =(完全不等于)、>(大于)、>=(大于等于)、<(小于)和<=(小于等于)。
在使用字符串运算符时,表达式中的数值将自动转换为字符并参与运算,例如字符串
表达式"zhutou"+4的值为"zhutou4"。
如果系统在函数结束之前没有执行 return命令,函数将返回一
个空的字符串。
172
Flash 8动画制作
(3) 逻辑表达式和运算符
逻辑表达式是对执行指定动作时所应具备的条件是否成立进行判断的表达式。它由逻
辑运算符和数值表达式组成,通常应用于 if和 Loop语句中。 逻辑表达式的运算符包括&&(与)、||(或)和!(非)。例如:表达式 mount>25|| mount<18
表示当满足变量mount大于 25或小于 18的条件时,表达式成立,并执行指定动作。
第2节 Actions语法规则 Actions与其他脚本语言一样,有自己的语法规则。在编写 Actions脚本之前,应该先
熟悉其编写时的语法规则,其中常用的主要有点语法、大括号和圆括号、分号、关键字、
字母大小写和注释 7种。
1.点语法
在 Actions中,点“.”用于指定对象的相关属性和方法,也可用于标识指向的动画片段或变量的目标路径。如表达式“gong._x”即表示动画片段“gong”的_x属性。点语法使用的两个特殊别名,_root和_parent,其作用如下:
= _root是指主时间轴,用它可创建一个绝对的路径。 = _parent可以对嵌套在当前动画中的动画片段进行引用,也可使用该别名创建一个相对的目标路径。
2.大括号
Actions语句用大括号{}来分块,如下面的语句就有 3对大括号,第一对大括号单独存在,后面的两对大括号相互嵌套。
for (i=1; i<parts; i++) { x[i] = x[i]+(x[i-1]-x[i])/v1; y[i] = y[i]+(y[i-1]-y[i])/v1; } for (i=1; i<parts; i++) { with (_root["fish"+i]) { _x = (x[i-1]+x[i])/2; _y = (y[i-1]+y[i])/2; _rotation = 66+(132/Math.PI)*Math.atan2((y[i]-y[i-1]), (x[i]-x[i-1])); } }
3.圆括号
在定义和调用函数时,应将所有参数都放在圆括号()中,例如: attachMovie("fin", "ask"+i, parts+1-i);
173
10 Actions语句基础
setProperty("rain", _x, -40+Math.random()*220);
4.分号
分号用在 Actions语句的结束处,用来表示该语句的结束。如果省略分号,Flash 8仍然可以识别编辑的脚本,并在对该脚本格式化后自动加上分号。
5.关键字
在 Actions 中有一些具有特殊含义的单词供其调用,这些单词即称为“关键字”。在编辑脚本的过程中,系统不允许使用这些关键字作为变量、函数以及标签等的名字,以免
发生脚本混乱。在 Actions中有下列关键字: function return void delete if in break for var new continue this while else typeof with
6.字母的大小写
在 Actions中,只有关键字区分大小写,其余 Actions的大小写字母可以混用,但遵守约定规则的书写可以使脚本代码更容易被区分识别。
7.注释
在 Actions脚本的编辑过程中,使用 comment命令可以给动作添加注释,便于对脚本的阅读和理解。注释不参与语句的编译执行,只起注释语句的作用。在脚本中可以直接输
入“//”后输入注释语句,例如: gotoAndplay(23);//跳转到第 23帧并播放 该注释标明了“gotoAndplay (23);”语句的作用。
第3节 “动作”面板简介 在浏览动画时,常常可看到一些动画具有交互效果。如果要为动画中的按钮和关键帧
等添加具有交互性功能的效果,就要为其设置相应的动作。动作是指实现某一具体功能或
实现一系列功能的 Actions命令语句或组合。在 Flash 8中可以通过“动作”面板对 Actions语句进行编辑。
在 Flash 8中,选择“窗口→动作”命令或按<F9>键打开“动作”面板,“动作”面板如图 10-3所示。
“动作”面板主要包括命令区域、当前对象信息区域和语句编辑窗口 3个部分,各部分作用如下:
= 命令区域:左侧上方的命令区域以列表形式列出了 Flash 8中的所有命令。
在 Actions中注释内容以灰色显示且长度不受限制。
174
Flash 8动画制作
图 10-3 “动作”面板
= 当前对象信息区域:左侧下方的列表框中列出了当前选择对象的具体信息,如名称、位置等。
= 语句编辑窗口:右侧的编辑框供用户输入命令。 在“动作”面板的语句编辑窗口上方有一排按钮,如图 10-4所示,在用户输入语句之
后这些按钮将被激活,各按钮的功能与含义如下: = 【将新项目添加到脚本中】按钮 :单击该按钮可在弹出的下拉菜单中选择需
要的命令。 = 【查找】按钮 :单击该按钮可查找指定的字符串。 = 【插入目标路径】按钮 :单击该按钮可在编辑语句时插入一个目标对象的路
径。 = 【语法检查】按钮 :单击该按钮可检查当前语句的语法并给出提示。 = 【自动套用格式】按钮 :单击该按钮可使当前语句按标准格式排列。 = 【显示代码提示】按钮 :将鼠标光标定位到某一位置,单击该按钮可显示它
所在函数的语法格式。 = 【脚本助手】按钮 :对于初次使用 Actions 的用户,或者希望无需学习 Actions 语句及其语法就能添加简单交互性效果的用户,使用“脚本助手”可以轻松地为 Flash文档中添加 Actions语句,如图 10-5所示。
按钮区域
命令区域
当前对象信息区域
语句编辑窗口
“动作”面板的标题栏会随对象的改变而不同,如为帧添加动作时,
标题栏将显示为“动作-帧”,为按钮添加动作时,标题栏将显示为
“动作-按钮”。
175
10 Actions语句基础
图 10-4 按钮区域 图 10-5 脚本助手 在“动作”面板中添加 Actions语句有如下 4种方法: = 直接将动作拖放到命令列表框中。 = 双击面板左侧的“动作”列表中的动作语句。 = 在语句编辑窗口中直接输入要添加的 Actions语句命令。 = 单击按钮区域中的 按钮,在弹出的下拉菜单中选择要添加的动作。
第4节 添加 Actions的基本方法 在“动作”面板中可以为帧、按钮元件和影片剪辑元件添加 Actions语句。
1.为帧添加 Actions
在制作动画的过程中,有时需要为帧添加 Actions语句以控制动画。为帧添加语句后,当动画播放到该帧时会自动执行添加的语句动作。
在 Flash文档中选取任意一帧,按<F9>键打开“动作-帧”面板,在命令区域中选择“全局函数→时间轴控制”命令,可看见为帧添加的语句,双击面板左侧的“动作”列表中的
语句即可添加,如图 10-6所示。
图 10-6 为帧添加Actions语句
2.为按钮添加 Actions
在用 Flash 制作的游戏或 MTV 动画中,经常看到用按钮控制着动画的播放,但并不是创建了按钮元件就能控制播放动画,只有为按钮添加了 Actions语句才能控制播放动画。比如单击某个按钮时,动画跳转到第 126帧并停止动画,其具体操作如下: 在舞台中选中要添加语句的按钮,按<F9>键打开“动作-按钮”面板。 在该面板的命令区域中双击需要的动作命令为该按钮指定相应的动作,这里选择“全
局函数→影片剪辑控制”命令,然后双击“on”选项,在弹出的命令下拉列表框中设置需要的参数,这里设置为“release”,如图 10-7所示。 将鼠标光标移至大括号内,选择“全局函数→时间轴控制”命令,然后双击“gotoandstop”选项,再在语句编辑窗口中的括号内输入“126”,并单击【自动套用格式】按钮 使
格式正确,如图 10-8所示。
时间轴控制的命令
为帧添加的语句
在相应的帧中添加这些
语句,可以使动画按照添
加的语句停止或跳转到
指定的帧开始播放。
176
Flash 8动画制作
图 10-7 “动作-按钮”面板 图 10-8 为按钮元件添加语句
3.为影片剪辑添加 Actions
Flash 动画中的每个影片剪辑元件拥有独立的时间线和唯一的名称。为影片剪辑元件添加语句并指定触发事件后,当事件发生时就会执行设置的语句动作。如要让动画以全屏
播放的具体操作如下: 选中要设置动作的影片剪辑元件,选择“窗口→动作”命令,打开“动作-影片剪辑”面板。 选择“全局函数→影片剪辑控制”命令,然后双击“onClipEvent”选项,在弹出的下拉列表中设置参数为“load”,如图 10-9所示。 选择“全局函数→浏览器/网络”命令,然后双击“fscommand”选项,在其后面添加语句以设置触发事件,如图 10-10所示。
图 10-9 “动作-影片剪辑”面板 图 10-10 为影片剪辑元件添加语句
第5节 实战演练——制作名画鉴赏 本章实战演练将制作一个名为“名画鉴赏”的动画,完成后在动画右上方的按钮上输
入想放大的倍数,再按<Enter>键出现一个放大镜,移动放大镜可以看见场景中的名画被放大镜覆盖的区域将按指定倍数放大,最终效果如图 10-11所示(光盘\第 10章\最终效果\名画鉴赏.fla)。通过该练习,可以熟悉在“动作”面板中添加语句的方法,其中主要使用了stopDrag和 startDrag语句,用户只需按文中说明输入即可。其具体操作如下:
该语句表示动画播
放时以全屏出现
选择此选项
设置参数 选择此选项 输入数字
选择此选项
选择此选项
177
10 Actions语句基础
图 10-11 “名画鉴赏”最终效果
新建一个 Flash文档,然后按<Ctrl+F8>键打开“创建新元件”对话框,创建一个名为“放大镜”的影片剪辑元件。 在元件编辑区中绘制一个放大镜,并填充为白色与黑色的放射状渐变色和红色与黄色
的线性渐变色,如图 10-12所示。 创建一个名为“圆”的影片剪辑元件,选中“放大镜”中心的圆,按【Ctrl+C】键复制,切换到“圆”元件的编辑区,单击鼠标右键,在弹出的快捷菜单中选择“粘贴到
当前位置”命令,可得到一个与放大镜一样大的圆。 创建一个名为“背景”的影片剪辑元件,选择“文件→导入→导入到舞台”命令,导
入图片“世界名画.jpg”(光盘\第 10章\实例素材\世界名画.jpg),如图 110-13所示。
图 10-12 绘制放大镜图形 图 10-13 导入图形
创建一个名为“按钮”的图形元件,在其中用椭圆工具绘制按钮图形,并填充放射状
渐变色,如图 10-14所示。 单击 图标回到场景中,将图层 1命名为“背景”,将“背景”影片剪辑元件拖入到场景中,调整大小使其能完全覆盖场景。 新建一个图层并命名为“背景图片”,在第 2帧插入关键帧,同样将“背景”影片剪辑元件拖入到场景中,调整大小使其能完全覆盖场景。 新建一个图层并命名为“圆”,在第 2帧插入关键帧,将“圆”影片剪辑元件拖放到场景中,然后用鼠标右键单击“圆”图层,在弹出的快捷菜单中选择“遮罩层”命令,
178
Flash 8动画制作
将该图层设为遮罩层,如图 10-15所示。
图 10-14 绘制按钮图形 图 10-15 创建遮罩层
在舞台中选中“圆”影片剪辑元件,在“属性”面板中将该实例命名为“glass”。 新建图层 4并命名为“文字说明”,选择文本工具,在场景左上方输入“世界名画鉴赏”,并设置为“华文新魏、40号、白色”,然后复制一份,将颜色改为深红色。在场景右上方输入其他文字并绘制图形,并设置属性,如图 10-16所示。
图 10-16 绘制图形并输入文字
从“库”面板中将“按钮”图形元件拖入到“放大”二字后面,并调整至适当大小,
完成后的效果如图 10-17所示。 在“文字说明”图层第 2帧插入空白关键帧,在场景右上方绘制圆角矩形并输入“单击 Enter键回到主页面”文字,如图 10-18所示。
图 10-17 拖入按钮元件 图 10-18 绘制图形并输入文字
新建一个图层并命名为“语句”,选中第1帧,单击 按钮,在“属性”面板的
下拉列表框中选择“输入文本”选项,并设置为“Times New Roman、20号、黑色”,在“变量”文本框中输入“v”,如图 10-19所示。 在舞台中的“按钮”图形元件上拖出文本框,并输入“2”。 选择“窗口→公用库→按钮”命令,在打开的“库-按钮”面板中将“arcade button-blue”按钮拖放到舞台中,如图 10-20所示。
179
10 Actions语句基础
图 1-19 “输入文本”属性面板
选中“arcade button-blue”按钮,在“属性”面板中将其“Alpha”值设为“0%”。 在“语句”图层的第 2帧插入关键帧,选中该帧中的“2”,按<Delete>键将其删除,然后将“放大镜”影片剪辑元件拖入到场景中并使其镜面与“圆”影片剪辑元件重合,
如图 10-21所示。
图 10-20 “库-按钮”面板 图 10-21 将放大镜与圆重合
选择“按钮”元件,打开“动作-按钮”面板,在该面板的命令区域选择“全局函数→
影片剪辑控制”命令,然后双击“on”选项,在弹出的命令下拉列表框中设置为“press”,然后在语句编辑窗口中输入语句,如图 10-22所示。
图 10-22 在“动作-按钮”面板输入语句
选择此选项
输入语句
180
Flash 8动画制作
选中“背景图片”图层中的“背景”影片剪辑元件,在“动作-按钮”面板的命令区域
选择“全局函数→影片剪辑控制”命令,然后双击“onClipEvent”选项,在弹出的命令下拉列表框中设置为“enterFrame”,然后在语句编辑窗口中输入语句,完成后单击【语法检查】按钮 和【自动套用格式】按钮 ,如图 10-23所示。
图 10-23 在“动作-按钮”面板输入语句
选中“语句”图层的第 1帧中的“arcade button-blue”按钮,为其添加如下语句: on (release, keyPress "<Enter>"){ play(); }
//当松开鼠标后按 Enter键即可实现放大效果 选中“语句”图层的第 2帧中的 arcade button-blue按钮,为其添加如下语句: on (release, keyPress "<Enter>"){ gotoAndPlay(1); stopDrag(); }
//当松开鼠标后按 Enter键即可跳转并播放第 1帧,并停止被拖动的状态 选中“语句”图层的第 2帧中的“放大镜”,为其添加如下语句: onClipEvent (enterFrame) { _x=_root.B._x; _y=_root.B._y; }
//当进入帧时确定 B的 x、y坐标,即放大镜的位置 选中“语句”图层的第 1帧,为其添加如下语句: stop(); //此时停止播放动画
想一想为什么输入完语句后,要单击【语法检查】按钮和【自动套用格式】按钮?
选择此选项
输入语句
181
10 Actions语句基础
Mouse.show(); stopDrag(); v = "";
//同时放大镜出现,并停止拖放动作 选中“语句”图层的第 2帧,为其添加如下语句: startDrag("B", true); Mouse.hide(); stop();
//在影片剪辑 B上开始拖放动作,同时将鼠标光标,即放大镜隐藏起来 } 按<Ctrl+Enter>键测试,其最终效果如图 10-11所示。
第6节 练一练 (1)Actions语句由哪些部分组成? (2)Flash 8中的变量有哪几种类型?各有什么作用? (3)数值表达式用于为变量赋予数值,它由数字、数值型变量和算术运算符组成。
其算术运算符包括哪些? (4)Actions语句的语法规则有哪些?简述一下它们的作用? (5)怎样打开“动作”面板?“动作”面板由哪些部分组成? (6)为什么在为影片剪辑元件添加动作脚本时要将其命名? (7)在 Flash 8中的表达式有哪些? (8)用 Actions编辑时,使用 comment命令怎么给动作添加注释? (9)在添加脚本语言时,怎么才知道已经为该帧添加了脚本? (10)用“生活.jpg”(光盘\第 10章\实例素材\生活.jpg)图片制作“神奇的放大镜”
动画,完成后的最终效果如图 10-24所示(光盘\第 10章\最终效果\神奇的放大镜.fla),在该动画右上角的按钮上输入想放大的倍数,按<Enter>键出现一个放大镜,移动放大镜,被放大镜覆盖的区域将按指定倍数放大。主要练习为帧、按钮元件和影片剪辑元件在“动作”
面板中添加语句的方法。在制作时,应注意以下 3点: = 由于制作的元件太多,在添加 Actions 语句时不要混淆,应该清楚为某元件添加语句后将出现什么效果。这在注释里已经写清楚。
= 在案例中引用了一个库按钮,这样可以节约制作时间。 = 在“动作”面板中为对象添加了语句后,可以单击【语法检查】按钮和【自动套用格式】按钮,检查添加时是否出错和格式是否正确。
应用本实战演练所讲知识,制作一个“放大镜”动画,主要学习为帧、按钮元件和影片剪
辑元件在“动作”面板中添加语句的方法。
182
Flash 8动画制作
图 10-24 “神奇的放大镜”最终效果
(11)制作名为“美丽烟花”的动画。完成后,场景中将出现烟花,并有散落的动态效果,最终效果如图 10-25所示(光盘\第 10章\最终效果\美丽烟花.fla)。“美丽烟花”动画是利用影片剪辑、Actions语句制作的动画特效效果。在制作时,应注意以下 3点:
= 导入“风景.jpg”(光盘\第 10章\实例素材\风景.jpg)图形素材作为背景。 = 制作多个影片剪辑,通过影片剪辑的调用并配合 Actions语句模拟烟花的爆炸、散落等效果。
= 要注意不要添加错误的语句,在添加语句时,输入法应该处于半角状态。
图 10-25 “美丽烟花”最终效果
& 场景/帧控制语句
& 条件语句 If/Else
& 调用命令 Call
& 循环语句 Loop
& 超级链接命令 getURL
制作 Flash动画的过程中,使用 Actions 语句可以制作出一些较复
杂的特效。比如鼠标跟随、日历等效果,
本章将讲解如何利用 Actions 语句使Flash动画更加生动。
Actions语句功能的增强,使其已经成为 Flash 8中不可缺少的部分,是 Flash强大交互功能的核心。在本章中,将学
习 Actions 语句的基本应用,并利用Actions语句制作具有交互效果的动画作品,使读者掌握 Flash 8中 Actions语句的基本应用方法。
在
11
常用的 Actions语句
184
Flash 8动画制作
在 Flash 8中,利用一些简单而常用的 Actions语句可以对动画的播放进行控制,为元件或指定的对象添加特定的动作。
第1节 场景/帧控制语句 在 Flash 8中提供了许多语句来控制动画时间轴的播放进程,为帧添加的常用语句有以
下几种: = play:使影片从当前帧开始继续播放。 = stop:使影片停止在当前时间轴的当前帧中。 = gotoAndPlay:跳转到用帧标签或帧编号指定的某一特定帧并继续播放。 = gotoAndStop:跳转到用帧标签或帧编号指定的某一特定帧并停止播放。 = prevFrame:使动画回到上一帧并停止播放。 = nextFrame:使动画转到下一帧并停止播放。
1.播放影片语句 Play
要让停止在某一帧的动画播放,可以为动画相应的帧或影片剪辑元件添加 play语句,Play语句的作用是使停止播放的动画继续进行播放,通常用于控制影片剪辑元件。
播放 play语句的语法格式为: play();
2.停止语句 Stop
在默认情况下,使用 Play语句播放动画后,动画将一直播放,不会停止,如果需要动画停止则需要在相应的帧或按钮中添加 Stop语句。Stop语句的作用是停止当前正在播放的动画文件,通常用于控制影片剪辑元件。
停止语句 Stop的语法格式为: stop();
3.跳转语句 goto
跳转语句 goto分为跳转并播放语句 gotoAndPlay和跳转并停止语句 gotoAndStop两种类型。
(1) 跳转并播放语句 gotoAndPlay
gotoAndPlay 语句一般添加在帧或按钮元件上,其作用是当播放到某帧或单击某按钮时,跳转到场景中指定的帧并从该帧开始播放。如果未指定场景,则跳转到当前场景中的
指定帧。
该语句可直接添加在影片剪辑元件或帧中,对指定的影片剪辑元件或动画进行控制。
该语句可直接添加在影片剪辑元件或帧中,对指定的影片剪辑元件或动画进行控制。
185
11 常用的 Actions语句
跳转并播放语句 gotoAndPlay的语法格式如下: gotoAndPlay([scene,] frame) 其中: frame表示跳转到的帧编号的数字,或者一个表示播放头将转到的帧标签的字符串。 scene为可选字符串,指定跳转到的场景的名称。 如下面的语句就表示当用户单击分配了 gotoAndPlay动作的按钮时,将跳转到当前场
景中的第 10帧并开始播放动画文件。 on (release) {
gotoAndPlay(10); }
(2) 跳转并停止语句 gotoAndStop
gotoAndStop 语句一般添加在帧或按钮元件上,其作用是当播放到某帧或单击某按钮时,跳转到场景中指定的帧并停止播放。如果未指定场景,则跳转到当前场景中的帧。其
语法格式如下: gotoAndStop([scene,] frame) 其中: frame表示跳转到的帧的编号的数字,或者跳转到的帧标签的字符串。 scene为可选字符串,指定跳转到的场景的名称。 如下面的语句就表示当用户单击分配了 gotoAndStop动作的按钮时,将跳转到当前场
景中的第 23帧并停止播放动画文件。 on (release) {
gotoAndStop(23); } 为帧添加 gotoAndStop命令的不同之处是,按钮的 Action语句多了用于判定动作的语
句,该语句有具体的设置项目,应根据实际需要选择相应的项目。
第2节 条件语句 If/Else if语句和 else语句一般情况下应同时使用。else语句则必须与 if语句配合使用,否则
没有意义。
1.If语句
if语句用来判断条件是否成立,根据判断的结果为真(true)或为假(false)执行不同的操作。
if语句的用法如下:
goto 语句既可以添加在按钮元件或影片剪辑元件上,
也可以添加在帧上。
186
Flash 8动画制作
if(condition) { statement(s); } 其中 condition指需要满足的条件,statement(s)指要执行的动作,翻译成中文就是: if(条件) { 条件满足后要执行的语句; } 它表示如果满足 if后面的条件,则执行下面的语句。比如: if(x==63){ gotoAndPlay(33); } 表示首先判断X是否等于 63,如果比较结果为 true,则让影片跳到第 33帧并播放。
2.Else语句
Else语句不能单独使用,它必须与 if语句配合使用才有意义。if语句只有在满足语句中的条件时才能继续执行后面的动作。如果不能满足 if语句的条件时,则执行 Else语句中的动作。
Else语句的语法格式如下: if (condition) {
statement(s); }else(condition){
statement(s); } 其中: condition指需要满足的条件。 statement(s)指要执行的语句。 是指当满足 if后面的条件 condition时,执行它后面的 statement(s)语句;如果没有满
足 if后面的条件,则执行 Else后面的 statement(s)语句。 例如下面的语句就表示判断X是否大于 86,如果大于 86,动画跳转到第 2帧并播放,
如果小于或等于 86,动画跳转并停止在第 41帧。 if (x>86) {
gotoAndPlay(2); }else{
gotoAndStop(41); }
3.else if语句
Else 语句位于“语句”选项的
“条件/循环”选项中。
187
11 常用的 Actions语句
还可以通过 else if语句配合 if语句使用,可以实现对更多条件的判断。 else if语句的语法格式如下: if (condition){ statement(s); } else if (condition){ statement(s); } 其中 condition指需要满足的条件,statement(s)指要执行的动作,翻译成中文就是: if (条件 1) { 满足条件 1后执行的语句; } else if (条件 2) { 满足条件 2后执行的语句; } 比如: if(x==26){ gotoAndPlay(32); }elseif(x==22){ gotoAndPlay(56); }else{ gotoAndPlay(36); } 表示首先判断 X是否等于 26,如果判断结果为 true,则让 Flash动画跳转到第 32帧
播放;如果 X等于 22,则让 Flash动画跳转到第 56帧播放;如果两个条件都不满足,则让 Flash动画跳转到第 36帧播放。
第3节 调用命令 Call call命令可以调用某特定帧并执行该帧里的 frame script。 call命令的用法如下: call(“ABC”); 其中“ABC”指调用帧的名称,这个命令是指执行该帧的 frame script。 或者 call(89); “89”指调用第 89帧,并执行该帧的 frame script。 比如: on(release){
188
Flash 8动画制作
call(6); } 表示调用场景上第 6帧的 frame script。
第4节 循环语句 Loop 在 Flash 8中可以通过循环语句重复执行某条语句或某段程序,循环语句中比较常用的
有While语句、do While语句和 For语句。这些语句都位于“动作”面板的“语句”选项中的“条件→循环”选项中。
1.While语句
While 语句可重复执行某条语句或某段程序。使用 while 语句时,系统会先计算一个表达式,如果表达式的值为 true,就执行循环的代码。在执行完循环的每一个语句后,while语句会再次对该表达式进行计算,如果表达式的值仍为 true,会再次执行循环体中的语句,直到其值为 false。
while语句的语法格式如下: while(condition) }
statement(s); } 其中: condition指每次执行 while动作时都要重新计算的表达式。 statement(s)指条件计算结果为 true时要执行的指令。 例如下面的语句表示为 snow赋予初值 0,while语句中的条件为 snow<60。如果 snow
的值小于 60,就执行 gotoAndPlay(2)语句,每循环一次就通过 snow=snow+3语句为 snow的值加 3。当 while语句循环了 20次后,即 snow的值不符合小于 60的条件时,终止循环并执行其后的 gotoAndPlay(5)语句,实现跳转到第 5帧并继续播放的动作。
snow=0; while(snow<60) {
gotoAndPlay(2); snow=snow+3;
} gotoAndPlay(5);
2.do While语句
do while语句与 while语句相似,都是循环语句。该语句先处理一次(statement)里的程序并判断是否符合条件,若符合条件则继续执行,若不符合条件,则跳出 do while循环并执行循环外的下一行程序。
例如:
189
11 常用的 Actions语句
do{ gotoAndPlay(n+2); } while(n<77); 表示当 n<77时,执行当前的 do While循环,一次前进 2帧。
3.For语句
for语句是经常使用的循环语句,当需要重复执行某种操作时就要用到 for语句。 for语句的语法格式如下: for (i=beginNumber; i<=endingNumber; i+=step) { statement(s); } 其中,for后面的括号中有 3条语句,第 1条语句为循环变量赋初值;第 2条语句作为
循环变量的判断条件,即当变量满足该条件时执行循环体中的语句(这里执行
statement(s););第 3条语句是每执行一次循环要对变量进行的操作,step是一个步长值,这里是在每次循环结束后给循环变量 i加一个步长 step。
例如: for(var k=44;k>22;k--){
trace(k); } for后面括号中的 3个部分含义如下: = 第 1部分声明一个局部变量,在本例中创建一个局部变量 k并将其设置为 44。该部分只在循环体开始执行前执行一次。
= 第 2部分作为一个供测试的条件,测试 k是否大于 22。如果满足条件则反复执行循环。循环开始的时候 k等于 44,是大于 22的,所以循环得以执行。
= 第 3部分是一个运算表达式,每完成一次循环都将执行该表达式一次。这里 k每次递减 1,然后转到第 2部分对 k的新值进行判断。
第5节 超级链接命令 getURL 超级链接 getURL 语句的作用是使某帧或按钮链接到某个网页或实现发送邮件等操
作。getURL语句在“全局函数”选项的“浏览器→网络”选项中。 getURL语句的语法格式如下: getURL(url[,window[,"variables"]]); 其中: url表示需要链接到的网页地址(如 http://www.sougua.com)。 window表示用于设置网页打开的位置。 Variables表示用于设置发送变量的方式。 例如,要在动画中单击某个按钮后打开网页“http://www.sougua.com”,可以使用如
下语句表示:
190
Flash 8动画制作
On (release){ getURL("http://www.sougua.com");
}
第6节 实战演练一——制作智能手表 本章实战演练将制作名为“智能手表”的动画,不论在什么时间打开该动画,都可以
看到其中手表指针指示的时间与电脑当前的系统时间一致,还可以显示当前的日期和星期,
并且手表中表盘的背景,每过一分钟都会更换一张不同的画面,最终效果如图 11-1所示(光盘\第 11章\最终效果\智能手表.fla)。通过制作,可以掌握使用 Actions语句中的 Date对象获取系统时间,并根据当前系统时间实现指针定位、日期显示和背景切换的方法。其具
体操作如下:
图 11-1 “智能手表”最终效果
新建一个 Flash文档,将场景大小设置为“248×400”像素,背景色为黑色。 选择“文件→导入→导入到舞台”命令,将“biao.jpg”图形素材(光盘\第 11章\实例素材\biao.jpg)导入到舞台中,如图 11-2所示。 将图层 1重命名为“biao”,并在“biao”图层上新建一个图层,命名为“back”。将“back”图层作为表盘所在的图层,如图 11-3所示。
图 11-2 导入图形 图 11-3 新建图层 选择椭圆工具,按住<Shift>键在“back”图层上绘制一个正圆,调整其大小和位置使其覆盖手表图形原来的表盘,如图 11-4所示。
191
11 常用的 Actions语句
选中“back”图层的圆,按<F8>键将其转换为影片剪辑元件,在打开的“转换为元件”对话框中将其命名为“back”。在“库”面板中双击“back”影片剪辑元件进入元件编辑区。 在 back元件中新建图层 2,并将其拖到图层 1下方。 选中图层 2的第 1帧,选择“文件→导入→导入到库”命令,在打开的“导入到库”对话框中选择“1.jpg~20.jpg”图形(光盘\第 11章\实例素材\1.jpg~20.jpg),如图 11-5所示,单击【打开】按钮将图形导入到库中。
图 11-4 绘制圆形 图 11-5 “导入到库”对话框
选取图层 2的第 1帧到第 20帧,按<F6>键插入关键帧,将“1.jpg~20.jpg”图形分别拖入到其中。 单击时间轴下方的【编辑多个帧】按钮 ,再单击【修改绘图纸标记】按钮 ,在弹
出的下拉菜单中选择“绘制全部”命令,此时的时间轴如图 11-6所示。 锁定图层 1,使用选择工具框选导入的所有图形,使用“对齐”面板将所有的图形对齐到场景中心,然后单击【编辑多个帧】按钮 取消编辑多帧,如图 11-7所示。
图 11-6 时间轴 图 11-7 对齐到场景中心
在图层 1的第 20帧插入普通帧,在图层区的图层 1上单击鼠标右键,在弹出的快捷菜单中选择“遮罩层”命令,将图层 1转换为遮罩层。
192
Flash 8动画制作
选择图层 1的第 1帧,打开“动作-帧”面板,在其中添加如下 Actions语句: stop(); 回到场景中,此时的“back”影片剪辑元件将停留在第 1帧上,如图 11-8所示。 按<Ctrl+F8>键新建一个名为“hourhand”的图形元件作为时针,如图 11-9所示。
图 11-8 “back”影片剪辑元件 图 11-9 “hourhand”图形元件
按<Ctrl+F8>键新建一个名为“minutehand”的图形元件作为分针,如图 11-10所示。 按<Ctrl+F8>键新建一个名为“secondhand”的图形元件作为秒针,如图 11-11所示。
图 11-10 “minutehand”图形元件 图 11-11 “secondhand”的图形元件
按<Ctrl+F8>键新建一个名为“hour”的影片剪辑元件。将“hourhand”图形元件拖到“hour”影片剪辑元件的元件编辑区中,注意让其转动轴心对准场景中心。 选中“hour”影片剪辑元件的第 1帧,在“属性”面板的“补间”下拉列表框中选择“动画”选项,并设置为顺时针旋转两次,如图 11-12所示。 在第 121帧处插入关键帧,将其“属性”面板设置为如图 11-13所示。
图 11-12 第 1帧“属性”面板 图 11-13 第 121帧“属性”面板
为什么不在第 120帧插入关键帧,而要选择第 121帧呢?
193
11 常用的 Actions语句
选中 hour元件的第 1帧,在其“动作”面板中添加如下 Actions语句: stop(); 用相同的方法利用“minutehand”图形元件创建“minute”影片剪辑元件,将其设为 61帧,并顺时针旋转 1次。在第 1帧的“动作”面板中添加 stop();语句。 用相同的方法利用“secondhand”图形元件创建“second”影片剪辑元件,将其设为 61帧,并顺时针旋转 1次。在第 1帧的“动作”面板中添加 stop();语句。 按<Ctrl+F8>键新建一个名为“center”的图形元件,使用椭圆工具和放射渐变色将其绘制成如图 11-14所示的状态和大小,将其作为表盘中心。
图 11-14 “center”图形元件及其参数
回到场景中,在图层区依次添加“hour”、“minute”、“second”和“center”4个图层,将影片剪辑元件“hour”、“minute”、“second”和图形元件“center”分别拖放到各自对应的层中,并用标尺和网格结合缩放工具将其中心对齐,如图 11-15所示。
图 11-15 图层区和手表状态
在“back”图层上方新建一个图层,命名为“date”。在“date”图层中使用文本工具绘制如图 11-16所示的两个文本框,用于显示星期和日期。 在“属性”面板中将其设置为动态文本,并分别添加变量 theweek和 thedate,如图 11-17和 11-18所示。
因为最后一帧与第 1帧的位置是重合的,它是不得不多出来的一帧。120帧分配到一
天 24小时上也就是每小时 5帧,即时针走时精确到 12分钟。也可以将其设得更加
精确,只需要增加 hour元件的总帧数即可。
194
Flash 8动画制作
图 11-16 添加动态文本框 图 11-17 设置动态文本变量 theweek
在“date”图层下方新建图层并命名为“dateback”,为动态文本添加边框和底纹,如图 11-19所示。
图 11-18 设置动态文本变量 thedate 图 11-19 为动态文本添加边框和底纹
选中“back”图层的“back”影片剪辑元件实例,在“属性”面板的“实例名称”文本框中将其命名为“back”,如图 11-20所示。 按照相同的方法分别将“hour”、“minute”和“second”影片剪辑元件的实例命名为“hour”、“minute”和“second”,如图 11-21所示。
图 11-20 命名实例名称 图 11-21 命名实例名称
选中“back”影片剪辑元件实例,在其“动作”面板中添加如下 Actions语句: onClipEvent (load) { days = new Array('SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'); datetime = new Date(); }//在 onClipEvent(load)事件中为星期分配一个数组,分别存储星期日到星期六的英文
缩写。然后使用 new Date方法获取一个新的系统时间 onClipEvent (enterFrame) { datename = datetime.getDate(); day = datetime.getDay(); dayname = days[day];
195
11 常用的 Actions语句
hours = datetime.getHours(); minutes = datetime.getMinutes(); seconds = datetime.getSeconds();//在 onClipEvent(enterFrame)事件中使用获取的系
统时间控制各影片剪辑实例的相应动作 switch (int(minutes/20)) { case (0) : _root.back.gotoAndStop(minutes+1); break; case (1) : _root.back.gotoAndStop(minutes-19); break; case (2) : _root.back.gotoAndStop(minutes-39); break; }//控制 back实例(即表盘背景)每分钟后移一帧,因为 back元件中只有 20帧,
所以使用 case语句将其设置为每 20分钟轮换一次 switch (int(minutes/12)) { case (0) : _root.hour.gotoAndStop(5*hours+1); break; case (1) : _root.hour.gotoAndStop(5*hours+2); break; case (2) : _root.hour.gotoAndStop(5*hours+3); break; case (3) : _root.hour.gotoAndStop(5*hours+4); break; case (4) : _root.hour.gotoAndStop(5*hours+5); break; }//控制 hour实例(即时针)每 12分钟后移一帧 _root.minute.gotoAndStop(minutes+1); _root.second.gotoAndStop(seconds+1); _root.theweek = dayname; _root.thedate = datename; delete datetime;
196
Flash 8动画制作
datetime = new Date(); }//用于删除前一时刻获取的系统时间并重新获取新的系统时间,从而实现了时间的即
时更新。这是该“手表”能永不停息地准确走时的保证 在“back”图层上方新建一个图层,并命名为“flash”,在其中输入“FLASH 8”,并在“属性”面板中设置为“Monotype Corsiva、15、红色、加粗”,然后添加白色的发光滤镜效果,如图 11-22所示。
图 11-22 输入文字并设置
按<Ctrl+Enter>键测试,最终效果如图 11-1所示。可以看到手表的走时与系统时间是一致的。
第7节 实战演练二——制作鼠标跟随 本实战演练将制作名为“鼠标跟随”的交互式动画,完成后,可以看到有一串旋转的
灯泡随鼠标移动而移动,最终效果如图 11-23所示(光盘\第 11章\最终效果\鼠标跟随.fla)。通过制作此实例可以体会 Flash中 Actions语句的作用,并巩固“动作”面板的使用,学习添加可以使影片剪辑元件可随鼠标移动的语句。其具体操作如下:
图 11-23 “鼠标跟随”最终效果
新建一个 Flash 文档,将场景大小设置为“550×400”像素,背景设置为白色,并命名为“鼠标跟随”。 选择图层 1,导入“绿色.jpg”图形(光盘\第 11章\实例素材\绿色.jpg),并将其缩放到与场景相同大小作为背景图形,如图 11-24所示。
197
11 常用的 Actions语句
图 11-24 导入图形
按<Ctrl+F8>键新建一个名为“hua”的影片剪辑元件,如图 11-25所示。 在元件编辑区中用椭圆工具、线条工具和混色器绘制如图 11-26所示的图形。
图 11-25 “创建新元件”对话框 图 11-26 绘制图形
分别在第 3、5和 7帧插入关键帧,如图 11-27所示。 将第 3帧、第 5帧和第 7帧中的图形进行不同比例的缩小,如图 11-28所示。
图 11-27 时间轴 图 11-28 缩小图形
新建一个名为“zhuanhua”的影片剪辑元件,从“库”面板中将“hua”影片剪辑元件拖入影片剪辑元件编辑区中。 分别在第 1、5、10、15、20和 25帧插入关键帧,如图 11-29所示。
图 11-29 插入关键帧
在“变形”面板中分别设置第 5、10、15和 20帧中对象的旋转角度为“60°”、“120
198
Flash 8动画制作
°”、“-60°”和“-120°”,如图 11-30所示。
图 11-30 第 5、10、15和 20帧的图形
在各关键帧间创建补间动画,如图 11-31所示,完成后切换到场景中。
图 11-31 创建补间动画
在场景中新建图层 2,从“库”面板中将“zhuanhua”影片剪辑元件拖入到场景中的图层 2,如图 11-32所示。 在“属性”面板中将“zhuanhua”影片剪辑元件命名为“zh”,如图 11-33所示。
图 11-32 拖入场景 图 11-33 命名实例
在图层 1和图层 2的第 25帧处插入普通帧。 新建图层 3,并将其重命名为“语句”图层,如图 11-34所示。 分别在“语句”图层的第 3、5、7、10、13、15、17、21、23和 25帧处,插入关键帧,如图 11-35所示。 选中“语句”图层的第 1帧,在“动作”面板中为其添加如下 Actions语句: startDrag("zh", true); //设置“zh”影片剪辑元件可随鼠标移动
想一想为什么这里要将“zhuanhua”影片剪辑元件命名为“zh”,这样有什么作用?
199
11 常用的 Actions语句
图 11-34 重命名图层
图 11-35 插入关键帧
选中第 3帧,在“动作”面板中为其添加如下 Actions语句: duplicateMovieClip("zh", "zh1", 1); //复制“zh”影片剪辑元件为“zh1”影片剪辑元件 选中第 5帧,在“动作”面板中为其添加如下 Actions语句: duplicateMovieClip("zh", "zh2", 2); //复制“zh”影片剪辑元件为“zh2”影片剪辑元件 在余下的关键帧中添加同样的语句,所不同的是,在第 7帧中为“zh3”及数值 2变为3,以此类推,依次加 1,如在第 10帧中为 zh4,4;在第 17帧中为 zh7,7等,一直添加到第 23帧为止。
选中第 25帧,在“动作”面板中为其添加如下 Actions语句: gotoAndPlay(1); //跳转到第 1帧并播放
添加完 Actions语句后,即完成动画的制作,按<Ctrl+Enter>键播放动画,最终效果如图 11-23所示。
第8节 练一练 (1)如果希望动画停止播放,可以在想要停止的帧上添加哪种 Actions语句? (2)当播放到某帧或单击某按钮时,跳转到场景中指定的帧并停止播放,用的是哪
一种语句? (3)Else语句不能单独使用,那么它必须与什么语句配合使用才有意义? (4)While语句可重复执行某条语句或某段程序,其语法格式是什么? (5)for语句有什么作用,采用什么样的语法格式? (6)利用条件语句 if可以建立一个什么动作,且只有当 if中设置的条件成立时,才
能继续执行后面的动作。
用本实战演练的制作方法,制作其他的鼠标跟随效果,可以把跟随鼠标的图形绘制成星形、
动物或其他的图形,改变帧频,看有什么变化。
200
Flash 8动画制作
(7)利用我们前面学习的知识制作一个名为“星光”的鼠标跟随动画,要求鼠标划过场景时,有星光闪闪的效果,最终效果如图 11-36所示(光盘\第 11章\最终效果\星光.fla)(光盘\第 08章\实例素材\魔幻.jpg)。
图 11-36 “星光”最终效果
& “组件”面板简介
& 复选框组件
& 单选框组件
& 下拉列表框组件
& 列表框组件
& 按钮组件
& 滚动条组件
Flash 8中,“组件”面板是一个 经常使用到的面板,想要做一个
交互式动画,如调查表、选择题等。使
用“组件”面板中的组件,可以节约很
多时间。在“组件”面板中最常用的是
UI Components类型组件,掌握了常用组件的使用后,制作交互式动画时,就更
加容易。 本章将学习如复选框、单选框、下
拉列表框、列表框、按钮和滚动条组件
的添加和设置等,利用这些组件的组合,
配合相应的 Actions语句,就可以制作出具有交互功能的交互式动画。
在
12
制作交互式动画
202
Flash 8动画制作
第1节 “组件”面板简介 Flash 8 中有一些用于制作交互动画的组件,通过这些组件的组合,再配合相应的
Actions语句,可以制作出具有交互功能的动画。 组件是带有参数的影片剪辑元件,这些参数可以修改组件的外观和行为。组件可以提
供许多功能,它既可以是简单的用户界面控件,例如按钮或复选框,也可以包含内容,还
可以是不可视的。 即使用户对动作脚本没有深入的了解,也可使用组件构建复杂的 Flash 8应用程序。因
为用户不必自己创建按钮、组合框或列表等,只需将这些组件从“组件”面板拖到应用程
序中即可为应用程序添加相应功能。还可以方便地自定义组件的外观和行为来满足自己的
设计需求。 在 Flash 8中选择“窗口→组件”命令,打开“组件”面板,在 User Interface下可看
到系统自带的所有组件,如图 12-1所示。其中最常用的组件包括复选框组件 CheckBox、单选框组件 RadioButton、下拉列表框组件 ComboBox、列表框组件 List和按钮组件 Button。
图 12-1 “组件”面板
组件按字母顺序排列,也可以按类别排列。每个组件都有预定义参数,在制作 Flash的过程中可以设置这些参数。每个组件还有一组独特的动作脚本方法、属性和事件,它们
也被称为 API“应用程序编程接口”,使用户可以在运行时设置参数和其他选项。 每个组件描述都包含了以下方面的信息: = 键盘交互与实时预览。 = 辅助功能。 = 设置组件参数。 = 在应用程序中使用组件。 = 自定义组件的样式和外观。 = 动作脚本方法、属性和事件。
第2节 复选框组件 CheckBox 复选框组件 CheckBox一般作为表单或Web应用程序中的一个基础部分,通过单击来
按<Ctrl+F7>键可以
打开或隐藏“组件”
面板。
203
12 制作交互式动画
确定复选框的选中或未选中状态,用于收集一组非相互排斥的 true或 false值。
(1) 创建复选框
打开“组件”面板,在 User Interface组件类型中选择复选框组件 CheckBox,按住鼠标左键不放将其拖动到场景上,完成复选框的创建,如图 12-2所示。
图 12-2 创建复选框
(2) 设置复选框属性
选中场景中的复选框组件,在展开的“属性”面板中单击右上角的“参数”选项卡,
可看见复选框组件的参数列表框,如图 12-3所示。
图 12-3 复选框参数
在复选框组件的“参数”选项卡中各项参数的含义如下: = Label:可确定复选框右边的显示内容,默认值是“CheckBox”。 = LabelPlacement:可确定复选框上标签文本的位置。其中包括 4个选项:“left”、“right”、“top”和“bottom”,默认值是“right”。
= Selected:可确定复选框的初始状态为选中状态 true或取消选中状态 false。
第3节 单选框组件 RadioButton 单选框组件 RadioButton允许在相互排斥的选项之间进行选择,RadioButton组件必须
用于至少有两个 RadioButton实例的组。在 Flash中创建一组单选项可以形成一个系列的选择组,用户只能在其中选择某一个选项,选中一个选项后,将取消选择组内之前选定的单
选项。 利用 User Interface组件中的单选框组件 RadioButton可以创建多个单选项,并为其设
置相应的参数。用户可以设置 groupName 参数,以指明单选按钮属于哪个组。
204
Flash 8动画制作
(1) 创建单选框
创建单选框的具体操作与复选框类似,只需在“组件”面板下的 User Interface类中选择单选框组件 RadioButton,按住鼠标左键拖动到场景上即可,如图 12-4所示。
图 12-4 创建单选框组件RadioButton
(2) 设置单选框属性
与复选框相同,将单选框组件拖放到场景中,在展开的“属性”面板中单击右上角的
“参数”选项卡,在选项卡中可以设置其参数,如图 12-5所示。
图 12-5 单选框组件RadioButton的“参数”面板
在单选框组件的“参数”选项卡中各项参数的含义如下: = data:它没有默认值,是一个文本字符串数组,可为 Label参数中各项目指定相关联的值。
= groupName:可指定当前单选项所属的单选项组,该参数相同的单选项为一组,并且在一组单选项中只能选择一个单选项。
= label:默认值是“Radio Button”,可设置单选项的文本值。 = labelplacement:其默认值为“right”,可确定单选项旁边标签文本的方向,其中包括 4个选项:“left”、“right”、“top”或“bottom”。
= selected:其默认值为“false”,可确定单选项的初始状态为被选中状态 true或取消选中状态 false,被选中的单选按钮中会显示一个圆点。一个组内只可能有一个单选项被选中。如果一组内有多个单选项被设置为“true”,则会选中最后实例化的单选项。
205
12 制作交互式动画
第4节 下拉列表框组件ComboBox 下拉列表框组件可以在列表顶部有一个可编辑的文本字段,以允许用户搜索此列表。
(1) 创建下拉列表框
创建下拉列表框与创建复选框相似,在“组件”面板下的 User Interface类中选择下拉列表框组件 ComboBox,按住鼠标左键将其拖动到场景上即可,如图 12-6所示。
图 12-6 创建下拉列表框组件ComboBox
(2) 设置下拉列表框属性
在场景中选中下拉列表框组件,在“属性”面板中选择“参数”选项卡,可以看见下
拉列表框组件的相关参数,如图 12-7所示。
图 12-7 下拉列表框组件ComboBox的参数面板
在的“参数”选项卡中各项参数的含义如下: = data:可将一个数据值与 ComboBox组件中的每个项目相关联。 = editable:默认值为“false”,可决定用户是否能在下拉列表框中输入文本。能输入文本,选择“true”,不能输入文本,选择“false”。
= labels:可设置一个文本值数组,以此来决定下拉列表框组件下拉菜单的显示内容。单击该项右边的 按钮,将打开“值”对话框,单击左上角的 按钮,可以为下
拉列表添加一个选项,单击 按钮,可以删除当前选中的选项。单击 或 按钮,
可以改变选项的排列顺序。 = rowCount:默认值为 5,可确定在不使用滚动条时最多能显示多少项目数。
206
Flash 8动画制作
第5节 列表框组件 List 列表框 List组件是一个可滚动的单选或多选列表框,可以显示图形和文本。
(1) 创建列表框
在“组件”面板的 User Interface类型中选择列表框 List组件,按住鼠标左键将其拖动到场景上即可创建列表框,如图 12-8所示。
图 12-8 创建列表框
(2) 设置列表框属性
选中场景中的列表框组件,在其“属性”面板的“参数”选项卡中可设置列表框组件
的参数,如图 12-9所示。
图 12-9 列表框参数
该选项卡中各项参数的含义如下: = data:文本字符串数组,可填充列表数据的数值组,为 label参数中各项目指定相关联的值,其内容必须与 labels完全相同。
= labels:与下拉列表框组件的“labels”选项类似,单击右边的 按钮打开“值”
对话框,其设置方法与下拉列表框组件类似。 = multipleSelection:可确定是否能选择多个选项,选择“true”选项表示能选择多个选项,选择“false”选项表示不能选择多个选项。
= rowHeight:可确定每个选项的高度,以像素为单位,默认值是 20。
207
12 制作交互式动画
第6节 按钮组件 Button 按钮组件 Button可执行鼠标和键盘的交互事件,用户可以将按钮的行为从按下改为切
换,在单击切换按钮后,它将保持按下状态,直到再次单击时才会返回到弹起状态。
(1) 创建按钮
打开“组件”面板下的 User Interface组件类型,选中 Button组件,按住鼠标左键不放将其拖动到场景上即可完成按钮的创建,如图 12-10所示。
图 12-10 创建按钮组件
(2) 设置按钮属性
选中场景中的按钮组件,在“属性”面板中单击右上角的“参数”选项卡,如图 12-11所示。
图 12-11 按钮组件参数
在按钮组件的“参数”选项卡中各项参数的含义如下: = icon:可为按钮添加自定义图标,在其后的文本框中可以输入图标的位置。 = label:决定按钮上显示的内容,默认值是“Button”。 = labelPlacement:可确定按钮上的标签文本相对于图标的方向。其中包括 4个选项:“left”、“right”、“top”和“bottom”,其默认值是“right”。
= selected:可指定按钮是按下状态 true或释放状态 false,前提是 toggle的值是“true”,默认值为“false”。
在Flash中的按钮组件Button可以使用自定义图标来自定义其大小。
208
Flash 8动画制作
= toggle:可确定是否将按钮转变为切换开关,其默认值为“false”,不转变为切换开关。
第7节 滚动条组件 ScrollPane 滚动条组件 ScrollPane用于在某个大小固定的文本框中无法将所有内容显示完全时使
用。滚动条是动态文本框与输入文本框的组合,在动态文本框和输入文本框中添加水平和
竖直滚动条,可以通过拖动滚动条来显示更多的内容。
(1) 创建滚动条
在“组件”面板的 User Interface类型中选择滚动条 ScrollPane组件,按住鼠标左键不放将其拖动到场景上即可完成滚动条的创建,如图 12-12所示。
图 12-12 创建滚动条组件
(2) 设置滚动条属性
选中场景中的滚动条组件,在其“属性”面板的“参数”选项卡中可设置滚动条组件
的参数,如图 12-13所示。
图 12-13 滚动条组件参数
该选项卡中各项参数的含义如下: = contentPath:可确定要加载到滚动条中的内容所在的位置。 = hLineScrollSize:可确定每单击水平滚动条两边的箭头按钮时,滚动条左右移动多少个单位,默认值为 5。
= hPageScrollSize:可确定每按下水平滚动条时轨道水平移动多少个单位,默认值为 20。
= hScrollPolicy:可确定是否显示水平滚动条。该值可以为“on”(显示)、“off”
209
12 制作交互式动画
(不显示)或“auto”(自动),默认值为“auto”。 = scrollDrag:可确定是否允许用户在滚动条中滚动内容,如果允许选择“true”选项,如果不允许选择“false”选项,默认值为“false”。
= vLineScrollSize:可确定每按下垂直滚动条两边的箭头按钮时,滚动条上下移动多少个单位,默认值为 5。
= vPageScrollSize:可确定每按下垂直轨道时滚动条移动多少个单位,默认值为 20。 = vScrollPolicy:可确定是否显示垂直滚动条。该值可以为“on”(显示)、“off”(不显示)或“auto”(自动),默认值为“auto”。
第8节 实战演练——制作用户注册表 本章实战演练将制作名为“用户注册表”的动画,用户可以在表格上填写相关的信息,
然后单击【提交】按钮得到用户的信息,最终效果如图 12-14所示(光盘\第 12章\最终效果\用户注册表.fla)。通过制作,可以掌握如何使用组件制作调查交互动画的方法。其具体操作如下:
图 12-14 “用户注册表”最终效果
新建一个 Flash 文档,将场景大小设置为“550×400”像素,背景色为白色,并命名为“用户注册表”。 选择矩形工具,在场景中绘制与场景同宽的无边框灰色矩形,并复制多份,用“对齐”
面板垂直居中分布,如图 12-15所示。然后在第 2帧插入普通帧。 新建图层 2,在其中用矩形工具绘制图形,如图 12-16所示。
图 12-15 绘制矩形 图 12-16 绘制图形
210
Flash 8动画制作
选择文本工具,在场景上方输入文本,设置“yu”的属性为“Arial CE、40、浅灰色”,设置“空间设计图片网”的属性为“黑体、40”,颜色设置为黄色系的不同颜色,如图 12-17所示。 在图层 2的第 2帧插入关键帧,进行设置并输入文本“用户注册表”,设置为“宋体、30、红色、加粗”,如图 12-18所示。
图 12-17 输入文本并设置 图 12-18 设置第 2帧对象
新建图层 3,使用文本工具在场景中输入“用户名:”、“年龄:”、“性别:”、“爱好:”、“邮箱地址:”、“注册类型:”和“个性签名:”文本,设置为“宋
体、15、黑色、加粗”,如图 12-19所示。 在“用户名:”文本右侧绘制一个文本框,在“属性”面板中将其设为“输入文本”,
并命名为“name”,如图 12-20所示。
图 12-19 输入文本 图 12-20 “属性”面板
将“名字:”后面的输入文本框复制到“年龄:”后面,然后在“属性”面板中将其
重新命名为“age”,如图 12-21所示。
图 12-21 “属性”面板
211
12 制作交互式动画
在“邮箱地址:”右侧绘制一个文本框,在“属性”面板中将其设为“输入文本”,
并命名为“dizhi”,如图 12-22所示。
图 12-22 “属性”面板
在“个性签名:”下方拖绘出一个文本框,在“属性”面板中将其设为“输入文本”,
命名为“advice”,并选择“多行”,如图 12-23所示。
图 12-23 “属性”面板
在“组件”面板中选中单选框组件 RadioButton,按住鼠标左键不放将其拖动到场景中,然后复制 4个并分别拖动到“性别:”和“注册类型:”文本的右方和下方,如图 12-24所示。 在“组件”面板中选中下拉列表框组件 ComboBox,按住鼠标左键不放将其拖动到“爱好:”文字后面并进行缩放,如图 12-25所示。
图 12-24 拖入单选框组件 图 12-25 拖入下拉列表框组件
在“组件”面板中选中滚动条组件 ScrollPane并将其拖动到“个性签名:”文字下面,调整其大小与文本框相同,如图 12-26所示。 在“组件”面板中选中按钮组件 Button,将其拖动到场景的下方,如图 12-27所示。 选择“性别:”后面的第一个单选框组件,在“参数”面板中将其显示文字设为“男”,
组名设为“radioGroup”,如图 12-28所示。 用同样的方法设置“性别:”后面的第二个单选框组件,将其显示文字设为“女”。
212
Flash 8动画制作
图 12-26 拖入滚动条组件 图 12-27 拖入按钮组件
选中“注册类型:”下方的第一个单选框组件,在“参数”面板中将其显示文字设为
“个人注册”,组名设为“leix”,如图 12-29所示。
图 12-28 设置单选框组件 图 12-29 设置单选框组件
用同样的方法设置其他 2 个单选框组件,依次将其显示文字设为“公司注册”、“群注册”。 选中“爱好:”后的下拉列表框组件,在“参数”面板的“组件”文本框中将其命名
为“wen”,如图 12-30所示。
图 12-30 设置下拉列表框组件
选中“labels”选项,其后面将出现 按钮,单击此按钮打开“值”对话框,单击其中
的 按钮增加 8个值,如图 12-31所示。 在 data项中输入同样的值,其余参数保持默认设置。
图 12-31 设置下拉列表框组件
选中“个性签名:”下的滚动条组件,在“参数”面板中进行如图 12-32所示的设置。
213
12 制作交互式动画
图 12-32 设置滚动条组件
选中场景下方的按钮组件,在“参数”面板中将其命名为“onclick”,将“labels”设为“提交”,如图 12-33所示。
图 12-33 设置按钮组件
将图层 3的第 2帧删除,新建图层 4,并在第 2帧插入空白关键帧。在“用户注册表”文本下面绘制一个动态文本框,在“参数”面板中进行如图 12-34所示的设置。
图 12-34 绘制动态文本框并设置属性 在文本框下方创建一个按钮组件,并在“属性”面板中将其命名为“onclick1”,将“labels”设为“返回”,如图 12-35所示。
图 12-35 设置按钮组件
选择图层 4的第 1帧,在“动作”面板中为其添加如下Actions语句: Stop(); \\停止播放 选中第一个帧中的【回答】按钮,在“动作”面板中输入如下 Actions语句: on (click) {
214
Flash 8动画制作
if (_root.lian.getValue()==true) { text="是"; }else { text="否" } \\根据组件“lian”的取值决定变量“text”的显示内容 _root.result=" 姓 名 :"+_root.name.text+"\r 年 龄 : "+_root.age.text+"\r 文 化 程
度 :"+_root.wen.getValue()+"\r 性 别 :"+_root.radioGroup.getValue()+"\r 评 价 :
"+_root.pingjia.getValue()+"\r比较:"+_root.bijiao.getValue()+"\r建议:"+_root.advice.text \\提取各个输入文本框的值以及各组件实例的选择值,并以字符串的形式显示在第二个页面的_root.result
文本框中 _root.gotoAndStop(2); \\跳转并停止在第 2帧 } 选中第 2帧中的【返回】按钮,在“动作”面板中输入如下 Actions语句: on (click) { _root.gotoAndStop(1); \\单击“返回”按钮将返回到第一个页面 } 按<Ctrl+Enter>键测试动画,通过填写和选择相应的选项得到如图 12-14所示调查结果。
第9节 练一练 (1)怎样打开“组件”面板? (2)组件的参数可以在哪个面板中显示出来? (3)在复选框组件的“参数”面板中,哪一项参数用于确定复选框旁边的显示内容? (4)如何设置按钮组件的属性? (5)在滚动条组件的“参数”面板中各参数的含义是什么? (6)利用 User Interface 组件制作一道名为“选择题”的动画,最终效果如图 12-36
所示(光盘\第 12章\最终效果\选择题.fla)、(光盘\第 12章\实例素材\背景.jpg)。
图 12-36 “用户注册表”最终效果
& 测试 Flash动画
& 优化 Flash动画
& 导出 Flash动画
& 发布动画
掌握怎样制作 Flash动画是不够 的,要将自己的作品上传到网上
供大家观看,就需要掌握如何导出并发
布 Flash动画。在发布之前还需要学会对Flash动画进行测试和优化,这样才可以使自己的作品在网络中播放得流畅自
如,提高点击率。 本章将介绍测试与优化 Flash 作品
的方法,另外还将介绍导出和发布 Flash的方法,使读者掌握动画的测试、优化
与发布。
只
13
测试、优化与发布动画
216
Flash 8动画制作
第1节 测试 Flash动画 Flash 动画制作完成后,要让其他人观看,可以将动画作为作品发布出来,或将动画
作为其他格式的文件导出,供其他应用程序使用。但是在发布和导出之前,必须对动画进
行测试,通过测试可以检查动画是否能正常播放。 测试动画的具体操作如下: 打开要测试的 Flash动画,按<Ctrl+Enter>键播放动画,打开其动画测试界面,如图 13-1所示,测试 Flash动画的播放情况。
选择“视图→下载设置”命令,在打开的子菜单中选择一个下载速度来确定 Flash 模拟的数据流速率,如图 13-2所示。
图 13-1 动画测试界面 图 13-2 “下载设置”菜单
如果要自定义下载速度,可选择“自定义”命令,在打开的“自定义下载设置”对话
框中设置一个下载速度,如图 13-3所示。 在观看 SWF文件时,选择“视图→带宽设置”命令可以显示如图 13-4所示的带宽显示图,以查看动画的下载性能。再次选择该命令可以隐藏该显示图。 选择“视图→模拟下载”命令,可打开带宽显示图下方的 SWF 文件。再次选择该命令隐藏 SWF文件后,文档会在不模拟Web连接的情况下就开始下载,如图 13-5所示。 单击图表上的条形 标志会在左侧窗口中显示对应帧的设置,并停止文档的下载。 关闭测试窗口,返回到 Flash动画的制作场景中,完成测试。
每个“.fla”文件播放一次后都会自动在“.fla”文件所在位置生
成一个 SWF文件,以后只需双击该 SWF文件即可播放动画。
217
13 测试、优化与发布动画
图 13-3 “自定义下载设置”对话框 图 13-4 带宽显示图
图 13-5 模拟下载 图 13-6 “控制器”工具栏
“带宽显示图”中各栏的含义如下: = “影片”栏:可显示动画的播放速度、舞台大小、文件大小和所有的帧数。 = “设置”栏:可显示当前设置的网络传输条件。 = “状态”栏:可显示当前在右边窗口被选中的动画某一帧的位置、数据量及整个动画已经下载的数据量,被选中的帧颜色为绿色。
= 数据量:可显示动作各帧的数据量。矩形条越长,该帧的数据量越大。最下面的红色平行线条是动画传输率的告警线,其位置由传输条件决定。当矩形条高于红
色平行线条时,说明在播放到这一帧时可能会产生停顿。 对 Flash作品进行测试时应注意以下几个问题: = Flash作品的体积是否达到最小。 = 在网络环境下,能否正常下载和观赏动画。 = Flash作品是否按照设计的思路产生预期的效果。
数据量
选择“窗口→工具栏→控制器”命令,可打开“控制器”工具栏,如图 13-6所示。
利用其中的按钮可以实现动画的停止、播放、前进和倒退等。
218
Flash 8动画制作
第2节 优化 Flash动画 在网络上,如果 Flash 动画文件太大,其下载和播放速度就会变慢,并且容易产生停
顿,影响动画的点击率。为了减少 Flash 动画所占的空间,加快动画的下载速度,在导出动画之前,需要对动画文件进行优化。优化动画主要包括在动画制作过程中的优化、对元
素和色彩的优化和对文本的优化。
1.优化动画
在制作 Flash 动画过程中就应该注意对动画的优化,动画制作过程的优化主要有以下3个方面:
= 调用素材时最好使用矢量图而不使用位图,因为位图比矢量图的体积量大得多。 = 将动画中相同的对象转换为元件。只保存一次多个内容一样的对象,就可以使用多次,很好地减少了动画的数据量。
= 制作动画时最好减少逐帧动画的使用,尽量使用补间动画。补间动画中的过渡帧是系统计算得到的,逐帧动画的过渡帧是通过用户添加对象得到的,因此制作相
似的动画效果,补间动画的数据量相对于逐帧动画是很小的。
2.优化动画元素与色彩
在制作动画时,还应该注意对元素和色彩的优化选择,对元素和色彩的优化主要有以
下 6个方面: = 最好对动画中的各元素进行分层管理。 = 尽量减小矢量图形的形状复杂程度。 = 尽量少导入素材,特别是位图,它能大幅增加动画体积。 = 导入声音文件时最好使用相对于其他音乐格式体积较小的MP3格式。 = 尽量减少特殊形状矢量线条的应用,如斑马线、虚线和点线等。 = 尽量使用矢量线条代替矢量色块,这是因为矢量线条的数据量相对于矢量色块小很多。
3.优化文本
在制作动画时,常常会用到文本内容,对文本的优化主要有以下 2个方面: = 尽量不要将文字打散。 = 使用文本时最好不要运用太多种类的字体和样式,因为过多的字体和样式会使动画的数据量加大。
第3节 导出 Flash动画 导出 Flash作品的作用是产生单独格式的 Flash作品,以便观赏者观看。将动画优化并
测试完下载性能后,可通过导出影片或图像命令将动画导出到其他应用程序中。 导出 Flash作品后可将其应用于网页或多媒体等领域中。导出 Flash动画主要包括动画
219
13 测试、优化与发布动画
文件的导出和动画图像的导出。
(1) 导出动画文件
将需要的 Flash 作品以动画文件导出,可将其应用在其他领域。导出动画文件的具体操作如下: 打开要导出的 Flash动画,这里打开“鼠标跟随.fla”。 选择“文件→导出→导出影片”命令,打开“导出影片”对话框,如图 13-7所示。 在“保存在”下拉列表框中选择文件要保存的位置;在“文件名”下拉列表框中输入
文件名称,这里输入“雪花”;在“保存类型”下拉列表框中选择保存类型,默认情
况下为 swf格式。 单击【保存】按钮,打开“导出 Flash Player”对话框,如图 13-8所示。
图 13-7 “导出影片”对话框 图 13-8 “导出 Flash Player”对话框
单击该对话框中的“音频流”栏的【设置】按钮,打开“声音设置”对话框,如图 13-9所示。在该对话框中设置声音的导出参数,然后单击【确定】按钮返回“导出 Flash Player”对话框。 在“选项”栏设置相应参数,单击【确定】按钮将该文件导出,如图 13-10所示。
图 13-9 “声音设置”对话框 图 13-10 导出影片 在“导出 Flash Player”对话框中,各选项的含义如下: = “版本”下拉列表框:可以选择以何种格式保存导出的 Flash动画。
选择文件位置
输入文件名称 单击
220
Flash 8动画制作
= “加载顺序”下拉列表框:可以选择需要的加载顺序,包括“由下而上”和“由上而下”两个选项。
= “Action Script 版本”下拉列表框:可以选择需要的版本,如果需要以较低版本打开,可以选择动作脚本 1.0。
= “选项”栏:选中该选项栏中的复选框可以进行相应的操作,其中各项含义如下: = “生成大小报告”复选框:可以创建一个文本文件并记录最终导出动画文件的大小。
= “防止导入”复选框:可以防止发布的动画文件被其他人下载到 Flash 中进行编辑。
= “省略跟踪动作”:可以忽略当前动画中的跟踪命令。 = “允许调试”复选框:可以允许对动画进行调试。 = “压缩影片”复选框:可以减小文件的体积。建议选中该复选框。
= “JPEG品质”栏:可用于调整 JPEG的品质好坏,品质越高越好,但体积也会相应增大。在后面的滚动条上左右拖动滑块可以调整 JPEG的品质,越向左品质越低。
= “音频流”栏后的【设置】按钮:在打开的“声音设置”对话框中可以对导入的音频格式重新设置,一般使用MP3格式。
(2) 导出动画图像
将动画中的某个图像导出存储为图片格式,可以作为制作其他动画的素材。其具体操
作如下: 打开要导出的 Flash动画,选中要导出的某帧或场景中的某个对象。 选择“文件→导出→导出图像”命令,打开“导出图像”对话框,如图 13-11所示。 在该对话框中的“保存在”下拉列表框中选择保存的位置;在“文件名”下拉列表框
中输入文件的名称;在“保存类型”下拉列表框中选择导出文件的格式,单击【保存】
按钮。 如果导出的是GIF格式,将打开“导出GIF”对话框,如图 13-12所示。在该对话框中根据需要设置图像的导出参数,最后单击【确定】按钮完成图像的导出。
图 13-11 “导出图像”对话框 图 13-12 “导出 GIF”对话框
221
13 测试、优化与发布动画
第4节 发布动画 发布命令可以将已经测试、优化和导出后的 Flash 动画文件进行发布,使动画能够得
到广泛的传播。
1.设置发布作品的格式
在将 Flash动画发布到网上前,应对 Flash动画进行发布设置,选择“文件→发布设置”命令,打开“发布设置”对话框,可以看见在该对话框中有 3个选项卡:“格式”、“Flash”和“HTML”。
在“发布设置”对话框中,系统默认打开的是“格式”选项卡。“格式”选项卡用于
设置动画的发布格式,包括 Flash、HTML以及其他图形文件和视频文件的格式,如图 13-13所示。在“类型”栏中可以选择发布作品的格式。
单击“Flash”选项卡,对话框如图 13-14 所示。在该选项卡中可以设置发布后 Flash动画的版本、图像品质和音频质量等。
单击“HTML”选项卡,对话框如图 13-15所示,其中各项功能如下:
图 13-13 “格式”选项卡 图 13-14 “Flash”选项卡 图 13-15 “HTML”选项卡
= “模板”下拉列表框:用于选择所使用的模板,单击右边的【信息】按钮,会显示出该模板的有关信息。
= “尺寸“下拉列表框:设置动画的宽度和高度值。其中包括“匹配影片”、“像素”和“百分比”3个选项,各选项的作用如下: = “匹配影片“选项:将发布的尺寸设置为动画的实际尺寸大小。 = “像素“选项:用于设置影片的实际宽度和高度,选择该选项后可在“宽度”和“高度”文本框中输入具体的像素值。
= “百分比“选项:设置动画相对于浏览器窗口的尺寸大小。 = “回放“栏:用于对发布的影片进行设置,其中包括“开始时暂停”、“显示菜
222
Flash 8动画制作
单”、“循环”和“设备字体”4个复选框,各项作用如下: = “开始时暂停”复选框:使动画开始时处于暂停状态,只有当用户单击动画中的【播放】按钮或从快捷菜单中选择“Play”命令后,动画才开始播放。
= “显示菜单”复选框:让用户单击鼠标右键时弹出的快捷菜单中的命令有效。 = “循环”复选框:使动画自动反复进行播放。 = “设备字体”复选框:可用反锯齿系统字体取代用户系统中未安装的字体。
= “品质”下拉列表框:设置动画的品质,其中包括“低”、“自动降低”、“自动升高”、“高”和“最佳”5个选项。
= “窗口模式”下拉列表框:该项设置用于安装有 Flash ActiveX的 IE浏览器,可利用 IE 的透明显示、绝对定位及分层功能。该模式有“窗口”、“不透明无窗口”和透明无窗口 3个选项,各项作用如下: = “窗口”选项:在网页窗口中播放 Flash动画。 = “不透明无窗口”选项:使 Flash 动画后面的元素移动,但不会在穿过动画时显示。
= “透明无窗口”选项:使嵌有 Flash动画的HTML页面背景从动画中透明的地方显示出来。
= “HTML对齐”下拉列表框:用于决定动画窗口在浏览器窗口中的位置。 = “缩放”下拉列表框:用于定义动画如何放进由“宽”和“高”文本框所设定的尺寸范围中。该项设置只有当文本框中输入的尺寸与动画的原始尺寸不同时才有
效。其中包括“默认”、“无边框”、“精确匹配”和“无缩放”4 个选项,作用分别如下: = “默认(全部显示)”选项:设定在指定区域内显示整个动画,并保持动画原有的纵横比例不变。
= “无边框”选项:使动画在保持原有纵横比例不变的基础上填满指定的区域。 = “精确匹配”选项:使动画保持原有的纵横比例不变。 = “无缩放”选项:使整个动画显示在指定的区域内,但并不一定要保持动画原有的纵横比例不变。
= “Flash对齐”下拉列表框:用于定义动画在窗口中的位置,以及将动画裁剪到窗口尺寸。可在“水平”和“垂直”下拉列表框中选择需要的对齐方式。
= “显示警告消息”复选框:可以设置 Flash是否要警示HTML标签代码中所出现的错误。
2.预览发布效果
在“发布设置”对话框中对动画的发布格式设置完成后,可对发布的动画格式进行预
览。其具体操作如下: 选择“文件→发布预览”命令,打开如图 13-16所示的子菜单。 在该菜单中选择一种要预览的文件格式后,可在动画预览界面中看到该动画发布后的
效果。如图 13-17所示是将其发布为HTML后的效果。
223
13 测试、优化与发布动画
图 13-16 “发布预览”子菜单 图 13-17 预览“HTML”格式效果
3.上传 Flash作品到网上
对动画进行了测试、优化、导出和发布设置后,可将动画上传到网上。 在“发布设置”对话框分别对选定的文件格式进行具体设置后,单击【发布】按钮即
可完成动画的发布,并在 Flash 源文件所在位置生成一个网页格式的文件。选择该文件,在文件上单击鼠标右键,在弹出的快捷菜单中选择“打开”命令可打开发布的文件,如图
13-18所示是将“公司网站片头.fla”动画发布后在 IE浏览器中观看的效果。
图 13-18 在 IE浏览器中观看发布效果
若是以其他格式发布,可在“发布预览”子菜单中选择预览的格式,用户可选择“Flash”选项,预览发布的效果。
若要按默认的格式和设置进行发布,可直接选择“文件→发布设置”命令,或按
<Shift+F12>键。
224
Flash 8动画制作
第5节 实战演练——优化和发布智能手表 本实战演练将把名为“智能手表”的动画优化后发布到网上,发布的预览效果如图
13-19所示(光盘\第 13章\最终效果\智能手表.html)。在发布前,应先将动画优化,然后测试其是否完全正确。确认正确后将动画影片导出,最后以HTML的格式发布该动画。其具体操作如下: 打开名为“智能手表”的动画,将动画场景中的位图打散,减小动画的数据量从而进
行优化。 按<Ctrl+Enter>键播放动画,打开动画测试界面,出现如图 13-20所示的画面,可以看出该 Flash动画播放时完全正常。
图 13-19 “智能手表”发布预览效果 图 13-20 测试界面
关闭测试界面,回到动画的场景中,选择“文件→导出→导出影片”命令,打开如图
13-21所示的“导出影片”对话框。 在“保存在”下拉列表框中选择“光盘→第 13章→最终效果”文件夹,在“文件名”下拉列表框中输入文件名为“智能手表”,在“保存类型”下拉列表框中选择“GIF”选项。 单击【保存】按钮,将打开“导出 GIF”对话框,如图 13-22所示,将分辨率设置为“100”像素,选择“透明”、“平滑”和“抖动纯色”选项,单击【确定】按钮,在保存的路径“实例”文件夹中将出现一个名为“智能手表”的GIF文件,如图 13-23所示。
225
13 测试、优化与发布动画
图 13-21 “导出影片”对话框 图 13-22 “导出GIF”对话框
选择“文件→发布预览→HTML”命令,打开动画的发布预览效果,如图 13-24所示。
图 13-23 “智能手表”GIF文件 图 13-24 发布预览效果
如果确定该动画的预览效果无误后,选择“文件→发布”命令发布动画,在“智能手
表”的源文件所在位置会出现一个HTML文件,用鼠标右键单击该文件,在弹出的快捷菜单中选择“打开”命令,打开该 HTML文件。
第6节 练一练 (1)Flash动画的默认导出格式是什么? (2)选择“视图→下载设置”命令后,可以测试动画的什么属性?
想一想为什么有的时候导出的图像格式是位图,“导出”对话框的名称就变为“导出位图”
对话框了?
226
Flash 8动画制作
(3)在带宽显示图中各栏有什么作用? (4)优化动画主要包括那些方面?怎样对元素和色彩进行优化? (5)导出 Flash作品后可将其应用于网页或多媒体等领域中。导出 Flash动画主要包
括哪两个方面? (6)将动画中的某个图像导出存储为图片格式,可以将其作为制作其他动画的素材,
那么导出动画图像的操作是怎样的? (7)在“发布设置”对话框的“HTML”选项卡中,“尺寸”栏中的选项可以设置动
画的宽度和高度,各选项的含义是什么? (8)怎样对 Flash动画进行预览发布? (9)将“选择题”动画导出成“jpg”格式的图形素材,最终效果如图 13-25所示(光
盘\第 13章\最终效果\选择题.jpg)。因为不同的帧所显示的图像不同,所以应该先选择所需的图形,然后再将其导出。
图 13-25 “选择题”图形与其位置
& 制作元件
& 制作场景
& 添加音乐并发布
Flash中,MTV制作方法主要有两 种,一种方法是根据歌曲内容设计
故事情节,如“童年”等MTV都属于这种形式,这种MTV要求有较高的绘画功底和想像力。
还有一种方法就是通过各种图片的
转换、变形和文字的各种特效来制作
MTV,它没有一定的故事情节,只是通过极富有意境的图片和文字来表达歌曲
的内容、情感和意境。 本章所制作 MTV 动画就是采用的
第二种方法。
在
14
综合实例制作
228
Flash 8动画制作
第1节 实战演练——制作MTV 本章实战演练将制作名为“放在心里面”的 MTV动画,本例主要通过人物和场景之
间的相互配合,制作出一个极具童趣浪漫的 MTV 作品,最终效果如图 14-1 所示(光盘\第 14章\最终效果\放在心里面.fla)。通过制作,可以练习一些 Flash中绘制图形的技巧,并了解和掌握利用 Flash制作动画MTV的基本方法和技巧。
图 14-1 “放在心里面”最终效果
1.制作元件
在制作动画前,先将素材导入到库中,然后将各类型的元件制作出来,以备后面制作
所需。其具体操作如下: 新建一个 Flash 文档,将场景大小设置为“500×300”像素,背景色为白色,并命名为“放在心里面”。 选择“文件→导入→导入到库”命令,将“女孩 1.jpg、女孩 2.jpg和女孩 3.jpg”(光盘\第 14章\实例素材\女孩 1.jpg、女孩 2.jpg和女孩 3.jpg)图形素材导入到库中,如图14-2所示。 按<Ctrl+F8>键打开“创建新元件”对话框,新建名为“女孩.1”的图形元件,如图 14-3所示。 将“女孩 1.jpg”图形素材拖入到图形元件编辑区中,如图 14-4所示。
229
14 综合实例制作
图 14-2 “导入到库”对话框 图 14-3 创建“女孩.1”图形元件
用同样的方法新建“女孩.2”和“女孩.3”图形元件,分别将“女孩 2.jpg”和“女孩3.jpg”图形素材拖入到对应的图形元件编辑区中,如图 14-5所示。
图 14-4 “女孩.1”图形元件 图 14-5 “女孩.2”和“女孩.3”图形元件
新建名为“叶子 1”的图形元件,在图形元件编辑区中用铅笔工具绘制叶子的轮廓图形,并用选择工具进行编辑,如图 14-6所示。然后选择颜料桶工具,在“属性”面板的颜色列表中选择绿色系的色彩进行填充,如图 14-7所示。
图 14-6 绘制图形 图 14-7 填充图形
新建名为“叶子 2”的图形元件,在图形元件编辑区中用铅笔工具绘制叶子的轮廓图形,并用选择工具进行编辑,然后用颜料桶工具进行填充,如图 14-8所示。 新建名为“叶子 3”的图形元件,在图形元件编辑区中用铅笔工具绘制叶子的轮廓图
230
Flash 8动画制作
形,并用选择工具进行编辑,然后用颜料工具进行填充,如图 14-9所示。 新建名为“云”的图形元件,用铅笔工具在图形元件编辑区中绘制云图形,并进行填
充,如图 14-10所示。
图 14-8 “叶子 2”图形元件 图 14-9 “叶子 3”图形元件 图 14-10 “云”图形元件
新建名为“点”的图形元件,在图形元件编辑区中用椭圆工具绘制一组草绿色的圆点,
如图 14-11所示。 新建名为“眼睛图”的图形元件,在图形元件编辑区中用椭圆工具绘制眼睛图形,并
进行填充,如图 14-12所示。
图 14-11 “点”图形元件 图 14-12 “眼睛图”图形元件
新建名为“眼睛”的影片剪辑元件,将“眼睛图”图形元件拖入影片剪辑元件编辑区
中,在第 4帧插入关键帧,然后单击鼠标右键,在弹出的快捷菜单中选择“创建补间动画”命令,如图 14-13所示。 在第 8、11和 25帧插入关键帧,用任意变形工具选择第 8帧中的对象,按住上方中间的控制手柄向下拖动,效果如图 14-14所示。
图 14-13 创建补间动画 图 14-14 编辑对象
将眼睛缩小,形成眨眼的效果
231
14 综合实例制作
进入“女孩.2”图形元件编辑区中,新建图层 2,将“眼睛”影片剪辑元件拖入到场景中,如图 14-15所示。 新建名为“联图”的图形元件,将“女孩.1”、“女孩.3”和“女孩.2”图形元件从左到右拖入到场景中,然后用“对齐”面板对齐,如图 14-16所示。
图 14-15 拖入对象 图 14-16 “联图”图形元件
新建名为“点动”的影片剪辑元件,将“点”图形元件拖入影片剪辑元件编辑区中,
在第 1帧单击鼠标右键,在弹出的快捷菜单中选择“创建补间动画”命令,在第 7、19和 25帧插入关键帧,为第 1、7、19和 25帧之间创建补间动画,如图 14-17所示。 选择“点动”影片剪辑元件第 1帧中的“点”图形元件,在“属性”面板中的“颜色”下拉列表框中选择“Alpha”选项,将图形元件的“Alpha”值设置为“0%”,如图14-18所示。
图 14-17 创建补间动画 图 14-18 设置“Alpha”值
选择第 25帧中的元件,在“属性”面板中的“颜色”下拉列表框中将元件的“Alpha”
将影片剪辑元件拖入
到图形元件中,那还能
看到动态效果吗?
图形元件可以是由多个帧组成的动
画,在场景中拖入这个图形元件的层
中添加与图形元件相应的帧,在播放
时,就能看见这个动画。
“Alpha”值
232
Flash 8动画制作
值设置为“0%”。 新建名为“叶子”的影片剪辑元件,将“叶子 3”图形元件拖入影片剪辑元件编辑区中,单击图层区的【添加运动引导层】按钮 ,为图层 1 新建引导层,并在其中用铅笔工具绘制一条蓝色曲线,作为引导路径,如图 14-19所示。 在引导层的第 50帧插入普通帧。在图层 1的第 1帧单击鼠标右键,在弹出的快捷菜单中选择“创建补间动画”命令。在第 22和 50帧插入关键帧,并为第 1、22和 50帧之间创建补间动画,如图 14-20所示。
图 14-19 绘制引导路径 图 14-20 创建补间动画
选择图层 1的第 50帧,将“叶子 3”图形元件放到引导路径的另一端,如图 14-21所示。再选择第 22帧,在“属性”面板中进行设置,如图 14-22所示。
图 14-21 第 50帧对象位置 图 14-22 第 22帧的“属性”面板
选择引导层,单击图层区的【插入图层】按钮 ,新建图层 3,并将“叶子 2”图形元件拖入到影片剪辑元件编辑区中。单击图层区的【添加运动引导层】按钮 ,为
图层 3新建引导层,并在其中用铅笔工具绘制一条紫色曲线,作为引导路径,如图 14-23所示。 选择引导层和图层 3的的第 31帧到第 50帧,单击鼠标右键,在弹出的快捷菜单中选择“删除帧”命令,如图 14-24所示。
引导路径
233
14 综合实例制作
图 14-23 绘制引导路径 图 14-24 删除帧
在图层 3的第 30帧插入关键帧,选择第 1帧,在“属性”面板的“补间”下拉列表框中选择“动画”选项,为第 1和 30帧之间创建补间动画,如图 14-25所示。 选择图层 3的第 1帧,在“属性”面板中进行设置,如图 14-26所示,然后将第 30帧中的“叶子 2”图形元件放到引导路径的另一端。
图 14-25 创建补间动画 图 14-26 “属性”面板
选择最上方的引导层,单击图层区的【插入图层】按钮 ,新建图层 5,将“叶子 1”图形元件拖入到影片剪辑元件编辑区中。单击图层区的【添加运动引导层】按钮 ,
为图层 5新建引导层,并在其中用铅笔工具绘制一条红色曲线,作为引导路径,如图14-27所示。 在图层 5的第 50帧插入关键帧,选择第 1帧,在“属性”面板的“补间”下拉列表框中选择“动画”选项,为第 1和 50帧之间创建补间动画,如图 14-28所示。
图 14-27 绘制引导路径 图 14-28 创建补间动画
删除帧后的帧格
234
Flash 8动画制作
选择图层 5的第 1帧,在“属性”面板中进行设置,如图 14-29所示。然后将第 50帧中的“叶子 1”图形元件放到引导路径的另一端,如图 14-30所示。
图 14-29 “属性”面板 图 14-30 对象位置
新建名为“鸟”的影片剪辑元件,在影片剪辑元件编辑区的第 1 帧绘制鸟的图形,如图 14-31所示。在第 3帧插入关键帧,绘制鸟的图形,如图 14-32所示,然后在第 4帧插入普通帧。
图 14-31 第 1帧图形 图 14-32 第 3帧图形
新建名为“飞鸟”的影片剪辑元件,将“鸟”影片剪辑元件拖入影片剪辑元件编辑区
中,单击图层区的【添加运动引导层】按钮 ,为图层 1 新建引导层,并在其中绘制一条引导路径,如图 14-33所示。 在引导层的第 60帧插入普通帧,在图层 1的第 1帧单击鼠标右键,在弹出的快捷菜单中选择“创建补间动画”命令,在第 50帧插入关键帧,为第 1和 50帧之间创建补间动画,将第 50帧中的对象放到引导路径的另一端。 选择第 51帧,单击鼠标右键,在弹出的快捷菜单中选择“删除补间动画”命令,如图14-34所示。
图 14-33 绘制引导路径 图 14-34 元件编辑场景
新建“开始”按钮元件,在按钮元件编辑区中输入文字“Play”,并设置为“Bremen Bd BT、80、白色、加粗”,然后在“指针经过”、“按下”和“点击”帧插入关键帧,
引导路径
235
14 综合实例制作
将“指针经过”帧中的文字颜色改为粉红色,将“按下”帧中文字颜色改为玫红色并
缩小,然后将所有文字打散,如图 14-35所示。
图 14-35 元件的“弹起”、“指针经过”和“按下”帧对象
新建“重新开始”按钮元件,在按钮元件编辑区中输入文字“Replay”,并设置为“Comic Sans MS、30、蓝色、加粗”,然后在“指针经过”、“按下”和“点击”帧插入关键帧,将“指针经过”帧中的文字颜色改为紫灰色,将“按下”帧的对象缩小,然后
将所有文字打散,如图 14-36所示。
图 14-36 元件的“弹起”、“指针经过”和“按下”帧对象
2.制作场景
将元件制作好后,就可在场景中开始制作动画。将场景中的第 1帧作为开始界面并添加 stop语句,放入“开始”按钮元件,单击时可跳转到第 2帧进行播放。然后在最后一帧添加 stop语句,使动画播放到最后一帧停止,放入“重新开始”按钮元件,单击时重新回到第 3帧进行播放。其具体操作如下: 回到场景中,在图层 1的第 1帧中绘制粉红色系的抽象图形,然后用文本工具输入文字“放在心里面”,并设置为“华康简综艺、40、白色”,添加深红色投影的滤镜效果,如图 14-37所示。 将“开始”按钮元件拖入到场景中,选中图层 1中的第 1帧,打开“动作-帧”面板,在语句编辑区中输入 stop语句,使动画保持这个界面,不自动进行播放,如图 14-38所示。
想一想为什么这里要将文字打散,这样不是容易增加文件的数据量吗?
236
Flash 8动画制作
图 14-37 开始界面 图 14-38 输入语句
选中场景中的“开始”按钮元件,在“动作-按钮”面板的语句编辑区中输入如图 14-39所示的语句,当用户单击按钮时转跳到第 2帧开始播放。 新建图层 2,在第 2 帧插入关键帧,将“女孩.1”图形元件拖入场景中,单击鼠标右键,在弹出的快捷菜单中选择“创建补间动画”命令,在第 13、281和 300帧插入关键帧,为第 2、13、281和 300帧之间创建补间动画。 选取第 2帧中的对象,在“属性”面板中将其“Alpha”值设置为“0%”,然后将第300帧中对象的“Alpha”值也设置为“0%”,效果如图 14-40所示。
图 14-39 输入语句 图 14-40 设置“Alpha”值
新建图层 3,在第 13 帧插入关键帧,将“点动”影片剪辑元件拖入到场景中,如图14-41所示。 新建图层 4,在第 13 帧插入关键帧,将“叶子”影片剪辑元件拖入到场景中,如图14-42所示。
图 14-41 拖入“点动”影片剪辑元件 图 14-42 拖入“叶子”影片剪辑元件
237
14 综合实例制作
新建图层 5,在第 301 帧插入关键帧,将“女孩.2”图形元件拖入到场景中,并在帧上单击鼠标右键,在弹出的快捷菜单中选择“创建补间动画”命令,在第 320、566、580、600、630和 650帧插入关键帧,为第 301、320、566、580、600、630和 650帧之间创建补间动画。 选取第 301帧中的对象,在“属性”面板中将其“Alpha”值设置为“0%”,然后将第 650帧中对象的“Alpha”值也设置为“0%”,如图 14-43所示。 选取第 600帧中的对象,将其放大,并复制将第 630帧的对象删除,并将复制的对象粘贴到原位置,如图 14-44所示。
图 14-43 “属性”面板 图 14-44 放大对象
新建图层 6,在第 301帧插入关键帧,将“云”图形元件拖入场景中,单击鼠标右键,在弹出的快捷菜单中选择“创建补间动画”命令。在第 580帧插入关键帧,为第 301和 580帧之间创建补间动画。将第 580帧中的对象拖到场景右方,并删除第 580帧后的所有帧,如图 14-45所示。 新建图层 7,在第 301帧插入关键帧,将“飞鸟”影片剪辑元件拖入场景右方,如图14-46所示。
图 14-45 拖入“云”图形元件 图 14-46 拖入“飞鸟”影片剪辑元件
新建图层 8,在第 650 帧插入关键帧,将“女孩.3”图形元件拖入场景中,单击鼠标
“Alpha”值
元件位置 元件位置
238
Flash 8动画制作
右键,在弹出的快捷菜单中选择“创建补间动画”命令,在第 665、870、890和 910帧插入关键帧,为第 650、665、870、890和 910帧之间创建补间动画。 选取第 650帧中的对象,在“属性”面板中将其“Alpha”值设置为“0%”。选取第870帧中的对象,将其放大然后复制。将第 890和 910帧中的对象删除,然后将第 870帧中的对象粘贴到第 890和 910帧的原位置,并将第 910帧中的对象的“Alpha”值设置为“0%”,如图 14-47所示。
图 14-47 设置“女孩.3”图形元件“Alpha”值
新建图层 9,在第 911帧插入关键帧,将“联图”图形元件拖入场景右方,在第 1110帧插入关键帧,在第 911帧上单击鼠标右键,在弹出的快捷菜单中选择“创建补间动画”命令,为第 911和 1110帧之间创建补间动画。将第 1110帧中的图形元件移到场景左方,并在第 1110帧中输入 stop语句,如图 14-48所示。 在第 930帧插入关键帧,选取第 911帧中的对象,将其“Alpha”值设置为“0%”,如图 14-49所示。
图 14-48 “动作-帧”面板 图 14-49 创建补间动画
新建图层 10,在第 1110帧插入关键帧,将“重新开始”按钮元件拖入到场景左下方,如图 14-50所示。 选择场景中的“重新开始”按钮元件,在“动作-按钮”面板的语句编辑区中输入语句,
设置后的效果
239
14 综合实例制作
使用户单击按钮时,转跳到第 2帧,如图 14-51所示。
图 14-50 拖入到场景 图 14-51 “动作-按钮”面板
3.添加音乐并发布
将声音素材导入到库中,然后新建音频图层,并在“编辑封套”对话框中编辑起点游
标、控制柄和终点游标的位置,使声音与动画同步。其具体操作如下: 选择“文件→导入→导入到库”命令,打开“导入到库”对话框,选择“放在心里面.mp3”声音素材(光盘\第 14章\实例素材\放在心里面.mp3),单击【打开】按钮,将“放在心里面.mp3”声音素材导入到库中,如图 14-52所示。 在图层 10的上方新建图层 11,并重命名为“音乐”。选择图层 11的第 1帧,在“属性”面板的“声音”下拉列表框中选择“放在心里面.mp3”选项,并在“同步”栏中设置为“数据流、重复、1次”,如图 14-53所示。
图 14-52 导入到库中的声音素材 图 14-53 “属性”面板
单击“属性”面板“效果”下拉列表框后的【编辑】按钮,打开“编辑封套”对话框,
如图 14-54所示。
添加声音并设置
240
Flash 8动画制作
在“编辑封套”对话框中将起点游标拖至如图 14-55所示的位置,使声音从这里开始播放,去掉前面多余的前奏。
图 14-54 “编辑封套”对话框 图 14-55 起点游标位置
将起点游标处的控制柄拖到下方,使声音从无声开始,如图 14-56所示。 单击音量控制线,新建一个控制柄,并拖到上方,使声音逐渐变大,使过渡更加自然,
如图 14-57所示。
图 14-56 控制柄位置 图 14-57 新建控制柄
将终点游标拖至如图 14-58所示的位置,然后单击【确定】按钮,完成编辑。
图 14-58 终点游标位置
在“编辑封套”对话框中想
了解声音的起伏变化,可以
观察音频线的波动程度。
241
14 综合实例制作
到此,动画制作完成,为了防止错误操作,将所有图层锁定后时间轴如图 14-59所示。
图 14-59 锁定图层
选择“文件→发布设置”命令,打开“发布设置”对话框,单击“格式”选项卡,在
其中进行设置,如图 14-60所示。 单击【发布】按钮完成动画的发布后,单击【确定】按钮。 在 Flash源文件所在位置生成一个网页格式的文件,选择该文件,然后单击鼠标右键,在弹出的快捷菜单中选择“打开”命令打开发布的文件,如图 14-61所示。
图 14-60 “发布设置”对话框 图 14-61 在 IE浏览器中观看发布效果
按<Ctrl+Enter>键测试动画,可以看到动画播放的效果,如图 14-1所示。
用本实战演练制作MTV动画的思路和操作步骤,制作一个小型的MTV,并为MTV添加
同步显示的歌词。
242
Flash 8动画制作
第2节 小结 本实战演练中为了更好地配合“放在心里面”这首歌曲的特点,应用了明亮的色调和
简洁的图形,使作品能够给人清新的意境。因为本例中包含动画的动作剪辑影片元件较少,
在动画场景的编排设计时,采用了大量的镜头平移和拉伸手法进行弥补,关于镜头的具体
应用,读者可在制作实例的过程中仔细体会。
第3节 练一练 (1)在制作场景时,应该思路清晰,对将要产生的效果做到心中有数,这样在制作
时才能有条不紊。想一想,本章的制作思路是什么? (2)“女孩.2”图形元件是动态的还是静止的呢? (3)在制作“叶子”和“飞鸟”影片剪辑元件时,用到了引导动画的制作方法,那
么在制作引导动画时,应该注意些什么? (4)为什么将声音素材添加到场景后,还要进行编辑? (5)制作一个名为“幸福劳动”的场景动画,完成后,女孩拿着锅炒菜,并不时打
哈欠和摸头发,最终效果如图 14-62所示(光盘\第 14章\最终效果\幸福劳动.fla)、(光盘\第 14章\实例素材\图.jpg)。
图 14-62 “幸福劳动”最终效果
为了保持作品风格的统一和完整,
本例中大部分的背景和对象都是
利用 Flash中的绘图工具绘制。
为什么不能导入
其他图形素材来
制作动画,而要单
独绘制呢?