flash 绘图API：鼠标拖动小球

 

 

 

 

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

 

就能够完成；

 

第一步：随机创造一些小球

private function creatBall():void { for (var i:int=0; i<10; i++) { var ball:Ball=new Ball(); addChild(ball); list.push(ball); ball.x=Math.random()*550; ball.y=Math.random()*400; } }

 

第二步：

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

private function init():void { stage.addEventListener(MouseEvent.MOUSE_DOWN,MouseDown); stage.addEventListener(MouseEvent.MOUSE_UP,MouseUp); stage.addEventListener(Event.ENTER_FRAME,Run); }

 

第三步：

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

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

//绘制线条 private function drawLine(x1,y1):void { graphics.clear(); graphics.lineStyle(1,0xff0000); for (var i:int=0; i<list.length; i++) { graphics.moveTo(mouseX,mouseY); graphics.lineTo(list[i].x,list[i].y); } }

 

第四步：小球运动

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

private function BallMove():void { for (var i:int=0; i<list.length; i++) { var angle:Number=Math.atan2(mouseY-list[i].y,mouseX-list[i].x);// 计算出鼠标点，与每一个小球直接的角度值 list[i].x+=Math.cos(angle)*speed;//位移。 list[i].y+=Math.sin(angle)*speed; } }

 

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

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

 

package { import flash.display.MovieClip; import flash.events.*; //拖动小球 public class Main extends MovieClip { private var list:Array=new Array();//列表 private var key:Boolean=false; private var speed:int=5;//小球移动的速度 public function Main() { creatBall(); init(); } private function init():void { stage.addEventListener(MouseEvent.MOUSE_DOWN,MouseDown); stage.addEventListener(MouseEvent.MOUSE_UP,MouseUp); stage.addEventListener(Event.ENTER_FRAME,Run); } private function MouseDown(event:MouseEvent):void { drawLine(mouseX,mouseY); key=true; } private function MouseUp(event:MouseEvent):void { key=false; graphics.clear(); } private function Run(event:Event):void { if (key) { BallMove(); drawLine(mouseX,mouseY); } } private function creatBall():void { for (var i:int=0; i<10; i++) { var ball:Ball=new Ball(); addChild(ball); list.push(ball); ball.x=Math.random()*550; ball.y=Math.random()*400; } } //绘制线条 private function drawLine(x1,y1):void { graphics.clear(); graphics.lineStyle(1,0xff0000); for (var i:int=0; i<list.length; i++) { graphics.moveTo(mouseX,mouseY); graphics.lineTo(list[i].x,list[i].y); } } //难点就是怎样使用鼠标拖动小球移动 private function BallMove():void { for (var i:int=0; i<list.length; i++) { var angle:Number=Math.atan2(mouseY-list[i].y,mouseX-list[i].x);// 计算出鼠标点，与每一个小球直接的角度值 list[i].x+=Math.cos(angle)*speed;//位移。 list[i].y+=Math.sin(angle)*speed; } } } }