<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                creationComplete="update(null)">
   <mx:Script>
   <![CDATA[
      import flash.utils.Timer;
      import flash.events.TimerEvent;
      import flash.display.Sprite;

      private function drawFace(date:Date): void {
         var angle:Number, s:Number, c:Number, radius:Number;
         var i:int;

         analog.graphics.clear();
         analog.graphics.lineStyle(5, 0, 1);

         if (analog.width < analog.height) {
            radius = analog.width * 0.45;
         }
         else {
            radius = analog.height * 0.45;
         }

         for (i = 0; i < 60; i++) {
            var inner:Number;

            s = Math.sin(i * 6 * Math.PI / 180);
            c = Math.cos(i * 6 * Math.PI / 180);

            if ((i % 15) == 0)
               inner = radius * 0.8;
            else if ((i % 5) == 0)
               inner = radius * 0.9;
            else
               inner = radius * 0.95;

            analog.graphics.moveTo(analog.width  / 2 + s * inner,
                                   analog.height / 2 - c * inner);

            analog.graphics.lineTo(analog.width  / 2 + s * radius,
                                   analog.height / 2 - c * radius);
         }

         angle = date.seconds * 6 * Math.PI / 180;

         s = Math.sin(angle);
         c = Math.cos(angle);

         inner = radius * 0.75;

         analog.graphics.lineStyle(7.5, 0xFF0000, 0.5);

         analog.graphics.moveTo(analog.width  / 2, analog.height / 2);

         analog.graphics.lineTo(analog.width  / 2 + s * inner,
                                analog.height / 2 - c * inner);

         angle = date.minutes * 6 * Math.PI / 180;

         s = Math.sin(angle);
         c = Math.cos(angle);

         inner = radius * 0.60;

         analog.graphics.lineStyle(10, 0x00FF00, 0.5);

         analog.graphics.moveTo(analog.width  / 2, analog.height / 2);

         analog.graphics.lineTo(analog.width  / 2 + s * inner,
                                analog.height / 2 - c * inner);

         angle = angle / 12 + date.hours * 30 * Math.PI / 180;

         s = Math.sin(angle);
         c = Math.cos(angle);

         inner = radius * 0.45;

         analog.graphics.lineStyle(12.5, 0x0000FF, 0.5);

         analog.graphics.moveTo(analog.width  / 2, analog.height / 2);

         analog.graphics.lineTo(analog.width  / 2 + s * inner,
                                analog.height / 2 - c * inner);
      }

      private function resize(): void {
         var myDate:Date = new Date();

         drawFace(myDate);
      }

      private function update(event:Event): void {
         var myTimer:Timer;
         var myDate:Date = new Date();

         digital.text = timeFormatter.format(myDate);
         drawFace(myDate);

         myTimer = new Timer(1000 - myDate.milliseconds, 1);

         myTimer.addEventListener(TimerEvent.TIMER, update);

         myTimer.start();
      }
   ]]>
   </mx:Script>
   <mx:DateFormatter id="timeFormatter" formatString="YYYY-MM-DD JJ:NN:SS"/>
   <mx:VBox width="100%" height="100%" horizontalAlign="center">
      <mx:Panel title="Analog" height="100%" width="100%">
         <mx:Canvas
               id="analog" width="100%" height="100%" resize="resize()"/>
      </mx:Panel>
      <mx:Panel title="Digital" layout="horizontal" horizontalAlign="center">
         <mx:Label id="digital" height="100%" fontSize="24"/>
      </mx:Panel>
   </mx:VBox>
</mx:Application>