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