Flash ActionScript编程基础

本例继续讲解AS的基础知识,今天讲解的是AS入门第二课:面向对象编程基础,对Flash的AS编程有兴趣的朋友可以到论坛与作者交流   ActionScript是一种面向对象的编程语言.通常我们会认为编程就是连续地写一系列指令,计算机按顺序地执行它.而面向对象编程则是将程序分成各个块,分散到对象上.什么是对象?对象就是我们在flash中能看到的一切东西.舞台是一个对象,时间轴、影片剪辑、按钮、文本、位图都是对象.在第一课中我们己说过:在ActionScript2.0中我们可以将程序写在关键帧、影片剪辑、按钮元件上.即便是将程序完全写在关键帧上,它也必须要对象的事件驱动才能执行. 上一篇Flash教程文章:Flash教程:认识Flash ActionScript的环境

  在理解了面向对象编程后,我们必需要对一些概念有所了解.事实上我们在上面对对象己经有了一定的了解.就如同我们的家中,所有的东西都可以叫做对象.比如,电视机,电冰箱,书桌,衣柜等等.很容易发现,这些东西,总有那么几个都有相似之处.比如,电视机、电冰箱都需要用电;书桌、衣柜都是用木头做成的. 我们便把家里的东西分成了几类,并为每一类东西取上一个名字,比如,电器类、木器类等.这样我们就理解了另一个重要的概念一"类".

  类是某一类型对象的概括或者说是模板,在ActionScript中,所有对象都是由类定义的.每个类都包括了三个重要的元素:事件、属性、方法,这是我们必须要了解的三个重要概念.

  事件:在面向对象的编程中,并不是将程序按顺序交给计算机去执行,上面己经谈到了,程序被分散到了对象上.那么要计算机执行这些程序就需要事件来触发.通俗地讲就是:当某件事情发生时就去做一些事情.这个某件发生的事情就是事件.在flash中,常常会放上一个按钮,比如"开始"按钮.程序设计者可能是这样的思路:当按钮按下时就播放动画.那么"当按钮按下时"就是按钮对象的事件.在ActionScript2.O中,程序可以写在关键帧和元件上,事件在关健帧中和原件中的输写方法是不一样的.

  事件在关健帧中的写法:

  元件名称.事件名称 = function(){

  要执行的语句

  ....

  }

  事件在元件上的写法:

  on(事件名称){

  要执行的语句

  .....

  }

  我们来做一个练习,在舞台上有一名为play_btn的按钮,现在要实现点击按钮动画就播放.新建flash文档,用椭园工具画一个园,然后,在40帧插入关健帧,将园移到另一位置,建立补间动画.新建一图层,从内部库中拖一个按钮到舞台上.打开属性面板,为按钮命名为play_btn.这里先介绍一个最常用的事件:release,这是当放开鼠标按键时触发.实际也就是完成了一个点击动作时发生.

  首先,在幀动作面板上写程序的方式完成练习:

  新建图层,命名为action,当这不是必须的,你完全可以给它取个其它名字.

  打开幀动作面板,输入:

  stop();

  //这是让动画停止播放,以便让我们点击按钮时才播放.

  play_btn.onRelease = function(){

  play();

  //让动画开始播放

         }

  测试影片,当点击按钮后,园形开始移动.

  回到场景中,可以看到,在action图层时间轴的第1幀上,有一个a字,这说明在这一幀上有程序.

  下面用在元件上写程序的方式来完成练习:

  将幀动作除第一行的stop();外其它的程序全部删除.然后,在按钮元件上点右键,点击"动作",打开动作面板,输入如下代码:

  On(replease){

  Play();

  }

  测试影片,得到相同的效果.

  注意:在幀动作面板中同元件动作面板中事件的名称不一样,如上例,在幀动作中是:onRelease,而在元件上则是:release属性:对象的属性可以理解为对象的特性,比如,大小,位置,颜色等.属性的输写规则是:

  对象名称.属性名称 = 值;

  下面介绍几个最常用的属性:

  _x,_y:分别是对象在舞上台的x,y坐标,这两个属性可以确定对象在舞台上的位置.

  _xscale,_yscale:分别是对象在舞台上沿x,y轴方向的缩放比例,实际上就是宽和高的缩放比例,以百分比表示,例如:

  my_mc._xscale = 50;

  这表示,元件my_mc的宽度缩小到原来的50%.

  _alpha:这是对象的透明度,取值为0-100.

  _rotation:这是对象的旋转度,以角度为单位.

  _visible:为是对象是否可见,可设置两个值,true(或1)和false(或0).比如要设置元件my_mc在舞台上不可见,可用:

  my_mc._visible = false; 或 my_mc._visible = 0;

  相反要设置它在舞台上可见则用:

  my_mc._visible = true; 或 my_mc._visible = 1;函数:你可能要问,属性介绍完了该介绍方法了,你怎么介绍起函数来了?原因很简单,方法也是函数.将函数附加到对象时,它就被称为方法.什么是函数呢?将完成一个任务的若干语句封装起来,就叫函数.也许用例子来说明会好理解一些.比如,要完成一个开电视的任务,可能需要很多步骤,插上电源,开机,选频道,设置音量.我们将这些步骤封装起来,并给它取个名字"开电视"这就创建了一个开电视的函数.在ActionScript2.O中创建函数的格式是:

  function 函数名称(){

  要执行的语句;

  .....

  }

  比如要创建上面开电视函数,就这样写:

  function 开电视(){

  插电源;

  开机;

  选频道;

  设音量;

  }

  函数创建以后,要调用这个函数只需:函数名()即可,比如我们要执行开电视的任务,只需输入:

  开电视();

  练习一下,我们来创建一个函数,然后调用它.打开第一帧的动作面板,输入:

  function test(){

  trace("我会写函数了");

  }

  test();

  测试影片,在输出面板中,会出现"我会写函数了"几个字.这个练习我们首先创建了一个叫test的函数,然后用test();调用了它.

  有时会有这样的情况,在函数内的语句中要用到数据,在创建函数的时候,却不能确定这些数据,比如每次调用会用不同的数据.这时就会用到参数,调用时,通过参数将数据传递给函数.格式如下:

  创建函数的格式:

  function 函数名称(参数1,参数2,…){

  要执行的语句

  }

  调用函数的格式:

  函数名称(值1,值2,…);

  还是以开电视为例:

  创建开电视函数:

  function 开电视(频道,音量){

  插电源;

  开机;

  选频道=频道;

  设音量=音量;

  }

  调用函数:

  开电视(12,28);

  调用后,电视打开,并将频道设为12,音量设为28.

  练习:在帧动作面板中输入:

  function

  test(a,b){

  c=a b;

  trace(c);

  

  }

  test(3,5);

  测试影片,输出面板中应显示 8 .

  了解了函数后,再来说方法就简单多了.上面已经说过,将函数附加到对象,就称为方法.AS中内置了很多方法,对于这些方法,我们不需要去了解它执行了些什么语句,只需要知道它可以完成的任务就行了.我们可以用:

  对象名称.方法名称();

  的格式来调用这些方法.比如有一个my_mc的影片剪辑元件,我们可以调用它的一些方法:

  my_mc.stop();

  my_mc.startDrag();

  按钮:在交互式的动画制作中, 经常会用到按钮,比如我们会放上一个"播放"、"停止"、"重放"等按钮.有两种方式可以将按钮添加到舞台上,一种是从内部库中拖一个按钮到舞台上;另一种方法是自己创建一个按钮,这里主要介绍一下自己创建按钮的方法,因为常常有人会问:为什么我创建的按钮点击它时不起作用?这可能就是创建按钮时出了问题.现在点击"插入"菜单-"创建新元件",选择按钮,这时就进入按钮编辑窗口,可以看到,时间轴上只有4帧,分别是:弹起,指针经过,按下,点击.特别要注意的是,点击那一帧,这一帧是点击的范围,因此这一帧是必须的,而且要注意的是,如果你的按钮是纯文字的,如Play,那么在这一幀应该画一个矩型,作为点击范围,不然,用户就只有点击到文字的笔划上才能触发按钮事件.在按钮编辑窗口中同样可以有很多层,比如第一层为图形,第二层为文字等.下面来制作一个按钮:

  点击“插入”-“新建元件”,选择按钮,确定,这样就进入元件编辑窗口。

  在弹起那一幀画一矩形,按钮大小吧。黑色笔触,灰色填充。在指针经过那一幀、按下幀幀、点击幀,插入关键幀。在指针经过幀将矩形填充色变为深灰色。在按下那幀,将边框线条粗细调为2。新插入图层,建一静态文本框,输入“Play”.这样按钮就做好了。

  现在可以将这个按钮从库中拖到舞台上,测试影片,看一下,当鼠标移到按钮上,点下按钮时的效果。

  练习:按钮的应用。点击一下按钮,影片剪辑元件就向右移动一点。新建一影片剪辑元件,就画一个园就行了。将这个mc拖入舞台上,放到稍左一点的位置,打开属性面板,为其取名为:my_mc。新建一个按钮,然后拖入舞台,为其取名为:yy_btn.新插入一层,命名为:action,打开动作面板,输入:

  yy_btn.onRelease = function(){

  my_mc._x = my_mc._x 10;

  }

  测试影片,点击一次按钮,园就会向右移动一点。

  作业:请用本章所介绍的知识,完成下的效果: