拖动伸缩:鼠标按下进行拖动,移动的时候,对元件产生伸缩影响,最后松开完成这个交互动作。
元件的伸缩(宽度)是根据拖动的鼠标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; } } }