Dynamically Resize Component

[exiztone]

Hey guys,

I'm trying to make an interactive Flex application whereby the user can move and resize rectangular shapes on a stage. What I've done so far is to just use VBoxes with a background colour. I can use the startDrag() method fine to move them around the stage, but resizing them has got me lost. How would I could about it so the user could click the bottom right hand corner (maybe even another component in that position to make it easier) that would dynamically change the width and height of the VBox with his mouse.

Any advice is appreciated. Cheers :)

[drkstr]

There is a lot of code involved in this, depending on what all you are trying to do. Here is a snippet of some of my code that handles the mouse events. It will at least give you a basic idea of how to go about it. Try playing around with it and let me know if anything doesn't make sense.


private function onMouseDown( event:MouseEvent ): void {
trace('onMouseDown');

//capture mouse up event when released outside page area
systemManager.addEventListener(MouseEvent.MOUSE_UP , onMouseRelease, true);

//store mouse coord
myStartX = Math.round(event.localX/myUnitSize)*myUnitSize;
myStartY = Math.round(event.localY/myUnitSize)*myUnitSize;

/*
* check to see what was clicked on then set appropriate status
*/

//if the border of existing component was clicked
var caller:PageContent = event.target as PageContent;
if( caller != null ) {
myCurrentPageContent = caller;

//if move (top left) selected
if( myStartX == 0 && myStartY == 0 ) {
trace("move indicator clicked");
myCurrentStatus = StatusCode.MOVE_PREV;
dispatchEvent( new Event('statusChanged') );
}
else if( myStartX == myCurrentPageContent.width && myStartY == myCurrentPageContent.height ) {
trace("resize width,height indicator clicked");
myCurrentStatus = StatusCode.RESIZE_PREV_WH;
dispatchEvent( new Event('statusChanged') );
}
else if( myStartX == myCurrentPageContent.width ) {
trace("resize width clicked");
myCurrentStatus = StatusCode.RESIZE_PREV_W;
dispatchEvent( new Event('statusChanged') );
}
else if( myStartY == myCurrentPageContent.height ) {
trace("resize height clicked");
myCurrentStatus = StatusCode.RESIZE_PREV_H;
dispatchEvent( new Event('statusChanged') );
}

}
else if( myCurrentStatus == StatusCode.ADD_NEW ) {
myCurrentStatus = StatusCode.RESIZE_NEW;
dispatchEvent( new Event('statusChanged') );
}
}

private function onMouseMoved( event:MouseEvent ): void {

if( myCurrentStatus == StatusCode.RESIZE_NEW ||
myCurrentStatus == StatusCode.RESIZE_PREV_WH ||
myCurrentStatus == StatusCode.RESIZE_PREV_W ||
myCurrentStatus == StatusCode.RESIZE_PREV_H ) {

resizeContent(event.stageX, event.stageY);

}
else if( myCurrentStatus == StatusCode.MOVE_PREV ) {
moveContent(event.stageX, event.stageY);
}

}

private function onMouseRelease( event:MouseEvent ): void {
trace('onMouseRelease');

if( myCurrentStatus == StatusCode.RESIZE_NEW ||
myCurrentStatus == StatusCode.RESIZE_PREV_WH ||
myCurrentStatus == StatusCode.RESIZE_PREV_W ||
myCurrentStatus == StatusCode.RESIZE_PREV_H ) {

myCurrentStatus = StatusCode.FINISHED_RESIZE;
dispatchEvent( new Event('statusChanged') );

}
else if( myCurrentStatus == StatusCode.MOVE_PREV ) {

myCurrentStatus = StatusCode.FINISHED_MOVE;
dispatchEvent( new Event('statusChanged') );

}

}


Hope this helps,
...aaron

[exiztone]

drkstr, thanks very much, that was extremely helpful! :)