Flash Explained

Learn Flash easily.

Making an antique analog clock

October 14th, 2008 | Author: Luka | Category: Design


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.

Working inside the movie clip symbol.

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.

Setting the type of text as Static.

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.

The roman numerical 1 hour mark.

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).

The Align panel.

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.

Aligning the 1 hour mark with the movie clip registration point.

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.

Moving the 1 hour mark 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.

The Snap to Objects option 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.

Placing the cursor over the rotational center of the symbol.

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.

Placing the rotation center of the symbol.

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.

Adjusting the position of the 1 hour sign.

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

Entering the degree of rotation in the Transform panel.

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? 🙂

The 1 hour marking properly in place.

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.

Inside the graphic symbol.

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.

The 2 hour mark.

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.

Aligning the 2 hour mark in relation to the clock movie clip registration point.

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.

Placing the 2 o clock mark before rotating.

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.

The symbols rotation center placed in position before doing the rotation.

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

The clock markings for 1 and o clock in place.

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:

Hour I II III IV V VI VII VIII IX X XI XII
Rotation 30° 60° 90° 120° 150° 180° 210° 240° 270° 300° 330°

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

The hour markings for the clock forming a circle.

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.

Making 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:

Clock markings in place.

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

Top of page

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).

Blocking the fill color.

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

Hairline chosen as line type.

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).

Making a circle.

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

Clock marks with concentrical circles.

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

Layers inside the movie clip.

Top of page

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.

A thin blue rectangle.

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

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).

The circle aligned with the movie clip registration point.

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.

The two circles with different colours.

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.

Centering the small circle.

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.

Making a ring out of two circles.

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.

The rectangle and the ring.

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.

Hiding the inactive layers.

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.

The minute hand taking shape.

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.

The minutes hand with the upper part added.

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.

The final aspect of the minutes hand.

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.

A movie clip inside a movie clip.

43 Select the minutes hand drawing and place it so that the center of the bottom circle is centered on this movie clip's registration point. This is important because it is around this point that the minutes' hand will rotate around.

Placing the minutes hand shape on the rotation point.

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

Going back one level in the movie clip hierarchy.

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.

Entering the instance name for the movie clip in the Properties panel.

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

The clocks minutes hand in its final position.

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.

Top of page

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.

Making a new layer.

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.

Making the hour hand shorter.

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.

Returning to 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.

Placing the hours hand in the center of the clock.

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

Instance name assignment.

Lock this layer.

Top of page

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.

Selecting the line style.

55 Draw a vertical line about 98 pixels high.

A thin black line.

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.

Inside the seconds hand movie clip.

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

Adding style to the clocks seconds hand.

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 clock elements in place.

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

Top of page

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!

Top of page

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.

The misleading and the good clock.

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". 🙂

Download the zipped source FLA for this clock (in Flash MX 2004 format).

Comments

Submit a comment

  • De Sena Viegas Nov 4, 2008 at 10:18 am

    Quite nice!

  • Luka Nov 6, 2008 at 1:25 am

    Enjoy! 🙂

  • Pat Testers Dec 29, 2008 at 9:33 am

    Self designing of clock, thats great.

  • ron Feb 17, 2009 at 11:37 pm

    Would be nice if pages were printable. Could not print to Adobe PDF or Microsoft Onenote

  • nadia Nov 2, 2009 at 12:35 pm

    Nice tutorial !!

    I spent some time doing this exactly as you describe but i ended up with an empty scene 1.What am i doing wrong??I am stuck in step 61.

    Thank you in advance:)

  • prithvi Jul 29, 2010 at 2:57 pm

    i m just a beginner in flash. I could make this analogue clock so easily that i was able to do it on fly. But i have problem here flash alalogue time is working half hour late than my computer’s time???!!!!

  • smiledevil Sep 23, 2010 at 1:02 pm

    hello all..how to insert image as a background for this tutorial?

  • vinu May 15, 2012 at 10:20 am

    very nice and detailed explanation……..

You must log in to post a comment.