主讲：陶建平 E-mail：alextao777@163.com 华中科技大学网络与计算中心 第6章 Flash网页动画设计 1 主讲：陶建平 E-mail：alextao777@163.com 华中科技大学网络与计算中心

主讲：陶建平 E-mail：alextao777@163.com 华中科技大学网络与计算中心 本章学习内容 Flash CS3的工作环境 Flash文档的基本操作 Flash基本绘图工具和文本工具的使用 帧的基本操作，元件的创建和引用 元件库和场景的应用 逐帧、补间、引导层和遮罩层动画的制作 ActionScript的语法规则和动作脚本的应用 测试、优化和发布动画 2 主讲：陶建平 E-mail：alextao777@163.com 华中科技大学网络与计算中心

主讲：陶建平 E-mail：alextao777@163.com 华中科技大学网络与计算中心 具体要求 掌握帧、元件的操作 会制作逐帧动画 会制作补间动画 会制作引导层动画 会制作遮罩层动画 能制作简单的交互动画 3 主讲：陶建平 E-mail：alextao777@163.com 华中科技大学网络与计算中心

6.1 Flash设计基础 6.1.1 了解Flash Flash的一些基本概念： 帧(Frame) —— 如果理解成放电影，电影胶片的一格就是一帧。Flash就是利用帧的变换实现图像动画的。 帧率 —— 即动画在一秒时间内播放的帧数。Flash的默认帧率是12，普通电影的帧率是24(fps)。 关键帧 —— Flash制作时，并不是制作所有的帧，而是只在相应的时间段制作关键帧，其他的非关键帧则自动实现过渡效果。 元件 —— Flash中，一个或一组图像、文字等内容构成一格元件。在设置或编程时，一个元件作为一格整体进行操作。 场景 —— Flash的场景与现实电影中的场景类似，一个Flash动画可以由很多场景组成，不同场景之间没有帧或图层的联系。 脚本(ActionScript) —— Flash可以使用AS对Flash中的对象进行编程和控制，这些针对Flash对象进行编程的程序就是脚本。 4

6.1.2 Flash CS3的工作界面 5

时间轴面板 工具面板 6 【编辑】>【自定义工具面板】 工具区域 查看区域 颜色区域 选项区域 A. 播放头 B. 空关键帧 C. 时间轴标题 D. 引导层图标 E. “帧视图”弹出菜单 F. 逐帧动画 G. 补间动画 H. “滚动到播放头”按钮 I. “绘图纸”按钮 J. 当前帧指示器 K. 帧频指示器 L. 运行时间指示器 工具区域 【编辑】>【自定义工具面板】 查看区域 颜色区域 选项区域 6

库面板 动作面板 7 要显示“库”面板，请选择“窗口”>“库”，或者按 Ctrl+L 组合键。 要显示“动作”面板，请选择“窗口”>“动作”或按 F9。 7

6.2 Flash文件的基本操作 6.3 绘制图像及编辑文本 6.3.1 绘图模式 1.合并模式 2.对象模式 3.模式切换 （与Dreamweaver和Fireworks类似，略……） 6.3 绘制图像及编辑文本 6.3.1 绘图模式 1.合并模式 2.对象模式 3.模式切换 切换为合并模式： 按起“对象绘制”按钮。 菜单【修改】>分离 转为对象模式： 按下“工具箱”中“选项”下的“对象绘制”按钮。 菜单【修改】>【合并对象】>联合 8

6.3.3 编辑图像对象 选择对象 2. 移动、复制、删除对象 3. 变形与排列对象 4. 组合和分离对象 【选择】工具 【部分选取】工具 见示例操作-绘图工具.fla 选中实例（或组）显示的是一个蓝色的封闭边框。 选中填色区和线条显示的是一个高亮的点阵。 【任意变形】工具 定位点：对象的实际位置，主要作用是定位和变形。 【对齐】面板 9

6.4 动画制作基础 6.4.1帧的操作 1.帧类型 关键帧：是一个包含有内容或者对内容的改变其决定作用的帧。 普通帧：用于继承其左边的关键帧，内容与左边的关键帧一样，是关键帧的延续。 空白关键帧：一个没有内容的关键帧，在空白关键帧中可以创建内容。 动作帧：也是一种关键帧，只不过在该帧中还包含了动作脚本。 过渡帧：是由Flash计算生成的两个关键帧之间的帧，一般显示了渐变动画的若干中间效果。 过渡帧 动作帧 空白关键帧 关键帧 普通帧 10

2. 插入帧 3. 编辑帧 在菜单【插入(I)】>【时间轴】中选择 在时间轴上单击鼠标右键，从弹出菜单中 选择 选择帧 删除或修改帧 移动帧 复制帧 新建一个Flash文档操作演示 帧 关键帧 空白关键帧 11

6.4.2 使用元件 1.元件的类型 元件 是指在 Flash 创作环境中或使用 Button和 MovieClip 类创建过一次的 图形、按钮或影片剪辑，可在整个文档或其它文档中重复使用该元件。 实例 是指位于舞台上或嵌套在另一个元件内的元件副本。元件与实例是父子 关系，编辑元件时，Flash 同时更新该元件的所有实例。 1.元件的类型 图形元件(Graphic)：是静止的矢量图形或没有音效和交互的动画（Gif动画）， 在调用该元件时，时间轴的帧数必须与该图形元件中的帧数相同， 否则不能播放。一般常将它作为静止的对象处理。 影片剪辑(Movie Clip)：可以创建可重复使用的动画片段。它能独立于场景动 画进行播放。影片剪辑可以包含交互式控件、声音甚至其它影片剪 辑实例。 按钮元件(Button)：用于创建在动画中对标准的鼠标事件（如单击/指向/滑过等） 做出响应的交互式按钮。 12

2. 创建元件    1）直接创建元件 选择【插入】>【新建元件】。 单击【库】面板左下角的“新建元件”按钮。 从【库】面板右上角的库面板菜单中选择“新建元件”。    2）将现有对象转换为元件 选择【修改】>【转换为元件】。 单击鼠标右键 ，然后从弹出菜单中选择“转换为元件”。 示例文件：Flash\元件.fla 【例1】制作一个放大运动中叠加Alpha透明的动画，其中旋转运动是一个图形元件。 【例2】将上例的动画做成影片剪辑，并拖入舞台（舞台的主时间轴为1帧）。 【例3】利用图形元件制作一个按钮。 13

6.5 制作简单动画 6.5.1 逐帧动画 其原理是在“连续的关键帧”中分解动画动作，即在时间轴的每一帧上绘制不同的内容，使其连续播放而成动画。 优点：灵活性大，制作的动画细腻，类似于电影效果。 缺点：制作成本高，输出文件的容量大。 实例演示： · 逐帧动画 14

6.5.2 补间动画 补间动画即可很好的表达动画效果，又能尽量减小文件的大小。（只保存 实例演示： 补间动画又称为渐变动画，在制作动画时，只需在时间轴中设置动画的开 始关键帧和结束关键帧，中间的过渡帧由Flash自动补充。 补间动画即可很好的表达动画效果，又能尽量减小文件的大小。（只保存 帧间不同的数据） 1.运动补间动画：在一个点定义实例的位置、大小及旋转角度等属性，然后在其他位置改变这些属性而产生的动画。 2.形状补间动画：在一个点绘制一个图形，然后在其他点改变图形或者绘制其他图形，在它们之间进行帧内插值或内插图形而产生的动画。 实例演示： · 运动补间动画 · 形状补间动画 15

6.5.3 引导层动画    1.引导层的创建 2.制作引导层动画 将一个或多个层连接到一个运动引导层，使一个或多个对象沿同一条路径 运动的动画被称为“引导路径动画”。 这种动画可以使一个或多个元件完成曲线或不规则运动。引导层是用来指 示元件运动轨迹的，引导层中的内容可以用钢笔、铅笔、线条、椭圆工具、矩 形工具或画笔工具等绘制出的线段。 1.引导层的创建 2.制作引导层动画 · 引导层动画    16

6.5.4 遮罩动画 1.遮罩层的创建 2.遮罩动画的制作 遮罩是Flash中一个很实用的功能，如果将一个层设为遮罩层，那么它的下 一层则是被遮挡住的。遮罩就像个窗口，在遮罩层的填充色块之下的内容才是 可见的，而遮罩层的填充色块本身是不可见的，其余的所有内容都会被遮罩层 的其余部分隐藏起来。 1.遮罩层的创建 2.遮罩动画的制作 见遮罩动画示例 （将文字层和遮罩层上下次序交换一下，会有什么效果？） 17

6.6 交互动画的制作 Flash除用于制作一般动画外，还可以实现一些按钮控制、鼠标跟随和动态网页等特殊效果的动画。这些效果的实现需要使用ActionScript（简称AS）语句。AS是Flash内置的脚本语言，能够面向对象进行编程，具备强大的交互功能。 Adobe Flash CS3中使用的ActionScript版本为3.0，并完全演变成一个面向对象的编程语言，它引入了一个新的高度优化的全新虚拟机AVM2（Flash Player在回放时执行动作脚本的底层软件），其效率和执行速度比前一代快了近10倍。 动作脚本3.0 的开发环境有两种： 1. Flash CS3 IDE环境 2. Flex Builder2开发环境 18

6.6.1 动作面板 如果要在Flash CS3中加入ActionScript代码，可以直接使用动作面板来输 入。要打开动作面板，可单击【窗口】>【动作】，或者按【F9】键。 打开后的动作面板如图所示。 A：脚本编辑窗口，用于输入代码的地方。 B：面板菜单，单击后可显示动作面板功能菜单 C：动作工具箱，可以通过双击或者拖动的方式将其中的ActionScript元素添加到脚本窗格中。 D：脚本导航器，其有两个功能： 一是通过单击其中的项目，可以将与该项目相关的代码显示在脚本窗口中； 二是通过双击其中的项目，对该项目的代码进行固定操作。 19

6.6.2 AS语法基础 2. 常用的ActionScript（2.0）语句 1)on(鼠标事件)：on行为用来处理程序，即当鼠标或键盘事件发生时响应，执 行花括号中设定的行为。 on(mouseEvent) ← mouseEvent称为事件触发器 { statement; ← statement表示事件激活后要执行的程序段 } mouseEvent 参数可指定下面的任一值： Press：当鼠标指针滑到按钮上时按下鼠标按键。 Release：当鼠标指针滑到按钮上时释放鼠标按键。 releaseOutside：当鼠标指针滑到按钮上时按下鼠标按键，然后在释放鼠标按键前滑出此按钮区域。press 和 dragOut 事件始终在 releaseOutside 事件之前发生。 rollOut：鼠标指针滑出按钮区域。 rollOver：鼠标指针滑到按钮上。 dragOut：当鼠标指针滑到按钮上时按下鼠标按键，然后滑出此按钮区域。 dragOver：当鼠标指针滑到按钮上时按下鼠标按键，然后滑出该按钮区域，接着滑回到该按钮上。 keyPress “ < key > ”：按下指定的键盘键。 20

3)Play/Stop ：控制影片剪辑的播放（或停止播放）。 2)gotoAndPlay/gotoAndStop ：可控制影片转到场景中指定的帧并从该帧开始播放（或停止播放）。如果未指定场景，则播放头将转到当前场景中的指定帧。 gotoAndPlay( [scene], frame) ; gotoAndStop( [scene], frame); 参数： scene[可选] : 一个字符串，指定播放头要转到其中的场景的名称。 frame: 表示播放头转到的帧编号的数字，或者表示播放头转到的帧标签的字符串。 3)Play/Stop ：控制影片剪辑的播放（或停止播放）。 Play() ; Stop(); 4)nextFrame/prevFrame：跳转并停止在下一帧（或上一帧）。 nextFrame() ; prevFrame(); 21

3. ActionScript语句的应用 1）给按钮添加动作 2）给影片剪辑添加动作 直接将处理事件的代码添加在按钮的“动作”面板中。 在时间轴的关键帧中使用事件处理函数。 用实例名后加“.”来调用： btn_enter.onPress()== function() { getURL(“http://www.baidu.com", "_blank"); }; 实例：按钮添加动作脚本 2）给影片剪辑添加动作 与处理按钮事件的结构类似，在影片剪辑的“动作”面板中，采用 onClipEvent结构的代码来捕捉影片剪辑的事件。 实例：影片剪辑添加动作脚本 扩展阅读： 从ActionScript 2.0迁移到ActionScript 3.0：重要概念和变化 http://www.adobe.com/cn/devnet/flash/articles/first_as3_application.html 22

6.7 动画的测试、优化和发布 6.7.1 测试动画 测试按钮元件：需选择菜单“控制/启用简单按钮”命令。此时按钮将做出与最终动画中一样的响应，包括这个按钮所附加的脚本语言。 测试简单的帧动作（play、stop、gotoAndPlay和gotoAndStop等）：需选择菜单“控制/启用简单帧动作”命令。 测试动画的全部内容：按【Ctrl+Enter】键或者执行“控制/测试影片”命令。Flash将自动导出当前影片中的所有场景，然后将文件在新窗口中打开。 测试某个场景的内容：选择场景后，执行“控制/测试场景”命令。Flash仅导出当前影片中的当前场景，然后将文件在新窗口中打开，且在文件选项卡中标示出当前测试的场景。 ★执行测试影片与测试场景命令均会自动生成.swf文件，且自动将保存在当前影片所在的文件夹中。 “带宽设置”的图表视图： 每个条形代表一个单独帧。 条形的大小对应于帧的大小（以字节为单位）。 时间轴标题下面的红线指出，在当前的调制解调器速度下，指定的帧能否实时流动。 如果某个条形伸出到红线之上，则文档必须等待该帧加载。 “数据流图表”以显示哪些帧会引起暂停。交替的淡灰色和深灰色块，代表各个帧。 每块的旁边指出了它的相对字节大小。 “逐帧图表”以显示每个帧的大小。 此视图有助于查看哪些帧导致数据流延迟。 如有帧块延伸到图表红线之上，Flash Player 将暂停回放，直到整个帧下载完毕。

6.7.2 动画的优化 6.7.3 动画的发布 在将Flash动画发布到网上之前，应对动画进行发布设置。选择菜单“文件/发布设置”命令，打开“发布设置”对话框，在该对话框中有三个选项：格式、Flash和HTML。 【格式】选项，它用于设置动画的发布格式。 设置发布后Flash动画的版本、图像品质和音频质量等。 发布的HTML文档的一些设置。 24

时间轴特效 使用预建的时间轴特效可以用最少的步骤创建复杂的动画。 可以对文本、图形（包括形状、组以及图形元件）、位图图像和按钮元件应用时间轴特效。 添加特效： 选择要为其添加时间轴特效的对象。 选择【插入】>【时间轴特效】，然后从 列表中选择一种特效。或单击鼠标右键，选择“时间轴特效”。 几种主要动画特效： 模糊：通过更改对象在一段时间内的 Alpha值、位置或比例创建运动模糊特效。 扩展：一段时间内放大、缩小或者放大和缩小对象。此特效在组合在一起或在影片剪辑或图形元件中组合的两个或多个对象上使用效果最好。此特效在包含文本或字母的对象上使用效果很好。 变形：调整选定元素的位置、缩放比例、旋转、Alpha 和色调。使用“变形”可应用单一特效或特效组合，从而产生淡入/淡出、放大/缩小以及左旋/右旋特效。 转变：使用淡变、擦除或两种特效的组合向内擦除或向外擦除选定对象。 25

本章内容结束 谢谢！ 26