Clickable shapes(可点击的形体)

下面我们先开始创建一个可以点击的形体。

1. 选择文件>新建一个文档，并将它保存为simpleBall.fla.
2. 选择绘制圆工具，在场景中绘制一个正圆。当然在绘制的时候按住shift就可以了。
注意：在绘制时候确何你的Object Drawing mode（对象绘模式）是关闭的。
3．选中选择工具并双击这个形体使它高亮显示
4.  当这个形体选中后，选择编辑modify>Convert to Symbol转换为元件(按F8)来打开元件转换窗口，
5．将名称改为circle然后点击ok,将它转换为影片剪辑。
6． 元件要仍处于选中的状态，在属性面板上为它起一个实例名为：ball_mc
7． 取消对元件的选择打开action面板(F9).
8．在Action面板上输入如下代码：

代码: 

ball_mc.addEventListener(MouseEvent.CLICK, clickHandler);
function clickHandler(event:MouseEvent):void {
   trace("You clicked the ball");
}

在这段代码中，ball_mc实例变成了可以点击的了，因为你加入了事件侦听用来检测用户是否有点击动作，无论何时只要用户点击了ball_mc影片剪辑，clickHandler()函数就会执行。这非常类似于之前版本在组件中加入侦听事件，如As2.0使用onPress()事件来检测用户是否点击了剪辑或按钮。
9．选择Control>Test Movie 测试影片，当你点击圆时，就会在面板上输出”you clicked the ball.
10．关闭Swf文件返回Flash操作环境，编辑你的Actionscript 代码，在原有代码的上面加入如下一行代码：
ball_mc.buttonMode = true;
11．重新测试你的影片,当你的光标位于圆之上时，光标就会变成一只小手的形状。用于给用户一个提示，这是可以点击的。

Draggable shapes(可拖动的形体)

如果你想让用户可以在场影中拖动这个形体，你需要加入两个事性侦听器，mouseDown(MouseEvent.MOUSE_DOWN)和mouseUp(MouseEvent.MOUSE_UP),如下面的例子。

下面的例子示范如何为mouseDown和mouseUp事件加入事件侦听器

1.编辑我们之前的例子中代码如下：

代码: 

ball_mc.buttonMode = true;
ball_mc.addEventListener(MouseEvent.CLICK, clickHandler);
ball_mc.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownListener);
ball_mc.addEventListener(MouseEvent.MOUSE_UP, mouseUpListener);
function clickHandler(event:MouseEvent):void {
  trace("You clicked the ball");
}
function mouseDownListener(event:MouseEvent):void {
   ball_mc.startDrag();
}
function mouseUpListener(event:MouseEvent):void {
   ball_mc.stopDrag();
} 

2.测试你的影片。你就可拖动这个圆了。
虽然我们编写这个例子没有花费我们多少时间，但如果再让你写一个可拖动的形体，你可能不会情愿去写，假想你能将你的代码转换为与元件连接的外部类文件,它可以自动的创建可拖动的形体，会在将来结省你的大量时间。下面我们就看如何实现。

Converting code into a class(将你的代码转换成类)

下面的例子创建一个Actionscript类它封装整个影片剪辑的拖动的实现逻辑。现在不管什么时候，只要创建一个类的新的实例被创建，它就是可拖动的。无须为场景中的每个实例去写代码。

1.创建一个新的Fla文档并将它保存为fancyBall.fla.
2.选择File>New选择Actionscript File创建一个新的Actionscript文件。
3.保存这个Actionscript文件为Ball.as与Fla文件为同一路径下。也就是刚才创建的fancyBall.fla.
4. 在里面输入如下代码：

代码: 

package {
  import flash.display.MovieClip;
   import flash.events.MouseEvent;
   public class Ball extends MovieClip {
      public function Ball() {
         trace("ball created: " + this.name);
         this.buttonMode = true;
         this.addEventListener(MouseEvent.CLICK, clickHandler);
         this.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownListener);
         this.addEventListener(MouseEvent.MOUSE_UP, mouseUpListener);
      }
      private function clickHandler(event:MouseEvent):void {
         trace("You clicked the ball");
      }
      function mouseDownListener(event:MouseEvent):void {
        this.startDrag();
      }
      function mouseUpListener(event:MouseEvent):void {
         this.stopDrag();
      }
   }
} 

上面的代码定义了一个新类名为Ball,它继承了MovieClip类(内置在flash.display package中).注意在使用As3.0书写外部类时，你必须明确的导入所需要类。不同于在Fla内部书写代码。
5．保存并关闭Ball.as文档，然后打开fancyBall.fla文档。
6. 使用绘制圆工具，在场景中绘制一个圆并将转换为movieClip.
7．右击刚刚建立的圆，选择链接。
8．选择Export for ActionScript(为action导出)，在Class(类)的输入框中输入类名Ball
9．点击ok.关闭此面板。
10．确何这个圆的实例在场景中，测试影片。观看是否与之前的效果是一样的。
它看起来很不错，下面的例子我们来看如何动态的创建类实例。

Dynamically creating instances of a class（动态创建类实例）

你不需要在创作时总是将元件拖动到场景中，你也可以通过使用Actionscirpt新操作方法在库中创建新的类实例。

Using the new operator（使用新的操作）

之前的Actionscript在创建新的MovieClip或是TextField实例时是通过使用如MovieClip.attachMovie(),MovieClip.createEmptyMovieClip(),或MovieClip.createTextField().来创建的。在ActionScript 3.0中，你可以通过类似如new Ball()的方法创建新的MovieClip,TextField,Sprite,和Video 实例—或是你自定义的类，如下方法：
1.打开fancyBall.fla.将场景中的所有实例元件删去，在主时间线上加入如下代码：

代码: 

var b1:Ball = new Ball(); 

2.按下ctrl +回车测试，注意，我们会发现没有任何东西出现在场景中，但是在输出面板上会显示：“ball created: instance1”,尽管Flash创建了ball的一个新的实例，但它是不可视的，因为你没有使用addChild()将它加入到显示列表中。
3.编辑代码，将b1实例加入到显示列表中。测试。

代码: 

addChild(b1); 

下一部你需要使用document class,它将允许你将代码从主时间轴的第一帧上移到一个外部文档中，它类似与之前例子中的通过元件与类连接.

Using the Document Class text box(使用Document class输入框)

下面示范如何将你的代码从主时间轴移到一个外部的As文件中。

1.删去fancyBall.fla第一帧上的代码。
2.创建一个新的Actionscript文档保存为BallDocumentClass.as，与fancyBall.fla处于同一目录下。
3.加入如下代码在BallDocumentClass.as中：

代码: 

package {
   import flash.display.MovieClip;
   public class BallDocumentClass extends MovieClip {
      private var tempBall:Ball;
      private var MAX_BALLS:uint = 10;
      public function BallDocumentClass() {
         var i:uint;
         for (i = 0; i < MAX_BALLS; i++) {
            tempBall = new Ball ();
            tempBall.scaleX = Math.random();
            tempBall.scaleY = tempBall.scaleX;
            tempBall.x = Math.round(Math.random() * (this.stage.stageWidth - tempBall.width));
            tempBall.y = Math.round(Math.random() * (this.stage.stageHeight - tempBall.height));
            addChild(tempBall);
         }    
      }
   }
} 

4.保存并关闭这个as文档，打开fancyBall.fla.
5.在属性面板的document class后面的输入框中输入BallDocumentClass，保存文件。
6.测试，你会发现有10个大小位置不同的元件出现在场景中。
使用Document Class允许你将代码放置在外部文件中，而不是时间线上，可以在许许的fla文件重用代码，并且在团队协作版本控制系统(CVS)中,更容易共享代码。

总结：

这篇文章只是对As3.0的一个简单应用介绍，只要告诉大家如何创建简单的类，如何使用改良的侦听事件模型，如何使用document class.

Ps by egoldy:学完这篇文章，你会发现自已也可以编写在fla中看不见一行代码的程式了，真正的是界面与代码分离，控制，看上去真的是很酷，如果你也在学习As3.0，别忘了把你的心得分享一下。Cheers J.

出处：WebStudio
责任编辑：moby

上一页 探索F9 As3.0 Preview [1] 下一页

◎进入论坛Flash专栏版块参加讨论