Displaying the Date and Time With Flash MX

Grab the source for this SWF here.

This tutorial explains how to create a clock which displays the time (hours and minutes) and the date (day of the week, date, month and full year). Because we use switch statements it will work only with Flash MX but you could use if-else-if in place of switch to make it work with Flash 5.

Open a new .fla-file. Create 2 layers, name one "actions" and the other "display". In the actions-layer, create a keyframe in frames 1 and 2. In frame 1 of the actions-layer add the following code into the actions-section

function howlong(arg) {
        if (length(arg)==1) {
                arg = "0" + arg;
                return arg;
        }
        else {
                arg = arg;
                return arg;
        }
}

This will become clear in a minute, so hang on...

myDate = new Date();

this creates a variable myDate into which we load today's date

hr = howlong(String(myDate.getHours()));
mnt = howlong(String(myDate.getMinutes()));

Here is where the previous function gets called. First, I get the hours from the Date object using myDate.getHours(). I turn this into a string using String(myDate.getHours()). And that, I use as an argument in the functioncall for function howlong.

What happens in this function?

Let's say when I load the hours from the date object it's 8.25 AM. The string which is used as the argument for the function will then be "8". But I want my time to look like this: 08:25. That's what the function does. Let's see what the function would look like using my example:

function howlong(8) {
        if (length(8)==1) {
                arg = "0" + 8;
                return arg;
        }
        else {
                arg = 8;
                return arg;
        }
}

If the length of the string "8" is 1, then we add a zero before 8 and return this result to whoever called the function, in this case the variable hr. If the length of the string is different from 1, we leave the string alone and return it the way we got it. And pronto! we just made a function to add zero's in front of all single digit numbers! Now we can use this function to add a zero if necessary to the minutes too. That's what happens in:

mnt = howlong(String(myDate.getMinutes()));

Now onto the date.

daytext = myDate.getDay();
dd = myDate.getDate();
mm = myDate.getMonth();
yyyy = myDate.getFullYear();

I load the day, date, month and year into resp. daytext, dd, mm and yyyy. The day is a number from 0 to 6. (0 representing Sunday, 6 representing Saturday). The date is a number from 1 to 31. The month is a number from 0 to 11 (0 representing January, 11 representing December). The year is ... well, it's the year :)

switch (daytext) {
 case 0: daytext = "Sunday";
 break;
 case 1: daytext = "Monday";
 break;
 case 2: daytext = "Tuesday";
 break;
 case 3: daytext = "Wednesday";
 break;
 case 4: daytext = "Thursday";
 break
 case 5: daytext = "Friday";
 break;
 case 6: daytext = "Saturday";
 break
}

What happens here: I check for which number daytext contains,
If it's 0, I replace daytext with Sunday,
If it's 1, I replace daytext with Monday,
If it's 2, I replace daytext with Tuesday,
etc...

switch (mm) {
 case 0:  mm = "January";
 break;
 case 1:  mm = "February";
 break;
 case 2:  mm = "March";
 break;
 case 3:  mm = "April";
 break;
 case 4:  mm = "May";
 break
 case 5:  mm = "June";
 break;
 case 6:  mm = "July";
 break
 case 7:  mm = "August";
 break
 case 8:  mm = "September";
 break
 case 9:  mm = "October";
 break
 case 10: mm = "November";
 break
 case 11: mm = "December";
 break
}

What happens here: I check for which number mm contains,
If it's 0, I replace mm with January,
If it's 1, I replace mm with February,
If it's 2, I replace mm with March,
etc...

[Editor's note from Jesse: You could also achieve the functionality of the above two functions by creating an array of day names and another of month names, and using the number returned for the day/month as an index for the appropriate array. It's just a bit less code, but switch statements are a worthwhile new feature of Flash MX so perhaps you should try using them for experience. I'll shut up now].

textdate = (hr + ":" + mnt + " - " + daytext + "," + dd + " " + mm + " " + yyyy);

And here - at last - we compile the whole shabang! textdate is a variable into which we load a string containing 'hours:minutes - day, date month year', so it could look like this: 08:25 - Thursday, 4 July 2002

And then, to make the time update itself, go to frame 2 in the actions-layer and add the following code:

gotoAndPlay(1);

Go to layer display and create a keyframe in frame 1. Create in frame 1 a textfield, make it a dynamic one, and type at the variable box: textdate.

Tzadaaaa!! You have now linked the textbox with the variable containing our time and date. To make sure the textbox also shows in the second frame, in the display-layer, go to frame 2 and insert a normal frame.