Make a resizable, movable box in Flash

April 29th, 2010

I’m going to show how to make a box that you can resize by dragging the corners. It’s not that hard but it does take some figuring out to get it to work right. Here’s what we’re going to make:

Download the files.

Start off with a new Flash file. And build this on your stage. The red box can be four instances of the same movie clip. For the document class, put ReSizerControl.

Create a new ActionScript file and use this code as the base for it:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
package
{
    import flash.display.MovieClip;
    import flash.events.Event;
    import flash.events.MouseEvent;
   
    public class ReSizerControl extends MovieClip
    {
       
        public function ReSizerControl()
        {

        }
    }
}

Save this as ReSizerControl.as in the same folder as your .fla file.

What we’re going to do here is make functions to control the resizing when the corners are moused down on. But we’re also going to make it so we can move the black box around the stage which makes it a bit more difficult to set up the resizing functions. I’m going to put most of the explanations in the code, so that if you need to use this later, you’ll still have that info in there. The first thing, we’re going to do is get the bottom right corner to resize the box when you drag it around.

First, inside the constructor function, ReSizerControl(), put this:

1
2
//adds the listeners to the stage
addListeners();

Next, below ReSizerControl(), create this function:

1
2
3
4
5
6
private function addListeners()
{
    reSizer_br.addEventListener(MouseEvent.MOUSE_DOWN, onResizerDown);
    reSizer_br.addEventListener(MouseEvent.MOUSE_UP, onResizerUp);
    reSizer_br.buttonMode = true;
}

Ok, not we have to create the functions, onResizerDown and onResizerUp. They’re going to be pretty similar, one activates the resizing and the other one cancels it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
private function onResizerDown(e:MouseEvent):void
{
    //create a variable that we can use to check which red block has been clicked on
    //converts the name of the object to a string so we can check it
    var targetName:String = e.target.name.toString();
    //checks to see if the red block being clicked on is the one called 'reSizer_br'
    if (targetName == 'reSizer_br')
    {
        //if it is, then add the listener for reSize_br
        addEventListener(Event.ENTER_FRAME, reSize_br);
        //enable the user drag the clicked on block around the stage
        e.target.startDrag();
    }
}

private function onResizerUp(e:MouseEvent):void
{
    var targetName:String = e.target.name.toString();
    if (targetName == 'reSizer_br')
    {
        //Removes the listeners and stops the box from changing size
        removeEventListener(Event.ENTER_FRAME, reSize_br);
        e.target.stopDrag();
    }
}

Now that we have that, we have to create the reSize_br function, but first we need this below the ReSizerControl extends MovieClip and about the ReSizerControl function:

1
2
3
4
private var blockWidth:Number;
private var newWidth:Number;
private var blockHeight:Number;
private var newHeight:Number;

These variables are going to enable us to resize the block’s width and height. Here’s the reSize_br function:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
private function reSize_br(e:Event):void
{
    //finds the mouse position and resizes the black box
    if (mouseX > block.x + 20)
    {
        newWidth = reSizer_br.x;
        blockWidth = newWidth - block.x;
        block.width = blockWidth;
    }
    if (mouseY > block.y + 20)
    {
        newHeight = reSizer_br.y;
        blockHeight = newHeight - block.y;
        block.height = blockHeight;
    }
    //checks if the red block is too close another one and stops it from moving
    if (mouseX < block.x + 20)
    {
        reSizer_br.x = block.x + 21;
    }
    if (mouseY < block.y + 20)
    {
        reSizer_br.y = block.y + 21;
    }
}

Now if you test it, it should allow you to drag the bottom right red block and resize the block box. Now let’s make the bottom left one work. Add this to the addListeners function:

1
2
3
reSizer_bl.addEventListener(MouseEvent.MOUSE_DOWN, onResizerDown);
reSizer_bl.addEventListener(MouseEvent.MOUSE_UP, onResizerUp);
reSizer_bl.buttonMode = true;

And this to the bottom of the onResizeDown function:

1
2
3
4
5
if (targetName == 'reSizer_bl')
{
    addEventListener(Event.ENTER_FRAME, reSize_bl);
    e.target.startDrag();
}

And this to the bottom of the onResizeUp function:

1
2
3
4
5
if (targetName == 'reSizer_bl')
{
    removeEventListener(Event.ENTER_FRAME, reSize_bl);
    e.target.stopDrag();
}

And here’s our reSize_bl function:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
private function reSize_bl(e:Event):void
{
    if (mouseX > 0)
    {
        block.x = reSizer_bl.x;
        blockWidth = reSizer_br.x - block.x;
        block.width = blockWidth;
    }
    if (mouseY > block.y + 20)
    {
        newHeight = reSizer_bl.y;
        blockHeight = newHeight - block.y;
        block.height = blockHeight;
    }
    if (reSizer_bl.x > (reSizer_br.x - 20))
    {
        reSizer_bl.x = (reSizer_br.x - 21);
    }
    if (reSizer_bl.y < (block.y + 20))
    {
        reSizer_bl.y = (block.y + 21);
    }
}

The reSizer_bl function is pretty much the same, just minor differences in how it resizes the black box. Figuring out the differences will really help you understand how this works. Now, let’s get the top two red blocks working. Add this to the onResizeDown function:

1
2
3
4
5
6
7
8
9
10
if (targetName == 'reSizer_tr')
{
    addEventListener(Event.ENTER_FRAME, reSize_tr);
    e.target.startDrag();
}
if (targetName == 'reSizer_tl')
{
    addEventListener(Event.ENTER_FRAME, reSize_tl);
    e.target.startDrag();
}

And this to the onResizeUp function:

1
2
3
4
5
6
7
8
9
10
if (targetName == 'reSizer_tr')
{
    removeEventListener(Event.ENTER_FRAME, reSize_tr);
    e.target.stopDrag();
}
if (targetName == 'reSizer_tl')
{
    removeEventListener(Event.ENTER_FRAME, reSize_tl);
    e.target.stopDrag();
}

And we need to add these two functions:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
private function reSize_tr(e:Event):void
{
    if (mouseX > block.x + 20)
    {
        newWidth = reSizer_tr.x;
        blockWidth = newWidth - block.x;
        block.width = blockWidth;
    }
    if (mouseY > 0)
    {
        block.y = reSizer_tr.y;
        blockHeight = reSizer_br.y - block.y;
        block.height = blockHeight;
        }
    if (mouseX < block.x + 20)
    {
        reSizer_tr.x = block.x + 21;
    }
    if (mouseY > reSizer_br.y + 20)
    {
        reSizer_tr.y = reSizer_br.y + 21;
    }
}
private function reSize_tl(e:Event):void
{
    if (mouseX > 0)
    {
        block.x = reSizer_tl.x;
        blockWidth = reSizer_tr.x - block.x;
        block.width = blockWidth;
    }
    if (mouseY > 0)
    {
        block.y = reSizer_tl.y;
        blockHeight = reSizer_bl.y - block.y;
        block.height = blockHeight;
    }
    if (mouseX > reSizer_tr.x - 20)
    {
        reSizer_tl.x = reSizer_tr.x - 21;
    }
    if (mouseY > reSizer_bl.y - 20)
    {
        reSizer_tl.y = reSizer_bl.y - 21;
    }
}

And of course, this to the onResizeDown function:

1
2
3
4
5
6
7
8
9
10
if (targetName == 'reSizer_tr')
{
    addEventListener(Event.ENTER_FRAME, reSize_tr);
    e.target.startDrag();
}
if (targetName == 'reSizer_tl')
{
    addEventListener(Event.ENTER_FRAME, reSize_tl);
    e.target.startDrag();
}

And to the onResizeUp function:

1
2
3
4
5
6
7
8
9
10
if (targetName == 'reSizer_tr')
{
    removeEventListener(Event.ENTER_FRAME, reSize_tr);
    e.target.stopDrag();
}
if (targetName == 'reSizer_tl')
{
    removeEventListener(Event.ENTER_FRAME, reSize_tl);
    e.target.stopDrag();
}

Now add this to the addListeners function:

1
2
3
4
5
6
reSizer_tr.addEventListener(MouseEvent.MOUSE_DOWN, onResizerDown);
reSizer_tr.addEventListener(MouseEvent.MOUSE_UP, onResizerUp);
reSizer_tr.buttonMode = true;
reSizer_tl.addEventListener(MouseEvent.MOUSE_DOWN, onResizerDown);
reSizer_tl.addEventListener(MouseEvent.MOUSE_UP, onResizerUp);
reSizer_tl.buttonMode = true;

At this point all the corners should be able to resize the box, but we have one problem, they don’t move if they aren’t the one being clicked on. So we need to add this, just stick it at the bottom of the code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
private function positionReSizer_bl(e:Event):void
{
    reSizer_bl.x = block.x;
    reSizer_bl.y = block.y + block.height;
}
private function positionReSizer_br(e:Event):void
{
    reSizer_br.y = block.y + block.height;
    reSizer_br.x = block.x + block.width;
}
private function positionReSizer_tl(e:Event):void
{
    reSizer_tl.x = block.x;
    reSizer_tl.y = block.y;
}
private function positionReSizer_tr(e:Event):void
{
    reSizer_tr.x = block.x + block.width;
    reSizer_tr.y = block.y;
}

To use these functions, we need to change our onResizerDown and onResizeUp functions:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
private function onResizerDown(e:MouseEvent):void
{
    var targetName:String = e.target.name.toString();
    if (targetName == 'reSizer_br')
    {
        addEventListener(Event.ENTER_FRAME, reSize_br);
        addEventListener(Event.ENTER_FRAME, positionReSizer_bl);
        addEventListener(Event.ENTER_FRAME, positionReSizer_tr);
        e.target.startDrag();
    }
    if (targetName == 'reSizer_bl')
    {
        addEventListener(Event.ENTER_FRAME, reSize_bl);
        addEventListener(Event.ENTER_FRAME, positionReSizer_br);
        addEventListener(Event.ENTER_FRAME, positionReSizer_tl);
        e.target.startDrag();
    }
    if (targetName == 'reSizer_tr')
    {
        addEventListener(Event.ENTER_FRAME, reSize_tr);
        addEventListener(Event.ENTER_FRAME, positionReSizer_br);
        addEventListener(Event.ENTER_FRAME, positionReSizer_tl);
        e.target.startDrag();
    }
    if (targetName == 'reSizer_tl')
    {
        addEventListener(Event.ENTER_FRAME, reSize_tl);
        addEventListener(Event.ENTER_FRAME, positionReSizer_tr);
        addEventListener(Event.ENTER_FRAME, positionReSizer_bl);
        e.target.startDrag();
    }
}

private function onResizerUp(e:MouseEvent):void
{
    var targetName:String = e.target.name.toString();
    if (targetName == 'reSizer_br')
    {
        removeEventListener(Event.ENTER_FRAME, reSize_br);
        removeEventListener(Event.ENTER_FRAME, positionReSizer_bl);
        removeEventListener(Event.ENTER_FRAME, positionReSizer_tr);
        e.target.stopDrag();
    }
    if (targetName == 'reSizer_bl')
    {
        removeEventListener(Event.ENTER_FRAME, reSize_bl);
        removeEventListener(Event.ENTER_FRAME, positionReSizer_br);
        removeEventListener(Event.ENTER_FRAME, positionReSizer_tl);
        e.target.stopDrag();
    }
    if (targetName == 'reSizer_tr')
    {
        removeEventListener(Event.ENTER_FRAME, reSize_tr);
        removeEventListener(Event.ENTER_FRAME, positionReSizer_br);
        removeEventListener(Event.ENTER_FRAME, positionReSizer_tl);
        e.target.stopDrag();
    }
    if (targetName == 'reSizer_tl')
    {
        removeEventListener(Event.ENTER_FRAME, reSize_tl);
        removeEventListener(Event.ENTER_FRAME, positionReSizer_tr);
        removeEventListener(Event.ENTER_FRAME, positionReSizer_bl);
        e.target.stopDrag();
    }
}

Now the red blocks should stay attached to the corner when you’re resizing the block box. Now we have one final thing to do, make it so we can drag the black box around. It’s really simple, add this to the addListeners function:

1
2
3
block.addEventListener(MouseEvent.MOUSE_DOWN, onBlockDown);
block.addEventListener(MouseEvent.MOUSE_UP, onBlockUp);
block.buttonMode = true;

And then add there two functions at the bottom of the code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
private function onBlockDown(e:MouseEvent):void
{
    e.target.startDrag();
    addEventListener(Event.ENTER_FRAME, positionReSizer_br);
    addEventListener(Event.ENTER_FRAME, positionReSizer_bl);
    addEventListener(Event.ENTER_FRAME, positionReSizer_tr);
    addEventListener(Event.ENTER_FRAME, positionReSizer_tl);
}
private function onBlockUp(e:MouseEvent):void
{
    e.target.stopDrag();
    removeEventListener(Event.ENTER_FRAME, positionReSizer_br);
    removeEventListener(Event.ENTER_FRAME, positionReSizer_bl);
    removeEventListener(Event.ENTER_FRAME, positionReSizer_tr);
    removeEventListener(Event.ENTER_FRAME, positionReSizer_tl);
}

Now you should be able to drag the box around and the red blocks will follow. Because we didn’t use any hard values in the resizing functions, we are able to make the black box dragable, which increase the usefulness of this, if you want to use it as a mask or something similar.

Tags: , ,
Posted in flash | 2 Comments »

2 Responses to Make a resizable, movable box in Flash

  1. Pingback: Tweets that mention Atomic Robot Design Blog | Make a resizable, movable box in Flash « Atomic Robot Design -- Topsy.com

  2. Wyeth Stiles says:
    January 12, 2012 at 8:09 pm

    Thank you so much. This is very helpful. It will make a job I’m working on much easier.

    Best,

    -w

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>