拖拽动作以及碰撞动作详细讲解

  在网上经常看到的flash影片中有的对象可以被鼠标进行拖动。例如有的类似七巧板的拼图游戏,控制音量的滑杆等,所使用的就是flash中的拖拽动作。

  一、拖拽命令详细介绍
  1、首先介绍一下开始拖拽命令的详细用法,稍后在后面的例子中进行测试。  
  命令格式:  StartDrag(要拖动的影片剪辑,[是否锁定到鼠标位置中央,左,上,右,下])
         或写为
         要拖动的影片剪辑.StartDrag([是否锁定到鼠标位置中央,左,上,右,下])
  命令讲解:在制作动画的过程中,上面两种书写方法可任选一种。其中[]内的为可选参数,也就是可以写,也可以不写。至于左,上,右,下四个参数是用来控制被拖对象的移动范围。
  2、停止拖拽命令讲解
  命令格式: 被拖动的影片剪辑实例名.stopDrag()
  这样就可以停止对对象的拖拽动作。

  二、实例讲解
  下面来用一个简单的例子实验拖拽命令。
  操作步骤:
  1、新建一个flash文档,并在舞台上绘制一个圆形。选中圆形并按F8,将此圆形转换为影片剪辑,起名为:圆。确定后将会在舞台上创建一个圆的实例。

  2、选中此实例,并按F9打开动作面板。输入如下脚本:
on (press) {
this.startDrag(true);//当鼠标按下(press)之后,这个实例(因为我们把脚本写在实例本身了,所以这里用this代替影片剪辑实例的名字)可以被拖拽,使用命令如上面的命令解释。对于参数的选择方面,这里只填写了锁定到鼠标位置中央,如果想选不锁定到鼠标位置中央,可以把true改为false。有兴趣的朋友可以更改为false看看。
}
on (release) {
this.stopDrag();//同样道理,当鼠标释放(release)之后,将停止拖拽动作。
}
  脚本书写如下图:

  3、好了,现在让我们按Ctrl+回车来测试一下吧,你将会看到舞台上的圆被你的鼠标拖动的效果。
  4、OK,通过这个例子我们可以简单的应用拖拽动作了。现在需要把这个例子继续完成,还记得上面命令讲解中的左,上,右,下四个控制拖动范围的参数吗?现在来制作具有约束拖动范围的效果。
  5、现在在舞台上绘制一个200*100大小的矩形,注意只要边框不要填充。如下图:

  6、如果我们希望在拖动的时候这个圆只能在矩形内拖动的话,就要先设置这个矩形的坐标,并记下矩形四个顶点的坐标(这点很重要!)。OK,比如,现在此例子中的矩形的四个顶点分别如上图所示。那我们要取的四个参数就应该是:左=50,上=100,右=250,下=200 现在打开动作面板,修改刚才的脚本如下:
on (press) {
this.startDrag(true, 50, 100, 250, 200);//这里我们就使用刚才确定好的4个参数。4个点的参数就对拖动对象实现了一个矩形区域的移动约束!
}
on (release) {
this.stopDrag();
}
脚本编写最后效果如下图

  7、呵呵,迫不及待的想检测你的成果吧?好了,按Ctrl+回车去测试吧!
  好了,关于拖拽的讲解先到这里,下面我们来学习如何结合着拖拽动作来检测对象之间的碰撞!不要走开哦。下载这个例子的源文件

  三、碰撞命令的讲解
  命令格式:  目标影片剪辑的实例.hitTest(被拖拽的实例)  这个是比较简单的检测碰撞命令
  目标影片剪辑的实例.hitTest(被拖拽实例的X轴坐标,被拖拽实例的Y轴坐标,对象的矩形区域范围还是对象本身范围)  这个是比较复杂点的检测碰撞命令
  命令解释: 以上两个命令都是用来检测碰撞的,可以根据需要选择不同的命令。重点解释一下对象的矩形区域范围和对象本身范围(上面的命令中,false表示对象的矩形区域范围,true表示对象本身的范围)具体分别看下图:

  四、碰撞命令与拖拽命令的结合使用
  (一)、下面通过简单的例子来学习碰撞命令(我们先来学习如何检测是否碰到对象的矩形区域范围)
  1、新建一个flash文档,在舞台上绘制一个圆形。选中圆形并按F8将它转换为影片剪辑,起名:圆 。这样就在舞台上创建了一个圆的实例。

  2、选中此实例,为它起一个名字,此例起名为:yuan 如图:

  3、选择文字工具,并选择文字类型为“动态文本”,在圆的实例下面拖绘出一个动态文本框。并起一个变量名为:tt 如下图:

  4、选中时间轴的第一桢,按F9打开动作面板,输入以下脚本:
_root.onenterframe = function() {
//这个是在时间轴上的AS编写规则,解释为舞台上每桢都执行下面的脚本(onenterframe)。
if (_root.yuan.hitTest(_root._xmouse, _root._ymouse, false)) {
//根据上面命令的讲解,这个语句就是检测碰撞了。如果鼠标碰到舞台上yuan这个实例的矩形区域范围的话,就执行下面的脚本。
tt = "接触矩形区域范围";//动态文本框就显示出“接触矩形区域范围”
} else {
tt = "没有接触到矩形区域范围";//如果鼠标没有碰到舞台上yuan这个实例的矩形区域范围的话,就显示没有接触到矩形区域范围。
}
}
  第一桢上最后的完整脚本应该是如下图所示:

  5、OK,现在可以按Ctrl+回车去测试你的成果咯。下载这个例子的源文件
  (二)、拖拽碰撞检测
  现在再来一个例子讲解拖拽碰撞检测,想偷懒的话可以通过修改上面例子的代码来学习。
  1、现在稍微修改一下上面的例子,以便让我们学习拖拽碰撞检测,在上面例子的舞台上绘制一个矩形,并把这个矩形转换成电影剪辑,起名为:矩形 。这样就在舞台上又创建了一个矩形的实例,现在为这个矩形实例起一个名为:juxing 。如下图:

  2、选中这个矩形实例,打开动作面板,输入可以拖拽这个实例的脚本。如下:
on (press) {
this.startDrag(true);
}
on (release) {
this.stopDrag();
}
  这个脚本就是为了能拖动这个矩形实例。具体解释请参阅第一个拖动对象例子的脚本说明。
  3、现在来修改脚本,选中时间轴的第一桢,按F9打开动作面板,你将会看到上个例子的碰撞检测脚本,把它修改为如下脚本:
_root.onenterframe = function() {
if (_root.yuan.hitTest(_root.juxing)) {
tt = "碰到了";
} else {
tt = "没有碰到";
}
}
  这个脚本和上次的碰撞检测脚本类似,只不过不需要再书写X轴和Y轴,也不用写是否碰到矩形区域范围。
  完整脚本应该如下图所示:

  OK,现在又到了测试阶段了,去观看你的成果吧~。下载这个例子的源文件

  结束语:相信你如果亲手成功完成了以上的例子(呵呵,比较多),你一定会掌握拖动对象以及碰撞检测的脚本编写。在实际的应用中,它们的用处非常广泛……

时间: 2024-08-18 06:44:46

拖拽动作以及碰撞动作详细讲解的相关文章

利用JQuery拖拽插件实现拖拽效果

<%@ page language="c#" autoeventwireup="true" codebehind="default.asp教程x.cs" inherits="jquerydrag._default" %> <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.or

JS拖拽插件实现步骤_javascript技巧

这篇文章详细介绍了JS拖拽插件的实现步骤,主要从以下六步做详细分析,具体内容如下: 一.js拖拽插件的原理 二.根据原理实现的最基本效果 三.代码抽象与优化 四.扩展:有效的拖拽元素 五.性能优化和总结 六.jquery插件化 js拖拽是常见的网页效果,本文将从零开始实现一个简单的js插件. 一.js拖拽插件的原理常见的拖拽操作是什么样的呢?整过过程大概有下面几个步骤: 1.用鼠标点击被拖拽的元素 2.按住鼠标不放,移动鼠标 3.拖拽元素到一定位置,放开鼠标 这里的过程涉及到三个dom事件:on

JavaScript拖拽、碰撞、重力及弹性运动实例分析_javascript技巧

本文实例讲述了JavaScript拖拽.碰撞.重力及弹性运动实现方法.分享给大家供大家参考,具体如下: js拖拽.碰撞与重力实现代码: window.onload=function () { var oDiv=document.getElementById('div1'); var lastX=0; var lastY=0; oDiv.onmousedown=function (ev) { var oEvent=ev||event; var disX=oEvent.clientX-oDiv.of

js实现拖拽 闭包函数详细介绍

js拖拽 采用简单的闭包实现方式 代码如下: /** * Created with JetBrains WebStorm. * User: lsj * Date: 12-11-24 * Time: 下午12:59 * To change this template use File | Settings | File Templates. */ var dragmanager=(function() { //标识移动元素z轴坐标 var index_z=1; //当前的拖拽元素 var drga

js实现拖拽 闭包函数详细介绍_javascript技巧

js拖拽 采用简单的闭包实现方式 复制代码 代码如下: /** * Created with JetBrains WebStorm. * User: lsj * Date: 12-11-24 * Time: 下午12:59 * To change this template use File | Settings | File Templates. */ var dragmanager=(function() { //标识移动元素z轴坐标 var index_z=1; //当前的拖拽元素 var

美媒称美驱逐舰拖拽声呐在南海碰撞中国潜艇(图)

美国DDG-56约翰·麦凯恩号驱逐舰 环球时报6月13日报道 据美国有线电视新闻网(CNN)12日报道,一艘中国潜艇在菲律宾苏比克湾附近,与一艘美国军舰的拖拽声纳相撞. 报道援引美军方人士的消息说,该事件发生在当地时间周四(11日).美军"约翰·麦凯恩"号驱逐舰拖曳的海底声纳在冲撞后受损.中美舰艇所幸没有相撞. 美方表示,并不认为该起事件是中方"蓄意"造成,靠近拖拽声纳很可能缠住潜艇的螺旋桨,造成对潜艇的巨大危险.美国国防部尚未对此事件做出回应. <环球时报&

javascript实现PC网页里的拖拽效果_javascript技巧

几年前,我参与设计开发一个房产网的项目,我负责前端工作,由于项目经理要求比较高,参考了很多房产类网站比较优秀的功能,想把别人比较优秀的设计和想法集合到一起,那时的设计稿和功能实现,简直就是改了又改,今天做好的一个很好的效果,可能第二天就要推到重来,算了,不说这些了,还是说说我们今天要讲解的案例吧,不知道大家访问过搜房网没有(完全没有做广告之嫌,搜房网,可以给点广告费不),其中有一个功能产品经理特别喜欢,那,就是下面的这个: 这是现在的效果,可能改了一些,原来的效果是,里面的这张图是可以上下左右拖

自定义ListView实现拖拽ListItem项交换位置(附源码)_Android

写在前面的话 在上一篇实现了通过布局泵拿到不同布局为listitem布局,然后实现联系人的ListView,这一章要做的是拖拽ListView的Item项,本章原理是在上一篇博客基础之上的,上一篇博客:自定义Adapter并通过布局泵LayoutInflater抓取layout模板编辑每一个item 实现效果图   说明 首先我们看到的上面这张图就是实现的效果图了.拖动之后数据项完成交换位置. 功能剖析 我们看到做的这个效果是一个拖拽ListView的Item项位置的功能,在布局方面还是用基于布

Sortable.js拖拽排序使用方法解析_javascript技巧

最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的. 官网: http://rubaxa.github.io/Sortable/ 拖拽的时候主要由这几个事件完成,     ondragstart 事件:当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上     ondragenter 事件:当拖曳元素进入目标元素的时候触发的事件,此事件作用在目标元素上     ondragover 事件:拖拽