Making an analog clock in Flash


In this Macromedia Flash tutorial you will learn how to make an analog clock with hour, minuts and seconds hands rotating in the clock.


1.
First of all we will draw an analog clock, I will go through this quick.

Make an oval, draw the inside numbers of just marks as is did below.

Photoshop Tutorial thumb picture


2.
Now draw the the hour, minut and seconds hands right click them seperatly and make them into movie clips.
Now with the free transform tool select each minuts, hours and second hands and drag the small point placed in the middle (called the pivot point) to the one side of the hand, as shown in the image below.

Photoshop Tutorial thumb picture


3.
Some important things we need to do is to name our movie clips this we will be needing when we do some action scripting.

Name the hour hand: hrs
Name the minute hand: min
Name the seconds hand: sec

Select all the clock elements and right click convert to a movie clip, and name it CL

4.
Now we are ready to do some action scripting to the clock to make it move around.
I will show the code and then explain the elements seperatly afterwards.

----------------------------------------------
onClipEvent (enterFrame) {
now = new Date();

h = now.getHours();
m = now.getMinutes();
s = now.getSeconds();

setProperty(_root.CL.hrs, _rotation, (h+1)*30);
setProperty(_root.CL.min, _rotation, m*6);
setProperty(_root.CL.sec, _rotation, s*6);
}
----------------------------------------------

Now the onClipEvent (enterFrame) { is the container of the code this makes sure it repeats the function over and over again.

now = new Date();
Here we set a variable to an object date.

h = now.getHours();
m = now.getMinutes();
s = now.getSeconds();
now three variables one for the current hour, one for current minuts and then last one for current seconds.

Here comes the tricky part.

setProperty(_root.CL.hrs, _rotation, (h+1)*30);
setProperty(_root.CL.min, _rotation, m*6);
setProperty(_root.CL.sec, _rotation, s*6);

Here we set the property of the hrs movie clip which is inside the CL movie clip. we set a rotate property to rotate (h+1)*30);
Now, there are 12 hours in a full rotation, so we multiply hours by 30. (12 x 30 = 360) Each mark for hours is a full 30 degrees.

The same calculations for minuts, only there are 60 minuts in an hour to be full 360 degrees so *6 because 60*6 = 360.
The same for seconds.

0tutor.com rss feed