Check it out here: http://eaglestone.pocketempires.com/bin/metrictime/MetricClock.html
I've added some spaces in the MXML to make it displayable...
< ?xml version="1.0" encoding="utf-8"?>
< mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
creationComplete="creationCompleteHandler()"
>
< mx:Script>
< ![CDATA[
import flash.display.Sprite;
import flash.utils.Timer;
private var clock:Sprite = new Sprite();
private var hour:Sprite = new Sprite();
private var sec:Sprite = new Sprite();
public function creationCompleteHandler():void
{
clock.graphics.lineStyle(2);
clock.graphics.drawCircle(0,0,100);
// draw tick marks on clock face
var outerRadius:int = 99;
for ( var m:int=0; m<100 data-blogger-escaped-br="" data-blogger-escaped-m=""> {
var innerRadius:int = 96;
clock.graphics.lineStyle(1, 0x000000, 100);
if ( m % 10 == 5 )
{
innerRadius = 94;
clock.graphics.lineStyle(2, 0x000000, 100);
}
var theta:Number = m * 3.6 * Math.PI / 180;
clock.graphics.moveTo(Math.cos( theta ) * outerRadius,
Math.sin( theta ) * outerRadius);
clock.graphics.lineTo(Math.cos( theta ) * innerRadius,
Math.sin( theta ) * innerRadius);
}
myCanvas.move(150,150);
myCanvas.rawChildren.addChild(clock);
myCanvas.rawChildren.addChild(hour);
myCanvas.rawChildren.addChild(sec);
// draw 'hour' hand
hour.graphics.lineStyle(2, 0x000000, 100);
hour.graphics.moveTo(0, 0);
hour.graphics.lineTo(0, -60);
// draw 'second' hand
sec.graphics.lineStyle(0, 0x0ff00f, 100);
sec.graphics.moveTo(0, 0);
sec.graphics.lineTo(0, -90);
var timer:Timer = new Timer(400);
timer.addEventListener(TimerEvent.TIMER, tick);
timer.start();
}
public function tick(evt:TimerEvent):void
{
var now:Date = new Date();
var time:Number = now.hours * 3600 + now.minutes * 60 + now.seconds + now.milliseconds / 1000;
var metric:int = time * 100/864;
var hrs:Number = int(metric / 100);
var secs:Number = metric % 100;
hour.rotation = 3.6 * hrs;
sec.rotation = 3.6 * secs;
when.text = "";
if ( hrs < 10 ) when.text = "0";
when.text += hrs + ":";
if ( secs < 10 ) when.text += "0";
when.text += int(secs);
}
]]>
< /mx:Script>
< mx:Canvas id="myCanvas" x="0" y="0" width="200" height="200">
< /mx:Canvas>
< mx:Text id="when" x="131" y="264" text="" width="52"/>
< /mx:Application>
No comments:
Post a Comment