交互式动画

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