FLASH按钮详解(二)目标区交互
目标区交互常用来制作拼图游戏或者分类练习。在Flash中我们一般用hitTest、startDrag和stopDrag函数来实现。下面就用一个自然课件的实例\"分一分\"来讲解Flash目标区交互的实现方法。同时也巩固一下
上面讲到的知识。
由于Flash MX开始支持MC的按钮事件，如果使用Flash MX的编程方法来写这篇教程，制作上会简化许多。但考虑到许多老师现在还在使用Flash 5开发课件，因此本文中使用到的编程方法均基于Flash 5。但是，本例中的某些功能必须在Flash MX的环境下才能实现，这在下文中会有提及。
下面具体分析这个课件的功能。课件提供了三个练习，本别是\"按形状分\"、\"按颜色分\"和\"按运动方式分\"。学生用鼠标拖动不同的物体进行分类，如果分类正确，则放置在正确的位置，并且禁止再次拖动这个物体；如果拖动错误，那么就将这个物体放回原处。由于三个练习实现方式基本相同，本文仅介绍第一个练习的实现方法。（课件界面和主时间线如图4-9,4-10）
1.设计课件结构
① 在主时间线中新建4个层，由上至下分别命名为\"脚本\"、\"外框\"、\"按钮\"、\"主要\"。
② 在\"脚本\"和\"主要\"层的第10帧、第20帧和第30帧各插入一个关键帧，并为\"脚本\"层的四个关键帧分别命名为\"start\"、\"shape\"、\"colour\"和\"mode\"，在这四个关键帧上都加入stop();脚本。（如图4-10）
③ 新建一个按钮，在其中绘制一个矩形。然后从库中拖动三个按钮元件至\"按钮\"层中，排列到舞台左边。在三个按钮上方分别输入\"按形状分\"、\"按颜色分\"和\"按运动方式分\"（注意：没有必要制作三个不同的按钮元件，舞台上的按钮是库中按钮的\"分身\"，每个分身可以设置不同的脚本）。这三个按钮上的脚本分别如
下：
\"按形状分\"按钮： on(release){ gotoAndStop(\"shape\");
}
\"按颜色分\"按钮： on(release){ gotoAndStop(\"colour\");
}
\"按运动方式分\"按钮：
on(release){ gotoAndStop(\"mode\");
}
④ 制作外框、课题，放置在\"外框\"层中。
2.作限制框
① 建一个名为\"k\"的影片剪辑，并在其中绘制一个无边框的矩形。
② 从库中拖动三个\"k\"的分身到舞台上，排列好后为他们分别命名为\"k_circle\"，\"k_rectangle\"和
\"k_triangle\"。
③ 分别绘制一个圆形、一个矩形和一个三角形，将他们放在相应的框上方。（如图4-11）
3.作可拖动的MC
① 择\"主要\"层的第10帧（即\"shape\"帧），绘制一个黑色无边框的圆形。
② 将其转换为按钮，命名为\"circle\"，确定定位点在圆形的中心。
③ 将这个按钮转换为影片剪辑，并命名为\"circle_mc\"。
④ 双击这个影片剪辑进入其内部，选择圆形按钮，打开\"动作\"面板并输入以下脚本：
on (pre) { startDrag(\"\", true);
}
on (release, releaseOutside) {
stopDrag();
}
将这段脚本\"翻译\"成中文就是：
当按下鼠标时 开始拖动本影片剪辑 当释放或者外部释放鼠标时
停止拖动
⑤ 现在测试一下影片，可以看到圆形可以被拖动到任意的位置。但我们需要的不仅仅是这些。我们现在要圆形影片剪辑是否被拖动到了圆形分类框中，如果是，则放置在原地；如果否，则放回原处。 ⑥ 要将圆形影片剪辑放回原处，必须得知圆形影片剪辑最原始的位置。可以很容易的在\"信息\"面板中知道它的位置是x：183.5，y：212.5，但这并不是一种聪明的方法。在这里，我们使用变量来记住圆形影片剪辑的位置。将下面的脚本放在startDrag脚本上面：
oldX=_x; oldY=_y; 由于当前的圆形按钮处于圆形剪辑的内部，所以无需为_x和_y属性指定目标，默认既是当前的影片剪辑。
这也是startDrag命令为什么没有目标的原因。
⑦ 要实现判断的功能，我们使用函数hitTese。这个函数能够判断两个影片剪辑是否重合，如果重合则返回true。我们先来看看这个当前这个例子的\"中文\"脚本：
如果圆形影片剪辑没有和圆形分类框重合，那么将圆形影片剪辑放回原处。
注意到这里的条件是\"没有重合\"，我们很容易判断圆形影片剪辑是否与圆形分类框重合，如果需要\"没有重合\"这个条件，我们需要加上一个\"!\"（非）运算符。将下面的脚本放置在stopDrag下面，也就是一停止拖
动马上执行：
if (!hitTest(_parent.k_circle)) {
_x = oldX; _y = oldY;
} ⑧ 现在测试一下影片，可以看到当拖动圆形影片剪辑到除圆形分类框的其他位置是，圆形影片剪辑会自动放回原处。但又出现了一个问题，因为圆形影片剪辑是随时可以拖动的，如果现在使用者试图再次拖动圆形影片剪辑，则圆形影片剪辑仍会放回前一次拖动的目的地。
要解决这个问题，我们需要禁止圆形影片剪辑再次被拖动。最简单的方法就是禁用按钮。Flash MX将按钮也列为标准对象，并为其加入了enlabled属性，通过将enlabled的值设为真或假，可以启用或禁用按钮。要使用这个属性，我们需要先为按钮的分身命名。
在舞台上选择圆形按钮分身，将其命名为\"b\"。（如图4-12）
⑨ 实现禁用按钮的\"中文\"脚本应为：
如果圆形影片剪辑和圆形分类框重合，那么禁用按钮，否则就启用按钮。
最先想到的应该是用if…else…语句实现这个功能，但没有必要，应该尽量减少代码。本例中已经有了一个if条件语句。我们只要利用现有的就可以了。按钮\"b\"上的脚本全部完成后如下：
on (pre) { oldX = _x; oldY = _y; startDrag(\"\", true);
}
on (release, releaseOutside) {
stopDrag(); b.enabled = 0;
if (!hitTest(_parent.k_circle)) {
_x = oldX; _y = oldY; b.enabled = 1;
} } 解释一下关于禁用按钮的语句。当停止拖动时将按钮\"b\"的enlabled属性设为0，禁用按钮。这时如果圆形影片剪辑的位置处于圆形分类框中，接下来的if代码块不会执行。圆形影片剪辑不能再被拖动。但如果当前的圆形影片剪辑和圆形分类框不重合，则会执行if中的代码，圆形影片剪辑被放置回原处，按钮\"b\"又被
设为可用。
4.完善程序
① 同样的方法制作矩形按钮并转换成影片剪辑，分别命名为\"rectangle\"和\"rectangle_mc\"。用同样的方法制作三角形按钮并转换成影片剪辑，分别命名为\"triangle\"和\"triangle_mc\"。（注意，上面的命名指的是元件在库中的名称，并不是指元件在舞台上的分身名。）
② 矩形影片剪辑和三角形影片剪辑中的按钮分身均命名为\"b\"。
③ 两个按钮上的脚本几乎完全相同，需要改动的只是hitTest函数的对象。
矩形按钮上的脚本为：
on (pre) { oldX = _x; oldY = _y; startDrag(\"\", true);
}
on (release, releaseOutside) {
stopDrag(); b.enabled = 0;
if (!hitTest(_parent.k_rectangle)) {
_x = oldX; _y = oldY; b.enabled = 1;
} }
三角形按钮上的脚本为：
on (pre) { oldX = _x; oldY = _y; startDrag(\"\", true);
}
on (release, releaseOutside) {
stopDrag(); b.enabled = 0;
if (!hitTest(_parent.k_rectangle)) {
_x = oldX;
_y = oldY; b.enabled = 1;
} }
④ 此时舞台上已经有圆形、矩形和三角形影片剪辑各一个了。再从库中各拖动一个到舞台上，分别改变他们的位置、色彩、大小和角度，测试影片，观看效果。（如图4-13）
5.完成课件
课件的第一个部分\"按形状分\"已经完成，另外两个部分\"按颜色分\"和\"按运动方式分\"的制作大同小异，在此
不再赘述。
