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); } } } }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值