交互动画

第11章 交互式动画
【实例讲解】
任务2： 按钮的结构
按钮是交互式动画的最常用的控制方式。在Flash中， 按钮是作为一个元件来制作的。
① 创建一个新的Flash文档，并创建一个“按钮”类型的元件。 ② 从元件的时间轴上，可以看到该按钮的四种结构。
③ 在【弹起】状态帧绘制一个渐变填充的椭圆。
④ 在其他各状态帧分别按<F6>键，插入关键帧，然后根据需要 分别修改各帧图形的颜色，甚至形状也可以任意修改。
【知识讲解】
二、交互动作是如何实现的呢？
它是通过一系列的ActionScript代码来实现的。利用 ActionScript的函数、方法和时间，能够方便的为动画添加 交互功能。动作语句的调用必须在某种事件的触发下进行 的，而且这种事件一般是由用户的操作触发的。这里所谓 的时间，实际上就是用户对动画的某种设定或交互。动画 帧只有一种事件，即被载入（播放）时，其中的动作脚本 （如果有的话）就能够得到执行。相对而言，对象（按钮 或影片剪辑）的事件就是丰富了许多。
第11章 交互式动画
【实例讲解】
任务1：鼠标事件
创建一个影片剪辑元件，使之能够对各种鼠标事件进行响 应并在一个文本框中显示鼠标事件的名称 。
① 新建一个Flash文档。 选择【插入】/【新建元件】命令，创建 一个“影片剪辑”类型的元件“元件1” 。
② 在“元件1”中，绘制一个矩形框。矩形的色彩、边框线的样式， 都可以根据读者的喜好选择。
交互式动画： 指在动画作品播放时支持事件响应和交互功能的一种动
画，也就是说，动画播放时可以接受用户控制，而不是像普 通动画一样从头播放到尾。交互的实现一般是利用鼠标对按 钮的操作来完成的，此外也可以通过键盘事件来响应。典型 的交互式动画，可以利用按钮控制动画的播放、暂停、停止 或逐帧变化。
第11章 交互式动画
MOUSE＿OUT 鼠标离开对象的事件
MOUSE＿OVER 鼠标移动到对象上的事件
第11章 交互式动画
【知识讲解】
四、按钮的结构
按钮有四种状态结构：弹起、指针、按下、点击， 分别在时间轴的4帧中，每帧对应不同的状态。如 下图所示：
可以看到，Flash CS5的按钮有一个4帧的时间轴，分别 表示按钮在【弹起】、【指针经过】、【按下】和 【点击】状态下的外观。这说明，按钮实际上是一个 可以交互的影片剪辑，不过它的时间轴并不能直接播 放，而是根据鼠标的操作跳转到相应的帧上。
第11章 交互式动画
【作业】
1．鼠标事件中CLICK 和 DOUBLE＿CLICK有什么区别？ 2．将按钮结构中各帧图形变化，看看有什么效果。 3．Flash CS5系统自带了一个公用按钮库中的按钮怎么使用？
第11章 交互式动画
⑤ 返回“场景1”中，将制作的按钮元件拖入舞台中。 ⑥ 测试动画，可以看到按钮处在不同状态时表现出不同的外观。
第11章 交互式动画
【完成任务】
任务1：完成“鼠标事件” 任务2：完成“按钮使用”
Leabharlann Baidu
第11章 交互式动画
【课堂小结】
本节主要介绍了交互式动画的概念、鼠标事件、 按钮结构等，通过实际的两个任务让我们掌握了鼠标 事件的使用方法和按钮的使用方法。引申出一般交互 式动画的制作方法。
第11章 交互式动画
【知识讲解】
三、鼠标事件 鼠标事件及含义，见下表所示：
事件名称
说明
CLICK
鼠标左键在对象上单击的事件
DOUBLE＿CLICK 鼠标左键在对象上双击的事件
MOUSE＿DOWN 鼠标左键在对象上被按下的事件
MOUSE＿UP
鼠标左键在对象上被松开的事件
MOUSE＿MOVE 鼠标移动的时间
③ 返回“场景1”中，将“元件1”拖入舞台，在【属性】面板中。 设置实例名称为“mc” 。
第11章 交互式动画
【实例讲解】
④ 创建一个静态文本框，输入文本“理解按钮事件”。
⑤ 创建一个文本框。设置为“动态文本”，实例名称为
“info”。 ⑥ 选择第1帧。打开【动作】面板。输入如下代码： ⑦ 测试动画。
第11章 交互式动画
11.1 交互式动画基础知识
课堂演示讲授时间：2课时
主要内容：
✓ 交互的概念 ✓ 鼠标事件的使用 ✓ 按钮的使用
第11章 交互式动画
【展示任务】
第11章 交互式动画
【知识讲解】
一、交互及交互式动画的概念
交互： 就是由用户利用各种方法，如按钮、菜单、按键、文字
输入等，来控制和影响动画的播放。交互的目的就是使计算 机与用户进行对话（操作），其中每一方都能对另一方的指 示做出反应，使计算机程序（动画也是一种程序）在用户可 理解、可控制的情况下顺利运行。