CODEWITHSUNDEEP
actionscript-3flashresize
user2047366
user2047366

Reputation: 93

How to resize an image on drag?

I have a couple of images I want to use in a drag and drop game. I've got this working through the actionscript code snippets but I also need these images to be able to resize by dragging an arrow or something similar at the bottom corner. I can either get the dragging working by not including the resize code and vice versa. 

this.addEventListener(MouseEvent.MOUSE_MOVE, resize);
this.addEventListener(MouseEvent.MOUSE_UP, stopDragging, true);
this.addEventListener(MouseEvent.MOUSE_DOWN, startDragging, true);
function startDragging(E:MouseEvent):void {
    resize1.startDrag();
}

function stopDragging(E:MouseEvent):void {
    resize1.stopDrag();
}
function resize(E:MouseEvent):void {
    item1_mc.width = resize1.x - item1_mc.x;
    item1_mc.height = resize1.y - item1_mc.y;
}

Does anyone have any idea how to fix this? I know my image resize code is primitive at the moment but that can be changed to scaling soon enough.

Upvotes: 0

Views: 374

Answers (1)

Philarmon
Philarmon

Reputation: 1806

You have to split your image movieclip (or whatever you have) into two parts - one draggable and one resizeable like that

myImageWidget (this is your parent movicelip)
|
|- imageMC (this will hold the image and will be the draggable object)
|- arrowMC (this is your arrow that will be OVER your image and will be used to resize)

Then IN YOUR "myImageWidget" you need something like this (get rid of all "this.", it makes no sense :)

// image MC will listen for clicks and start dragging
imageMC.addEventListener(MouseEvent.MOUSE_UP, stopDragging, true);
imageMC.addEventListener(MouseEvent.MOUSE_DOWN, startDragging, true);

// arrow MC will listen for clicks and start resizing
arrowMC.addEventListener(MouseEvent.MOUSE_UP, stopResizing, true);
arrowMC.addEventListener(MouseEvent.MOUSE_DOWN, startResizing, true);

function startDragging(E:MouseEvent):void 
{
    startDrag();
}

function stopDragging(E:MouseEvent):void 
{
    stopDrag();
}

function startResizing(E:MouseEvent):void 
{
   addEventListener(MouseEvent.MOUSE_MOVE, resize);
}

function stopResizing(E:MouseEvent):void 
{
   removeEventListener(MouseEvent.MOUSE_MOVE, resize);
}

function resize(E:MouseEvent):void 
{
    // you will adjust this to local coordinates since you are inside of the imageWidget
    width = mouseX;
    height = mouseY;
}

Upvotes: 1

Related Questions