flash 与交互：鼠标交互-拖动伸缩

   拖动伸缩：鼠标按下进行拖动，移动的时候，对元件产生伸缩影响，最后松开完成这个交互动作。

 

  元件的伸缩（宽度）是根据拖动的鼠标mouseX属性影响。

 

   例如：mc.width=（mouseX的变化-mc.x)

 

   下面就是一个简单实验。

 

  

 

 

拖动条底部图形是0x333333 颜色。上部图形是0x6A8522 的绿色。在拖动的时候，绿色的部分会进行扩展，松开的时候，完成这个交互动作。这种交互会适合一些进度条的使用。有一些人更加喜欢加一个滑块上去。不妨可以结合StargDrag 和stopDrag的组合方式来促成这个交互。

 

下面就是使用的类。

是一个比较简单的实验内容。

 

需要进行三种监听组合:

 

addEventListener(MouseEvent.MOUSE_DOWN,onStartDragHandler);

addEventListener(MouseEvent.MOUSE_MOVE,onMouseMovegHandler);

upShape.stage.addEventListener(MouseEvent.MOUSE_UP,onMouseUpgHandler);

 

upShape.width=this.mouseX; 这里就是可以让图形进行伸缩变化。

 

使用的时候不妨注意这个地方。

package { import flash.display.Sprite; import flash.display.Shape; import flash.events.*; public class ProgressBar extends Sprite { private var upShape:Shape; private var bottomShape:Shape; private var _width:Number; public static const STARG_DOWN:String="stargdown"; public static const STARG_MOVE:String="stargmove"; public static const STARG_UP:String="stargup"; public function ProgressBar() { this.buttonMode=true; } //初始化高度和宽度 public function init(width:Number,height:Number,up_Color:uint=0x6A8522,bottom_Color:uint=0x333333):void { if (width <0|| height <0) { return; } this._width=width; upShape=new Shape(); upShape.graphics.beginFill(up_Color); upShape.graphics.drawRect(0,0,1,height); upShape.graphics.endFill(); bottomShape=new Shape(); bottomShape.graphics.beginFill(bottom_Color); bottomShape.graphics.drawRect(0,0,width,height); bottomShape.graphics.endFill(); addChild(bottomShape); addChild(upShape); addEventListener(MouseEvent.MOUSE_DOWN,onStartDragHandler); } private function onStartDragHandler(event:MouseEvent):void { upShape.width=this.mouseX; addEventListener(MouseEvent.MOUSE_MOVE,onMouseMovegHandler); upShape.stage.addEventListener(MouseEvent.MOUSE_UP,onMouseUpgHandler); this.dispatchEvent(new Event(ProgressBar.STARG_DOWN)); } private function onMouseMovegHandler(event:MouseEvent):void { upShape.width=this.mouseX; this.dispatchEvent(new Event(ProgressBar.STARG_MOVE)); } private function onMouseUpgHandler(event:MouseEvent):void { removeEventListener(MouseEvent.MOUSE_MOVE,onMouseMovegHandler); upShape.stage.removeEventListener(MouseEvent.MOUSE_UP,onMouseUpgHandler); this.dispatchEvent(new Event(ProgressBar.STARG_UP)); } //获取百分比 public function get percent():Number { return upShape.width/this._width; } public function set value(num:Number):void { upShape.width=num; } public function get value():Number { return upShape.width; } } }