24hr Clock

var clock:Sprite = Sprite(addChild(new Sprite()));
clock.x = clock.y = 150;

var bg:Shape = Shape(clock.addChild(new Shape()));
with (bg.graphics) lineStyle(2, 0x666666), beginFill(0xEFEFEF), drawCircle(0,0,110);

var hHand:Shape = clockHand(6, 50);
var mHand:Shape = clockHand(2, 80);
var sHand:Shape = clockHand(1, 90);

var center:Shape = Shape(clock.addChild(new Shape()));
with (center.graphics) beginFill(0x000000), drawCircle(0,0,5);

var hInc:Number = 360/24;
var msInc:Number = 360/60 ;
var nOff:Number = 6;
var verdana:TextFormat = new TextFormat("Verdana", 8);
// add numbers to clock
for (var i:int = 0; i<24; i++){
	 var ang:Number = (i * hInc - 90) * Math.PI/180;
	 createNumber(70,ang, i.toString());
	 var ms:Number = i * 2.5;
	 if (ms % 5 == 0){
		createNumber(95, ang, ms.toString());
	 }
}
 
addEventListener(Event.ENTER_FRAME, onLoop);
function onLoop(evt:Event):void {
	var date:Date = new Date();
	hHand.rotation =  hInc * date.getHours();
	mHand.rotation =  msInc * date.getMinutes();
	sHand.rotation =  msInc * date.getSeconds();
}

function clockHand(thickness:Number, leng:Number):Shape{
	var hand:Shape = Shape(clock.addChild(new Shape()));
	with (hand.graphics) {
		lineStyle(thickness, 0x000000, 1, true, LineScaleMode.NORMAL, CapsStyle.SQUARE);
		lineTo(0,-leng);
	}
	return hand;
}

function createNumber(radius:Number, theta:Number, str:String):void{
    var t:TextField = TextField(clock.addChild(new TextField()));
	with (t) defaultTextFormat = verdana, t.autoSize = "left";
	t.text = str;
	t.x = radius * Math.cos(theta) - nOff;
	t.y = radius* Math.sin(theta) - nOff;
}

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…

4 comments

  1. 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. 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;

    ๐Ÿ™‚

Leave a Reply

Your email address will not be published. Required fields are marked *