FLASH按钮详解_flash按钮详解

FLASH按钮详解由刀豆文库小编整理，希望给你工作、学习、生活带来方便，猜你可能喜欢“flash按钮详解”。

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.完成课件

课件的第一个部分“按形状分”已经完成，另外两个部分“按颜色分”和“按运动方式分”的制作大同小异，在此

不再赘述。