Main Content

You are here:

Making an Analogue clock

Hello and welcome. Today we will be revisiting many of the functions and classes we use when we made a digital clock and I probably won't have time to revisit any of them. In addition, we're going to utilise Flash's ability to rotate things using code to make our hands go round. As with the digital clock, the source code is available. Oh yes, I nearly forgot, this is what we're going to be making today:

Okay then, let's get started! The first thing to do is to create the graphics for your clock. I'm not going to dwell on this too much, as you'll want to get the look just right for yourselves. The least you should end up with, however, is three Movie Clips for the hands of our clock. Give them instance names of 'hourhand', 'minutehand' and 'secondhand'.

The most important thing to do, and the one I will no doubt receive email about, is this. For each of your hands, in turn:

  1. Double click on it to go 'inside' it,
  2. Find its (0,0) point, usually denoted by a small cross,
  3. Move the graphic so this cross is at the bottom end (see image below).
  4. Press CTRL/Command E to return to normal view and repeat.

If you're not quite following, this image should help explain:

Move your graphic so (0,0) is at the bottom end

Please make sure you've done this: the cross represents the point around which the hand will rotate. Next, align your hands so that their points are on top of each other and in the centre of the clock or it could look at little funny at the end.

And finally we come to today's code, which, thanks to a little trick I learnt recently, is actually shorter than with the digital clock. The trick, by the way, is to enable us to call a function which is also an event handler. We'll come to that bit later. In the meantime, go to your first (and probably only) frame, and press F9 to bring up the actions panel. (You could also try this in a separate .as file, it would work exactly the same.)

var myTimer:Timer = new Timer(200);
myTimer.addEventListener(TimerEvent.TIMER,tick);
myTimer.start();
function tick(event:TimerEvent = null):void {
 
}

So that's exactly the same code as we used last time (go look at it if you're confused) but for two differences. Firstly, I've reduced the time so that it runs every 200ms and not every 500ms to reduce and jerkiness in the rotation. Secondly (and this is the trick), I've added a " = null" into our function declaration. This gives Flash a default valueto work with. In short, it enabled us to add this to the top of our code (do it now):

tick();

Thus removing the need for a seaparate function like last time. Anyhow, we still need to put something inside our tick function. Have no fear though, the first four lines are the same as last time, creating and using the Date object. This time round, however, we're not going to use them for the text value of a textbox, but the rotation values of our hands.

     var date = new Date();
        var secs:uint = date.getSeconds();
        var mins:uint = date.getMinutes();
        var hours:uint = date.getHours();
        hourhand.rotation = (30 * hours) + (0.5 * mins);
        minutehand.rotation = 6 * mins;
        secondhand.rotation = 6 * secs;

rotation is the property of any display object (Movie Clip, Sprite, Button and so on) that enables you to quickly rotate it. Thankfully, we can just feed it a number, because we put the point at the bottom end of our hands. The number should be the number of degrees we want it to be rotated to.

Now, I suppose you're wondering where I get the numbers like 30, 0.5 and 6 from. Well, as any good schoolboy knows (I do, for example), there are 360 degrees in a full circle. Each one of the 12 hours therefore represents (360 / 12 =) 30 degrees. 30 * hours give us the number of degrees that that number of hours should represent. Likewise, the 360 degrees needs to be split into 60 seconds and 60 minutes, both of which are assigned (360 / 60 =) 6 degrees. The 0.5 is a special case, this helps our hour hand to be in between its 12 locations. Take half-four for example. A clock with an hour hand pointing to the four would look wrong; it should be pointing half way between the four and the five. To ensure this we break each 30 degree segment between hours into 60 minute denominations, each worth (30 / 60 =) 0.5 degrees and ignore the seconds.

That's it. Yes, done. Not much, was there? There's simply no need for more code, unless you want to add it, of course.

Well, there we are. All done! You now have a fully-functioning analogue clock. (If it doesn't work, consult the source code, which definitely does.) Give yourself a pat on the back and take a break!

Harry

Comments