Limit Drag&Drop Area in Mask

[Arioman]

hi , i have medium map image and i want to show this in a specific Frame (border)

i cant Resize and Decrease my map image cause the font cant be read so i decided to put this image in a mask Area and use Drag function so user can See whole of image with Draging

i use mask technic , convert my image to movieclip with instance name : map_mc

and then put this script :

map_mc.addEventListener(MouseEvent.MOUSE_DOWN, drag);

map_mc.addEventListener(MouseEvent.MOUSE_UP, drop);

function drag(event:MouseEvent):void {

map_mc.startDrag();

}

function drop(event:MouseEvent):void {

map_mc.stopDrag();

}

it works but the problem is : i can move and drag my image till all of image goes out of my mask area ( nothing see , only white screen) , so how can i limit this area and make Drag Function works only when Reachs the Edges of image ( Top , down , Right , Left ) /

[Ned Murphy]

Look into the startDrag() method and you will see that you can specify a rectangular boundary for dragging.  You will want to specify your boundary relative to the registration point of the map_mc.

[Arioman]

Thanks Mr.Murphy

i use this script :

area_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragArea);

area_mc.addEventListener(MouseEvent.MOUSE_UP, dropArea);

function dragArea(e:MouseEvent):void{

    var bounds:Rectangle = new Rectangle(

                                stage.stageWidth - area_mc.width,

                                stage.stageHeight - area_mc.height,

                                area_mc.width - stage.stageWidth,

                                area_mc.height - stage.stageHeight

                            );

    area_mc.startDrag(false, bounds);

}

function dropArea(e:MouseEvent):void{

    area_mc.stopDrag();

}

but this script is for Stage and i want to define a Rectangle ( ideal Box area ) in my stage .

i try to create a Box and instance name it : main_area and Try to Replace stage.stageWidth with main_area.width and main_area.height , but its not work well

The secound Problem is After 2 times Draging the Drag function works with my mouse movement Even when no Left mouse is pressed !

so how can i solve this ?  i want the Drag Function Works only when left click pressed and move , not when mouse move .

[Ned Murphy]

For the Rectangle, you need to define the bounding box allowed for the movement of the area_mc.  You need to define the rectangle based upon the following... the upper left corner of it and its width and height:

Rectangle(x:Number = 0, y:Number = 0, width:Number = 0, height:Number = 0)

The upper left corner (x/y values) is where the map will be when its lower right corner is as far as you will allow the map to be moved to the left and upward.  This should be determined based on the upper left corner of the mask...

    x = mask.x - (area_mc.width - mask.width);

    y = mask.y - (area_mc.height - mask.height) ;

The width and height will be the difference between the x/y values of the map when it is moved as far right and down as you wish to allow it, minus the original x/y values, or basically, the difference in the width between the map and the mask.

    width = area_mc.width - mask.width;

    height =  area_mc.height - mask.height;

For the second problem, you should be assigning the MOUSE_UP listener to the stage rather than to the area_mc.  That way, regardless of where the mouse up occurs, it will register.

[Arioman]

thanks so much Mr.Murphy for spend time to explain and help me

but i confused more and i Ashamed for this .

i dont know how can i define the rectangle  , or where i must put this

    x = mask.x - (area_mc.width - mask.width);

    y = mask.y - (area_mc.height - mask.height) ;

or

    width = area_mc.width - mask.width;

    height =  area_mc.height - mask.height;

is the instance name of Rectangle "mask" ?

can you guide me with putting thoese in my script :

area_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragArea);

area_mc.addEventListener(MouseEvent.MOUSE_UP, dropArea);

function dragArea(e:MouseEvent):void{

    var bounds:Rectangle = new Rectangle(

                                stage.stageWidth - area_mc.width,

                                stage.stageHeight - area_mc.height,

                                area_mc.width - stage.stageWidth,

                                area_mc.height - stage.stageHeight

                            );

    area_mc.startDrag(false, bounds);

}

function dropArea(e:MouseEvent):void{

    area_mc.stopDrag();

}

i know it`s a big Request and it`s okey if you have no time to do this , and it`s my fault that my English & knowledge of AS3 is too weak

[Ned Murphy · Accepted solution]

In my last posting I showed/explained what you need to be able to specify the Rectangle parameters.  Here is another way for you to look at it using the code you had....

var bounds:Rectangle = new Rectangle( 

                                 x,

                                 y,

                                 width,

                                 height

                            );

I also showed you how those 4 values can be defined for the design you have.  See if you can work it out... replace the x, y, etc with the proper values.

[Arioman]

Thanks so much Mr.Murphy .

now I get your point and why you explain these four formula for calculate x , y , Width , height .

For those users that maybe Armature in AS3 like me and need something like this :

main image : area_mc > width : 1000 , height : 750 , Registration point : upper left ( 0,0 )

mask_mc ( in mask layer )  : Rectangle > width : 300px , height : 300 px , Registration point : upper left ( 0,0 )

so for calculate x, y , width , height :

  x = mask.x - (area_mc.width - mask.width);    > X =  -700

  y = mask.y - (area_mc.height - mask.height) ; > Y =  -450

width = area_mc.width - mask.width;  > Width : 700

height =  area_mc.height - mask.height; > height : 450

so all we need is put these value in :

var bounds:Rectangle = new Rectangle( 

                                 x,

                                 y,

                                 width,

                                 height

                            );

and for Fix Dragging bug that sometimes Drag function work with mouse movement , not holding left click just change MOUSE_UP to stage :

stage.addEventListener(MouseEvent.MOUSE_UP, dropArea);

thanks again .

you and Kglad always are kindness to us and help us to improve knowledge and fix problems and i`m so so Grateful for this