Creating a Digital Clock in Flash Using ActionScript

Posted on 12. Apr, 2008 by Web Design in Flash

Creating a Flash Clock

1. Open flash click “new flash document”

2. click on the text tool is the one with the letter “A” on it make sure is on static text and type the following “time”, “today”, and “date”

3. Now click on the text tool again but this time make sure is on dynamic text instead of static text and just drag it next to each of the static text. if you dont quite follow look at the picture.

4. After you have made the dynamic text now its time to give each one of the variable names the way you do this first you select the first dynamic box the one that is right next to the word “time” then you go to the properties window and where is says var type the following “nTime”

5. follow that step again for the next two boxes. On dynamic box that says “Today” name that one “displayDay” and on the one that says “Date” name that one “displayDate” remember you have to place the variable on the dynamic box not on the static text.

6.The next step click on the first static box and convert it to a symbol to do this select it and press (F8) make sure movie clip is clicked and name it whatever you want.

7. Now select the other two dynamic boxes and make them both into one symbol. not seperate symbol make sure to make both of them one symbol. and name it whatever you want.

8. Now select the top symbol the one that is by itself then press (F9) this will bring up the actionscrip windo type the following

onClipEvent (enterFrame) {
myTime = new Date();
nSeconds = myTime.getSeconds();
nMinutes = myTime.getMinutes();
nHours = myTime.getHours();
if (nHours>=12) {
ampm = “pm”;
} else {
ampm = “am”;
}
if (nHours>=13) {
nHours = nHours-12;
}
if (length(nMinutes) == 1) {
nMinutes = “0″+nMinutes;
}
if (length(nSeconds) == 1) {
nSeconds = “0″+nSeconds;
}
nTime = nHours+”:”+nMinutes+”:”+nSeconds+” “+ampm;
}

9. Now select the on the other symbol which has both the “today” and “date” and open the actionscript windo again if its not already open and type the following.

onClipEvent (load) {
mon = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];
weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
}
onClipEvent (enterFrame) {
now = new Date();
nDay = weekdays[now.getDay()];
nMonth = mon[now.getMonth()];
nDate = now.getDate();
nYear = now.getFullYear();
displayDate = nMonth+” “+nDate+”, “+nYear;
displayDay = nDay;
}

10. If you press (Ctrl + Enter) you will see your movie clip working it should be displaying the time, todays date, as well as the date of the month if it does not re read this tutorial carefully and see if you did somethign wrong. here is what mine looks like. dont mind the graphics is just a little something i added is not important. and also dont go away next i will explain the code.

TIME CODE:

onClipEvent (enterFrame) {

This part of the code loops the actions contained within it every time the movie is accessed.

myTime = new Date();

This creates the Date Object that will be used to retrieve the information from your system.

nSeconds = myTime.getSeconds();
nMinutes = myTime.getMinutes();
nHours = myTime.getHours();

This defines the variables for seconds, minutes, and hours, and retrieves the information from your system and incorporates it into the Flash file.

if (hours>=12) {
ampm = “pm”;
} else {
ampm = “am”;
}

This if statement allows for the switch of am for pm when the hour is greater than or equal to 12.

if (hours>=13) {
nHours = nHours-12;
}

Because Flash displays time in the 24 hour system instead of the 12 hour system, this if statement is used to subtract 12 from the hour if the hour is greater than or equal to 13 ( 13 – 12 = 1).

if (length(nMinutes) == 1) {
nHinutes = “0″+nMinutes;
}
if (length(nSeconds) == 1) {
nSeconds = “0″+nSeconds;
}

Both of these if statements are here to add a “0” in front of the seconds and minutes if their length is equal to one, meaning that the variable is less than 10.

nTime = nHours+”:”+nMinutes+”:”+nSeconds+” “+ampm;
}

This displays the time using the dynamic text box named “nTime” that you created.

DATE CODE:

onClipEvent (load){

This performs the actions contained within the brackets only once, when the movie clip is loaded. This is usually used to define variables.

mon = ["Jan","Feb","Mar","Apr","May","Jun","Jul",
"Aug","Oct","Nov","Dec"];

weekdays = ["Sunday","Monday","Tuesday",
"Wednesday","Thursday","Friday","Saturday"];

These are the arrays that are used for the rest of the code. Arrays are zero-based, so when the following code outputs a 0, January will display, 1 = February, etc… You can edit these as necessary.

now = new Date()
}

Again, this creates the Date Object that will be used to retrieve the time information.

onClipEvent (enterFrame){

Again, this loops the animation and performs the actions every time the movie is accessed.

nDay = weekdays[now.getDay()]
nMonth = mon[now.getMonth()]
nDate = now.getDate()
nYear = now.getFullYear()

These are used to retrieve the information. The arrays are contained within brackets “[ ]”.

displayDate = nMonth+” “+nDate+”, “+nYear
displayDay = nDay
}

The last bit of code is used to display the information within the dynamic text fields that were created earlier. Again, there are many ways to use this effect, and many ways to modify the code. This is just the way that I feel most comfortable with, and the way that I feel is easiest.

To view the digital flash clock, click here…

By the way, if you feel like this is too much work, or just want an easy way out, you can always create a free professional flash website with Wix.