Creating an Analog Clock

by kirupa | filed under Flash and ActionScript

Now, return to the main stage. From the library, drag the "minutes" movie clip onto the main stage, and open the Info panel; Windows>Panels>Info or CONTROL+ALT+I. Make sure to select the center point, so that the center box is black (see image below) and enter 150 for your X and Y values. This will move the movie clip to the center of the stage. Repeat with the "seconds" and "hours" movie clip.

Now you must give the movie clips Instance names. Select the "minutes" movie clip, and press CONTROL+I to open up the Instance panel. In the name box enter "minutes". Repeat with "seconds" and "hours" giving them the instance names "seconds" and "hours" respectively.

[ This movie clip has the instance name "minutes" ]

Once, you are done with the instance name, you have two options. You can select the entire stage, white background and all, or you can select just the hands (which by now should all be on the main stage, all centered, with the appropriate Instance names). Either way, when you have everything selected, press F8. In the window that pops up, name the symbol anything you like, however, make sure that "Movie Clip" is selected. With this done its time to input the code. Back on the main stage, right-click on the new movie clip and select actions. Press CONTROL+E to change the Actions Panel to Expert Mode, then Copy the code above, and paste it into the actions panel.

That's it! The clock is finished. If any of the hands are not moving, go back to the main stage and make sure they all have the correct instance names. If any of them are moving in an odd way, you may have to edit the center like you did in step (i).

Now, I'm going to explain the code for you, so you can duplicate this effect on your own, and so you understand what the code is doing.

onClipEvent (enterFrame)

This bit of code loops the actions contained within it everytime the movie is accessed.

time = new Date();

This creates a date object, and allows you execute ther next commands.

mil = time.getMilliseconds();
s = time.getSeconds();
m = time.getMinutes();
h = time.getHours();

This part of the code gets all the information from your system clock, and incorporates it into Flash.

seconds._rotation = s*6+(mil/(1000/6));

Since there are 60 seconds in a minute, and we want the seconds hand to rotate a full 360°, we mutiply the 60 seconds by 6. (60 x 6 = 360) Now, the milliseconds are there to create the constant sweep. "The milliseconds represent 6 degrees of rotation (one second), therefore you take the current milliseconds and divide it by total possible milliseconds (1000) to get a fraction, then you divide that fraction by the 6 degrees to get the milliseconds' rotation." --thanks to Suprabeener for this explaination

minutes._rotation = m*6+(s/6);

Again, since there are 60 minutes in an hour, and we want the minute hand to rotate a full 360°, we multiply the 60 minutes by 6. (60 x 6 = 360) The seconds are there to help create a continuous sweep. Every minute is 6° of rotation and every second is 6° of rotation, so with every second that goes by, this code adds one degree to the minute hand.

hours._rotation = h*30+(m/2);

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° so in order to get a sweeping motion, we want to add one degree for every two minutes that pass, and thats wut the "+(m/2)" part of the code does.

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy my books, became a paid subscriber, watch my videos, and/or interact with me on the forums.

Your support keeps this site going! 😇

Kirupa's signature!

Need help?

Ask on the forums!

Customize Theme

Creating an Analog Clock

The KIRUPA Newsletter

Follow:

Popular

Loose Ends