Written by: Jono Hayward
www.actionscript.org
Clock tutorial
This is a pretty simple clock
I find it easiest to put all this in a movie clip, then you can move your clock around the stage wherever you want it. So basically:
step one:
Hit ctrl/apple + f8 to create a new movie clip. Doesn’t matter what you call it. Open the library by pressing ctrl/apple + L and drag the clip onto the stage.
step two:
Open the clip by double-clicking it in the library. Right/control click on the second frame of the clip and click “insert frame”*.
step three:
Inside the movie clip make two dynamic text boxes. Give one a variable name of “time” (without the speech marks) and one a variable name of “datefinal”.
step four:
Click on the first frame of the movie and open the actions panel. This is where the fun begins.
First we want to get all the values off of the user’s system clock and assign them to separate variables.
Copy this code into the actions panel:
mydate = new Date(); seconds = mydate.getSeconds(); minutes = mydate.getMinutes(); hours = mydate.getHours(); day = mydate.getDay(); date = mydate.getDate(); month = mydate.getMonth(); year = mydate.getFullYear();
step five:
How some of these variables, if we just shoot them off to the text box will give some odd results. For example, if it’s Sunday the “day” variable will just return “0″, if its Monday it will return “1″ etc. Same with months. And while a conventional digital clock would display the time as 9:03:05 this would show 9:3:5 which just looks weird. So to fix all this, we use these bits of code:
step five(a):
>>to change the day to its name, we use an if statement.
if (day==0){ day = "Sunday" } else if (day==1){ day = "Monday" } else if (day==2){ day = "Tuesday" } else if (day==3){ day = "Wednesday" } else if (day==4){ day = "Thursday" } else if (day==5){ day = "Friday" } else if (day==6){ day = "Saturday" }
What this basically does is say to the program, “if the day is 0 then the day is actually sunday” and so on.
Same concept for months
if (month==0){ month = "January" } else if (month==1){ month = "February" } else if (month==2){ month = "March" } else if (month==3){ month = "April" } else if (month==4){ month = "May" } else if (month==5){ month = "June" } else if (month==6){ month = "July" } else if (month==7){ month = "August" } else if (month==8){ month = "September" } else if (month==9){ month = "October" } else if (month==10){ month = "November" } else if (month==11){ month = "December" }
step five(b):
If however you want to leave the months as numbers, instead of that massive load of if statements, simply write this code:
month = month + 1;
We add one to the month again because January is zero etc. For this we dont need the “day” variable because it tells you how far into the week you are…Not really what you usually see in a numbers-only date.
step five(c):
>> to make the minutes and seconds display correctly, we again use an if statement.
if (minutes<10) { minutes = "0"+minutes; } if (seconds<10) { seconds = "0"+seconds; }
This is slightly more complex. It says to the program, “If the value of minutes is less than 10, then add a zero on the front”. This is a slighly odd type of adding – its the type where if you add 5 and 3 you get 53, not 8. That works because the 0 we add on is in speech marks “” so that makes it a string. For more info see the Variables 101 tutorial (linked below in “Related Articles”).
step six:
To change the time from 24 hour to 12 hour, we use this code (if you want it on 24 hour time then just skip this):
if (hours>12 ) { hours = hours-12; ampm = "PM"; } else if (hours == 12) { ampm = "PM"; } else { ampm = "AM"; } if (hours == 0) { hours = 12; }
What this does is say to the program, “If the value of hours is over 12, then subtract 12 from it” and then change the status of the am/pm indicator to PM.
It then counters for the fact that if the hours is actually 12 and it becomes 0, it changes the hours to 12 so midnight doesn’t become 0AM.
step seven:
Here’s where it gets interesting. This is where we put together what will go into the text boxes.
Use this code to put together the time (12 hours):
time = ((hours) + ":" + (minutes) + ":" + (seconds) + " " + (ampm));
Or this code to put together the time (24 hours):
time = ((hours) + ":" + (minutes) + ":" + (seconds));
Basically what this does is put together a string of the time – so you get the hours, then a “:” then the minutes and so on.
use this code to put together the date (with names):
datefinal = ((day) + " " + (date) + " " + (month) + " " + (year));
Same concept basically, you get the day then it puts a space in then the date etc
Use this code to put together the date (using numbers only, if you use this remember to perform step five(b) and not (a)):
datefinal = ((date) + "/" + (month) + "/" + (year));
Same concept, please note that this is in australian date format, to make it american simply switch around the “date” and “month” variables.
Thats it! Just hit ctrl/apple + enter to test your movie.
*This how the clock updates itself. Instead of doing anything big and complex the way this works is it runs 12 times every second (or however fast the framerate of the movie is set to) and every time it gets to frame 1 it checks the system clock again. This means that when the seconds change it will “catch” it and change itself.
