Clock?

programming
1

Is there a way to make a circular clock in flash? With the minute and hour and second hands? B/c I can make one in java…but not sure if it can be done in Flash or not. If so, I think it’d also make a great tutorial of some sort.

2

it can be done. i saw a tutorial on it on flashkit…a long long time ago.

3
  • edited to add “sweeping” to the second hand*
  • edited again to add “sweeping” to the other hands*

not as hard as you might think.

here’s what i did playing around with thoripes answer on the other board (er, the actionscript board):

   
onClipEvent(enterFrame){
&nbsp &nbsp &nbsp &nbsp myDate = new Date();
&nbsp &nbsp &nbsp &nbsp hours = myDate.getHours();
&nbsp &nbsp &nbsp &nbsp if(hours>12){hours-=12;ampm="pm";}
&nbsp &nbsp &nbsp &nbsp else{if(hours==0){hours=12;}ampm="am";}
&nbsp &nbsp &nbsp &nbsp min = myDate.getMinutes();
&nbsp &nbsp &nbsp &nbsp seconds = myDate.getSeconds();
&nbsp &nbsp &nbsp &nbsp ms = myDate.getMilliseconds();
&nbsp &nbsp &nbsp &nbsp if(seconds<10){seconds = "0" + seconds;}
&nbsp &nbsp &nbsp &nbsp hourhand._rotation = hours*30 + min/2;
&nbsp &nbsp &nbsp &nbsp minutehand._rotation = min*6 + seconds/10;
&nbsp &nbsp &nbsp &nbsp secondhand._rotation = seconds*6 + ms*(6/1000);
&nbsp &nbsp &nbsp &nbsp if(ms<100){if(ms<10){ms="00"+ms;}else{ms="0"+ms;}}
&nbsp &nbsp &nbsp &nbsp now = hours+":"+min+":"+seconds+"."+ms+" "+ampm;
&nbsp &nbsp &nbsp &nbsp if(ms.length>3){trace(ms);}
}

you need to create movies for the hands, they’re referred to as hourhand, minutehand, and (wait for it…) secondhand. ; )

they should be aligned bottom in their movies to make the rotation work as expected, if you play with it you’ll see what i mean. and, of course, everything needs to go into whatever movie you put the code in.

the “now” variable is superfluous to the clock, as is “ampm”, i just never bothered to cull them from my prev example.

cheers.

4

in ya first key frame ya have the following actions:

attachMovie(“clockFace”, “clockFace”, 0);
attachMovie(“hand”, “secondHand”, 3);
attachMovie(“hand”, “minuteHand”, 2);
attachMovie(“hand”, “hourHand”, 1);
clockFace._x = 275;
clockFace._y = 200;
clockFace._height = 150;
clockFace._width = 150;
secondHand._X = clockFace._x;
secondHand._y = clockFace._y;
secondHand._height = clockFace._height / 2.2;
secondHandColor = new Color(secondHand);
secondHandColor.setRGB(0xFFFFFF);
minuteHand._x = clockFace._x;
minuteHand._y = clockFace._y;
minuteHand._height = clockFace._height / 2.5;
hourHand._x = clockFace._x;
hourHand._y = clockFace._y;
hourHand._height = clockFace._height / 3.5;
function updateClock () {
var now = new Date();
var dayPercent = (now.getHours() % 12) / 12;
var hourPercent = now.getMinutes() / 60;
var minutePercent = now.getSeconds() / 60;
hourHand._rotation = 360 * dayPercent + hourPercent * (360 / 12);
minuteHand._rotation = 360 * hourPercent;
secondHand._rotation = 360 * minutePercent;
}

in the second key frame you have:

updateClock();

then in the thrid you have:

gotoAndPlay(2);

then all you need is your clock face and your hour hand and second hand.

i dunno if im talking sh!t here so people that actually understand maybe will tell me if i am.

p.s
cheers kirupa :slight_smile:

5

nice stuff there fellows.