Flash MX 2004 编程(AS2.0)教程

来源:岁月联盟 编辑:zhu 时间:2010-04-08
第1章入门



ActionScript是一种编程语言,Flash专用。ActionScript的语法类似Javascript或者Java,如果你以前接触过这两种语言,你会发现ActionScript非常易懂易用。即便你没有接触过Java或者Javascript,掌握和运用ActionScript也绝非什么难事。

 

1.1ActionScript的演变过程



ActionScript是不断发展的,最早出现在Flash 5种,目前的最新版本是ActionScript 2.0,已经趋于成熟。Flash 5中的ActionScript运行速度非常慢,而且灵活性较差,无法实现面向对象的程序设计。到了Flash Mx中,ActionScript解决了以前的一些问题,同时性能、开发模式得到进一步的提升。Flash MX 2004对ActionScript再次进行了全面改进,2.0版横空出世,ActionScript终于发展成为真正意义上的专业级的编程语言。

 

1.2ActionScript程序的构成



和所有的程序设计语言一样,ActionScript也有自身的各种组成“元素”,比方说关键字、语法格式等等,了解这些基本知识是学习Flash的一个最基本的步骤。

下面我们就来通过一个简短的代码片段看一下ActionScript程序的结构,这段代码定义一个按钮所拥有的行为,现在我们不需要深究这段代码究竟是干什么的,只是要对其进行解剖,了解其结构。

on (release) {

var angle:Number = 5.00;

wheel_mc._rotation=90;

wheel_mc.gotoAndPlay (50);

}

事件

事件,在程序设计中的含义和他在日常生活中的含义很相似。比方说,你在Flash影片中移动鼠标、单击鼠标、按下键盘上的某个键都会产生事件。比方说在在上面的例子中release就是一个事件,当用户在当前的按钮上释放鼠标时,这个事件就会发生,on(release)后面大括号内的代码就是用来处理这个事件的。

语句

ActionScript中每个完整的语句以分号“;”结束,执行某项特定的操作,比如这样的代码var angle:Number = 5.00;

他会创建一个名为angle的变量,其类型为数字,设置其参数为5.0。

再比如wheel_mc.gotoAndPlay (50);这个语句的作用就是从影片剪辑wheel_mc的第50帧开始播放影片。

运算符

运算符非常好理解,含义基本和数学以及逻辑运算的符号相同,包括=、〈、〉、+、-、*等等。

关键字

关键字是ActionScript的“私有财产”,进行程序设计时,在变量、函数等用户自定义的元素命名时必须加以“避讳”。例如on就是一个关键字,那么我们就不能将变量命名为on,否则程序就会被你搞得晕头转向,不知道你想让它干什么 。

点(.)

这个小点(“.”)容易让初学者感到摸不着头脑,别看它不起眼,用的却非常频繁,它的作用通常两个。第一,它可以用来定位某一个影片剪辑,例如_root.china.cities.beijing这个语句就代表主事件线上名为china的影片剪辑中名为cities的影片剪辑中的名为beijing的那个影片剪辑,比较拗口,其实我们如果把这个小点练成“中的”,问题就很清楚了。

ActionScript是一种面向对象的设计语言,因此这个小点还有另外一个用途就是访问对象属性、调用对象方法。比方说,我们想让影片剪辑wheel_nc转动90度,可以使用这样的语句(其中的_rotaion就是影片剪辑的一个属性):wheel_mc._rotation = 90;

再比如,要想通过ActionScript播放一段影片剪辑可以使用

wheel_mc.play()。

注释

ActionScript中的注释和很多语言中的详细,这些注释仅仅供开发者做一些注记,并不当作程序的正式组成部分。多行的注释用//开头,多行注释用/*开头,用*/结尾

 

1.3ActionScript编辑器



Flash MX 2004中提供了一个非常易用的ActionScript编辑器,这一小节我们就来熟悉这个编辑器的使用方法。

 

1.3.1

启动ActionScript编辑器

在Flash MX 2004中打开菜单“窗口-〉开发面板-〉动作”(快捷键F9)即可打开ActionScript编辑器。



 

1.3.

2ActionSctipt编辑器的结构

从图中可以看出,ActionScript编辑器由四个部分组成





脚本面板

这个区域相当于一个文本编辑器,在这里我们可以输入脚本代码。而且,这个区域是“上下文敏感”的,也就是说,当你在上面的工作区中选中了不同的界面元素(比如某个按钮、某一帧等),这里就会显示和界面元素相对应的脚本。

脚本面板按钮

这里一个和脚本编辑相关的工具栏,比方调试程序设置端点就需要使用这里面的按钮。

行为列表

这里分门别类地列出了ActionScript所提供的脚本命令,主要供不太熟悉ActionScript用户使用,双击这里条目,或者将命名条目拖放到右边的脚本面板中即可向脚本中添加命令。

脚本浏览器

这里列出当前工作的项目中含有脚本程序的界面元素的列表,通过它可以快速浏览脚本,大大方面程序的编写。

 

1.3.

3ActionScript编辑器简化代码编写的特性
  1.3.3.1可见元素类型自动识别

  下面我们就通过几个小例子看一看ActionSctipt编辑器所具有的特性,首先是ActionScript在元素命名的一个重要特性,即根据元素名称的后缀来识别器类型。
  1)打开“库”面板(快捷键CTLR+L),单击左下角的添加元件按钮,选择元件类型为“影片剪辑”,设置影片剪辑名称为Movie_Clip。



  (2)这时将会进入影片剪辑的编辑状态,在这里随意进行一些绘制,然后回到主场景中,从“库”面板中将Movie_Clip拖放到主工作区中建立影片剪辑的一个实例,选中这个实例,在其属性面板中,设置实例名称为Movie_Clip_Instance_mc(注意,最后的后缀“_mc”非常重要,不可省略)。



 (3)在脚本面板中输入这个实例的名称,然后输入一个点号“.”,看到什么了?一个小小的复选框弹了处理,列出当前这个实例所具有的一些属性,有了它的帮助,我们的脚本编辑工作将会大大提高效率。



 注意看,这里列出的属性都是和影片剪辑相关的属性,也就是说ActionScript已经成功地将影片剪辑实例Movie_Clip_Instance_mc识别出来了。
  应该说这只是一个辅助编辑的功能,但是即便你将来成了高手,最好也应当按照这样的方式命名元素,因为它不仅可以大大提高代码编写的效率,而且可以减少错误。比方说,如果按照这样的命名方式对元素进行了命名,但是按点号之后没有出现弹出窗口,那么你一定是在某个地方出了错。
  后缀名为“_mc”的元素会被识别为影片剪辑,类似的,后缀为“_btn”的会被识别成按钮,而后缀为“_tx”的最会被识别成文本。
1.3.3.2非可见元素类型自动识别

  以上说的是ActionScript对可见元素的识别,那么一些在场景中不可见的元素,比如声音、颜色等等,ActionScript又会如何识别呢?我们可以通过类型设定来实现,比如:

  在脚本面板中输入这样两行代码:
  var newSound:Sound=new Sound()
  newSound.
  当你在newSound后面按下点号“.”时,就会弹出小窗口显示声音的相关属性。






  在这种情况下,ActionScript仍然能够识别元素类型的原因在于,上面我们定义newSound时将其定义为一个Sound类型的变量(通过:Sound)。

  1.3.3.3 函数参数自动提示
  在actionScript编辑器中输入一个函数并输入函数参数的左括号时,将会有一个提示窗口显示出来,列出这个函数所需要的参数,如果你调用了一个函数但是没有这样的提示弹出,通常说明你在什么地方出错了。



 

1.3.

4独立脚本文件

打开菜单“文件->新建”,从新建文档对话框中选择“动作脚本文件”可以建立独立.AS文件,这种文件的最大优点是可以重复使用。比方说,你在一个项目中建立的脚本可以放在独立的.AS文件中,其他项目要使用到类似的功能,你就可以直接调用这个.AS文件中的代码。这样可以大大提高开发效率,减少代码的冗余程度。




1.4第一个脚本程序

下面我们通过一个非常简单的ActionScript程序演示ActionScript的操作过程,虽然这个例子看上去有点“傻傻的”,但麻雀虽小五脏俱全,它涵盖的ActionScript知识还是比较全面的。这个例子

1.4.1外部数据文件

建立一个纯文本文件,命名为substrahend.txt,输入以下的内容,然后将其和示例场景存放到同一个文件夹当中。



在后面的实例中,我们将会读取这个文件的内容并将其中的数据运用于程序中,这是Flash应用开发的一种重要方法,也就是“数据、代码相分离”,.fla文件中尽量只包含程序的执行代码,而将程序执行中需要使用的数据用单独的文本文件保存。这样,如果我们需要修改数据,就可以直接编辑文本文件,而不用大费周章地修改程序。修改程序不仅麻烦,容易疏漏,而且很容易把程序搞得一塌糊涂。这是我们在这个系列教程中第一次使用“数据、代码相分离”的方法,将来还会用的更多,你一定要掌握这种方法的要点,然后加以运用,这样你的程序才会更加稳定、灵活。

1.4.2影片剪辑

1、启动Flash MX 2004,建立一个新场景文件,向其中添加一个影片剪辑,命名为Movie_Clip,进入这个影片剪辑的编辑状态。

2、向这个影片剪辑中添加三个帧(具体数量可以根据你的实际情况来设置),每个帧中添加一个文本对象,适当设置内容。在后面的制作中,我们将根据用户的输入,在这个影片剪辑内部的帧之间跳动播放从而实现对用户输入的反馈。在这个例子中,我们设置三个文本对象中显示的内容分别是“请输入参数”、“参数错误”和“运算成功”。






3、分别选择这三个帧,在下面的脚本面板中输入这样的语句

this.stop()

这个语句的作用非常简单,就是暂停影片播放。在下面的制作中,我们将把这个影片剪辑放到主场景中建立一个影片剪辑实例,并用这个实例向用户提供反馈,我们当然不希望用户还没有输入,这个影片剪辑就不断地跳动,那还谈什么交互性呢?所以,用stop()语句让这个影片剪辑在每一帧播放完后立刻暂停下来。

这个语句中有个this,这个变量可谓千变万化无所,无所不能,在影片剪辑内部使用this,这个this就指影片剪辑本身,在影片剪辑实例中使用,他就指当前的影片剪辑实例本身。所以这是一个上下文相关的变量,使用时要格外小心,要搞清楚自己正在什么样的上下文中使用这个变量。

1.4.3主场景设计






1、进入主场景的编辑状态,建立两个层,分别命名为“界面”和“反馈”,界面层用来添加用户输入数据的窗口、确认输入的按钮。反馈层添加一个影片剪辑Movie_Clip的一个实例来对用户输入进行反馈。

2、在“界面”层中添加若干个文本对象,设置其内容,除第二个文本对象设置为“输入文本”(我们将使用这个文本对象接收用户的输入),其余的使用默认的“静态文本”。

这里和后面的程序代码相关的文本对象有三个,第一个文本对象显示从文本文件中读取出来的数据,其名称为minusend_txt(注意命名的后缀,原理在前面已经解释过了);第二个接收用户输入的数据,其名称为subtrahend_txt;最后一个显示数据,名称为result_txt。



3)现在添加第三个层,将其命名为“脚本”,单击“库”面板右下方的添加按钮,新建一个“按钮”类型的原件,简单设置一下按钮的外观(这个教程中我们注意的焦点是脚本编写,而不是界面),将其拖放到“脚本”层当中。

 

1.4.4

代码编写

现在开始进入最麻烦的步骤——代码编写,我们将会接触到很多新的东西。

1、文本文件数据加载

在最开始的时候,我们曾建立一个文本文件,将其命名为“subtrahend.txt”,存在.fla文件所在的目录下,这个文件中包含有程序需要读取的参数,现在我们就要编写代码将这些数据读取出来。

选中“脚本”层中的第一帧,然后打开行为面板,输入这样的代码:

 

var externalData:LoadVars = new LoadVars();

externalData.onLoad = function(){

subtrahend_txt.text = externalData.subtrahend;

}

externalData.load("subtrahend.txt");



var externalData:LoadVars = new LoadVars();这个语句的作用是建立一个LoadVars对象,将其命名为externalData。

而紧接下来的三行语句的作用是处理externalData对象的onLoad事件的代码,也就是说,当externalData对象加载的时候(onLoad),将读取externalData对象的subtrahend属性并赋值给界面上的subtranhend_txt,从而就完成了将数据从文本文件中读取出来并显示在界面上的过程。

你也许会问,externalData对象的subtrahend属性是从哪里“冒出来”的,回顾一下我们在实例开始时建立文本文件时在其中输入的内容是subtrahend=100,凡是以“&”的行,LoadVars对象都会将&后面的单词识别为自己的一个属性并将紧随其后的等号右边的参数作为这个属性的值。

2、用户输入数据的处理

这个减法运算的,两个运算数一个是从文本文件中读取出来的,另外一个是根据用户的输入获得的,前面设置文本对象属性的时候我们已经将其中一个设置为“输入文本”,用户可以在其中输入数值。现在就是要处理当用户完成数值输入然后单击“Submit”按钮所要执行的操作。

选择“脚本”层中的那个提交按钮,为其添加这样的代码:

 

on (press) {

var minuend:Number = Number(minuend_txt.text);

var subtrahend:Number = Number(subtrahend_txt.text);

finalResult=minuend-subtrahend

}


这段代码处理用户在该命名按钮上单击鼠标后需要执行的操作,这里的两个语句的作用是将,界面上的两个文本对象显示的内容转换成数值并分别用两个变量minuend和subtrahend保存,然后运算两者的差并保存到变量finalResult中。

3、根据运算结果提供反馈

首先拖放一个影片剪辑Movie_Clip的实例到场景的“界面”层当中并将这个影片剪辑实例命名为Movie_Clip_Instance_mc,要想在代码中引用影片剪辑的实例必须为其指定名称。



下面根据finalResult的值来确定给用户什么样的反馈。在On(Press)事件处理中追加以下的代码。

 

on (press) {

var minuend:Number = Number(minuend_txt.text);

var subtrahend:Number = Number(subtrahend_txt.text);

finalResult=minuend-subtrahend;

result_txt.text=finalResult;

if (finalResult> 0)

Movie_Clip_Instance_mc.gotoAndPlay(3)

else

Movie_Clip_Instance_mc.gotoAndPlay(2);

}


追加的这几行代码使用了一个简单的判断结构,即if...else...,如果if括号中的条件满足则执行前一条语句,否则执行后一条语句。这里我们调用了影片剪辑实例Movie_Clip_Instance_mc的gotoAndPlay方法,这个方法可以让影片剪辑在自身内部调转播放,由于我们在影片剪辑中的不同帧上安放了不同的反馈信息,因此通过这个语句就可以非常快速地完成对用户的反馈,这也是交互式Flash应用程序开发中常用的小技巧。

 

1.5总结


麻雀虽小,五脏俱全,这个程序看上实在有些简陋,但是通过这个傻傻的例子我们还是能够学到很多Flash MX 2004 ActionScript的知识,这里再作一个回顾,对照下面的列表检查一下自己掌握了多少:

Flash程序输入数据有两种比较常用方法:一是通过用户输入,在这个例子中我们通过一个“输入文本”来实现,还有一种是通过文本文件,在这个例子中我们通过建立LoadVars对象并调用其Load方法,然后再起onLoad()事件处理中提取数据。

在On(Press)事件中,可以处理用户单击按钮的操作

使用影片剪辑实例的gotoAndPlay()方法可以播放影片剪辑实例内部指定的帧

函数Number()可以用来提取界面上的文本对象中显示的数字。

 

第2章处理事件



事件,是推动Flash程序运行的灵魂,可以说,没有事件就没有Flash程序,真是因为有了丰富的事件,Flash程序的交互性才能够得以实现。开发Flash程序时,我们需要花很大一部分精力去估计程序应该处理哪些事件以及如何处理这些事件。比方说对一个按钮,我们是不是只需要处理一下用户单击按钮所触发的事件?如果需要按钮对用户的更多操作作出反应,那么我们就需要添加相应的事件处理代码。

Flash程序可以处理的事件可谓多如牛毛,我们显然不能可能将他们一个一个罗列出了讲个所以然,其实这些事件的名称、作用和处理方法是相似的,只要掌握基本的原理,就可以一通百通。最重要的并不是了解每个事件的细节,而是要学会根据自己需要完成的程序所具有的功能选择适当的事件并进行处理。

在第1章的实例中,我们已经使用代码处理了一个Press事件,事件处理代码的结构都是一样的,用自然语言来描述就是:

当这个事件发生时(事件名称)

{

执行这些操作

}


 

2.1鼠标和键盘事件



鼠标事件可以说是应用最多的事件了,所以我们就从鼠标事件下手来看看当用户在屏幕上挥动鼠标时,Flash应该如何作出反应。

 

2.1.1

鼠标按下(on(press))

如果某个界面元素(比如一个按钮或者一个影片剪辑的实例)的代码中含有on(press)这样的事件处理代码,那么当用户在这个界面元素上按下鼠标时,on(press)后面的大括号中的代码就会被执行。
 

2.1.2

鼠标释放(on(release))

这个事件在鼠标健释放的时候发生,这个事件通常都是在on(press)之后发生的,有press才能有release嘛!举个例子来说,当我们需要处理用户单击某个按钮的事件时,就可以为这个按钮添加一个on(release)事件处理。尽管在这种情况下on(press)和on(release)的作用是相似的,因为通常press之后总会release,但是我们还是应当尽量使用on(release),为什么呢?因为如果使用on(press)会让你的按钮“过于敏感”——轻轻一按,代码立刻就被执行了,如果用户发现自己按错了,可就没有后悔药吃了。而当使用on(release)时,一旦用户发现按错了,可以按住鼠标按钮不放,将鼠标指针移动到按钮之外释放,代码就不会被执行,这才是比较人性化的按钮行为。

 

2.1.3

在外部释放鼠标(on(releaseOutside))

当用户在某个按钮或者影片剪辑实例上按下鼠标(注意,是按下鼠标按钮不放),然后拖动鼠标指针,在这个按钮或者影片剪辑实例外面再释放鼠标,这时就会发生releaseOutside事件。我们可以在这个按钮或者影片剪辑的事件处理代码中添加on(releaseOutside)来捕获并处理这个事件。

 

2.1.4

鼠标悬停(on(rollOver))

当鼠标指针在某个界面元素上面时,rollOver事件就会发生。这个事件最典型的应用是用来制作鼠标指向某个按钮或者影片剪辑实例时产生的反馈效果:比如按钮颜色变化、弹出菜单或者执行其他的一些操作。

 

2.1.5

鼠标移出(on(rollOut))

这个事件和rollOver相对,很显然,当鼠标指针在一个界面元素上方运动时产生rollOver事件,那么鼠标指针移出这个界面对象的时候就会产生rollOut事件。rollOut事件的出路iherollOver事件的处理经常是成对出现的,比方说,我们捕捉rollOver事件,在on(rollOver)中弹出了了一个菜单,那么很显然我们还需要捕捉rollOut事件,在on(rollOver)中添加适当的代码将弹出的菜单隐藏起来,否则菜单就会一直显示在界面上。

 

2.1.6

拖动掠过(on(dragOver)

拖动操作我们都很熟悉,就是鼠标在某个对象上按下以后不释放,然后拖动鼠标。dragOver事件就是当鼠标指针处于拖动状态时经过某个对象时发生的事件。在制作拖动效果时,我们经常要和这样的事件打交道。

 

2.1.7

拖动移出(on(dragOut))

从名字也能看出来,dragOut和dragOver恰好相反,也就是当鼠标处于拖动状态下时从一个对象上法移动出去时发生的事件。

 

2.1.8

键盘事件(On(keypress”<>”))

当我们需要捕捉用户的按键操作时都需要使用这个事件,比方说如果需要捕获用户按下方向键左键的操作时可以使用On(keypress””),其他的以此类推。

 

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;



  总的来说,按钮够实现的功能,影片剪辑都能实现,而影片剪辑能够实现的功能按钮则未必能够实现。那还要按钮有什么用?这主要是由于,按钮是程序界面使用极其频繁的元素,提供专门的按钮类型可以提高设计的效率。
 

2.3帧事件



2.3.1帧事件简介

帧事件和前面介绍的鼠标事件以及键盘事件的主要区别在于,帧事件并不是一个交互式的事件。每当影片播放指定的帧时,帧事件内部的代码就会被执行。在Flash的开发环境中,帧事件在时间线上会有一个“a”标记。

在具体的设计中,帧事件的用处是非常多的。比方说影片的第1帧总是受到垂青的,因为我们一般总是要在这一帧当中对程序进行一些初始化操作,比方说定义变量、函数等等。再比如,在很多交互式的程序中,我们一般要在需要等待用户输入(比如单击一个按钮)的时候,选择恰当的帧插入一个帧事件,并在其中输入stop()或者类似的代码。

2.3.2帧事件应用实例

为了演示帧事件的原理和使用方法,我们将制作一个播放幻灯片的小程序。程序的界面上有一个图片显示区域(影片剪辑实例,名称为picture_mc),一个反馈信息显示区域(含两个动态文本,名称分别为message_txt和caption_txt)和一个播放控制按钮区域(包含三个按钮,功能分别是播放、暂停和复位,名称分别是play_btn、pause_btn和rewind_btn)。

这个程序实现的功能并不复杂,首先picture_mc会自动每隔一段时间切换一幅图片,用户可以在下面的播放控制栏中单击按钮来播放、暂停或者复位动画的播放。

2.3.2.1图片播放

1、打开库面板(快捷键Ctrl+L),单击左下角的添加按钮添加,选择新元件类型为“影片剪辑”,进入这个影片剪辑的编辑状态。

2、添加两个层,分别命名为“图片”和“脚本”,在“图片”层当中,添加若干个空白关键帧,然后在每一个关键帧内部贴上一幅图片,调整各幅图片的位置和大小,以免播放的时候图片位置错误。



3、逐一选择“控制”层当中的帧,分别输入类似这样的代码

stop ();

_root.caption_txt.text = "水瓶座";

第一行的作用是让影片剪辑的播放停止下来,也就是显示图片,然后等待主场景发送过来的事件继续播放,紧接下来的那个语句用于在主场景中显示图片内容的提示,因此每一个帧中_root.caption_txt.text=””中后面引号里面的内容是不一样的。注意,这里的_root是必不可少的,否则代码执行的时候会找不到对象,别忘了,我们现在正在编辑一个影片剪辑自身的事件线,而他又要引用顶头上司(主场景)中的对象,不加上完整的头衔,自然在运行的时候是找不到对象的了。




4、在“控制”层中多添加一个帧,在这个帧的时间处理代码中输入

gotoAndPlay(1)

这句代码的作用是让影片播放完成之后重新回到第一帧重新播放。
2.3.2.2图片的自动切换

1、回到主场景中,将上一步制作好的影片剪辑拖放到场景中并将其命名为picture_mc,调整其长度为45帧。

2、添加一个动态文本,命名为message_txt,我们将用它来显示倒计时,倒计时完成时,picture_mc中的图片自动切换。另外还要添加一个名称为caption_txt的动态文本,它将显示图片的标题,由影片剪辑picture_mc自身的代码来控制。

3、新建一个层,命名为倒计时,调整其长度为45帧左右,在0、15、30帧处,分别添加帧事件,代码内容分别是:

message_txt.text="图片将在3秒后切换";

message_txt.text="图片将在2秒后切换";

message_txt.text="图片将在1秒后切换";

在第45帧上添加这样的代码:

picture_mc.nextFrame();

gotoAndPlay(1);

前面三个帧事件的作用是显示倒计时,最后45帧上的代码有两行组成,第一行让影片剪辑实例picuture_mc向后跳一帧。这样就形成了倒计时完成切换图片的效果。接下来的gotoAndPlay(1)的作用是退回到影片的第一帧,开始新一轮的倒计时。


2.4影片剪辑事件
  相对于前面所介绍的鼠标事件、键盘事件以及帧事件而言,影片剪辑事件则显得稍为有点难懂。当我们将一个影片剪辑放到场景中时,他就成了一个“事件发射器”,不断地报告自己的运行状态,如果我们捕获这样的事件,就可以做出相应的反应和处理。影片剪辑有多种,下面分门别类地加以介绍。

  2.4.1onClipEvent(Load)和onClipEvent(unload)
  这个事件在影片剪辑加载的时候发生,那什么是影片剪辑的加载呢?比方说,你在场景中添加了一个影片剪辑clip_mc,并让他在第10帧的时候出现影片中,那么第10帧的时候它就会触发这个事件。要想处理这个事件可以选择影片剪辑clip_mc,然后在下面的脚本面板中输入这样的代码(通常用来对影片剪辑进行初始化):

  onClipEvent(Load)

  {

  }

  onClipEvent(unload)的作用和onClipEvent(load)的作用恰好相反,当影片剪辑消失的时候,这个事件就会发生。

  2.4.2OnClipEvent(enterFrame)
  enterFrame事件会随着影片的播放而不断发生,影片每前进一帧,影片剪辑就会触发一次enterFrame事件。假设影片的播放速率为每秒20帧,那么这个事件就会以每秒20次的速率不断产生。你一定会问,这样的事件有什么作用?其实在影片剪辑事件中,enterFrame应该说是最常用的,因为他可以用来制作相当复杂的动画。比方说,我们要制作一个炸弹从空中不断翻滚落下的动画可以按照这样的步骤来执行:首先建立一个影片剪辑作为炸弹,将其拖放到场景中建立影片剪辑实例,让这个实例捕捉enterFrame事件,并为其设计这样的代码:

  onClipEvent(enterFrame)

  {

  this._Roation+=10;

  this._y+=10;

  }

  这段代码的意思就是,每隔一帧将影片剪辑(this)旋转10度,同时沿纵向移动10个单位。这里用到了一个“+=”运算符,可能有点容易让人感到困惑,其实这是一种常用的运算符简写方式,意思是“自己给自己加上某个值”,例如This._Rotation+=10和This._Rotation=This._Rotation+10是等效的。

  2.4.3onClipEvent(MounseMove)、onClipEvent (mouseDown)和onClipEvent (mouseUp)
  这个事件和前面见过的很多时间似乎有些相似,这几个事件确实是当鼠标移动的时候发生,但是要特别注意一点,不论鼠标在场景的什么位置(而不一定要在影片剪辑上方),这个事件都会发生。鼠标每动一下,MouseMove事件都会发生一次。同样,你又要问,这个事件能干什么了?举例来说,我们需要制作一个类似泡泡龙那样的游戏,屏幕下方有一门大炮,当鼠标移动的时候,炮口会始终指向鼠标的方向。这种效果就可以onClipEvent(MouseMove)来实现。具体来说,就是将大炮制作成一个影片剪辑,然后为其添加这样的代码:

  onClipEvent(mouseMove)

  {

  var_angle=((this._x-_root._xmouse)/(this._y-_root._ymouse));

  trace(var_angle);

  var_angle=Math.atan(var_angle);

  var_angle=var_angle*180/Math.PI;

  this._Rotation=-var_angle;

  }

  这段代码用到了几个Flash提供的数学函数,它们都是在Math对象内部的,因此用起来很方面。首先,用当前影片剪辑的横向和纵向座标减去鼠标的横向和纵向座标,然后计算及其夹角的正弦值,接着将这个值用反正切函数换算成角度(Math.atan),注意,结果是弧度数,需要再转换成常用的角度,最后在将其复制给影片剪辑的_Rotation参数,实现大炮随着鼠标指针的运动而旋转的效果。

  搞懂了mouseMove事件,MouseDown和MouseUp的含义也就不难理解了。

  2.4.4OnClipEvent(keyDown)和onClipEvent(KeyUp)
  这两个事件和前面的on(Keypress)相似,都是用来捕获键盘的按键事件的。不过,需要特别强调的是,OnClipEvent(KeyDown)和onClipEvent(KeyUp)这两个事件的功能要强大得多,将它们结合起来使用可以捕捉用户按下的组合键(比如CTRL+A),这比只能够捕捉单个按键动作的on(Keypress)要强大得多。比方说,如果我们需要捕捉用户按下CTRL+F的操作可以使用这样的代码:

  onClipEvent(keyUp)

  {

  if (Key.isDown(Key.CONTROL) & Key.isDown(70))

  {

  //执行相应的操作

  }

  }

  这段代码中使用了内置对象Key,这个对象对于按键的处理非常有用。IsDown()方法用来监测某个键是否已经按下,这个函数的参数可以是键值比如70对应F键。也可以使用Key对象内置的键名称,比如Key.CONTROL就是指CTRL键。将这两个键是否按下的结果进行逻辑与运算(&)就可以知道CTRL和F键是否同时按下。

  2.4.5OnClipEvent(data)
  如果某个影片剪辑实例进行了数据加载的操作,那么OnClipeEvent(data)事件会在数据加载完成的时候发生。比方说,我们在某个按钮的on(press)事件处理中加入了代码执行变量加载操作,并将代码加载函数loadVariables()的目标参数设置为某个影片剪辑。然后再为这个影片剪辑添加OnClipEvent(data)事件,当参数加载完毕之后,影片剪辑就会收到一个OnClipEvent(data)事件。

  前面介绍了很多事件,但事实上Action Script提供的事件还有很多。除了键盘事件、鼠标事件等等这些非常直观的事件之外,还有一些比较“抽象”的事件。比方说,一段声音播放完成之后会产生一个事件,当用户调整播放器的窗口大小时也会产生一个事件。捕获并处理这些事件可以进一步提升Flash影片的互动性能。
2.3.2.3按钮控制

1、添加一个新层,命名为“按钮”,调整其长度为45帧。



2、制作三个按钮,将其拖放到图层“按钮”中,将其分别命名为play_btn、stop_btn和rewind_btn。

3、为以上三个按钮分别添加上这样的代码。





on (release) {

play ();

}

on (release) {

stop ();

}

on (release) {

gotoAndPlay (1);

pictures_mc.gotoAndStop (1);

}

这三段代码中,前两段非常直接,只要对影片进行播放或者停止操作就万事大吉了。最后一段是进行复位的,有两行,因为影片本身和影片剪辑实例都需要复位,所以略为显得罗嗦一点。

2.5事件处理函数

  说完了常用的事件,在来说说事件处理的两种不同方式。前面介绍的事件处理代码的方法是这样添加的:首先,选择将要捕获事件的对象(影片剪辑实例或者按钮),接着,打开脚本面板,然后编写“on 事件名称”的代码。比方说,如果我们要让一个影片剪辑实例捕捉mouseDown事件,那么可以先在场景中选择这个影片剪辑实例(假设其名称为movieClip_mc),然后为其设置如下等的代码。
  onClipEvent(mouseDown) {
  }
  这种方法用起来简洁直观,但是它有一个缺点是——交互性不足。怎么说呢?这种方法建立起来的事件处理代码是“固定”的,不能在程序运行的过程中动态更改。比方说,我们如果我们希望这个影片剪辑在影片播放到第10帧的时候使用某一段代码来处理mouseDown事件,但是当影片播放到第20帧的时候,我们有需要另外一段代码来处理mouseDown事件。这样的应用你是不是没有遇到过,来举一个直观的例子说,我们都使用过电视机的遥控器,电视机的遥控器上很多按钮都是“多模态”的,也就是说,这些按钮在不同的状态下功能是不同的。调节声音的按钮在正常状态下是用来提高和减小音量的,但是如果你进入了颜色设置模式时,按同样的按钮调节的不再是音量而是颜色了。
  仍然举上面的例子来说明,如果我们在影片的某一个帧中加入这样的代码
  movieClip_mc.onMouseDown = function() {
  }
  就可以实现对事件处理代码的动态切换了。这个语句比较特殊,它是说,将影片剪辑实例movieClip_mc的onMouseDown事件处理代码用function()代替,而function()后面的大括号中就是新的事件处理代码。你可以影片中多次使用这种方法,只要每次后面function()函数的内容不同就可以实现事件处理代面的动态调整了。需要注意的时候,使用这种方法定义事件处理代码是,影片剪辑实例必须出现在场景中,当它从场景中消失后,事件处理代码将会自动删除,如果要再次使用,必须重新指定。如果想删除时间的处理代码可以使用 delete movieClip_mc.onMouseDown 这样的语句。
  通常在编写比较复杂的程序时,我们都倾向于使用事件处理函数来为场景中的对象设置事件处理代码,因为这样可以通过一条事件线将绝大多数代码串起来,便于代码的维护和调试。否则的话代码分散在各个对象内部,容易使代码显得比较混乱,出了问题也不容易找出错误所在。
 

 2.6事件监听


  事件有一个习气,就是“拉帮结派”,正常情况下,某些对象是接收不到某些事件的,比方说一个动态文本就不能接受鼠标事件。如果我们编写这样的代码为一个动态文本指定事件处理代码:

  myTextField_txt.onMouseDown = function(){

  }

  当我们在它上面单击鼠标时,代码并不会执行,因为它压根就不会接收到鼠标事件。要想让它正确接受鼠标事件,必须再加上这样的代码:

  Mouse.addListener(myTextField);

  这个语句就是让myTextField向Mouse对象“报道”,这个语句执行之后,myTextField就具有了“监听”鼠标事件的功能了。 特别需要注意一点的,一旦某个对象被注册为Mouse的监听器,它将会接受到鼠标发出的所有事件,不论发生事件时鼠标是否在对象上方,根据这个原理,我们来制作一个小的鼠标监视器。

  首先向场景中添加两个文本,上面一个静态文本,下面一个动态文本,将动态文本命名为mousePosition_txt。




  在影片的最后一帧上单击,打开脚本面板,输入这样的代码:




  代码很简单,第一句停下影片准备接收事件,接下来将mousePostion_Txt注册为接收鼠标事件,然后使用事件处理函数的方法捕捉onMouseMove事件并将事件发生时的鼠标位置显示到mousePostion_txt中,以上这个小程序的执行效果如下图。


  除了监听鼠标事件之外,我们还可以监听按键事件和场景事件:

  Key.addListener (historyArray);

  Stage.addListener (historyArray);

  监听器使用过之后可以使用removeListener将其删除,例如:

  Key.removeListener (historyArray);

  Mouse.removeListener (historyArray);

  Stage.removeListener (historyArray);

  2.7小结
  事件处理是交互特性和自动运行的基础,ActionScript所能处理的事件非常非常繁多,我们完全没必要一个一个地去学习,因为这些事件的名称和用途大多都是相当直观的。比如处理鼠标移动就是onMouseMove,处理鼠标按键就是onMouseDown,等等,需要用的时候查一下手册就可以轻松搞定。只不过onClipEvent事件要注意领会掌握,它的使用比较灵活。本章的结尾还介绍了使用事件处理函数为对象指定事件处理代码的方法,应当尽可能地用这种方法处理事件,它可以让你的程序结构更加清晰易读。