Hi,
I had seen lot of sites are using the already existing free transform tool and i found the bug on free transform tool component during resize but it cannot be restrict when mouse goes out of the stage area of the flash application. But based on the project that i am currently working as i need to restrict the resize of the component within the working area. Then i decided to develop a own free transform tool with the options as move and resize the component with eight corners. Finally i did and finish the concept of create the free transform tool and using the Rectangle class only used for manage the resize and move the free transform tool. This free transform tool move with in the boundary area and restrict the size into minimum size as well. The code for the free transform tool that i try out as below.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="onInit()">
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
//For Resize corner Tabs
private var _leftTopSprite:Sprite;
private var _leftMiddleSprite:Sprite;
private var _leftBottomSprite:Sprite;
private var _topMiddleSprite:Sprite;
private var _bottomMiddleSprite:Sprite;
private var _rightTopSprite:Sprite;
private var _rightMiddleSprite:Sprite;
private var _rightBottomSprite:Sprite;
//For variables declarations
private var _curTab:Sprite;
private var _sprite:Sprite;
private var _resizeWidth:Number;
private var _resizeHeight:Number;
private var _resizeStartX:Number;
private var _resizeStartY:Number;
private var _resizeHolder:Sprite;
private var _spriteHolder:Sprite;
private var _resizeRect:Rectangle;
private var _isResizeTab:Boolean = false;
private var _prevSprite:Sprite = null;
private var _currentSprite:Sprite = null;
private var _resizeInterface:UIComponent;
private static const HOTSPOT_MIN_SIZE:uint = 45;
private static const RESIZE_MAXIMUM_WIDTH:uint = 850;
private static const RESIZE_MAXIMUM_HEIGHT:uint = 550;
//For setup the Interface
private function onInit():void
{
_resizeInterface = new UIComponent();
_spriteHolder = new Sprite();
_spriteHolder.graphics.clear();
_spriteHolder.graphics.beginFill(0xFFFFFF,1);
_spriteHolder.graphics.drawRect(0,0,RESIZE_MAXIMUM_WIDTH,RESIZE_MAXIMUM_HEIGHT);
_spriteHolder.graphics.endFill();
_resizeInterface.addChild(_spriteHolder);
_sprite = drawSprite();
_sprite.name = "s1";
_spriteHolder.addChild(_sprite);
_sprite = drawSprite();
_sprite.name = "s2";
_spriteHolder.addChild(_sprite);
_sprite.x = 250;
_sprite.y = 50;
addChild(_resizeInterface);
_resizeInterface.x = 50;
_resizeInterface.y = 50;
}
private function drawSprite():Sprite
{
var _sp:Sprite = new Sprite();
_sp.graphics.clear();
_sp.graphics.beginFill(0xFF0000,0.8);
_sp.graphics.drawRect(0,0,200,200);
_sp.graphics.endFill();
_sp.cacheAsBitmap = false;
_sp.focusRect = false;
_sp.addEventListener(MouseEvent.MOUSE_DOWN,onSpriteDown);
addEventListener(MouseEvent.MOUSE_MOVE,onMoveSprite);
_sp.addEventListener(MouseEvent.MOUSE_UP,onStopSprite);
return _sp;
}
private function onSpriteDown(evt:MouseEvent):void
{
var _dragRect:Rectangle;
_prevSprite = _currentSprite;
var spr:Sprite = evt.target as Sprite;
_currentSprite = spr;
_resizeRect = spr.getBounds(spr.parent);
if(_prevSprite != null && _resizeHolder && _prevSprite.name != _currentSprite.name)
{
if(_resizeHolder)
{
_prevSprite.removeChild(_resizeHolder);
_isResizeTab = false;
_resizeHolder = null;
}
}
if(_prevSprite != null && _prevSprite.name == _currentSprite.name)
{
stage.focus = _currentSprite;
}
if(_resizeHolder == null && !_isResizeTab)
{
//For draw black line around selected sprite
_resizeHolder = new Sprite();
_resizeHolder.graphics.clear();
_resizeHolder.graphics.lineStyle(1,0x000000);
_resizeHolder.graphics.drawRect(0,0,_resizeRect.width,_resizeRect.height);
_resizeHolder.graphics.endFill();
_resizeHolder.cacheAsBitmap = false;
//Left side resize tab
_leftTopSprite = drawResizeTab();
_leftTopSprite.name = "LT";
_resizeHolder.addChild(_leftTopSprite);
_leftTopSprite.x = - 10;
_leftTopSprite.y = - 10;
_leftTopSprite.buttonMode = true;
_leftMiddleSprite = drawResizeTab();
_leftMiddleSprite.name = "LM";
_resizeHolder.addChild(_leftMiddleSprite);
_leftMiddleSprite.x = - 10;
_leftMiddleSprite.y = (_resizeRect.height - _leftMiddleSprite.height)/2;
_leftMiddleSprite.buttonMode = true;
_leftBottomSprite = drawResizeTab();
_leftBottomSprite.name = "LB";
_resizeHolder.addChild(_leftBottomSprite);
_leftBottomSprite.x = - 10;
_leftBottomSprite.y = _resizeRect.height - 10;
_leftBottomSprite.buttonMode = true;
//-----------------------
//Right side resize tab
_rightTopSprite = drawResizeTab();
_rightTopSprite.name = "RT";
_resizeHolder.addChild(_rightTopSprite);
_rightTopSprite.x = _resizeRect.width - 10;
_rightTopSprite.y = - 10;
_rightTopSprite.buttonMode = true;
_rightMiddleSprite = drawResizeTab();
_rightMiddleSprite.name = "RM";
_resizeHolder.addChild(_rightMiddleSprite);
_rightMiddleSprite.x = _resizeRect.width - 10;
_rightMiddleSprite.y = (_resizeRect.height - _rightMiddleSprite.height)/2;
_rightMiddleSprite.buttonMode = true;
_rightBottomSprite = drawResizeTab();
_rightBottomSprite.name = "RB";
_resizeHolder.addChild(_rightBottomSprite);
_rightBottomSprite.x = _resizeRect.width - 10;
_rightBottomSprite.y = _resizeRect.height - 10;
_rightBottomSprite.buttonMode = true;
//---------------
//Top middle resize tab
_topMiddleSprite = drawResizeTab();
_topMiddleSprite.name = "TM";
_resizeHolder.addChild(_topMiddleSprite);
_topMiddleSprite.x = (_resizeRect.width - _topMiddleSprite.width)/2;
_topMiddleSprite.y = - 10;
_topMiddleSprite.buttonMode = true;
//---------------------
//Bottom middle resize tab
_bottomMiddleSprite = drawResizeTab();
_bottomMiddleSprite.name = "BM";
_resizeHolder.addChild(_bottomMiddleSprite);
_bottomMiddleSprite.x = (_resizeRect.width - _bottomMiddleSprite.width)/2;
_bottomMiddleSprite.y = _resizeRect.height - 10;
_bottomMiddleSprite.buttonMode = true;
//---------------------
spr.addChild(_resizeHolder);
}
//For set the boundary for hotspot drag area
_dragRect = _spriteHolder.getBounds(_spriteHolder.parent);
_dragRect.width = (_dragRect.width - _resizeRect.width)+20;
_dragRect.height = (_dragRect.height - _resizeRect.height)+20;
_currentSprite.startDrag(false,_dragRect);
}
private function drawResizeTab():Sprite
{
var _tab:Sprite = new Sprite();
_tab.graphics.clear();
_tab.graphics.beginFill(0xFFCC00,0.8);
_tab.graphics.drawRect(0,0,20,20);
_tab.graphics.endFill();
_tab.addEventListener(MouseEvent.MOUSE_DOWN,onResizeTabDown);
stage.addEventListener(MouseEvent.MOUSE_UP,onResizeTabUp);
return _tab;
}
private function onMoveSprite(evt:MouseEvent):void
{
evt.updateAfterEvent();
}
private function onStopSprite(evt:MouseEvent):void
{
_currentSprite.stopDrag();
removeEventListener(MouseEvent.MOUSE_MOVE,onMoveSprite);
_currentSprite.addEventListener(MouseEvent.MOUSE_DOWN,onSpriteDown);
}
private function onResizeTabDown(evt:MouseEvent):void
{
evt.stopImmediatePropagation();
var _tab:Sprite = evt.target as Sprite;
_curTab = _tab;
_resizeStartX = _resizeRect.x;
_resizeStartY = _resizeRect.y;
_resizeWidth = _resizeRect.x+_resizeRect.width;
_resizeHeight = _resizeRect.y+_resizeRect.height;
_tab.startDrag();
stage.addEventListener(MouseEvent.MOUSE_MOVE,onSpriteResize);
stage.addEventListener(MouseEvent.MOUSE_UP,onStopDrag);
}
private function onStopDrag(evt:MouseEvent):void
{
_curTab.stopDrag();
stage.removeEventListener(MouseEvent.MOUSE_MOVE,onSpriteResize);
_currentSprite.addEventListener(MouseEvent.MOUSE_DOWN,onSpriteDown);
}
private function onSpriteResize(evt:MouseEvent):void
{
if(_curTab.name == "BM")
{
_resizeRect.bottom = Math.min(RESIZE_MAXIMUM_HEIGHT,_spriteHolder.mouseY);
}
if(_curTab.name == "TM")
{
_resizeRect.top = Math.max(0,_spriteHolder.mouseY);
}
if(_curTab.name == "RM")
{
_resizeRect.right = Math.min(RESIZE_MAXIMUM_WIDTH,_spriteHolder.mouseX);
}
if(_curTab.name == "LM")
{
_resizeRect.left = Math.max(0,_spriteHolder.mouseX);
}
if(_curTab.name == "LT")
{
_resizeRect.top = Math.max(0,_spriteHolder.mouseY);
_resizeRect.left = Math.max(0,_spriteHolder.mouseX);
}
if(_curTab.name == "RT")
{
_resizeRect.top = Math.max(0,_spriteHolder.mouseY);
_resizeRect.right = Math.min(RESIZE_MAXIMUM_WIDTH,_spriteHolder.mouseX);
}
if(_curTab.name == "RB")
{
_resizeRect.bottom = Math.min(RESIZE_MAXIMUM_HEIGHT,_spriteHolder.mouseY);
_resizeRect.right = Math.min(RESIZE_MAXIMUM_WIDTH,_spriteHolder.mouseX);
}
if(_curTab.name == "LB")
{
_resizeRect.bottom = Math.min(RESIZE_MAXIMUM_HEIGHT,_spriteHolder.mouseY);
_resizeRect.left = Math.max(0,_spriteHolder.mouseX);
}
if(_resizeRect.width <= HOTSPOT_MIN_SIZE && _resizeRect.height <= HOTSPOT_MIN_SIZE) {
_resizeRect.width = HOTSPOT_MIN_SIZE;
_resizeRect.height = HOTSPOT_MIN_SIZE;
if(_curTab.name == "LT") {
_resizeRect.x = _resizeWidth - _resizeRect.width;
_resizeRect.y = _resizeHeight - _resizeRect.height;
}
if(_curTab.name == "RT") {
_resizeRect.x = _resizeStartX;
_resizeRect.y = _resizeHeight - _resizeRect.height;
}
if(_curTab.name == "LB") {
_resizeRect.x = _resizeWidth - _resizeRect.width;
_resizeRect.y = _resizeStartY;
}
}
else if(_resizeRect.width <= HOTSPOT_MIN_SIZE && _resizeRect.height > HOTSPOT_MIN_SIZE)
{
_resizeRect.width = HOTSPOT_MIN_SIZE;
if(_curTab.name == "LT" _curTab.name == "LM")
_resizeRect.x = _resizeWidth - _resizeRect.width;
if(_curTab.name == "RT")
_resizeRect.x = _resizeStartX;
if(_curTab.name == "LB")
_resizeRect.x = _resizeWidth - _resizeRect.width;
}
else if(_resizeRect.width > HOTSPOT_MIN_SIZE && _resizeRect.height <= HOTSPOT_MIN_SIZE) {
_resizeRect.height = HOTSPOT_MIN_SIZE;
if(_curTab.name == "LT" _curTab.name == "TM")
_resizeRect.y = _resizeHeight - _resizeRect.height;
if(_curTab.name == "RT")
_resizeRect.y = _resizeHeight - _resizeRect.height;
if(_curTab.name == "LB")
_resizeRect.y = _resizeStartY;
}
_currentSprite.graphics.clear();
_currentSprite.graphics.beginFill(0xFF0000,0.8);
_currentSprite.graphics.drawRect(0,0,_resizeRect.width,_resizeRect.height); _currentSprite.graphics.endFill();
_currentSprite.x = _resizeRect.x;
_currentSprite.y = _resizeRect.y;
_resizeHolder.graphics.clear();
_resizeHolder.graphics.lineStyle(1,0x000000);
_resizeHolder.graphics.drawRect(0,0,_resizeRect.width,_resizeRect.height); _resizeHolder.graphics.endFill();
updatePosition(_resizeRect);
evt.updateAfterEvent();
}
private function updatePosition(_rect:Rectangle):void
{
_leftTopSprite.x = - 10; _leftTopSprite.y = - 10;
_leftMiddleSprite.x = - 10;
_leftMiddleSprite.y = (_rect.height - _leftMiddleSprite.height)/2;
_leftBottomSprite.x = - 10;
_leftBottomSprite.y = _rect.height - 10;
_rightTopSprite.x = _rect.width - 10;
_rightTopSprite.y = - 10;
_rightMiddleSprite.x = _rect.width - 10;
_rightMiddleSprite.y = (_rect.height - _rightMiddleSprite.height)/2;
_rightBottomSprite.x = _rect.width - 10;
_rightBottomSprite.y = _rect.height - 10;
_topMiddleSprite.x = (_rect.width - _topMiddleSprite.width)/2;
_topMiddleSprite.y = - 10;
_bottomMiddleSprite.x = (_rect.width - _bottomMiddleSprite.width)/2; _bottomMiddleSprite.y = _rect.height - 10;
}
private function onResizeTabUp(evt:MouseEvent):void
{
var _tab:Sprite = evt.target as Sprite; _tab.stopDrag();
_currentSprite.removeChildAt(0);
_resizeRect = _currentSprite.getBounds(_currentSprite.parent);
_currentSprite.addChild(_resizeHolder);
stage.removeEventListener(MouseEvent.MOUSE_MOVE,onSpriteResize);
}
]]> </mx:Script>
</mx:Application>
