This is a simple tutorial for creating a realtime anologue clock. We will not focus on graphics at this point, just getting a working clock. By the end of this tutorial you will have a working clock similar to this:
STEP 1
Create a new flash file and rename layer 1 to ‘clock’.
On this layer we need to create a clock face, this can be in whatever syle, shape etc you like but I would recommend a round one to start with, as this makes alignment of the hands easier. Your stage should now be one layer with a clock face like this:
(Please let me know if you would like a tutorial on creating clock faces in flash, there’s alot you can do and the sky’s the limit!)
STEP 2
Select all of your clock face and press f8 to convert to movieClip. Set the registration at center and name ‘MC_clock’. Double click the movieClip to enter the clocks timeline and rename the layer to ‘face’. Create 4 new layers, called ’sec’, ‘min’, ‘hour’ and ‘actions’. Select frame 2 on all layers and insert a new frame (f5). Your timeline should look like this:
STEP 3
Select the ’sec’ layer and the line tool. Draw a 1px line from roughly the centre of your clock, and extending almost to the edge of the face.
Select this line and press f8 to convert to a movieClip. Set the registration as bottom-center and name ‘MC_sec’.
<— IMPORTANT —>
YOU MUST SET THE REGISTRATION AS BOTTOM-CENTER, OTHERWISE ROTATION COULD BE AN ISSUE!
<—->
Give this an instance name of MC_sec.
STEP 4
Repeat step 3 to create the minute and hour hands on the respective layers, but make the line 2px and adjust the lengths of the lines. Gice these instance names of MC_min and MC_hour. Select each hand one at a time and set the x and y coordinates to 0. (in the properties panel at the bottom) Your stage should now look like this:
STEP 5
Now the stage is set we need to add the action script. First we need to get the time and create the variables. On frame 1 of the actions layer press f9 and enter the following code:
time=new Date(); // time object
seconds = time.getSeconds()
minutes = time.getMinutes()
hours = time.getHours()
hours = hours + (minutes/60);
seconds = seconds*6; // calculating seconds
minutes = minutes*6; // calculating minutes
hours = hours*30; // calculating hours
//This will effectively grab and calculate the current time.
MC_sec._rotation=seconds;//sets rotation on sec hand
MC_min._rotation=minutes;//sets rotation on min hand
MC_hour._rotation=hours;//sets rotation on hour hand
//this will set the rotation of the hands.
Once complete, hit CTRL + Enter and see your clock in action! Experiment with different styles and designs, and stay tuned for a tutorial on creating digital clocks.
The Dude
Did this tutorial help you? If so, click the bookmark button, stumble me, add me to your twitter and tell your friends! Alternatively, sign up and leave a comment!
Not what you were looking for? Then leave a comment or email me and we’ll get you the tutorials you need.
Did this post help you? If so help us continue to grow and Digg this page!
If you haven't already, sign up to our RSS feed or register to recieve updates direct to your email!
