Download open source here

Use Any Sprite As A Dragger
Provided by Jorge Rodriguez

This time we will see how to make a behavior to use any sprite as a dragger, so while you maintain pressed this sprite the window will be relocated according to the position of the mouse. The window could be the stage or a MIAW.
This is the behavior:

on mouseDown me
repeat while the mouseDown
A = the activeWindow.rect
N = the mouseLoc - the clickLoc
(the activeWindow).rect = rect(A[1]+N[1], A[2]+N[2], A[3]+N[1], A[4]+N[2])
end repeat
end

Yes, all of the magic is behind this few lines :)
So, to understand how this behavior works we need to know how Director draw the stage. Director use the screen coordinates to draw the stage witch means that if you have a 800 x 600 pixels of screen resolution and a projector of 200x200 pixels in the center of the screen Director will draw the stage using the points A and B like is show in the image.
Note that in the screen coordinates the point 0,0 (x, y) are in the upper left corner.



Now we know that the point A is in the pixel 300 for x and pixel 200 for y. Also we know that the point B is in the pixel 500 for x and 400 for y ( always screen coordinates). Knowing those two point we can draw a rectangle and Director also do it.
Because the property rect is a get & set property we can alter the size of the stage and its location into the screen too using

the stage.rect = rect ( x1 , y1 , x2, y2 )

For this tutorial we’ll replace the syntax the stage.rect by the activeWindow.rect because it will let as work with the stage as same as with MIAW’s.

How the behavior works ?

We will use a repeat loop to relocate the window because it works as fast as the processor is. The first thing we need to know is the location of the window into the screen, and to do this will use the activeWindow.rect syntax and then we’ll assign this value to a variable A to keep this info actualized.

A = the activeWindow.rect

Then we will relocate the stage using the difference between the location of the last click we made the clickLoc and the current position of the mouse the mouseLoc and we also stored this point in a variable N.

N = the mouseLoc - the clickLoc

Now we know this difference we just need to add it to the current values of the stage.rect and that’s all. Because we are using the same values to the points A and B the stage will keep the same size.

(the activeWindow).rect = rect(A[1]+N[1], A[2]+N[2], A[3]+N[1], A[4]+N[2])





The trick

Ok, the mouseLoc and the clickLoc works different than the activeWindow.rect. They don’t use screen coordinates, they use the stage coordinates. So the upper-left point of the stage ALWAYS is 0,0 and in this tutorial the button-right point is 200,200 because the stage have a size of 200 pixels width and 200 pixels height.

But how is possible to have any difference between those points if they are the same ?
If you use this syntax you always will get point(0,0)

on mouseUp
put the mouseLoc - the clickLoc
end
-- point(0, 0)

Now you may are thinking if you add a value of 0 to the activeWindow.rect it will not change its location.
Well we know the clickLoc property is stored in memory when you make a click and it will NOT change until you release the mouse and make another click.

This is ok but the answer is:
If the mouseLoc use the stage coordinates to know where the mouse is, witch value Director know first ?
And the answer is easy. Director needs to know first the activeWindow.rect and then it should be able to know the mouse position.

It maybe is a bit confuse but try to figure out this:
Suppose you have the projector in the upper-left corner of the screen and you place the mouse near of the upper-left pixel of the screen you will get values around point(0,0) for the mouseLoc. Now if you move the projector to the center of the screen and then move the mouse near of the upper-left pixel of the screen again, you will get negative values.

So the conclusion is that Director know first the activeWindow.rect witch let it know were is the 0,0 of the active window and then it assign a value to mouseLoc. What we are doing to move the stage is using this delay to calculate the difference between the mouseLoc and the clickLoc.