鼠标拖动小鱼:flash 绘图API:鼠标拖动小球

flash 绘图API:鼠标拖动小球

  查看原图(大图)

flash 绘图API:鼠标拖动小球

  查看原图(大图)

  现在有个灵感那就是通过鼠标拖动这些小球鼠标移动时候那些小球会跟踪鼠标目标移动这些只要使用flash 绘图API制作

  就能够完成;

  第步:随机创造些小球

  view plaincopy to clipboardpr?

   1. private function creatBall:void  
   2.         {  
   3.             for (var i:=0; i<10; i)  
   4.             {  
   5.                 var ball:Ball= Ball;  
   6.                 addChild(ball);  
   7.                 list.push(ball);  
   8.                 ball.x=Math.random*550;  
   9.                 ball.y=Math.random*400;  
  10.   
  11.             }  
  12.         }  


  第 2步:

  进行对鼠标监听针对鼠标 按下和松开状态进行监听并加以EnterFrame事件帧进行刷新操作

   1. private function init:void  
   2.         {  
   3.             stage.addEventListener(MouseEvent.MOUSE_DOWN,MouseDown);  
   4.             stage.addEventListener(MouseEvent.MOUSE_UP,MouseUp);  
   5.             stage.addEventListener(Event.ENTER_FRAME,Run);  
   6.   
   7.         }  


  第 3步:

  对小球进行绘制直线步我们主要使用moveTo 和LineTo方式就行其他也可以使用flash cs4drawpath

  关键地方就是确立好每个小球位置

   1. //绘制线条  
   2.         private function drawLine(x1,y1):void  
   3.         {  
   4.             graphics.clear;  
   5.             graphics.lineStyle(1,0xff0000);  
   6.   
   7.             for (var i:=0; i<list.length; i)  
   8.             {  
   9.                 graphics.moveTo(mouseX,mouseY);  
  10.                 graphics.lineTo(list[i].x,list[i].y);  
  11.             }  
  12.   
  13.         } 


  第 4步:小球运动

  怎样才能运行?其实就是转换为角度问题了要让小球产生移动则需要知道他速度分解其vx 和vy 两个方向计算出他们位移

   1. private function BallMove:void  
   2. {  
   3.     for (var i:=0; i<list.length; i)  
   4.     {  
   5.         var angle:Number=Math.atan2(mouseY-list[i].y,mouseX-list[i].x);// 计算出鼠标点和每个小球直接角度值  
   6.         list[i].xMath.cos(angle)*speed;//位移  
   7.         list[i].yMath.sin(angle)*speed;  
   8.     }  
   9. }  


  整理总结:这些小玩意只是绘图api 些最简单应用有了这些应用好可以扩展很多很多意想不到效果不过不要忘记效果背后往往是些数学和物理原理点很重要

  有什么想法?如果有记下来吧对你说不定有帮助

   1. package   
   2. {  
   3.     import flash.display.MovieClip;  
   4.     import flash.events.*;  
   5.   
   6.     //拖动小球  
   7.     public  Main extends MovieClip  
   8.     {  
   9.   
  10.         private var list:Array= Array;//列表  
  11.         private var key:Boolean=false;  
  12.         private var speed:=5;//小球移动速度  
  13.         public function Main  
  14.         {  
  15.             creatBall;  
  16.             init;  
  17.         }  
  18.         private function init:void  
  19.         {  
  20.             stage.addEventListener(MouseEvent.MOUSE_DOWN,MouseDown);  
  21.             stage.addEventListener(MouseEvent.MOUSE_UP,MouseUp);  
  22.             stage.addEventListener(Event.ENTER_FRAME,Run);  
  23.   
  24.         }  
  25.         private function MouseDown(event:MouseEvent):void  
  26.         {  
  27.               
  28.             drawLine(mouseX,mouseY);  
  29.             key=true;  
  30.         }  
  31.   
  32.         private function MouseUp(event:MouseEvent):void  
  33.         {  
  34.             key=false;  
  35.             graphics.clear;  
  36.   
  37.         }  
  38.         private function Run(event:Event):void  
  39.         {  
  40.              (key)  
  41.             {  
  42.                 BallMove;  
  43.                 drawLine(mouseX,mouseY);  
  44.             }  
  45.         }  
  46.         private function creatBall:void  
  47.         {  
  48.             for (var i:=0; i<10; i)  
  49.             {  
  50.                 var ball:Ball= Ball;  
  51.                 addChild(ball);  
  52.                 list.push(ball);  
  53.                 ball.x=Math.random*550;  
  54.                 ball.y=Math.random*400;  
  55.   
  56.             }  
  57.         }  
  58.         //绘制线条  
  59.         private function drawLine(x1,y1):void  
  60.         {  
  61.             graphics.clear;  
  62.             graphics.lineStyle(1,0xff0000);  
  63.   
  64.             for (var i:=0; i<list.length; i)  
  65.             {  
  66.                 graphics.moveTo(mouseX,mouseY);  
  67.                 graphics.lineTo(list[i].x,list[i].y);  
  68.             }  
  69.   
  70.         }  
  71.         //难点就是怎样使用鼠标拖动小球移动  
  72.         private function BallMove:void  
  73.         {  
  74.             for (var i:=0; i<list.length; i)  
  75.             {  
  76.                 var angle:Number=Math.atan2(mouseY-list[i].y,mouseX-list[i].x);// 计算出鼠标点和每个小球直接角度值  
  77.                 list[i].xMath.cos(angle)*speed;//位移  
  78.                 list[i].yMath.sin(angle)*speed;  
  79.             }  
  80.         }  
  81.   
  82.   
  83.     }  
  84. }


Tags:  js鼠标拖动 鼠标拖动 flash鼠标拖动 鼠标拖动小鱼

延伸阅读

最新评论

发表评论