本例继续讲解AS的基础知识，今天我们来学习Flash AS入门系列教程第七课：影片剪辑第五节拖动与碰撞检测，对Flash的AS编程有兴趣的朋友可以到论坛与作者交流。

第五节 拖动与碰撞检测

AS的一个重要优势就是可以实现交互动画，一些特效不用AS也是可以做出来的，但交互的动画不用AS则是无法实现的。拖动MC则是交互动画的一个例子。

startDrag() 函数或 MovieClip.startDrag() 方法：
使用startDrag()可以实现拖动效果。格式：
MC.startDrag(一个布尔值，左边，上边，右边，下边）；
这个方法中的所有参数都是可选的，即可要可不要。下面介绍一下这些参数：
一个布尔值：true或false。当设定为true时鼠标位置将锁定在要拖动的MC的注册点上。想一想我们要自定义鼠标指针，这个参数是不是很有用呢？
后面的4个边，确定了MC可以被拖动的范围。想一想我们要做一个控制滑条这几个参数是不是很有用呢？

下面练习一下：

自定义鼠标指针：
新建一个MC，画一个或找一个你喜欢的鼠标图形，图形应该有一个较尖的部位作为针尖吧？将这个针尖与窗口中的十字对齐。回到主场景，将这个MC拖到舞台上，打开属性面板，实例名称为：mouse_mc；打开帧动作面板输入：

Mouse.hide();     mouse_mc.startDrag(true);

测试影片，你会发现你的鼠标已经变成你喜欢的图形了。

代码中第一句将系统鼠标隐藏起来，第二句使你的图形可以拖动了，并且鼠标指针被定位在针尖处。使用自定义鼠标要注意的是，你不能再拖动第二个MC，因为一次只能拖动一个MC，当你拖动第二个MC时，你的鼠标图形将不会再被拖动了。

stopDrag()方法：

上面介绍了开始拖动MC的方法，开始拖动总得有停止拖的时候啊，这个方法就是停止拖动。我们回想一下拖动一个MC的过程，一般来说，都是点下鼠标左键不放，就可以拖动了，放开鼠标后就停止拖动，是这样的吧？所以一般将startDrag()放到MC的onPress事件（点下鼠标时）中，而将 stopDrag()放到onRelease事件（放开鼠标时）中。

滑动控制条：

有时我们会用到滑动控制条，比如控制音量大小，播放进度等。那么滑块就需要用到拖动的方法。
用矩形工具画一个细长的矩形，笔触填充公随你喜欢，要不要都行，至少要一个吧？将它转换为MC，双击它进入编辑状态，打开对齐面板选择相对于舞台，左对齐，回到主场景，打开属性面板，实例名称为blt_mc。然后再画一个很短的矩形，做滑块，也转换为MC,也同细长的矩形一样的做法，只是居中对齐，最后的实例名为hk_mc。
blt_mc移到你想它所处的位置，将hk_mc移到blt_mc上。

在帧动作面板中输入：

l = blt_mc._x; r = l+blt_mc._width; h = blt_mc._y; hk_mc.onPress = function(){ this.startDrag("true",l,h,r,h); } hk_mc.onRelease = function(){ stopDrag(); num = (hk_mc._x-blt_mc._x)/blt_mc._width; }

测试影片，拖动滑块会发现滑块只能在进度条的范围内拖动了。这是因为我们对startDrag（）由于方法运用了4个参数：l,r,h.它们分别是进度条的左右边的x位置及y轴的位置。滑块的移动范围被限定在这个范围内。

从上面的代码中可以看出，当鼠标放开时会产生一个num变量，这个变量是用滑块的x坐标减去进度条的x坐标除以进度条的长度，这样就可以得到一个0~1的数字。有了这个数字，我们就可以用于任何需要用数字控制的对象了。

_droptarget 属性：

可能会有这种情况，我们拖动一个对象，想知道它是否被拖到了另一个对象之上，比如我们拖动苹果到盘子中，我们可能想知道苹果是否被拖到了盘子之上，如果是苹果则定位到盘子上，如果不是苹果就掉到深渊中。MC的_droptarget 属性将返回被自已重叠在下面的MC的名称。比如将苹果拖到盘子上时，苹果将盘子压在下面，苹果的_droptarget 属性将返回盘子的名称。但它返回的名称是带反斜杠的格式的，因此需要用eval()将其转换为标准格式，如：eval(苹果. _droptarget)这一句结果是：盘子。

做个练习熟悉一下：
在舞台上画两个园，不同的颜色，均转换为MC，实例名称分别为：mc1_mc,mc2_mc.右击mc1_mc>排列>移至顶层；打开动作面板，输入：

mcx = mc1_mc._x; mcy = mc1_mc._y; mc1_mc.onPress = function(){ this.startDrag(true); } mc1_mc.onRelease = function(){ stopDrag(); if(eval(mc1_mc._droptarget)==mc2_mc){ this._x = mc2_mc._x; this._y = mc2_mc._y; } else { this._x = mcx; this._y = mcy; } }

测试影片，在mc1_mc上点击时可以拖动，将它拖到mc2_mc上放开鼠标，则与mc2_mc重叠，如果不在mc2_mc上放开鼠标，则回到原位。

这种检查一个MC是否被拖到另一个MC之上还有另一种方法，那就是碰撞检测。

hitTest（）方法：
该方法将检测MC是否与某点或与另一MC发生相交（碰撞）。如果发生相交则返回true,否则返回false.

用法：1.与某点相交： MC.hitTest(x,y,true或false);
这将检测MC是否与括号中的x,y所确定的点（x,y）相交。后面的布尔值如果为ture，那么将检测MC的实际图形范围，如果为false则检测MC的外框是否与（x,y）相交。
2．MC与MC相交：MC.hitTest(另一MC).

把上面的的练习改为下面的代码，可得到相同的结果：

mcx = mc1_mc._x; mcy = mc1_mc._y; mc1_mc.onPress = function(){ this.startDrag(true); } mc1_mc.onRelease = function(){ stopDrag(); if(this.hitTest(mc2_mc)){ this._x = mc2_mc._x; this._y = mc2_mc._y; } else { this._x = mcx; this._y = mcy; } }

评论 (0) All

登陆 还没注册？