Flash Analog Clock Script (as2)

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.