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

Limit Drag&Drop Area in Mask

  • July 1, 2013
  • 1 reply
  • 1608 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 MurphyCorrect answer
Legend
July 2, 2013

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.

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