Pleasure and Pain represent as twins, since there never is one without the other; and as if they were united back to back, since they are contrary to each other.
— Leonardo da Vinci
rotatable draggable MCs
2007
Click and drag the polaroid to move it, click and drag a corner to
rotate it.
1. _root Setup>
On the _root level we have a polaroid of the band High Strung,
which we want the user to be able to move & rotate. In the
.fla, the name of this movieclip is "polaroid." Also
on the _root level is a small transparent movieclip, called
"mouseTarget" which will assist in the rotation functions.
2. polaroid>
Within the "polaroid" mc is the mc "dragElements"
which contains the Actionscript and Shapes used for ‘hotspots.’
If you’ve multiple objects you want the user to drag and rotate,
simply duplicate this clip and place it within each MC on the
top layer & level.
3. dragElements>
There are plenty of ways one can approach defining one’s interactive
areas; in this case. when the user clicks and drags the corner shapes,
which are contained within their own MC, the rotating functions will
be called. When they click and drag over the central square, they’ll
be able to drag the polaroid about on the stage with a startDrag().
Below right is an explanation of the Functions.
NUM
//make
dragElements elements transparent
center._alpha
= 0;
allCorners._alpha
= 0; //define the area
over which the mc can be dragged
stageLeft = 0;
stageRight = _root._width;
stageTop = 0;
stageBottom = _root._height;
margin = 4; //dragging actions
– due to rotation, limits must be redefined with each
new startDrag();
center.onPress
= function()
{
leftLimit = stageLeft+_parent._width/2+margin;
rightLimit = stageRight-_parent._width/2-margin;
topLimit = stageTop+_parent._height/2+margin;
bottomLimit = stageBottom-_parent._height/2-margin;
startDrag(_parent,
false, leftLimit,
topLimit, rightLimit, bottomLimit);
};
center.onRelease
= center.onReleaseOutside=function
() { stopDrag();
}; //calculates degrees
rotation from y-axis based on target & origin point
coordinates
function getCurrentAngle(target_x, target_y, origin_x,
origin_y) {
xChange = target_x-origin_x;
yChange = target_y-origin_y; if
(xChange<0) {
xChange_pos
= Number(-1*xChange);
} else
{
xChange_pos
= Number(xChange);
} if
(yChange<0) {
yChange_pos
= Number(-1*yChange);
} else
{
yChange_pos
= Number(yChange);
}
convert = 57.2957795; if
(xChange>0 && yChange>0) {
angle
= (convert*Math.atan(xChange_pos/yChange_pos));
}
else if (xChange>0 && yChange<0)
{
angle
= (convert*Math.atan(yChange_pos/xChange_pos))+90;
} else
if (xChange<0 && yChange<0) {
angle
= (convert*Math.atan(xChange_pos/yChange_pos))+180;
} else
if (xChange<0 && yChange>0) {
angle
= (convert*Math.atan(yChange_pos/xChange_pos))+270;
} return
angle;
} //to find the x &
y edges of an object, regardless of shape or rotation function getEdges()
{
leftEdge = _parent._x-Number(_parent._width)/2;
rightEdge = _parent._x+Number(_parent._width)/2;
topEdge = _parent._y–Number(_parent._height)/2;
bottomEdge =
_parent._y+Number(_parent._height)/2;
} //mouseTarget mc
gets dragged by the user’s cursor, x & y coordinates
will be used to calculate rotation
allCorners.onRollOver
= function()
{ startDrag(_parent._parent.mouseTarget,
true);
}; //rotates the mc
allCorners.onPress
= function()
{
startAngle = getCurrentAngle(_parent._parent.mouseTarget._x,
_parent._parent.mouseTarget._y,
_parent._x,
_parent._y); onEnterFrame
= function
() {
newAngle
= getCurrentAngle(_parent._parent.mouseTarget._x,
_parent._parent.mouseTarget._y,
_parent._x,
_parent._y);
changeAngle
= startAngle-newAngle;
getEdges();
if
(leftEdge>0 && rightEdge<stageRight &&
topEdge>0 && bottomEdge<stageBottom) { _parent._rotation
= _parent._rotation+changeAngle;
}
else {
if
(leftEdge<0 || rightEdge>stageRight || topEdge<0
|| bottomEdge>stageBottom) { _parent._rotation
= _parent._rotation-changeAngle;
}
}
startAngle
= Number(newAngle);
};
}; //stops rotating
the mc, and ensures that the edges of the clip are within
the limits of the draggable area
allCorners.onRelease
= allCorners.onReleaseOutside=function
() { onEnterFrame
= null; onEnterFrame
= function
() {
getEdges();
if
(leftEdge>0 && rightEdge<stageRight &&
topEdge>0 && bottomEdge<stageBottom) { onEnterFrame
= null;
}
else { _parent._rotation
= _parent._rotation-changeAngle;
}
};
}; //nullifies the drag
action on the mouseTarget clip
allCorners.onRollOut
= function()
{ stopDrag();
};
Dragging
A typical startDrag(), but because the object can be rotated,
its absolute width and height are constantly changing,
which is why the startDrag limits must be defined each
onPress()
Rotating
In order to rotate the object based on the user’s cursor
movement, we need to find the starting angle between the
cursor and object origin when the user first clicks, and
then calculate the change in that angle as the user moves
the cursor clockwise or counter-clockwise. This is accomplished
with the function getCurrentAngle().
Dust off your trig
If
the angle we’re trying to define can be considered
1 of the non-right angles in a right triangle, we
can use the difference in x and y to find its value.
The change in x & y are initially set to positive
in getCurrentAngle() for the purpose of the equation.
SOCAHTOA!
sin A =
opposite
hypotenuse
cos A =
adjacent
hypotenuse
tan A =
opposite
adjacent
Because the difference in x and y provide us with the
opposite and adjacent legs, we’ll go with an inverse tangent
function.
A =tan(-1)
opposite
adjacent
Knowing which value to plug into the opposite or
adjacent variables is dependent on which quadrant
the triangle resides. There are 4 quadrants, thus
4 possible orientations of this triangle, thus 4
conditional cases in the function determined by
the positivity or negativity of the change in x
or y. The result is converted from radians to degrees
(1 radian = 57.2957795 degrees) before the appropriate
multiple of 90 is added to get the total rotation.
getEdges()
The edges of the parent object change with rotation, so
to keep it within the borders of the stage this function
will be used in a couple places to grab the x & y
values of those edges.
Start Rotating!
When the user rolls over the corners, a startDrag() is
applied to the the mouseTarget mc on the _root level,
who’s x & y location will be used in the getCurrentAngle()
function.
When pressed, the initial angle from cursor to center
is calculated with getCurrentAngle(), and an onEnterFrame
is set up to do so continuously, then rotate the object
appropriately based on the difference, while ensuring
with a conditional statement that the objects edges are
within the boundaries of the initially defined stage.
onRelease, the onEnterFrame is nullified, and a new one
set up to take care of any remaining overlap (in case
the user yanks a corner of the object to outside of the
stage limits and lets go of the mouse).
onRollout, the mouseTarget on the _root.level no longer
gets dragged, until the user rolls over another corner.