flash 与交互：鼠标交互-拖和放（一）

 

 

   flash 交互有很多有趣的动词，其中包括拖放，压，抛，扔等这些动作。这些交互会使用鼠标的动作来完成，利用鼠标拖放观看正方体就是一个很有趣的例子之一。

 

  鼠标交互当中有一种是叫距离检测法的，这种是其中的鼠标交互的手法之一，如下： 

 距离检测法：

          var vx：Number=mouseX-舞台中心点X坐标；

          var  vy：Number=mouseY-舞台中心点y坐标；

       

      第二种：

           var vx：Number=（mouseX-舞台中心点X坐标）*0.5；

          var  vy：Number=（mouseY-舞台中心点y坐标）*0.5；

 

 

 

而下面这种则是另外一种交互的手法，通过鼠标的拖放来观看这个正方体。

 

  当中的用法是这样的：首先监听两个鼠标事件，一个是按下去的情况，另外一个是松开的情况

 

 stage.addEventListener(MouseEvent.MOUSE_DOWN,onMouseHandler);
 stage.addEventListener(MouseEvent.MOUSE_UP,onMouseHandler);

 

 

在onMouseHandler 函数当中执行一个真假值：

当按下去的时候 isDown 变成true ，松开就变成false；

private function onMouseHandler(event:MouseEvent):void { if (event.type == MouseEvent.MOUSE_DOWN) { isDown = true; } if (event.type == MouseEvent.MOUSE_UP) { isDown = false; } }

 

 

然后我们使用这个值在Enter_Frame 事件当中执行一些交互，按下去的时候执行减法的操作，用于为vx，vy传值，这些值就是用于正方体旋转的角度了，

vx=(mousex-mouseX)*0.5;//计算新旧鼠标X坐标的差值

vy=(mouseY-mousey)*0.5;//;//计算新旧鼠标Y坐标的差值

 

当松开的时候，vx ，vy 呈现递减0的趋向发展，最终会让下面的程序不再执行旋转。（其实是设置了为0的原因）

 

这样一个拖的交互制作就完成了。 利用这种手法可以创造很多交互的3D效果。这种通用性还是存在的。

 

还有其他的鼠标交互，通过摄影机的结合来使用。

 

摄影机旋转

摄影机平移

等 

 

//进行拖交互if (isDown){vx=(mousex-mouseX)*0.5;vy=(mouseY-mousey)*0.5;}else{vx *= f;vy *= f;}mousex = mouseX;mousey = mouseY;if (Math.abs(vy) <= 0.1){vy = 0;}if (Math.abs(vx) <= 0.1){vx = 0;}

 

 

总的代码：

 

package {import flash.display.Sprite;import flash.events.*;import flash.geom.*;import flash.display.MovieClip;public class Main extends MovieClip{private var list:Array = [];private var contain:Sprite=new Sprite();private var isDown:Boolean;private var vx:Number = 0;private var vy:Number = 0;private var mousex:Number = 0;//鼠标xprivate var mousey:Number = 0;//鼠标yprivate var f:Number = 0.8;//阻力public function Main(){init();}private function init():void{addChild(contain);contain.x = stage.stageWidth / 2;contain.y = stage.stageHeight / 2;drawSprite();addEventListener(Event.ENTER_FRAME,Run);stage.addEventListener(MouseEvent.MOUSE_DOWN,onMouseHandler);stage.addEventListener(MouseEvent.MOUSE_UP,onMouseHandler);}private function onMouseHandler(event:MouseEvent):void{if (event.type == MouseEvent.MOUSE_DOWN){isDown = true;}if (event.type == MouseEvent.MOUSE_UP){isDown = false;}}private function Run(event:Event):void{//进行拖交互if (isDown){vx=(mousex-mouseX)*0.5;vy=(mouseY-mousey)*0.5;}else{vx *= f;vy *= f;}mousex = mouseX;mousey = mouseY;if (Math.abs(vy) <= 0.1){vy = 0;}if (Math.abs(vx) <= 0.1){vx = 0;}for (var i:int=0; i<6; i++){list[i].transform.matrix3D.appendRotation(vx,Vector3D.Y_AXIS);list[i].transform.matrix3D.appendRotation(vy,Vector3D.X_AXIS);}sortZ();}//绘制图形private function drawSprite():void{for (var i:int=0; i<6; i++){var shape:Sprite=new Sprite();shape.z = -100;shape.graphics.lineStyle(1);shape.graphics.beginFill(0x666666,0.3);shape.graphics.drawRect(-100,-100,200,200);shape.graphics.endFill();contain.addChild(shape);if (i < 4){shape.transform.matrix3D.appendRotation(90*i,Vector3D.Y_AXIS);}else if (i==4){shape.transform.matrix3D.appendRotation(90,Vector3D.X_AXIS);}else{shape.transform.matrix3D.appendRotation(-90,Vector3D.X_AXIS);}list.push(shape);}}//排序private function sortZ():void{list.sortOn("z",Array.NUMERIC);for (var i:int=0; i<6; i++){contain.setChildIndex(list[i],i);}}}}