·您当前的位置:首页 > 技术教程 > AS2与AS3技术 >

[AS3]as3.0鼠标移动检测的代码实例

时间:2014-02-08 15:24yangkd548.iteye.com
[AS3]as3.0鼠标移动检测的代码实例

[AS3]as3.0鼠标移动检测的代码实例

  1. package common{ 
  2.     import core.App; 
  3.     import core.Clip; 
  4.     import core.UIElement; 
  5.     import flash.display.Sprite; 
  6.     import flash.events.Event; 
  7.     import flash.events.MouseEvent; 
  8.     import flash.geom.Matrix; 
  9.     import flash.geom.Point; 
  10.     import flash.utils.getDefinitionByName; 
  11.      
  12.     public class Index extends UIElement{ 
  13.         private var butterNum:Number=2;//动画的个数 
  14.         private var butterArr:Array;//动画数组*************** 
  15.         private var easingArr:Array;//缓动系数 
  16.         private var vxArr:Array;//X轴速度 
  17.         private var vyArr:Array;//Y轴速度 
  18.          
  19.         private var left:Number=0;//动画运动的范围,左 
  20.         private var right:Number=App.width;//右 
  21.         private var top:Number=0;//上 
  22.         private var bottom:Number=App.height;//下 
  23.          
  24.         //以下参数关于速度变换 
  25.         private var myDate:Date; 
  26.         private var preTimeArr:Array;//上次变换速度的时间 
  27.         private var changeSpeedArr:Array;//间隔多少毫秒换所有的速度 
  28.          
  29.         //以下参数控制是否自动播放还是鼠标控制 
  30.         private var inMouseContral:Array;//动画移动是否受鼠标控制 
  31.         private var targetBX:Number=0;//鼠标控制动画移动时所要达到的目标点位置 
  32.         private var targetBY:Number=0
  33.          
  34.         //下面的参数是其中一只动画根据用户画的轨迹而飞。 
  35.         private var mouseTracks:Array;//鼠标画的轨迹。 
  36.         private var justPress:Boolean=true;//是否只是单击,如果为否,则是依轨迹飞行,如果为true,则表示只是飞到鼠标点击到的位置。 
  37.         private var spriteA:Sprite;//画轨迹线 
  38.          
  39.         public function Index(){ 
  40.             init(); 
  41.         } 
  42.         private function init():void{ 
  43.             myDate=new Date();//速度变换 
  44.             butterArr=new Array();//动画数组 
  45.             vxArr=new Array();//X轴速度 
  46.             vyArr=new Array();//Y轴速度 
  47.             easingArr=new Array();//缓动系数 
  48.             preTimeArr=new Array();//上次变换速度的时间 
  49.             changeSpeedArr=new Array();//间隔多少毫秒换所有的速度 
  50.             inMouseContral=new Array();//动画移动是否受鼠标控制 
  51.             mouseTracks=new Array();//鼠标画的轨迹 
  52.             this.spriteA=new Sprite();//画轨迹线 
  53.             thisthis.spriteA.x=this.spriteA.y=0
  54.             addChild(this.spriteA); 
  55.             for(var i:int=0;i<butterNum;i++){ 
  56.                 butterInit(i); 
  57.             } 
  58.             App.stage.addEventListener(MouseEvent.MOUSE_DOWN,onMouse_Down); 
  59.             App.stage.addEventListener(MouseEvent.MOUSE_MOVE,onMouse_Move); 
  60.             App.stage.addEventListener(MouseEvent.MOUSE_UP,onMouse_Up); 
  61.             App.doInterval(this.doPageTime); 
  62.         } 
  63.         //动画初始化 
  64.         private function butterInit(num:Number):void{ 
  65.             var myMovie:Clip=new Clip("effect.Clip_2068"); 
  66.             myMovie.loop=true
  67.             myMovie.play(); 
  68.             myMovie.x=Math.random()*App.width; 
  69.             myMovie.y=Math.random()*App.height; 
  70.             addChild(myMovie); 
  71.             butterArr.push(myMovie); 
  72.              
  73.             vxArr[num]=-Math.random()*3;//速度赋值(最大-3像素) 
  74.             vyArr[num]=Math.random()*6-3;//区别于X速度(最大3像素) 
  75.              
  76.             easingArr[num]=Math.round(Math.random()*3+1)*0.1;//缓动系数 
  77.              
  78.             myDate=new Date(); 
  79.             preTimeArr[num]=myDate.getTime();//前一时间 
  80.             changeSpeedArr[num]=Math.round(Math.random()*5+5)*1000;//间隔多少毫秒换所有的速度(5-10秒) 
  81.             inMouseContral[num]=false;//是否鼠标控制 
  82.         } 
  83.         private function onMouse_Down(evt:MouseEvent):void{ 
  84.             inMouseContral[0]=false;//不是鼠标控制,可以自主飞行*********************** 
  85.             mouseTracks.splice(0);//删除路径数组中的所有值 
  86.             this.spriteA.graphics.clear(); 
  87.             this.spriteA.graphics.lineStyle(2,0x00ff00); 
  88.             this.spriteA.graphics.moveTo(mouseX,mouseY); 
  89.         } 
  90.         private function onMouse_Move(evt:MouseEvent):void{ 
  91.             if(evt.buttonDown){ 
  92.                 var thisArr:Array=new Array();//当前的点坐标的数据 
  93.                 if(mouseTracks.length>=1){ 
  94.                     //平滑处理第一步(简单的除2) 
  95.                     thisArr[0]=(mouseX+mouseTracks[mouseTracks.length-1][0])/2; 
  96.                     thisArr[1]=(mouseY+mouseTracks[mouseTracks.length-1][1])/2; 
  97.                     //平滑处理第二步(倒数第二点、当前点,修正最后一点) 
  98.                     if(mouseTracks.length>=2){ 
  99.                         var leftP:int=mouseTracks.length-2; 
  100.                         var centerP:int=mouseTracks.length-1; 
  101.                         mouseTracks[centerP][0]=(mouseTracks[leftP][0]+thisArr[0])/2; 
  102.                         mouseTracks[centerP][1]=(mouseTracks[leftP][1]+thisArr[1])/2; 
  103.                     } 
  104.                 } 
  105.                 else{ 
  106.                     thisArr[0]=mouseX; 
  107.                     thisArr[1]=mouseY; 
  108.                 } 
  109.                 mouseTracks.push(thisArr); 
  110.                 this.spriteA.graphics.lineTo(thisArr[0],thisArr[1]); 
  111.             } 
  112.         } 
  113.         private function onMouse_Up(evt:MouseEvent):void{ 
  114.             //如果路径里没有数据,则没有画轨迹 
  115.             inMouseContral[0]=true;//仅控制下标为0的一个动画跟随鼠标移动 
  116.             this.justPress=mouseTracks.length==0;//判断是否是仅仅点击一下 
  117.             if(this.justPress){ 
  118.                 this.targetBX=mouseX
  119.                 this.targetBY=mouseY
  120.             } 
  121.             else{ 
  122.                 //CuPlayer.com提示:重绘四部曲!~~ 
  123.                 this.spriteA.graphics.clear();//将没有进行第二步平滑处理的线条删了,重新画 
  124.                 this.spriteA.graphics.lineStyle(2,0x00ff00); 
  125.                 this.spriteA.graphics.moveTo(mouseTracks[0][0],mouseTracks[0][1]); 
  126.                 //重绘所有经过二次平滑处理的线 
  127.                 for(var i:int=1;i<mouseTracks.length;i++){ 
  128.                     this.spriteA.graphics.lineTo(mouseTracks[i][0],mouseTracks[i][1]); 
  129.                 } 
  130.             } 
  131.         } 
  132.         private function doPageTime():void{ 
  133.             for(var i:int=0;i<butterNum;i++){ 
  134.                 ButterflysMove(butterArr[i],i); 
  135.             } 
  136.         } 
  137.         private function ButterflysMove(mc:Clip,num:Number):void{ 
  138.             //鼠标弹起的时候,才对需要跟随轨迹运行的动画,赋true 
  139.             if(inMouseContral[num]==true){ 
  140.                 if(this.justPress) MouseContral(mc,this.targetBX,this.targetBY,num);//动画朝单击点飞行 
  141.                 else moveFollowMouse(mc,0);//动画绕鼠标画的运动轨迹飞行 
  142.             } 
  143.             //CuPlayer.com提示:自己自动飞行 
  144.             else{ 
  145.                 AutoMove(mc,num); 
  146.             } 
  147.         }  
  148.         //动画跟随鼠标画的运动轨迹飞行 
  149.         private function moveFollowMouse(mc:Clip,num:Number):void{ 
  150.             //没有值,就是走到轨迹尽头了,则重置相关变量 
  151.             if(mouseTracks.length==0){ 
  152.                 this.spriteA.graphics.clear(); 
  153.                 inMouseContral[num]=false; 
  154.                 myDate=new Date(); 
  155.                 preTimeArr[num]=myDate.getTime();//上次变换速度的时间 
  156.                 changeSpeedArr[num]=2000;//停多少秒就自由飞行 
  157.                 vxArr[num]=0; 
  158.                 vyArr[num]=0; 
  159.             } 
  160.             else{ 
  161.                 var targetX:int=mouseTracks[0][0]; 
  162.                 var targetY:int=mouseTracks[0][1]; 
  163.                 var dx:int=targetX-mc.x; 
  164.                 var dy:int=targetY-mc.y; 
  165.                 var dist:int=Math.sqrt(dx*dx+dy*dy);//计算出距离 
  166.                 //当前点和目标点的距离大于1,才需要变换角度,这也是平滑处理的一部分 
  167.                 if(dist>1) this.centerRotate(mc,Math.atan2(dy,dx)*180/Math.PI); 
  168.                 mc.x=targetX-mc.width/2; 
  169.                 mc.y=targetY-mc.height/2; 
  170.                 mouseTracks.shift();//删除刚刚已经使用过的第一个位置 
  171.             } 
  172.         } 
  173.         //CuPlayer.com提示:动画朝单击点飞行 
  174.         private function MouseContral(mc:Clip,targetX:Number,targetY:Number,num:Number):void{ 
  175.             var dx:int=targetX-mc.x; 
  176.             var dy:int=targetY-mc.y; 
  177.             var angle:Number=Math.atan2(dy,dx);//这是mc的角度 
  178.             this.centerRotate(mc,angle*180/Math.PI); 
  179.             //和目标点的距离小于1 
  180.             if(Math.sqrt(dx*dx+dy*dy)<1){ 
  181.                 //重置动画的各个参数 
  182.                 inMouseContral[num]=false;//说明飞到了目标点了,可以自主飞行了 
  183.                 mc.x=targetX
  184.                 mc.y=targetY
  185.                 myDate=new Date(); 
  186.                 preTimeArr[num]=myDate.getTime(); 
  187.                 changeSpeedArr[num]=2000;//停多少秒就自由飞行 
  188.                 vxArr[num]=0;//让动画速度为0 ,即到达目标点后休息下,在自由飞行 
  189.                 vyArr[num]=0; 
  190.                  
  191.             } 
  192.             else{ 
  193.                 //实现了先快后慢的缓动 
  194.                 mc.x+=dx*easingArr[num]; 
  195.                 mc.y+=dy*easingArr[num]; 
  196.             } 
  197.         } 
  198.         private function centerRotate(mc:UIElement,angle:Number):void{ 
  199.             var currentRotation:Number = mc.rotation; 
  200.             //获取mc不旋转时候的尺寸 
  201.             mc.rotation=0
  202.             var mcmcWidth:Number=mc.width; 
  203.             var mcmcHeight:Number=mc.height; 
  204.             mc.rotation=currentRotation
  205.              
  206.             //CuPlayer.com提示:获取mc当前中心点坐标 
  207.             var pointO:Point=mc.localToGlobal(new Point(Math.min(mcWidth/2,mcHeight/2),Math.min(mcWidth/2,mcHeight/2))); 
  208.              
  209.             //CuPlayer.com提示:旋转mc 
  210.             mc.rotation=angle
  211.              
  212.             //获取mc旋转后中心点坐标 
  213.             var pointO2:Point=mc.localToGlobal(new Point(Math.min(mcWidth/2,mcHeight/2),Math.min(mcWidth/2,mcHeight/2))); 
  214.             //CuPlayer.com提示:平移到原来中心点O 
  215.             var p3:Point=pointO.subtract(pointO2); 
  216.             var matrix:Matrix=mc.transform.matrix; 
  217.             matrix.translate(p3.x, p3.y); 
  218.              
  219.             mc.transform.matrix=matrix; 
  220.         } 
  221.         //CuPlayer.com提示:动画自由飞行。。。。。。。 
  222.         private function AutoMove(mc:Clip,num:Number):void{ 
  223.             myDate=new Date(); 
  224.             var thisTime:Number=myDate.getTime(); 
  225.             //达到变换速度的时间间隔,X,Y轴速度都换 
  226.             if((thisTime-preTimeArr[num])>changeSpeedArr[num]){ 
  227.                 preTimeArr[num]=thisTime; 
  228.                 vxArr[num]=-Math.random()*3; 
  229.                 vyArr[num]=Math.random()*6-3; 
  230.                 changeSpeedArr[num]=Math.round(Math.random()*5+5)*1000;//重新赋值时间间隔。 
  231.             } 
  232.             mc.x+=vxArr[num];//随机产生的一个位移,其实也就相当与一个移动速度 
  233.             mc.y+=vyArr[num]; 
  234.             //以下是出界处理,到边界后,不到速度变换的时间,按照修正后的位置执行。 
  235.             if(mc.x<left){ 
  236.                 mc.x=left
  237.                 vxArr[num]*=-1; 
  238.             } 
  239.             if(mc.x>right){ 
  240.                 mc.x=right
  241.                 vxArr[num]*=-1; 
  242.             } 
  243.             if(mc.y<top){ 
  244.                 mc.y=top
  245.                 vyArr[num]*=-1; 
  246.             } 
  247.             if(mc.y>bottom){ 
  248.                 mc.y=bottom
  249.                 vyArr[num]*=-1; 
  250.             } 
  251.             //因为动画到达鼠标点击的位置后,会重置速度为0,所以导致方向变换,在这里就做限制 
  252.             if(vyArr[num]!=0&&vxArr[num]!=0) this.centerRotate(mc,Math.atan2(vyArr[num],vxArr[num])*180/Math.PI); 
  253.         } 
  254.     } 

 

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器