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;//鼠标x private var mousey:Number = 0;//鼠标y private 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); } } } }