Flash基础理论课 第七章 交互动画:移动物体Ⅰ

返回“Flash基础理论课 - 目录”

我们最初的目标就是要制作出流畅的交互动画,多数都是通过鼠标进行交互的。在第二章里面曾介绍过鼠标事件,但没有涉及到具体的应用。

本章将踏出交互动画的第一步。我们将学会如何处理拖拽,抛落及投掷。但首先要从基本的鼠标按下与释放说起。

按下及释放影片

鼠标可真是件了不起的发明,虽说只是个简单的设备。实际上鼠标只负责两件事:检测移动及点击按钮。计算机用获得的这些信息可以做很多事:通过获知鼠标指针的位置,确定当发生点击的位置,移动的速度,及确定双击事件的发生。当我们从事件的角度来看这些问题时,可以归结为点击与移动(当然,现在的鼠标还配有滚轮,跟踪球或是比一台廉价手机还多的按钮,但现在我们考虑最基本的鼠标种类)。

一次点击事件可分为两部分:鼠标键按下时的事件及鼠标弹上来的事件。通常情况下,这两个事件是在一瞬间发生的。有些时候,这两个事件会被时间和移动分隔开,通常解释为拖拽——按下,移动,最后释放。本章就围绕下面三件事展开:鼠标按下,鼠标弹起,以及发生在它们中间的移动。

对于鼠标事件的处理,在AS 3中确实发生了很大的变化,所以需要全面地重新学习一下这些基础问题,拥有坚实的基础是非常重要的。AS 3事件体系的结构非常合理也非常科学,而早先版本的AS 有时看起来就像巫术一样。

鼠标事件只能由 Sprite 影片,影片剪辑或其它交互对象在鼠标经过它们的图形时产生。在AS 2中,这些也许只对某些鼠标事件起作用,而对其它的却不起作用,这就显得非常混乱。同时也使如 onRelase和onReleaseOutside 这样的复合事件成为必需品。

另一个本质上的改变是在嵌套对象与鼠标事件之间的。在AS 2中,没有办法使用影片剪辑内部的影片来侦听事件。外层的影片剪辑可以捕获所有的鼠标事件,而后事件就不再向下流通。而在AS 3中,就没有这些限制,使用影片剪辑或 Sprite 影片或嵌套影片进行侦听都没有问题。

需要注意的是主要影片事件是 mouseDown, mouseUp,和mouseMove。它们都被制作成了MouseEvent 类的静态属性:

■ MouseEvent.MOUSE_DOWN

■ MouseEvent.MOUSE_UP

■ MouseEvent.MOUSE_MOVE

mouseDown事件,是当鼠标指针处于某个影片的图形时,按下鼠标后发生的。等同于AS 2中的onPress。

mouseUp事件,是当鼠标指针处于某个影片的图形时,释放鼠标后发生的。等同于AS 2中的onRelease。

mouseMove事件,是当鼠标移动时发生的——但只在鼠标移动到该物体或影片时才发生。这点与 AS 2中不同,在AS 2中使用 onMouseMove 时,无论鼠标何时移动,无论指针在哪,都会将这个事件的信息传达给所有的影片剪辑。

然而,有时我们希望在忽略指针位置的情况下,侦听鼠标移动、弹起或按下。在AS 2中,使用 onMouseMove, onMouseUp和onMouseDown ,都不会关注鼠标的位置。而在AS 3中,虽然这些方法有所不同,但只要使用 stage 来侦听mouseDown, mouseUp和mouseMove,同样会将事件信息传达给所有的影片剪辑。

OK,说了不少,让我们先来看个例子吧。本章第一个示例,文档类MouseEvents.as,继续使用前几章的Ball 类,代码如下:

package {
 import flash.display.Sprite;
 import flash.events.MouseEvent;
 public class MouseEvents extends Sprite {
  public function MouseEvents() {
   init();
  }
  private function init():void {
   var ball:Ball=new Ball  ;
   ball.x=100;
   ball.y=100;
   addChild(ball);
   ball.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDownBall);
   ball.addEventListener(MouseEvent.MOUSE_UP,onMouseUpBall);
   ball.addEventListener(MouseEvent.MOUSE_MOVE,onMouseMoveBall);
   stage.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDownStage);
   stage.addEventListener(MouseEvent.MOUSE_UP,onMouseUpStage);
   stage.addEventListener(MouseEvent.MOUSE_MOVE,onMouseMoveStage);
  }
  private function onMouseDownBall(event:MouseEvent):void {
   trace("mouse down - ball");
  }
  private function onMouseUpBall(event:MouseEvent):void {
   trace("mouse up - ball");
  }
  private function onMouseMoveBall(event:MouseEvent):void {
   trace("mouse move - ball");
  }
  private function onMouseDownStage(event:MouseEvent):void {
   trace("mouse down - stage");
  }
  private function onMouseUpStage(event:MouseEvent):void {
   trace("mouse up - stage");
  }
  private function onMouseMoveStage(event:MouseEvent):void {
   trace("mouse move - stage");
  }
 }
}

这个类只不过是建立了前面说过的三种鼠标事件的处理函数,先为ball建立侦听,再为stage建立侦听。通过这些可以让我们知道事件是何时发生的。大家可以通过这个文件来明白到底什么时候什么地方会触发这些事件,有些需要注意的地方:

■ ball事件只发生在鼠标经过 ball的时候。

■ 特别要注意, ball的mouseMove事件只在鼠标经过 ball的时候才发生。

■ 无论鼠标在哪,都会获得 stage事件——即使经过 ball的时候也会发生。这样一来,就会得到两个事件——一个是 ball的,一个是 stage的。

■ 不可能在没有 mouseDown事件的情况下,就出现了mouseUp事件。

现在大家已经掌握了本章的一些重要事件的基础,下面开始学习拖拽。

时间: 2024-10-09 03:18:44

Flash基础理论课 第七章 交互动画:移动物体Ⅰ的相关文章

Flash基础理论课 第七章 交互动画:移动物体Ⅱ

返回"Flash基础理论课 - 目录" 投掷 在Flash中,投掷是一个什么概念?它意味着当我们点击一个对象时开始对它进行拖拽,再沿某个方向移动一段距离,松开鼠标后,物体沿拖拽的方向继续移动. 在拖拽的过程中,需要确定为移动物体所需的速度向量,然后在鼠标释放后,将这个速度向量的值再赋给物体.换句话讲,如果每帧向左拖拽影片10个像素的话,当鼠标松开时,它的速度向量应该是 vx = -10. 设置新的速度向量来对大家来说没有问题.只需要将vx,vy 的值赋给物体,如图7-1所示,但是如何确

Flash基础理论课 第十三章 正向运动学:行走Ⅰ

返回"Flash基础理论课 - 目录" 前面章节介绍的都是ActionScript交互动画的基础,也可以说是一些高级"基础".现在开始,我们进入另一条有趣的技术之路,运动学. 到底什么是运动学呢?我所找到的一些资料看起来都有些让人望而却步,这是一项基于高级 3D 动画编程的技术.上网搜索一下,会发现其涉及到的方程中到处都是些陌生符号,这也成为了我们学习的最大障碍,似乎前面所学的内容都像是很基础的算法.首先,我要说,运动学并没有那么可怕.前面章节中只介绍了我们所需的一

Flash基础理论课 第五章 速度与加速度Ⅰ

返回"Flash基础理论课 - 目录" 恭喜各位!至此已经到了真正的动作编程部分,这就意味着:(a) 您已经坚持学习了前面的所有章节:(b) 您感觉前面内容已经会过了,所以跳过前面的章节:(c) 您感觉无聊所以跳过了.但是不管怎么样,要记得如果在日后的学习中遇到了相关的问题,可以回到前面几章寻找答案. 本章以基本运动为基础:速度,向量以及加速度.今后所有的ActionScript 动画,几乎都会用到这些概念. 速度向量(Velocity) 物体运动的最基本属性就是速度.很多人把速度向量

Flash基础理论课 第三章 三角学应用Ⅰ

返回"Flash基础理论课 - 目录" 从这一章开始,我们将学习三角学,并在第五章开始应用到动画技术中,其实在下一章的绘图技术中就会接触到.如果你已经对三角学有所了解或渴望学习动画方面的知识,那么可以跳过开始这部分,待日后遇到不懂的问题时,再回来学习.我们用到的90%的三角学都需要 Math.sin 和 Math.cos 这两个函数.在我写本书的第一版时,曾说过,除了在中学学习过的那些代数和几何外(而且由于时间久远大多都记不清了),我没有接受过正规的数学培训,最初在本章中的内容都是来自

Flash基础理论课 第十七章 背面剔除与3D灯光Ⅱ

返回"Flash基础理论课 - 目录" 3D灯光 刚刚这个例子近乎可以让我们的渲染达到完美的效果,但是它似乎还缺少点儿什么.有些单调.OK,OK,大家看到标题就已经知道了,下面就让我们加入3D的灯光效果吧. 同背面剔除一样,3D灯光的细节也是相当复杂并且需要数学运算的.我实在没有太多的空间讨论每个漂亮的细节,但是通过快速的网络搜索大家可以获得非常更多的相关资料,也许这些资料多得我们一生也看不完.在这里,我给大家的都是一些基础的需要用到的函数. 首先,需要一个光源.一个最简单的光源只有两

Flash基础理论课 第十七章 背面剔除与3D灯光Ⅰ

返回"Flash基础理论课 - 目录" 第十六章介绍了所有建立 3D 立体模型的基础包括:如何创建点,线,用多边形组成各种形状,以及如何为每个多边形设置颜色.但是,我们只能让颜色的透明度为50%,才能看到正确的效果.虽然制作出的 3D 立体模型也不差,但是这样做在真实度上还是有所欠缺. 本章,通过介绍背面剔除(不绘制背面的多边形),深度排序(第十五章作了一点介绍,但这次要从多边形的角度重新审视它),以及 3D 灯光,来修正这个问题. 我想应用了这三种技术所得到的 3D 模型一定会让大家

Flash基础理论课 第十一章 撞球物理Ⅰ

返回"Flash基础理论课 - 目录" 我们都希望技术性的书籍,可以潜入深,由简单到复杂.本章内容的复杂度达到了顶点.并不是说接下来的章节会越来越容易,但是希望大家在学习本章内容时不要偷工减料.我会带大家一步步地学习本章的概念,如果到现在为止大家都能很好地跟上我的步伐,那就再好不过了. 本章我们要关注动量:两个物体发生碰撞后动量会发生什么样的变化,动量的守恒,以及如何在ActionScript中应用动量. 在本章的例子中使用的对象,都本这简单直接的原则,这个学科通常是指"撞球

Flash基础理论课 第六章 边界与摩擦力Ⅰ

返回"Flash基础理论课 - 目录" 到目前为止,我们已经学会了如何在影片中绘制图形,并且通过施加外力使影片运动起来.然而,在这些例子中也许会遇到这样的烦恼:物体移动到屏幕外后就不到了.如果在某个角度上运动得过快,那么就没有办法再让物体退回来,只能选择重新运行影片. 我们常常忽视边界的存在如:墙和屋顶,最平常的就是地面.通常在制作太空模拟时,要用环境边界作为一道屏障,保证物体能够在一个可见的范围内运动. 另一个常被忽略的问题是,所处的环境如何改变物体的运动.惯性一词是用来形容物体在空

Flash基础理论课 第四章 渲染技术Ⅰ

返回"Flash基础理论课 - 目录" 前一章面所看到的绘图示例中,只使用了一些非常简单的绘图指令,前面我们也几次提到了这个神秘的"drawing API",但没有加以详细的解释.本章我们将学习使用 ActionScript 创建视觉元素,其中包括 ActionScript的颜色,绘图 API ,ColorTransform类,滤镜(filter)和 BitmapData(位图)类.在本章的很多地方都会用到颜色,那么就先来学习第一课吧. Flash中的颜色 在Fla