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