中华网通行证
用户名 密码

Flash MX 2004 ActionScript图文教程(九)

中华网科技 http://tech.china.com
进入BBS】【进入聊天室】【浏览字号: 】【关闭窗口

2.2实例
  前面简要介绍了一下几种常用的鼠标事件,下面我们就通过一个完整的例子来综合运用一下这些事件。
  首先建立一个场景,向其中添加三个影片剪辑实例,名称命名为hand_mc、message_txt、eventTrapper_btn和dragTest_mc,hand_mc用来替换鼠标、message_txt是一个动态文本,显示反馈信息,eventTrapper_btn是按钮实例,用来捕捉各种鼠标事件,dragTest_mc则用来演示拖动事件的处理。
  2.2.1自定义鼠标
  我们经常需要在Flash程序中使用自定义的鼠标指针,下面在这个例子中,我们将把鼠标指针换成自定义的外形。进入主场景,选择第一帧,在脚本面板中输入以下的代码:
  stop ();
  Mouse.hide();
  startDrag ("hand_mc", true);
  Message_txt.text = "开始鼠标事件试验 ";
  第一句代码是stop(),也就是让影片播放到这里停下来一边等待用户的操作,Mouse.hide()隐藏鼠标指针,紧接着startDrag则是开始对影片剪辑实例hand_mc的拖动操作,由于前面已经将鼠标指针隐藏,因此这个命令现在的作用相当于将鼠标指针替换为一个图标。注意看,startDrag后面有两个参数,第一个作用很明显,就是将影片剪辑实例hand_mc作为拖动对象,而后面的ture则是将影片剪辑实例的中心和鼠标指针的中心锁定起来,如果设置为false,那么影片剪辑的中心将会和鼠标在场景内首次单击的点的位置锁定起来。在这个例子中,我们使用startDrag命令的目的是模拟鼠标指针替换的效果,因此显然应当设置这个参数为true。
  2.2.2捕捉并处理事件
  现在选中影片剪辑实例eventTrapper_btn,进入脚本面板,在这里我们可以编写一系列的事件处理代码。前面我们介绍了多个和鼠标相关的事件,这里就将其一个个捕获,注意观察他们之间的异同。
  on (rollOver) {
  message_txt.text = "鼠标浮动事件";
  }
  on (rollOut) {
   message_txt.text = "鼠标移出事件";
  }
  on (press) {
   message_txt.text = "鼠标单击事件";
  }
  on (dragOut) {
   message_txt.text = "鼠标在当前对象上按下左键后拖出";
  }
  on (release) {
   message_txt.text = "鼠标释放事件";
  }
  以上几个是比较简单的事件,下面我们再来处理稍微复杂一些的事件。
  选择影片剪辑实例dragTest_mc,然后再代码面板中输入这样的代码
  on (dragOver) {
   this._alpha = this._alpha - 10;
  }
  当用户按下鼠标左键并在dragTest_mc上拖动时,这个事件内部的代码就会被执行。this变量前面我们已经打过交道了,它的作用就是引用当前的对象(也就是dragTest_mc),_alpha是它的一个属性,透明度,这里我们通过一个简单的运算逐次降低其透明度,最终的效果类似于图像被橡皮擦掉一样。
  再选择按钮eventTrapper_btn,为其添加这样的代码:
  on (releaseOutside) {
   eventTrapper_btn._x = _root._xmouse;
   eventTrapper_btn._y = _root._ymouse;
  }
  这段代码可以实现拖放效果,当用户在eventTrapper_btn上按下鼠标左键并拖动,当鼠标在eventTrapper_btn外面释放时,releaseOutside事件就会发生,在这个事件中我们将eventTrapper_btn的位置(通过_x和_y坐标来定义)设置为当前鼠标释放时鼠标所处的坐标位置,按钮就会移动了。
  上面是通过鼠标拖动的方式移动物体,下面再试试看用键盘来实现,选择evnetTrapper_btn,为其追加这样的代码。
  on (keypress"") {
   eventTrapper_btn._x = eventTrapper_btn._x-6
  }
  on (keypress"") {
   eventTrapper_btn._x = eventTrapper_btn._x+6
  }
  on (keypress"") {
   eventTrapper_btn._y = eventTrapper_btn._y-6
  }
  on (keypress"") {
   eventTrapper_btn._y = eventTrapper_btn._y+6
  }
  这四个事件的作用是很明显的,当用户按向左键时(发生keypress””事件),将eventTrapper_btn._x的值减小6个单位,以此类推,其他的代码含义就不难理解了。
  2.2.3影片剪辑和按钮
  从前面的实例可以看出,影片剪辑的实例也是可以拥有自身的事件处理代码的。但是在使用影片剪辑实例事件时必须注意以下几个问题:
  我们可以为影片剪辑实例添加原本由按钮捕捉的事件,比如rollOver、rollOut等等。不过要特别注意,影片剪辑实例虽然可以捕捉这样的事件,但是在这些事件的处理中我们不能直接引用其他的对象,一般我们只对影片剪辑自身的属性进行修改,比如前面影片剪辑实例dragTest_mc处理事件就是一个例子。我们可以在这个事件的处理中修改影片剪辑实例dragTest_mc的透明度,但是不要指望在其中简单地加上message_txt.text=“”这样的代码就能修改反馈区的内容。在执行过程中,这样的代码是不会有效果的,而且Flash不会报错,这经常会让初学者感到晕头转向。解决的方法有两个,一是用按钮代替影片剪辑,其次是对上面的代码进行一下小修改,改成:_root.message_txt.text=””,这样程序又能够执行。_root是Flash提供的一个内置对象,通过它可以准确地定位界面上的元素。
  当某个影片剪辑实例被赋予了鼠标事件之后,鼠标指针在其上方会显示为一个小手,为了避免这种情况出现,可以让它捕捉rollOver事件,并加入这样的代码。
  on (rollOver) {
  this.useHandCursor = false;
  }
  useHandCursor这个属性就是设置当鼠标在当前对象上悬浮时是否显示手形指针,默认值为true,也就是显示手形指针,这里将其设置为false就不会显示了。
  我们可以为按钮实例指定名称(后缀一般用_btn),不过不要有错觉,按钮实例和影片实例还是很多区别的。最重要的点就是,按钮没有自己的时间线,而影片剪辑则有自己的时间线。这是什么意思呢?简单地说,这点区别在this的使用上面体现出来。比方说,如果我们为一个影片剪辑实例添加了这样的事件处理代码:
  on (press) {
  this._rotation = 30;
  }
  当你在这个影片剪辑实例上单击鼠标左键时,影片剪辑实例将会发生旋转。但是如果你将这样的代码赋予一个按钮实例,那么当你单击这个按钮时,将不会是按钮自身旋转而是按钮的父对象旋转。很多情况下,这种奇怪的现象会让分不清按钮实例和影片剪辑实例之间微小区别的用户答感困惑。
  再来看一个前面举过的一个例子
  on (releaseOutside) {
  eventTrapper_btn._x = _root._xmouse;
  eventTrapper_btn._y = _root._ymouse;
  }
  这行代码中,你也许会觉得eventTrapper_btn._x这样的语句太繁琐,用this._x多方便直接呢?如果这段时间处理代码是赋予影片剪辑实例的话,这样做就没有问题,但是在前面的那个例子中,这段代码是提供给按钮实例使用的,所以必须清楚明白地讲清楚移动的对象,否则运行的效果会和我们预先的设想大相径庭。
  如果你需要使用一个影片剪辑代替按钮的话,可以考虑在其内部添加特殊的标签(_up、_over、_down),然后编写相应的代码。另外,每个按钮都会有一个“热区”,也就是单击有效的区域,通常就是按钮的图形覆盖的范围,如果你需要修改这个区域的范围可以使用影片剪辑实例的hitArea属性,例如
  myClipButton_mc.hitArea = _root.myHitClip_mc;
  总的来说,按钮够实现的功能,影片剪辑都能实现,而影片剪辑能够实现的功能按钮则未必能够实现。那还要按钮有什么用?这主要是由于,按钮是程序界面使用极其频繁的元素,提供专门的按钮类型可以提高设计的效率。

 
作者:陈孝强 来源:IT.com.cn
相关教程:

Flash MX 2004 ActionScript图文教程(一)
Flash MX 2004 ActionScript图文教程(二)
Flash MX 2004 ActionScript图文教程(三)
Flash MX 2004 ActionScript图文教程(四)
Flash MX 2004 ActionScript图文教程(五)
Flash MX 2004 ActionScript图文教程(六)
Flash MX 2004 ActionScript图文教程(七)
Flash MX 2004 ActionScript图文教程(八)
Flash MX 2004 ActionScript图文教程(九)
Flash MX 2004 ActionScript图文教程(十)
Flash MX 2004 ActionScript图文教程(十一)
Flash MX 2004 ActionScript图文教程(十二)
Flash MX 2004 ActionScript图文教程(十三)
Flash MX 2004 ActionScript图文教程(十四)
Flash MX 2004 ActionScript图文教程(十五)

中华网搜索
站内搜索
全网搜索


科技频道主编信箱