Most of the code in the AnalogClockFace class involves setting
up the clock face’s display elements. When the AnalogClockFace is
initialized, it draws a circular outline, places a numeric text
label at each hour mark, and then creates three Shape objects, one
each for the hour hand, the minute hand, and the second hand on
Once the SimpleClock application is running, it calls the AnalogClockFace.draw() method
each second, as follows:
* Called by the parent container when the display is being drawn.
public override function draw():void
// stores the current date and time in an instance variable
currentTime = new Date();
This method saves the current time in a variable, so the time
can’t change in the middle of drawing the clock hands. Then it calls
the showTime() method to display the hands, as
the following shows:
* Displays the given Date/Time in that good old analog clock style.
public function showTime(time:Date):void
// gets the time values
var seconds:uint = time.getSeconds();
var minutes:uint = time.getMinutes();
var hours:uint = time.getHours();
// multiplies by 6 to get degrees
this.secondHand.rotation = 180 + (seconds * 6);
this.minuteHand.rotation = 180 + (minutes * 6);
// Multiply by 30 to get basic degrees, then
// add up to 29.5 degrees (59 * 0.5)
// to account for the minutes.
this.hourHand.rotation = 180 + (hours * 30) + (minutes * 0.5);
First, this method extracts the values for the hours, minutes,
and seconds of the current time. Then it uses these values to calculate
the angle for each hand. Since the second hand makes a full rotation
in 60 seconds, it rotates 6 degrees each second (360/60). The minute
hand rotates the same amount each minute.
The hour hand updates every minute, too, so it can show some
progress as the minutes tick by. It rotates 30 degrees each hour
(360/12), but it also rotates half a degree each minute (30 degrees
divided by 60 minutes).