[Developer]

Make a Digital Clock

Hello and welcome. Today we will be looking utlising the Timer class plus some Date functions to make ourselves the digital clock below. Feel free to skip straight to the code
There would be some Flash here...

Want to get Flash Player?


Okay then, let's get started with this. Draw yourselves a bit of a clock, putting a dynamic textbox where you want the text to be. Give it the name "timetext". Feel free to set the font size, font* and colour how you want them, and then open up your actions panel (F9).
* It's best to choose a font where all the characters (well, numbers) are the same width to avoiding jumping around.
Using the information we looked at previously about the Timer class, we're going to give ourselves an 'every half-second' function. Why every half-second and not every second? This is to adjust to the amount of time the code takes to run, making sure that every second is displayed at some point. Remember, though, that 1 half-second = 500 milliseconds, and that's the number we need:
var myTimer:Timer = new Timer(500);
myTimer.addEventListener(TimerEvent.TIMER,tick);
myTimer.start();
function tick(event:TimerEvent):void {

} So, we have our function prepared, ready to add our code. The secret behind today's is that we use the methods of a Date object to get our time (not a Time object!). Before we get to that though, a slight adjustment needs to be made - we also want our function to display the time on load, so the user is not confronted with a blank screen for the first second. To achieve this, the only thing we do in our function is call another function, updateTime():
updateTime(); Now, copy and paste that line and add it back in at the top of your code, so it gets called both every 'tick' and at the beginning. But hold on a minute, we haven't got an updateTime function! Well, now we do:
function updateTime():void{
var date = new Date();
var secs:int = date.getSeconds();
var mins:int = date.getMinutes();
var hours:int = date.getHours();
timetext.text = pad(hours) + " : " + pad(mins) + " : " + pad(secs);
} Before we worry about what on Earth the pad function is, let's look at the functions contained in the code above - today's new functions. First we have the Date() object created, which we handily called 'date'. Then we call date's getSeconds() function and whatever value that is, we set to be the value of a new variable called 'secs'. Must I really explain what that does? Probably not. But to clarify, all of these functions return the user's local time, not GMT, UTC, EST or MP3. Similarly, 'mins' and 'hours' are set in this way.
In the final line, we set the text property of our texbox to be equal to those variables, but passed to a function we're calling pad. What does pad() do? Well, have you ever seen a digital clock with the display 17:3 or 2:6? No: they're 17:03 and 02:06 of course:
function pad(number:Number){
//Turn our number in to a string
var new_num:String = String(number);
//Needs padding out?
if(new_num.length < 2){
//Add a zero
new_num = "0" + new_num;
}
//Return new, better value as a string
return new_num;
} Most of that we have covered before, but if you don't follow the comments, go back and look at some of our earlier tutorials, particularly about variables. It's just a helper function.
Well, there we are. All done! You now have a fully-functioning digital clock. Give yourself a pat on the back and take a break!

[EvilLisa]

Hi!
I' m Lisa Bolonton.
I need your help!
Please vote for me here http://miss-office-2009.com/
I now at the third position, and really want to win

I love you all