Clock’s can be a handy addition to a game. They can provide an intriguing background image or can even be part of the gameplay itself. In this tutorial, I am going to teach you how to make a clock in flash using Actionscript 2. Here’s an example of what you will be making.

The first thing you’ll want to do is create a new symbol. Hit CTRL+F8 to bring up the create new symbol window. Name your symbol secondHand or something that will describe it’s purpose. Select the Movie clip option. Now draw your second hand. For mine, I just made a rectangle, but you can be as creative as you wish.

Now that you have a second hand, you’ll need a minute hand. Hit CTRL+F8 to create your new symbol. This time we’ll name it minuteHand. Again, make sure you select the Movie clip option. Draw your minute hand, but make it a bit thicker than the second hand was.

I bet you know what’s coming next. It’s time to create the hour hand. Hit CTRL+F8 and create a new symbol named hourHand. Select the Movie clip option if it isn’t already selected. Now it’s time to draw your hour hand. I made mine shorter and fatter than the other two, as that’s how an hour hand is typically seen.

You have all your clock’s hands drawn, now you just need to put it all together. Create a new symbol called clock. Open up your library by hitting CTRL+L and drag the three hand’s onto the stage of the clock Movie clip. Some of them may be disproportionate to the others. If they are, just double click them to enter edit mode and resize them accordingly.

Next, you’ll need to reposition the registration point of the clock’s hands. To do this, double click on each hand to enter edit mode. Now move them so that the bottom of the hand is sitting on the + sign.

Now give each of the hands an instance name. To do this, click on them and bring up the properties panel. Name the second hand sHand. Name the minute hand mHand. Finally, name the hour hand hHand. Make sure the letters are exactly as I have here, as it is case sensitive. Once you’ve given them an instance name, move each hand onto the center of the screen, so they are all on top of each other. Line them up so the bottom of each one is at the same point, and each one is facing 12:00.

It’s time to make the clock background now. Create a new symbol called clockBG. In it, draw a circle that is about double the height of your tallest clock hand. Go back into your clock symbol, and drag your clock background into it from your library. The clock hands should be centered in the middle of the circle. If they aren’t just double click on your circle and edit it until you have it right. We want our background to be behind our clock hands, so right click on it and select Arrange > Send to Back.

We’re not done with out clock background yet though. We want it to have numbers around the edges, so double click on it and put the numbers around the clock. This can be tricky to get right, so I find it easier to first put in the 12 and the 6. Just line them up with the center of the circle and drag them up or down. You can hit CTRL+D to duplicate the numbers, so you don’t have to constantly select the text tool and create new numbers. Once the 12 and 6 are in, add the 3 and 9. Again, line them up with the center and drag them left of right. You can add more numbers if you wish, but I’m going to keep it at those 4.

Here’s the part you’ve been waiting for; the code. Put this code into your clock movieClip.

onClipEvent (enterFrame) {// every frame
var currentDate:Date = new Date();//get the current date
hours = currentDate.getHours();//get the hours time out of the date
minutes = currentDate.getMinutes();//get the minutes time out of the date
seconds = currentDate.getSeconds();//get the seconds time out of the date
sHand._rotation = (1/(60/seconds))*360;//make the second hand rotate so it faces the correct angle
mHand._rotation = (1/(60/minutes))*360;//make the minute hand rotate so it is at the right time
hHand._rotation = (1/(12/(hours+minutes/60)))*360;//make the hour hand rotate to the time
}//end code

Test your code by hitting CTRL+ENTER. It should have the clock hands moving around at their correct time. Take a look at the example clock to compare if it’s working correctly. If not, go back and make sure you have your instance names and your code right.

Nice job, you’ve made it through the clock tutorial and have made your first clock. Not too hard, right? Now you can add clocks to spruce up your graphics or keep track of time in your games.

Related posts:

  1. Custom Mouse Cursor Tutorial in Flash Actionscript 2
  2. The Easy Way to Sitelock your Game in AS2
  3. How to make a dress up game