Make an old-style analog clock

This tutorial shows how you the way to design and code an old-style analog clock which shows the correct time.

In a previous tutorial, I showed you how to make an analog clock using ActionScript only. This time, there will be much less coding involved, and a lot more design.

Below is an example of what you can achieve by following my tutorial. You will be doing this in Flash 8, but you'll have the source code for Flash MX (that is, if you are targeting Flash player 6 when publishing your .swf) available too.

Designing the hours' marks

1. Open a new flash document. Save it immediately do that you can just press CTRL+S (Command+S on a Mac) later.

2. Call the first layer clock.

3. Select Insert > New Symbol. Select Movie clip as type and call it clock mc. Click OK. Your new movie clip symbol, although completely empty, is stored in the Library. You can check this by opening the Library (CTRL+L). Also, remember that you are now working inside this new movie clip's timeline.

4. Call this movie clip's first layer hours marks.

5. Select the Text tool (T). In the Properties panel, set the text type to Static text. You can do this on the panel's left side.

Select Times New Roman (or Times on a Mac) as font. Set the font's size to 26 and black as color.

6. Click anywhere on stage and write the letter I (that's capital letter i). Click Esc to exit the text writing mode of the Text tool. As you can see, Times New Roman is excellent for creating the roman numericals hours' marks.

7. With the new text still selected, choose Modify > Convert to Symbol. Graphic symbol as type, call the symbol 1 hour mark and click OK.

8. Open the Align panel (CTRL+K). Turn on the "To stage" button if it isn't already (1 on the image below). Click Align horizontal center (2) and Align vertical center (3).

After you have done that, the graphic symbol (1 hour mark) will be centered in relation to the movie clip's registration point - the little cross at the center of the stage.

9. Choose the Selection tool (V) and click once on the graphic symbol. While holding SHIFT press the Up arrow key 8 times. This will move the 1 hour mark symbol 80 pixels up.

10. Select the Free Transform tool (Q). Look at the Options part of the Tool panel and make sure that the Snap to Objects option is turned on.

11. Move your cursor over the rotation center of the 1 hour mark symbol. It is represented by a small white circle. When you place your cursor over it, you will see a small circle appear to the right of it.

12. Hold SHIFT, click and start dragging the rotational center downwards. Drag it until it snaps into place when you are over the movie clip's registration point.

13. Choose the Selection tool (V) once again to better see the symbol. Click once on the Up arrow key (do NOT hold shift this time) to move the symbol 1pixel up so that its rotation center is placed exactly over the movie clip's registration point.

14. Open the Transform panel (CTRL+T). In the Rotation box, enter 30. Hit ENTER to confirm that.

Your 1 hour mark will now be rotated exactly by 30 degrees in relation to the movie clip's registration point. Now isn't that beautiful? :)

15. Open the Library (Window > Library) and right-click on 1 hour mark graphic symbol and select Duplicate. Call the new graphic symbol 2 hour mark.

16. Double-click on this new symbol in the Library to enter inside it.

Select the Text tool (T) and click on the text field, and add another I inside the field. Hit Esc on your keyboard to exit the text field.

17. Go back to the Library and double-click on the clock mc movie clip to access its timeline.

18. Click on the 2 hour mark graphic symbol in the Library (once) and drag it onto the stage. You will drag it inside the clock mc's timeline because you're currently working inside it.

19. Center the 2 hour mark vertically and horizontally in relation to the clock movie clip's registration point. Do this with the aid of the Align panel, like you did for the 1 hour mark in step 8 earlier.

20. Choose the Selection tool (V) and click once on the graphic symbol. Again, like you did earlier, move the symbol 80 pixels up by using the Up arrow in combination with the SHIFT key.

21. Select the Free Transform tool (Q) and move the 2 hour mark's rotation center until it is exactly over the registration point of the movie clip. This is the same operation you did in steps 11 - 13.

22. Go to the Transform panel, enter 60 in the Rotate field and press Enter to confirm.

The two markings are now nicely in place, as they should be!

Well, there is some work ahead now. And, as you a good student of Flash certainly are, you'll do it smoothly :)

23. Duplicate the hour mark symbol 10 more times. You should have a graphic symbol for each hour mark in your library. In roman numericals: I, II, III, IV, V, VI, VII, VIII, IX, X, XI and XII.

24. After making all the symbols, double-click on the clock mc in the library again to enter its timeline.

Now repeat the aligning and the rotation for each hour mark, just as you did with the first two. Here are the rotation values (in degrees) for each hour mark:

After you have completed and put everything in place, your result should look like this:

25. Everything's fine, but there is a design thing that bothers me: the VII, VIII and XII hour marks are too big and they are disrupting the visual balance of the clock. So, double-click on the VIII hour mark in the Library.

Select the Free Transform tool (Q) and position the mouse over the right side handle of the text field. Click and drag inwards to make the VIII o'clock mark less wide.

Repeat this with the VII and the XII o'clock marks. I also did it with the 4 o'clock mark. Your result should be similar to something like this:

Now, your grandparents would be proud of such a design, wouldn't they? :)

Designing the clock background

26. Double-click on the clock mc movie clip in the library. Call the layer (the only one so far, inside the movie clip) hour marks and lock it.

27. Create a new layer and call it circles. Select the Oval tool (O). In the Colors portion of the Tool panel, block the fill color by clicking on the little paint bucket icon (1) and then on the small square with the red diagonal line in the last row - the middle one (2).

In the Properties panel, select hairline as type of line thickness.

28. Place your mouse exactly over the movie clip's registration point. While holding ALT click and start dragging. If you want to obtain a circle, and not an ellipse, watch that you have a circle displayed near your cursor (see image below).

Repeat this four more times, so that your result resembles the image below. Choose any colour you like for these circles.

29. Lock this layer. Create a new layer above the two previous ones and call it minutes hand.

Designing the clock's minutes hand

30. Select the Rectangle tool (R) and in the Color portion of the Tool panel, block the Stroke (outline) color (do the opposite of what you did when you drew the circles in the earlier steps and blocked their fill color).

Draw a rectangle anywhere on stage, 3 pixels wide and about 60 pixels high.

31. Select the Oval tool (O). The Stroke color is still blocked, which ok. Draw a 11 pixel circle.

32. Center this circle horizontally and verically in relation to the circle mc's registration point (remember, you are still working inside this movie clip).

33. Make another circle on stage (near the previous one), but change its fill colour so that it is in good contrast with the previous one. Make this one 7 pixels wide and high.

34. Select the smaller circle if it isn't already, and using the Align panel, center it horizontally and verically, so that it, too, is centered in relation to the movie clip's registration point.

35. Zoom in to work more easily. Click on an empty part of the working area, to unselect the small circle. Then click on it to select it again. Press DELETE to erase it. You will be left with a ring, which is exactly what you want to achieve.

36. Now select the ring and move it upwards, about 100 pixels or so. Select the thin rectangle you made before and align it with the registration point so that it is centered horizontally, and that its bottom is right on the registration point.

37. Hide the layers containing the big circles and the hours marks to be able to see more clearly the minute hand you're working on. Do this by clicking on these layers' dots situated below the eye icon.

38. Select the ring and bring it down to the top of the rectangle. Zoom in to see if the two drawings are merged, which they should be.

39. Add the tip of the clock's minute hand. You can create this by making another rectangle, or copying the previous one. Make it about 24 px high.

40. Finally, to have that nice antiquated look, add a circle to the bottom of the minutes hand. Do this by drawing a circle and then centering it in relation to the movie clip's registration point.

That's the clock's minutes' hand. Nice, eh? If you want, you can add a stroke to this shape, or change its color. Do as you like.

41. Select the whole minutes hand shape. Select Modify > Convert to Symbol. Select movie clip as type, because this option has probably stayed on graphic symbol from the previous steps. Call it minute hand mc and click OK.

42. Double-click on the newly created movie clip on stage to enter inside it. You are now working inside the minutes hand mc movie clip, which is it itself inside the clock mc movie clip.

44. Go back one level up by clicking on the clock mc link above the timeline.

45. Now, with the minutes hand movie clip selected, go to the Properties panel and give it an instance name. You will control it via ActionScript by using this instance name. Call it minuteHand.

46. Using the arrow keys in combination with the SHIFT key, place the minutes hand in the center of the clock.

There! The minutes' hand is now completed and ready to be used in conjunction with ActionScript to make it move. You'll now proceed to make the hours hand, which will be made more quickly and easily.

Designing the clock's hour hand

47. Lock the minutes hand layer. Create a new layer above the other ones and call it hours hand.

48. Open the Library (CTRL+L). Right-click on the minute hand mc and select Duplicate. Give it the name hour hand mc and click OK.

49. Drag one instance of this new movie clip on the stage, in the layer you just created. To avoid confusion, hide other layers.

Double-click the movie clip to enter inside it.

50. Choose the Selection tool (V). Select a small portion of the hand beneath the ring (about 16 pixels high). Hit DELETE to erase it.

Select the upper portion of the hours' hand and move it down using the Down arrow key.

Also, erase a small portion of the hours hand tip.

Now, that was quick and easy, wasn't it?

51. Click on the clock mc link above the timeline to return inside the main clock movie clip.

52. Repeat the same operation you did with the minutes hand: move the hours hand so that its bottom circle is centered on the clock movie clip's registration point.

53. In the left side of the Properties panel, enter the instance name for this movie clip: hourHand.

The seconds hand - a question of style

This is an old, antique clock you are designing. Old clocks seldom have a seconds hand inside them. However, you may choose to make one so that your site visitors see that the clock is actually moving.

Whether you'll put a seconds hand inside it or not is up to you. So, either continue or skip this section, depending on what you have decided to do.

54. Create a new layer on top of all the other ones and call it seconds hand.

This part of the clock is by far the easiest to create. Select the Line tool (N). Select a line color, and choose Solid as type of line, with thickness set to 1.

55. Draw a vertical line about 98 pixels high.

56. Select it and press F8 to convert it to a movie clip symbol. Call it seconds hand mc and click OK to confirm.

57. In the Properties panel, give it the instance name secondHand.

58. Double-click on this movie clip to enter inside it. Place the line so that its bottom is exactly on the movie clip's registration point.

59. Draw a small circle (about 6 pixels in diameter) and center it on the registration point.

60. Go back to the clock mc by clicking on the link above the timeline. Place the seconds hand movie clip so that its circle at the bottom is aligned with the clock mc's registration point.

All the elements of the clock are now in place! Whew! You can start coding to set the clock in motion.

Setting the clock in motion with ActionScript

61. Double-click on any empty space on stage to return to the main timeline. Select the clock movie clip if it isn't already by clicking once on it.

In the Properties panel, give it the instance name clock.

62. Lock this layer. Create a new one and call it actions. Click on its first keyframe and hit F9 to open up the Actions panel. If you are using Flash 8, enter the following code:

clock.onEnterFrame = function():Void {
var clockTime:Date = new Date();
var seconds:Number = clockTime.getSeconds();
var minutes:Number = clockTime.getMinutes();
var hours:Number = clockTime.getHours();
this.secondHand._rotation = seconds*6;
this.minuteHand._rotation = minutes*6;
this.hourHand._rotation = (hours*30)+(minutes/2);
}

If you want to make your movie backwards compatible (say, Flash player 6), put this code instead:

clock.onEnterFrame = function() {
clockTime = new Date();
seconds = clockTime.getSeconds();
minutes = clockTime.getMinutes();
hours = clockTime.getHours();
this.secondHand._rotation = seconds*6;
this.minuteHand._rotation = minutes*6;
this.hourHand._rotation = (hours*30)+(minutes/2);
}

Test your movie by selecting Control > Test Movie. Your clock should show the correct time and, if you have put in the seconds' hand, it should tick!

The ActionScript code explained

The first line creates a function assigned to the clock movie clip's onEnterFrame event. This event executes what's placed inside it as many times per second as there are frames per second set in your movie's speed.

Look at the fps option in the properties of your document by selecting Modify > Document. So, everything between the curly braces will be executed at the aforementioned speed.

clock.onEnterFrame = function():Void {
...
}

Inside the function, there is a new date object created. The Date object serves to retrieve hours, seconds, year, month, etc. The new Date object created has to be stored in a variable. Since you are writing in ActionScript 2.0, it is obligatory to tell Flash that the variable is of a Date type. Hence the syntax clockTime:Date.

var clockTime:Date = new Date();

The next three lines create three variables, each of which is used to store the current seconds, minutes and hours, respectively. All this values are numerical, so that's why there is :Number written after each variable name.

var seconds:Number = clockTime.getSeconds();
var minutes:Number = clockTime.getMinutes();
var hours:Number = clockTime.getHours();

Now come the lines that are making the clock hands revolve.

this.secondHand._rotation = seconds*6;
this.minuteHand._rotation = minutes*6;
this.hourHand._rotation = (hours*30)+(minutes/2);

The this keyword denotes the clock movie clip, because it is situated in the function which is assigned to this same movie clip's onEnterFrame event. Therefore, this.minuteHand path points to the minuteHand movie clip which is placed inside the clock movie clip.

The _rotation property value tells each clock hand the amount of degrees by which it has to rotate.

Why are the minutes and seconds values multiplied by 6?

Imagine that the time on your machine (yes, your computer clock - it is from that exact place that all time is read by Flash) says it is 15 seconds now. That signifies that the secondHand movie clip should be pointing at three o'clock. This is 90 degrees in relation to its starting position of 0 degrees, which is when the seconds hand is pointing at noon. That is the reason why you have to multiply the seconds value by 6. This is what happens while the flash movie is running:

this.secondHand._rotation = seconds * 6;

this.secondHand._rotation = 15 * 6;

this.secondHand._rotation = 90;

The code for the hours' hand is a little different.

this.hourHand._rotation = (hours*30)+(minutes/2);

If you just wrote

this.hourHand._rotation = hours * 30;

it would work, but in a way that misleads the user. The result of the equation on the right side of the equality sign would as follows: say, for example, that it is 11:50 now. 11 multiplied by 30 would yield 330, which means 330 degrees, which points to 11 o'clock. That should be allright, no?

No. It is wrong! The hours hand would point exactly at 11 o'clock, while it is 11:50. This means that the hours' hand should be pointing almost at 12 o'clock at this time. Just look at the image below to see the explanation.

Imagine you have to be somewhere at 12:00. This clock makes you think it's almost 11 o'clock, instead of 12 o'clock. You would certainly miss that date you've been trying to set up for months, trying to find free time, away from your computer. :) How to set this straight?

So, when it's, for example, 11:30 (I'm not using 11:50 because 11:30 is easier to understand), the hours hand should be pointing right between 11 and 12 hour markings. That is the reason why you must add the minutes value divided by two.

If it were 11:30 now, the calculation go as follows:

this.hourHand._rotation = (hours*30)+(minutes/2);

this.hourHand._rotation = (11*30)+(30/2);

this.hourHand._rotation = 330+15;

this.hourHand._rotation = 345;

Now everything is as it should be. Say "excellent". :)

Below, you can find the source FLA file for download. The document is in Flash MX 2004 format.

Download the zipped source FLA for this clock.