DOWNLOAD SOURCE FILE FOR THIS TUTORIAL

Posted by webzo

Very simple design, but the clock is exactly synced with the system time.



The first thing to do is the hand Movie Clips, you need to make three of them: "HandHour", "HandMinute" and "HandSecond".



They need to be different in size, color and thickness. And the registration point should be located as in the image above.

Create another Movie Clip named "Clock", inside draw a clock without the hands; then start placing the hands: seconds, minutes, hours.

And give them the instance names: "sec", "min", "hours".

Select the hands Movie Clips, click on the Filters tab and add a "Drop Shadow" filter with these settings:



Now on the first frame of this Movie Clip paste:

Code: Select allthis.onEnterFrame = function()
{
//new Date object; with day and time
var date = new Date();

//get hour with the date object
var hours = date.getHours();

//get minutes
var minutes = date.getMinutes();

//get seconds
var seconds = date.getSeconds();

//360 degrees divided by 60 minutes equal the degrees for each minute.
//Multiply the degrees by minute with our "minutes"
//variable to get the angle.
min._rotation = 360 / 60 * minutes;

//360 degrees divided by 12 hours times "hours" variable
hour._rotation = 360 / 12 * hours;

//360 degrees divided by 60 seconds times "seconds" variable
sec._rotation = 360 / 60 * seconds;
}

That's all; very simple, but accurate:



My clock on the left and the windows clock on the right.[st]Code Explanation[/st]

Code: Select allthis.onEnterFrame = function()
{
var date = new Date();

A Date object has the current time and date of the computer its running.
We need to create one to get the time from it.

Code: Select allvar hours = date.getHours();

The function getHours() returns the current hour.

Code: Select allvar minutes = date.getMinutes();

getMinutes() returns the minutes.

Code: Select allvar seconds = date.getSeconds();

And getSeconds() returns the seconds.

Code: Select allmin._rotation = 360 / 60 * minutes;

To get the angle needed just divide the number of minutes that exists (60') by 360 and multiply by the number of minutes we have now.

Code: Select allhour._rotation = 360 / 12 * hours;
sec._rotation = 360 / 60 * seconds;
}

The other two angles use the same logic.
Note that the hours uses the 12-hour notation instead of the 24-hour notation.