24hr Clock

Actionscript:
  1. var clock:Sprite = Sprite(addChild(new Sprite()));
  2. clock.x = clock.y = 150;
  3.  
  4. var bg:Shape = Shape(clock.addChild(new Shape()));
  5. with (bg.graphics) lineStyle(2, 0x666666), beginFill(0xEFEFEF), drawCircle(0,0,110);
  6.  
  7. var hHand:Shape = clockHand(6, 50);
  8. var mHand:Shape = clockHand(2, 80);
  9. var sHand:Shape = clockHand(1, 90);
  10.  
  11. var center:Shape = Shape(clock.addChild(new Shape()));
  12. with (center.graphics) beginFill(0x000000), drawCircle(0,0,5);
  13.  
  14. var hInc:Number = 360/24;
  15. var msInc:Number = 360/60 ;
  16. var nOff:Number = 6;
  17. var verdana:TextFormat = new TextFormat("Verdana", 8);
  18. // add numbers to clock
  19. for (var i:int = 0; i<24; i++){
  20.      var ang:Number = (i * hInc - 90) * Math.PI/180;
  21.      createNumber(70,ang, i.toString());
  22.      var ms:Number = i * 2.5;
  23.      if (ms % 5 == 0){
  24.         createNumber(95, ang, ms.toString());
  25.      }
  26. }
  27.  
  28. addEventListener(Event.ENTER_FRAME, onLoop);
  29. function onLoop(evt:Event):void {
  30.     var date:Date = new Date();
  31.     hHand.rotation =  hInc * date.getHours();
  32.     mHand.rotation =  msInc * date.getMinutes();
  33.     sHand.rotation =  msInc * date.getSeconds();
  34. }
  35.  
  36. function clockHand(thickness:Number, leng:Number):Shape{
  37.     var hand:Shape = Shape(clock.addChild(new Shape()));
  38.     with (hand.graphics) {
  39.         lineStyle(thickness, 0x000000, 1, true, LineScaleMode.NORMAL, CapsStyle.SQUARE);
  40.         lineTo(0,-leng);
  41.     }
  42.     return hand;
  43. }
  44.  
  45. function createNumber(radius:Number, theta:Number, str:String):void{
  46.     var t:TextField = TextField(clock.addChild(new TextField()));
  47.     with (t) defaultTextFormat = verdana, t.autoSize = "left";
  48.     t.text = str;
  49.     t.x = radius * Math.cos(theta) - nOff;
  50.     t.y = radius* Math.sin(theta) - nOff;
  51. }

I was watching a movie the other day and I saw a 24 hour clock in the background of one of the shots. After the movie I coded this snippet. It draws a very basic clock with an hour hand that takes 24 hours to go full circle...

This entry was posted in misc and tagged , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

4 Comments

  1. Jeff Swartz
    Posted February 27, 2009 at 5:47 pm | Permalink

    Very cool. One minor correction … in the for loop that draws the clock face numbers, use this code for the part that draws the seconds:

    if (ms % 10 == 0) {
    createNumber(95, ang, (ms/2).toString());
    }

  2. Posted February 27, 2009 at 7:39 pm | Permalink

    Thanks for the comment Jeff… I’m not sure I understand why you suggest that though, could you explain? :)

  3. Jeff Swartz
    Posted March 2, 2009 at 4:38 pm | Permalink

    Ha! My fault. I used a regular expression search/replace to remove the line numbers from your code, and it changed the code in line 22 to this:

    var ms:Number = i * 5;

    :)

  4. Posted March 2, 2009 at 5:28 pm | Permalink

    Ah yes… The dangers of find and replace, I know them well :)

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*