<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="300" height="200"
	creationComplete="createBox()" mouseMove="boxOverHanlder(event)" mouseOut="boxOutHanlder(event)" mouseOver="boxOverHanlder(event)" 
	mouseDown="boxDownHanlder(event);" mouseUp="boxUpHanlder(event)">
 
	<mx:Script>
		<![CDATA[
			import mx.rpc.events.AbstractEvent;
			import mx.containers.VBox;
			import mx.events.DynamicEvent;
			import mx.containers.HBox;
			import mx.controls.Alert;
			//不可以用固定的 HBOX !
			//private var but:HBox=new HBox();
 
 
			private function createBox():void
			{
				//建BOX
				//這邊設定比較多此一舉 因為元件本身就可以設定了
				//this.width=300;
				//this.height=200;
				myimg.width=this.width;
				myimg.height=this.height;
				//this.x=0;
				//this.y=0;
				//建立改變大小按鈕
				var but:HBox = new HBox();
				but.name = "changBtn";
				but.width=10;
				but.height=10;
				//按鈕座標
				but.x=this.width - but.width;
				but.y=this.height - but.height;
				//偵聽改變大小事件
				but.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownBut);
				but.addEventListener(MouseEvent.MOUSE_UP, mouseUpBut);
				//其實在元件建立的時候就已經 addChild 過了
				//parent.addChild(this);
				this.addChild(but);
 
			}
 
 
			private function mouseDownBut(event:MouseEvent):void
			{
				event.target.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveBut);
				event.target.startDrag();
			}
 
			private function mouseUpBut(event:MouseEvent):void
			{
				event.target.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveBut);
				event.target.stopDrag();
				event.target.x=this.width - event.target.width;
				event.target.y=this.height - event.target.height;
			}
 
			private function mouseMoveBut(event:MouseEvent):void
			{
				this.width=this.mouseX;
				this.height=this.mouseY;
				myimg.width=this.width;
				myimg.height=this.height;
 
				mylb.scaleX=((this.width) / 100);
				mylb.scaleY=((this.height) / 100);
				event.updateAfterEvent();
			}
 
			/*===============================================================================*/
 
			private function boxDownHanlder(event:MouseEvent):void
			{
				/* 不要用固定的判斷方式
				if (event.target == "DragBox1.Stage.box.myimg.FlexLoader10")
				{
					box.startDrag();
				}
				*/
				//trace(event.target);
				if (event.currentTarget is Canvas){
					if(event.target is HBox){
						//反向寫不出來 >"<
					}else{
						event.currentTarget.startDrag();
					}
				}
			}
 
 
 
			private function boxUpHanlder(event:MouseEvent):void
			{
				/* 不要用固定的判斷方式
				if (event.target == "DragBox1.Stage.box.myimg.FlexLoader10")
				{
					box.stopDrag();
					box.setStyle("backgroundColor", "");
					box.setStyle("backgroundAlpha", 0);
					box.setStyle("borderThickness", 1);
					box.setStyle("borderColor", "");
					box.setStyle("borderStyle", "");
 
					//but.setStyle("backgroundColor", "");
					//but.setStyle("backgroundAlpha", 0);
					//but.setStyle("borderThickness", 1);
					//but.setStyle("borderColor", "");
					//but.setStyle("cornerRadius", 0);
					//but.setStyle("borderStyle", "");
				}*/
				if(event.currentTarget is Canvas){
					if(event.target is HBox){
						//反向寫不出來 >"<
					}else{
						var box:Canvas = event.currentTarget as Canvas;
						box.stopDrag();
						box.setStyle("backgroundColor", "");
						box.setStyle("backgroundAlpha", 0);
						box.setStyle("borderThickness", 1);
						box.setStyle("borderColor", "");
						box.setStyle("borderStyle", "");
						var but:HBox = event.currentTarget.getChildByName("changBtn");
						but.setStyle("backgroundColor", "");
						but.setStyle("backgroundAlpha", 0);
						but.setStyle("borderThickness", 1);
						but.setStyle("borderColor", "");
						but.setStyle("cornerRadius", 0);
						but.setStyle("borderStyle", "");
					}
				}
			}
 
 
			private function boxOverHanlder(event:MouseEvent):void
			{
				this.setStyle("backgroundColor", "#f00dbad");
				this.setStyle("backgroundAlpha", 0.2);
				this.setStyle("borderThickness", 1);
				this.setStyle("borderColor", "#f00dbad");
				this.setStyle("borderStyle", "solid");
				this.clipContent=false;
 
				//顯示改變大小按鈕
				var but:HBox = event.currentTarget.getChildByName("changBtn");
				but.setStyle("backgroundColor", "#000");
				but.setStyle("backgroundAlpha", 0.3);
				but.setStyle("borderThickness", 1);
				but.setStyle("borderColor", "#000");
				but.setStyle("cornerRadius", 0);
				but.setStyle("borderStyle", "solid");
			}
 
			private function boxOutHanlder(event:MouseEvent):void
			{
				this.setStyle("backgroundColor", "");
				this.setStyle("backgroundAlpha", 0);
				this.setStyle("borderThickness", 1);
				this.setStyle("borderColor", "");
				this.setStyle("borderStyle", "");
 
				var but:HBox = event.currentTarget.getChildByName("changBtn");
				but.setStyle("backgroundColor", "");
				but.setStyle("backgroundAlpha", 0);
				but.setStyle("borderThickness", 1);
				but.setStyle("borderColor", "");
				but.setStyle("cornerRadius", 0);
				but.setStyle("borderStyle", "");
			}
			[Bindable]
			public var funString:String = "請輸入相關訊息" ;
		]]>
	</mx:Script>
 
 
 
	<mx:Image source="box.png" id="myimg"/>
	<mx:Label text="{this.funString}" id="mylb" x="41" y="32" fontSize="15"/>
</mx:Canvas>