## How to Drag Clock Hands in a Circle

This one’s on request. Here’s a variation on How to Constrain Dragging to a Circle that’s different *enough* it merits its own entry. Interestingly, this question crops up often enough in the forums. Usually, someone is putting together a children’s game in which the child is expected to drag clock hands to the correct time. As it turns out, this requires even less code than constraining dragging to a circle. Let’s take a look.

### An answer, short and sweet

The following code assumes two movie clips: the clock face (instance name `mcFace`

) and a minute hand (`mcMinute`

). The registration point — this is important! — the registration of the minute hand should be centered on one of its ends. By this, I mean the minute hand should spin like a real minute hand when you rotate it manually in the authoring environment. The registration point of the clock face should be its upper left corner.

With those two movie clips in place on the Stage (and respective instance names), type the following ActionScript into a frame of your scripts layer.

```
mcMinute.onPress = function() {
this.onMouseMove = function() {
var angle:Number = Math.atan2(
mcFace._ymouse - mcFace._height / 2,
mcFace._xmouse - mcFace._width / 2
);
this._rotation = (angle * 180 / Math.PI) + 90;
};
};
mcMinute.onRelease = function() {
delete this.onMouseMove;
};
mcMinute.onReleaseOutside = mcMinute.onRelease;
```

### How it works

A function literal is assigned to the `MovieClip.onPress`

event of a movie clip with the instance name `mcMinute`

. When this clip is pressed, therefore, the following occurs: immediately, *another* function literal is assigned to the same clip’s `MovieClip.onMouseMove`

event. In this second function, a local variable, `angle`

, is declared and set to the return value of the `Math.atan2()`

method. `Math.atan2()`

provides the angle in radians between two coordinates. In this case, the coordinates are derived from two math expressions.

In the first case …

`mcFace._ymouse - mcFace._height / 2`

… the mouse’s vertical location is taken from the point of view of `mcFace`

. This represents where the mouse is *in relation to* `mcFace`

, rather than, say, the Stage itself. Then, half the height of `mcFace`

is subtracted from this value. Why? Because this subtraction provides the distance halfway down the clock’s face. In other words, we’re actually taking the location of the mouse in relation to the clock’s center.

Same goes for the mouse’s horizontal position.

Now that we have this angle in radians, we need to convert it to degrees and use the converted value to set the `MovieClip._rotation`

property of `mcMinute`

. Here are the necessary formulae:

**Radians to Degrees**

degree = radian * 180 / pi

**Degrees to Radians**

radian = degree pi / 180

In Flash, 0 degrees starts at North, which is a bit different from how these classic formulae work. With those, 0 degrees starts at East, so we add 90 degrees to the radian-to-degree conversion.

And that’s it. The explanation is longer than the actual code. At the very end, we use a `MovieClip.onRelease`

event handler to cancel the dragging, and a `MovieClip.onReleaseOutside`

handler to do the same, as it’s possible the mouse may not be directly over the minute hand when it is released.