Comments on: How to Drag Clock Hands in a Circle http://www.quip.net/blog/2006/flash/actionscript-20/how-to-drag-clock-hands Luck is the residue of good design. Wed, 19 Nov 2008 04:19:30 +0000 http://wordpress.org/?v=2.0.2 by: Cathrine http://www.quip.net/blog/2006/flash/actionscript-20/how-to-drag-clock-hands#comment-121113 Wed, 16 Jan 2008 08:57:27 +0000 http://www.quip.net/blog/2006/flash/actionscript-20/how-to-drag-clock-hands#comment-121113 Thank you for answering David! You understood me perfectly - and I see that this one is complicated - having in mind that the code has to "know" how many times the Minute has passed "12 o'clock". I am happy to be on your Get-To list, and thank you for very good explanations in this forum! I will follow this blog and check to see if you ever get the time to look in to it, but In the meantime I will look into some trigonometry-lessons to try to get better in understanding angles, degrees and so on... :-) Thank you for answering David! You understood me perfectly - and I see that this one is complicated - having in mind that the code has to “know” how many times the Minute has passed “12 o’clock”. I am happy to be on your Get-To list, and thank you for very good explanations in this forum! I will follow this blog and check to see if you ever get the time to look in to it, but In the meantime I will look into some trigonometry-lessons to try to get better in understanding angles, degrees and so on… :-)

]]> by: David Stiller http://www.quip.net/blog/2006/flash/actionscript-20/how-to-drag-clock-hands#comment-120662 Mon, 14 Jan 2008 21:48:37 +0000 http://www.quip.net/blog/2006/flash/actionscript-20/how-to-drag-clock-hands#comment-120662 Cathrine, Your question is a good one! :) It sounds like you're asking how to make the Hour hand follow the Minute hand as the Minute hand gets dragged around the face — just like a real clock — is that right? If so, the tricky part, to my thinking, is how to keep track of the Hour hand and have it "remember" its place. Drag the Minute hand around once, the Hour hand moves from 1 to 2. Drag the Minute hand around again, the Hour hand moves from 2 to 3, and so on. I'll really have to think about this one! I'd added your question to my Get-To list, but there are quite a few in there right now, so I'm not sure when I'll be able to answer this one specifically. Cathrine,

Your question is a good one! :) It sounds like you’re asking how to make the Hour hand follow the Minute hand as the Minute hand gets dragged around the face — just like a real clock — is that right? If so, the tricky part, to my thinking, is how to keep track of the Hour hand and have it “remember” its place. Drag the Minute hand around once, the Hour hand moves from 1 to 2. Drag the Minute hand around again, the Hour hand moves from 2 to 3, and so on.

I’ll really have to think about this one! I’d added your question to my Get-To list, but there are quite a few in there right now, so I’m not sure when I’ll be able to answer this one specifically.

]]> by: Cathrine http://www.quip.net/blog/2006/flash/actionscript-20/how-to-drag-clock-hands#comment-118974 Wed, 09 Jan 2008 16:00:55 +0000 http://www.quip.net/blog/2006/flash/actionscript-20/how-to-drag-clock-hands#comment-118974 David: First of all thanks!! Me too i am making a clock for children, but haven't found out how I can make an "mcHour" to properly follow the mcMinute. Actually I feel this is really tricky, because Flash doesn't use 360 degrees on the circle, but starts counting from -179,999... at the bottom of the circle.. Any tips? David:

First of all thanks!!

Me too i am making a clock for children, but haven’t found out how I can make an “mcHour” to properly follow the mcMinute. Actually I feel this is really tricky, because Flash doesn’t use 360 degrees on the circle, but starts counting from -179,999… at the bottom of the circle.. Any tips?

]]> by: David Stiller http://www.quip.net/blog/2006/flash/actionscript-20/how-to-drag-clock-hands#comment-74587 Tue, 21 Aug 2007 18:32:28 +0000 http://www.quip.net/blog/2006/flash/actionscript-20/how-to-drag-clock-hands#comment-74587 Ingmar, Hey, glad to hear it. Thanks! Ingmar,

Hey, glad to hear it. Thanks!

]]> by: Ingmar Zahorsky http://www.quip.net/blog/2006/flash/actionscript-20/how-to-drag-clock-hands#comment-74362 Mon, 20 Aug 2007 23:42:23 +0000 http://www.quip.net/blog/2006/flash/actionscript-20/how-to-drag-clock-hands#comment-74362 David, thank you! Your blog is awesome. I have been looking for exactly this explanation to rotate two disks. Best, Ingmar David,

thank you! Your blog is awesome. I have been looking for exactly this explanation to rotate two disks.

Best,
Ingmar

]]> by: David Stiller http://www.quip.net/blog/2006/flash/actionscript-20/how-to-drag-clock-hands#comment-68933 Thu, 02 Aug 2007 14:36:23 +0000 http://www.quip.net/blog/2006/flash/actionscript-20/how-to-drag-clock-hands#comment-68933 Steve, I'm thinking there must be something off with the registration points of your <code>mcMinute</code> and <code>mcFace</code> clips. I rebuilt this just now and the hand rotates to exactly where I drag it. Can you verify that each clip is on its own layer and the face clip's registration is in its upper left, while the hand clip's registration is centered on its pivot end? Steve,

I’m thinking there must be something off with the registration points of your mcMinute and mcFace clips. I rebuilt this just now and the hand rotates to exactly where I drag it.

Can you verify that each clip is on its own layer and the face clip’s registration is in its upper left, while the hand clip’s registration is centered on its pivot end?

]]> by: Steve http://www.quip.net/blog/2006/flash/actionscript-20/how-to-drag-clock-hands#comment-68930 Thu, 02 Aug 2007 14:24:36 +0000 http://www.quip.net/blog/2006/flash/actionscript-20/how-to-drag-clock-hands#comment-68930 David: Great blog! First time visiting and I was looking for something exactly like this. However, I have a question. 1. The direction of the hands seem to be quite "loose". How would I go tightening up the direction of the hands so if I move to 12:00 on the clock, my hands point to there? I am designing this for children, so the movements have to be a little tighter. The way it is currently written, the movement would be quite frustrating. Thanks. David:

Great blog! First time visiting and I was looking for something exactly like this. However, I have a question.

1. The direction of the hands seem to be quite “loose”. How would I go tightening up the direction of the hands so if I move to 12:00 on the clock, my hands point to there? I am designing this for children, so the movements have to be a little tighter. The way it is currently written, the movement would be quite frustrating.
Thanks.

]]> by: David Stiller http://www.quip.net/blog/2006/flash/actionscript-20/how-to-drag-clock-hands#comment-43780 Wed, 09 May 2007 02:29:49 +0000 http://www.quip.net/blog/2006/flash/actionscript-20/how-to-drag-clock-hands#comment-43780 paczor, Cool tweak! Good stuff. :) paczor,

Cool tweak! Good stuff. :)

]]> by: paczor http://www.quip.net/blog/2006/flash/actionscript-20/how-to-drag-clock-hands#comment-43124 Sun, 06 May 2007 22:01:16 +0000 http://www.quip.net/blog/2006/flash/actionscript-20/how-to-drag-clock-hands#comment-43124 Hi David! Thanks for the code. I used it in my project in which clock's hand follows mouse. I would like to add little note on it: my movie is quite small (185x185px) so clock's hand do not follow mouse correctly - if I resize movie to allow mouse to go far away clock's face everything is OK. The dirty hack for it is to add some extra values to both mouse's cooordinates: var angle:Number = Math.atan2( (mcFace._ymouse + 100) - mcFace._height / 2, (mcFace._xmouse + 100) - mcFace._width / 2 ); It works because function "thinks" that mouse is 100px further from clock. :) Thanks again, you are doing great job! Hi David!
Thanks for the code. I used it in my project in which clock’s hand follows mouse. I would like to add little note on it:
my movie is quite small (185×185px) so clock’s hand do not follow mouse correctly - if I resize movie to allow mouse to go far away clock’s face everything is OK.
The dirty hack for it is to add some extra values to both mouse’s cooordinates:

var angle:Number = Math.atan2(
(mcFace._ymouse + 100) - mcFace._height / 2,
(mcFace._xmouse + 100) - mcFace._width / 2
);

It works because function “thinks” that mouse is 100px further from clock. :)

Thanks again, you are doing great job!

]]> by: olowekk http://www.quip.net/blog/2006/flash/actionscript-20/how-to-drag-clock-hands#comment-42612 Fri, 04 May 2007 10:05:24 +0000 http://www.quip.net/blog/2006/flash/actionscript-20/how-to-drag-clock-hands#comment-42612 Certainly:), the kind of clock hand motion I want to achieve may be best observed in code I placed above (var drag:Number =20…) I want to slow down the clock hand movement while it approaches a mouse pointer. I don’t want the clock hand to follow the cursor immediately it changes its position. (as if the clock hand was sleepy and could not catch up with the mouse pointer). When there’s no mouse movement the clock hand should keep rotating. The word ‘elastic’ may not have suggested my point best last time I mentioned it. Here’s code I used and want to change: mcMinute.onEnterFrame = function() { this._rotation += 0.1; 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; Certainly:), the kind of clock hand motion I want to achieve may be best observed in code I placed above (var drag:Number =20…) I want to slow down the clock hand movement while it approaches a mouse pointer. I don’t want the clock hand to follow the cursor immediately it changes its position.
(as if the clock hand was sleepy and could not catch up with the mouse pointer). When there’s no mouse movement the clock hand should keep rotating.
The word ‘elastic’ may not have suggested my point best last time I mentioned it. Here’s code I used and want to change:

mcMinute.onEnterFrame = function() {
this._rotation += 0.1;
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;

]]>