How to Make a Simple Analogue Clock in AS3

Difficulty: Easy (but it is math heavy)


Skills Used: rotation, getting the date/time, nested movieclips, eventhandlers

This is about as basic as Actionscript gets. We're building a clock, then using Actionscript to animate it. Since this clock is contained in a movieclip, you can resize it and move it around, which is handy if you want to include it in a picture of a room or something.

Instructions:
1. Open a new file in Flash. Make sure you are using Actionscript 3.0. Right click on the grey area around the stage and select "Document Properties" from the menu that pops up. I made my stage 300 x 300 pixels, you set yours to whatever size you need.

2. In the top menu, select Insert -> New Symbol. Name this symbol "clockface". We will now begin adding numbers to the clock's face. If you want to freehand this, you can start typing the numbers on the stage using the Text tool and eyeball how you position them. If you'd rather be precise, then follow my instructions to create a bunch of movieclips, they're easier to center.

3. Select Insert -> New Symbol again and name it "12". Select the Text tool from the Tool menu, it looks like the letter T. In the Properties Inspector, set the first two options to "Classic Text" and "Static Text". Then pick the font and font size that you want. Mine is "Herculanum", 35 pt. Click on the stage. Type the number "12". In the Tools window, select the Selection tool, it looks like a black arrow. Click on the "12" you typed. Use the Alignment window to center the 12 right over that little cross in the middle of your screen.

4. Select Insert -> New Symbol and name your symbol "1". Use the Text tool to make a 1. Use the Alignment menu to center it horizontally and vertically. Do the same thing for 2-11.

5. In the library, double click on the "clockface" movieclip. Drag the "12" movieclip to the stage. In the Properties Inspector, set the X location to "0" and the Y location to negative however far you want your numbers from the center. In my case, Y is -100.

6. Drag the "6" movieclip to the stage. In the Properties Inspector, set X to 0 and Y to positive however far you want the numbers from the center, in my case 100. Are you happy with the size of your clock so far? If not, this is a good time to change it. Drag the "3" mc to the stage. Set the Y to 0 and the X to positive the distance from the center. (100) Drag the "9" mc to the stage. Set the Y to 0 and the X to negative the distance you want. (-100) Still happy with the size of your clock?

7. Positioning the rest of the numbers will take a little more math. Just a little. You're going to be using two numbers over and over, and here's how you calculate them. Go to http://www.calculator.com/calcs/calc_sci.html and calculate these two numbers...

first number: sin(30) * yourDistance (we'll call this "a")
second number: cos(30) * yourDistance (we'll call this "b")

Go ahead and write them down.

So for my clock...
sin(30) * 100 = 50 (a)
cos(30) * 100 = 86.6 (b)

1: X = a, Y = -b

2: X = b, Y = -a

4. X = b, Y = a

5. X = a, Y = b

7. X = -a, Y = b

8. X = -b, Y = a

10. X = -b, Y = -a

11. X = -a, Y = -b

Use this formula to position your numbers around the face of the clock. Or, you know, you could just eyeball it.

8. Using the Oval tool, draw a circle around your clock face. Hold down the shift key as you drag out your oval to make it a perfect circle. I used a gradient for my stroke just to make it look a little more interesting. Use the Align window to center it.

9. In the top menu, select Insert -> New Symbol, name it "secondHand". Use the line tool to draw a vertical line on the stage. Use the Properties Inspector to make its height the same as the distance the numbers are from the center (in my case 100). Set the X to 0 and the Y to negative your distance (mine is -100). Play with the thickness and color if you like.

10. Insert -> New Symbol, name it "minuteHand". Draw a line. X = 0, Y = -your distance, height = your distance. I used a gradient to make mine more interesting.

11. Insert -> New Symbol, name it "hourHand". Draw a line. I made mine 60 pixels long, you do what you think looks good. Set the X to 0, the Y to negative whatever you picked. (In my case -60.) I used a gradient to make mine look more interesting.

12. Select Insert -> New Symbol. Name this one clock. Create five layers in the timeline and name them "Actions, "hour", "minute", "second" and "face", from top to bottom. Drag the "clockface" movieclip from the library to the stage in the "face" layer, use the Align window to center it. Drag the hourhand into the "hour" layer, center it. Drag the minutehand into "minute", center it. Drag the secondhand into "second", center it.

13. Select the "Actions" layer. Open up the Actions window and paste in the following code:

var localDate:Date = new Date();
var seconds:Number = localDate.getSeconds();
var minutes:Number = localDate.getMinutes();
var hours:Number = localDate.getHours();

addEventListener(Event.ENTER_FRAME,updateTime);

function updateTime(event:Event)
{
localDate = new Date();
seconds = localDate.getSeconds();
minutes = localDate.getMinutes();
hours = localDate.getHours();

secondHand.rotation = seconds * 6;
minuteHand.rotation = minutes * 6;
hourHand.rotation = hours * 30 + minutes / 2;
trace(seconds);
}

To find the time using Actionscript, first you need to set a variable that is equal to the date. Then you use the getHours function to find the hour, the getMinutes section to find the minutes, etc. We need the time to update continuously, so an eventlistener is used to reset the time with every frame. The time determines the angle of each hand. There are 360 degrees in a circle, so the second hand needs to move six degrees every second (60 seconds * 6 degrees = 360 degrees), the minute hand needs to move six degrees every minute, and the hour hand needs to move 30 degrees for each hour, plus a little more depending on the minute. You need to include the minutes divided by two because otherwise the hourhand would point straight to the six all through the six hour, and then jump straight from six to seven at 7:00.

14. Go back to the mainframe of your movie. Drag the "clock" movieclip to the stage. You can center it, place it within a picture, resize it, whatever you want.

Test your movie, you should have a working clock.