Skip to main content
Arioman
Arioman
Inspiring
July 1, 2013
Answered

Limit Drag&Drop Area in Mask

  • July 1, 2013
  • 1 reply
  • 1607 views

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 ) /

This topic has been closed for replies.
Correct answer Ned Murphy

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


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.

1 reply

Ned Murphy
Ned Murphy
Legend
July 1, 2013

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
AriomanAuthor
Inspiring
July 2, 2013

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
Ned Murphy
Legend
July 2, 2013

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.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices