Flash AS 入门 鼠标跟随的应用实现

　　这篇教程为“Flash AS 入门教程”的一部分。查看全套教程>>>>。

　　源文件下载

　　本节应掌握的知识要点：

　　① startDrag和stopDrag应用；②with 语句应用；

　　鼠标拖拽也是使用比较多的特效形式，这一节我们将学习一个简单的鼠标拖拽动画。要学习以下几个新的语句：

　　startDrag();动作，使目标影片剪辑在影片播放过程中可拖动。语法格式是：

　　myMovieClip.startDrag(lock, left, top, right, bottom)；

　　myMovieClip 要拖动的影片剪辑实例名。

　　Lock 是一个用true或false表示的布尔值，true指定可拖动的影片剪辑锁定到鼠标位置中央，false则为不锁定。

　　left, top, right, bottom 参数是 相对于影片剪辑的父级坐标的值，可以设置这些值来指定该影片剪辑拖动的左、上、右、下的矩形范围。

　　小括号中的这些参数是可选的。

　　stopDrag() 停止拖动当前影片剪辑（不需要参数）

　　with 语句，可以在小括号中指定对象（比如影片剪辑）作为参数，并使用大括号中的语句计算该对象中的表达式和动作。使用with语句，可以简化代码的书写。语法格式是：

　　with (动作脚本对象或影片剪辑的一个实例。) {

　　一个动作或一组动作。 }

　　请看示例动画“实例1-9”。

　　>>>>>点击查看动画效果<<<<<

　　实例1-9 鼠标跟随

　　这是一个及其简单的鼠标拖拽效果，画面上一串彩色星星随着鼠标的移动而翻卷摆动，当我们点击一下右下角的按钮鼠标，星星就不再跟随着鼠标移动，而定位在了刚才点击鼠标的位置，当把鼠标滑过按钮，星星又处于被拖拽状态了。实现这个效果其实非常简单。

　　看看源文件，库中有两个影片剪辑和一个按钮，xing1是一个星图形的移动渐隐补间动画，xing2中嵌套了几个分别改变了色调的xing1的实例。

　　主场景上共3帧，有【按钮】、【mc】和【as】三个图层，【mc】图层上放置的是xing2影片剪辑，其实例名为“xing_mc”，【as】图层上和按钮实例上分别添加了如下语句：

　　【as】图层上的语句：

　　第1帧

　　i = 0;

　　xing_mc._visible = 0;// 设置影片剪辑不可见

　　xing_mc.startDrag(true,0,0,550,400);

　　//在 (0,0)至 (550,400) 的矩形范围内拖拽xing_mc影片剪辑。

　　第2帧：

　　i = i+1; //变量i每次加1

　　if (i<=36) { //设置条件i小于或者等于36

　　xin_mc.duplicateMovieClip("xin_mc"+i, i);//以新名称"xin_mc"+i，层深度为i复制影片剪辑

　　with (_root["xing_mc"+i]) {//定义数组对象_root["xin_mc"+i]为with语句的参数

　　_rotation = i*20; //设置新复制影片剪辑的旋转度数

　　_xscale = xin_mc._xscale+i*5;//设置新复制影片剪辑的横向缩放比例

　　_yscale = xin_mc._yscale+i*5;//设置新复制影片剪辑的纵向缩放比例

　　}

　　} else {

　　i = 0; //如果不满足if语句里的条件，则i=0

　　}

　　第3帧

　　gotoAndPlay(2);

　　这段程序的流程很简单，是前面已经学习过的知识，一开始在第1帧定义变量i的初始值为0，设置场景上的影片剪辑实例不可见，并在一个矩形范围内可以由鼠标拖拽。

　　第2帧先由表达式i=i+1将i的值计算为1，再按照if语句里设定的条件进行判断，符合当i的值小于或等于36条件时就执行大括号“{}”里面的语句块，复制xing_mc影片剪辑，由参数sing_mc+i计算出第1次新复制的影片剪辑名为xing_mc1，并由参数i分配其层深度为1；再由with里面的语句计算出让新复制的影片剪辑顺时针旋转20度，纵横向等比例放大5个百分点。

　　第一次执行完后，再由第3帧上的语句指令播放头返回第2帧，于是再第二次进行判断并复制影片剪辑，每一次反复时i的值递增1，直至超出设定的条件后由else里面的语句将变量i重新定义为0。

　　然后再重复上面的判断复制过程，如此反复。

　　由于在第1帧上设置了作为复制父本的影片剪辑由鼠标拖拽，而新复制出的影片剪辑的坐标位置默认是与父本的坐标一致，所以每次新复制出的影片剪辑的坐标位置就会由当时父本影片剪辑的位置而定，这样就形成了无数彩色星星跟随着鼠标翻卷摆动的动画效果。

　　第2帧出现了一个with语句，利用这个语句，将影片剪辑或其它对象的引用作为其参数，可以简化程序语句的书写，不必在大括号中的每一行语句前面重复书写对象的名称。

　　如果不用with语句，要为新复制出的影片剪辑设置属性就应该写成：

　　_root["xin_mc"+i]._rotation = i*20;

　　_root["xin_mc"+i]._xscale = xin_mc._xscale+i*5;

　　_root["xin_mc"+i]._yscale = xin_mc._yscale+i*5;

　　当用with语句为相同对象设置指令时，语句行越多就越显其优势。

　　执行了startDrag语句，就可以使指定的影片剪辑在动画播放过程中保持可拖动状态，一次只能拖动一个影片剪辑。直到执行 stopDrag() 停止拖动为止。或直到对其它影片剪辑调用了 startDrag() 动作为止。

　　现在看看按钮上的语句：

　　on (rollOver) {

　　xing_mc.startDrag(true,0,0,550,400); //鼠标滑过按钮时拖拽影片剪辑

　　}

　　on (release) {

　　stopDrag(); //点击按钮时停止拖拽当前影片剪辑

　　}

　　通过鼠标滑过按钮和点击鼠标，就可以切换xing_mc影片剪辑的拖拽状态。

　　课后练习：素材源文件下载

　　下载课后练习素材源文件，按照以下要求做一个鼠标拖拽动画：

　　1．动画开始播放时，将场景上的小松鼠翻转身，由面朝右方变为面朝左方（提示：缩放比例为-100，或者将缩放比例乘以-1）；执行拖拽小松鼠影片剪辑，锁定鼠标中心，设置拖动范围在场景尺寸之内；隐藏场景上的小松鼠影片剪辑实例。

　　2．用if语句定义条件复制出8个小松鼠影片剪辑，在with语句内设置新复制的影片剪辑的横坐标位置按50像素递增，高度和宽度均按4个像素递减。

　　3．在右下角的按钮上添加语句，实现当鼠标点击按钮时停止拖拽小松鼠，并开始在场景范围内拖拽右下角的彩环；当鼠标滑过按钮时，停止拖拽彩环，开始在场景范围内拖拽小松鼠。

　　4．提示：别忘了定义并初始化变量；

　　>>>>>点击查看动画效果<<<<<

　　课后练习1-9效果：

　　这篇教程为“Flash AS 入门教程”的一部分。查看全套教程>>>>。

IT时代网(关注微信公众号ITtime2000，定时推送，互动有福利惊喜)所有原创文章版权所有，未经授权，转载必究。
创客100创投基金成立于2015年，直通硅谷，专注于TMT领域早期项目投资。LP均来自政府、互联网IT、传媒知名企业和个人。创客100创投基金对IT、通信、互联网、IP等有着自己独特眼光和丰富的资源。决策快、投资快是创客100基金最显著的特点。