Using the getDate Object

This tutorial has several sections:

Purposes

Concepts

Step-by-step Instructions

Purposes

The getDate object has a number of uses in a Flash movie. It can be used to display any of the following components of time:

• Day of the week
• Month of the year
• Day of the month
• Day of the year
• Year (in either 4-number or 2-number format)
• Hours
• Minutes
• Seconds
• Milliseconds

You can do math on these components to create a timer that will measure how long it takes a viewer to perform a task. This can be useful if a movie is to be used to test the viewer on some subject matter.

You can also display both calendar and time information, and you can have Flash calculate how long a swf file has been playing.

Top

Concepts

Before discussing how to create a movie using the getDate Object, it is helpful to be aware of a few general concepts:

• Unless the movie using this object is connecting to a world clock over the Internet, the getDate object gathers information from the system time on the viewer's computer.
• The computer calculates date information from January 1, 1970. However, this information is really academic as the computer does all the work here.
• Flash has a special way of counting both days of the week, months of the year, hours, minutes, seconds, and milliseconds. Instead of counting from 1 up to whatever nunber, it counts from 0.
  • This is a very important concept because when we set up an array for dates, the array actually starts with 0. For example, Flash will assume that Sunday is day 0.
  • When we set up an array for months, the array will also start with 0. This means, for exampmle, that month 0 will be January, and month 11 will be December.
  • Because Flash counts hours from 0, the getHours() method always returns a value in a range from 0 to 23.We will use this information when converting time from the default military time to a 12-hour clock.
  • Similarly, Flash counts both minutes and seconds from 0 to 59.
• Time is actually measured in milliseconds. This means that 1,000 milliseconds will equal 1 second.

Top

Step-by-Step Instructions

OK, that's enough background information for now. Let's get to work!

Here's a picture of what my swf file looks like. Yours will probably be different, but the steps to create it will be the same.

There are three procedures for making this movie:

Creating the Analog Clock Movie Clip
Setting the Stage
Adding the ActionScript

Creating the Analog Movie Clip

1. Create three movie clips for the hands of the analog clock. The registration points must be at the bottom of each movie clip.
2. Create a movie clip for the analog clock.
3. Drag the three hand movie clips onto the stage of the clock movie clip.
4. Assign the shortest movie clip an instance name of hourHand.
5. Assign the middle-sized movie clip an instance name of minuteHand.
6. Assign the longest movie clip an instance name of secondHand.

Here's what my movie clip looks like. Notice that the movie clips for the clock hands are inside the movie clip.

Setting the Stage

Now it's time to set the movie up on the stage. The entire movie will occupy only the first frame of the timeline, but on several layers. Having everything on separate layers is not strictly necessary, but it makes selecting and moving objects easier.

1. Create a button or import one to your library.
2. Add seven layers to your timeline for a total of eight layers. Mine are named (top to bottom) actions, calendar, digital, analog, text, buttons, timer, and frame.
3. Drag the clock movie clip you created in the last procedure onto the analog layer of the stage, and give it an instance name of clock. (Tip: Don't worry about placing the entire movie clip on the stage. You will want the clock face on the stage, but the hands can be off the stage if that works best for you.)
4. With the clock movie clip selected, you now must add a couple of lines of actionscript to the movie clip. These lines can be nothing more than a couple or carriage returns, but they must be there. (I know, this makes absolutely no sense, but the actionscript for the analog clock will not work without them.)
5. On the calendar layer, drag out a Dynamic Text box, and give it an instance name of myDate_txt.
6. On the digital layer, drag out another Dynamic Text box, and give it an instance name of myDisplay_txt. If you wish, you can pretty this up a bit by placing it within a frame or other shape.
7. On the text layer, add text to identify the various parts of your movie.
8. On the buttons layer, drag two instances of your button, and give them instance names of display_btn and clear_btn. These buttons will be used for the timer.
9. On the timer layer, drag out a third Dynamic Text box, and give it an instance name of elapsedTime_txt. If you wish, you can pretty this up a bit by placing it within a frame or other shape.
10. The frame layer is not really needed, but I like to add a frame around my movie clip so that it stands out on the html page. I also created frames around two of the sections on my stage to create a sense of order to the display.

Adding the ActionScript

The actionscript for this movie is composed of four sections. While it all goes into the first frame of the actions layer, this section of the tutorial will discuss each section separately. The four sections are:

Calendar
Analog Clock
Digital Clock
Timer

Calendar

We will need arrays for both the days of the week and for the months of the year. The following code sets the array for the days of the week. For discussion purposes, the code shows line numbers

1. daysofWeek_array = new Array();
2. daysofWeek_array[0] = "Sunday";
3. daysofWeek_array[1] = "Monday";
4. daysofWeek_array[2] = "Tuesday";
5. daysofWeek_array[3] = "Wednesday";
6. daysofWeek_array[4] = "Thursday";
7. daysofWeek_array[5] = "Friday";
8. daysofWeek_array[6] = "Saturday";

Line 1 contains the constructor function new Array(). This new array is assigned to daysofWeek_array.
Line 2 assigns the string Sunday to the 0 instance of the array. You may remember that Flash starts counting days with the number 0. That's why, we assign the 0 instance of the array to Sunday.
Line 3 assigns the string Monday to the 1 instance of the array.
The ramaining lines in this section assign day of the week strings to the rest of the array. Notice that the array instance is placed within square brackets [   ].

The next part of this section sets the array for the months of the year. Again, for discussion purposes, I am numbering the lines.

1. daysofMonth_array = new Array();
2. daysofMonth_array[0] = "January";
3. daysofMonth_array[1] = "February";
4. daysofMonth_array[2] = "March";
5. daysofMonth_array[3] = "April";
6. daysofMonth_array[4] = "May";
7. daysofMonth_array[5] = "June";
8. daysofMonth_array[6] = "July";
9. daysofMonth_array[7] = "August";
10. daysofMonth_array[8] = "September";
11. daysofMonth_array[9] = "October";
12. daysofMonth_array[10] = "November";
13. daysofMonth_array[11] = "December";

Again, Line 1 of this section contains the constructor function new Array(). This time, however, the new array is assigned to daysofMonth_array.
Line 2 assigns the string January to the 0 instance of the array. Again, remember that Flash starts counting months with the number 0. That's why, we assign the 0 instance of this array to January.
Line 3 assigns the string February to the 1 instance of the array.
The ramaining lines in this section assign month strings to the rest of the array. Again, notice that the array instance is placed within square brackets [   ].

The next line contains the constructor function new Date() and assigns it to a variable named myDate_date. This will be used both here and for the digital clock.
myDate_date = new Date();

The next line uses the getDate object to assign the 4-digit year to a variable named currentYear.
currentYear = myDate_date.getFullYear();

The next line uses the getDate object to assign an array number to a variable named currentMonth. Note, however, that the daysofMonth_array that we just created will convert this number to a string that the viewer will recognize as a month.
currentMonth = myDate_date.getMonth();

The next line uses the getDate object to assign a day of the month to a variable named currentDate.
currentDate = myDate_date.getDate();

The next line uses the getDate object to assign an array number to a variable named currentDay. Note, however, that the daysofWeek_array will convert this number to a string that the viewer will recognize as a day of the week.
currentDay = myDate_date.getDay();

Finally, the following line uses concantenated text and variables to populate the dynamic text field that we gave an instance name of: myDate_txt.
myDate_txt.text = "Today is "+daysofWeek_array[currentDay]+", "+daysofMonth_array[currentMonth]+" "+currentDate+", "+currentYear;

The entire section of the calendar code follows:

//The following section initializes a calendar
//Notice that this array starts with [0] for Sunday
daysofWeek_array = new Array();
daysofWeek_array[0] = "Sunday";
daysofWeek_array[1] = "Monday";
daysofWeek_array[2] = "Tuesday";
daysofWeek_array[3] = "Wednesday";
daysofWeek_array[4] = "Thursday";
daysofWeek_array[5] = "Friday";
daysofWeek_array[6] = "Saturday";

//Notice that this array starts with [0] for January
daysofMonth_array = new Array();
daysofMonth_array[0] = "January";
daysofMonth_array[1] = "February";
daysofMonth_array[2] = "March";
daysofMonth_array[3] = "April";
daysofMonth_array[4] = "May";
daysofMonth_array[5] = "June";
daysofMonth_array[6] = "July";
daysofMonth_array[7] = "August";
daysofMonth_array[8] = "September";
daysofMonth_array[9] = "October";
daysofMonth_array[10] = "November";
daysofMonth_array[11] = "December";
myDate_date = new Date();
currentYear = myDate_date.getFullYear();
currentMonth = myDate_date.getMonth();
currentDate = myDate_date.getDate();
currentDay = myDate_date.getDay();

//The following line populates the myDate_txt dynamic text field.
myDate_txt.text = "Today is "+daysofWeek_array[currentDay]+", "+daysofMonth_array[currentMonth]+" "+currentDate+", "+currentYear;

Analog Clock

If you remember, we named the instance of the analog clock clock. The following code is executed when the clock is loaded (in the first frame.)

The first line specifies that the code will be loaded with the clock.
_root.clock.onLoad = function () {

The next line contains the constructor function new Date() and assigns it to a variable named this.myDate. Because we are targeting the clock movie clip here, we cannot use the same new Date() constructor we are using for the calendar and the digital clock.
this.myDate = new Date();

The following line uses getTime to return the number of milliseconds since midnight January 1, 1970, universal time, and assigns it to a variable named ms.This very large number will be converted a little later in the code.
this.ms = this.myDate.getTime();

Now, we need to set the clock hands at their default position. Remember, that we have set the reference point at the bottom of each hand. The following 6 lines of code place the reference point of each hand at the center of the clock. Because the hands that we drew when creating the clock were all vertical lines, each hand is pointing at 12.
this.hourHand._x = 0;
this.hourHand._y = 0;
this.minuteHand._x = 0;
this.minuteHand._y = 0;
this.secondHand._x = 0;
this.secondHand._y = 0;

The following line tells Flash to execute the actionscript code when the clock enters the frame.
_root.clock.onEnterFrame = function() {

The following line uses getTimer to return the number of milliseconds that have elapsed since the SWF file started playing and add it to the value in ms. This new number is constantly updated and assigned to the newms variable.
this.newms = this.ms+getTimer();

The following line of code sets the time to the value in newms.
this.myDate.setTime(this.newms);

The following line of code assigns the number of seconds to the variable named second. (The getMilliseconds adds a greater level of accuracy to the number of seconds that are assigned to the variable.)
this.second = this.myDate.getSeconds()+(this.myDate.getMilliseconds()/1000);

The following line of code assigns the number of minutes to the variable named minute.
this.minute = this.myDate.getMinutes();

The following line of code assigns the number of minutes to the variable named minute.
this.hour = this.myDate.getHours()+(this.minute/60);

Finally, the last three lines of code sets the rotation of the hands on the clock.
this.hourHand._rotation = this.hour*30;
this.minuteHand._rotation = this.minute*6;
this.secondHand._rotation = this.second*6;

The entire section of the analog clock code follows:

_root.clock.onLoad = function() {
this.myDate = new Date();
this.ms = this.myDate.getTime();
// Center the hands
this.hourHand._x = 0;
this.hourHand._y = 0;
this.minuteHand._x = 0;
this.minuteHand._y = 0;
this.secondHand._x = 0;
this.secondHand._y = 0;

_root.clock.onEnterFrame = function() {
this.newms = this.ms+getTimer();
this.myDate.setTime(this.newms);
// Get the second, minute and hour
this.second = this.myDate.getSeconds()+(this.myDate.getMilliseconds()/1000);
this.minute = this.myDate.getMinutes();
this.hour = this.myDate.getHours()+(this.minute/60);
// Set the rotation of the hands
this.hourHand._rotation = this.hour*30;
this.minuteHand._rotation = this.minute*6;
this.secondHand._rotation = this.second*6;
};
};

Digital Clock

For the digital clock, we don't need to worry about placing the hands on the clock. However, we will need to be concerned with how the time is displayed. Let's get started!

The first line of this section specifies that the code will be executed when the movie starts.
_root.onEnterFrame = function() {

If the digital clock were it's own movie, it would be necessary to instantiate myDate_date = new Date(); However, it this case, it has already been instantiated for the calendar.

Next, we will retrieve the current hour and minutes from the viewer's system clock.
currentHour = myDate_date.getHours();
currentMinute = myDate_date.getMinutes();
We could get the seconds from the viewer's system clock as well. But, in this example, we're not interested in storing this invormation.

The getHours() method always returns a value between 0 (12 AM) and 23 (11PM). Between the hours of 1 PM and 11PM, the hour variable holds a value between 13 and 23. We can convert the clock from 24-hour time to 12-hour time by testing whether the variable is equal or greater than 13 and subract 12 from it. If currentHour has a value less than 13, this part of the statement is skipped and the next part is evaluated.
if (currentHour >= 13) {
convertHour = currentHour-12;
}

However, we also want the clock to display AM or PM as appropriate. This is accomplished by adding a little more to this part of the if/else statement as follows:
if (currentHour >= 13) {
convertHour = currentHour-12;
myText = " PM";
}
This tells Flash to store the variable PM to myText. We'll use this information when we display the current time.

The next part of the statement is evaluated if currentHour is less than 13. What if it is 12? In this case, we want to display 12 PM. We can do this by storing the value of currentHour into the variable convertHour and storing the variable PM to myText:
else if (currentHour ==12) {
convertHour = currentHour;
myText = " PM";
}

This next part of the statement is evaluated if currentHour is less than 13 and not 12. You will remember that Flash counts hours from 0. This means that it considers the first hour of the day to be hour 0. This is perfectly logical, but viewers don't want to see hour 0. They want to see 12 AM. The following lines of code test to see whether the currentHour is exactly 0. If it is, we will change that value to be 12, and we will store the variable AM to myText:
else if (currentHour == 0) {
convertHour = 12;
myText = " AM";
}

Ok, now we've taken care of situations where the currentHour is either 0, 12, or at least 13. The only other question we have is, what if the current hour does not fall within these boundaries. What if the currentHour is within the range of 1 to 11? In this case, we will simply store the value of currentHour into convertHour and we'll store the value of AM to myText. We do this by adding the following lies of code:
else {
convertHour = currentHour;
myText = " AM";
}

That was a lot of explanation for just a few lines of code! In short, our if/else construct for displaying hours is simply:
if (currentHour>=13) {
currentHour = currentHour-12;
myText = " PM";
}else if (currentHour == 12) {
convertHour = currentHour;
myText = " PM";
} else if (currentHour == 0) {
currentHour = 12;
myText = " AM";
}else {
convertHour = currentHour;
myText = " AM";
}

The last part of formatting time information for our digital clock deals with minutes. We are not used to seeing the minutes on a digital clock displayed as a single digit. For example, we like to see 5:05 PM rather than 5:5 PM. The latter display could cause confusion. (Do we mean 5 minutes after 5, or do we mean 10 minutes before 6?) To take care of this situation, we will add a leading 0 to minutes that have a single digit with the following code:
if (currentMinute<10) {
currentMinute = "0"+currentMinute;
}
Notice that the "0" is within quotes. This tells Flash to treat the zero as a string rather than as a number to be added to the current minute.

Flash now has all the information it needs to display the digital clock. The following line uses concantenated text and variables to populate the dynamic text field that we gave an instance name of: myDisplay_txt.
myDisplay_txt.text = "The time is now: \n"+convertHour+":"+currentMinute+myText;

The entire section of the digital clock code follows:
_root.onEnterFrame = function() {
currentHour = myDate_date.getHours();
currentMinute = myDate_date.getMinutes();
/* The following lines add the appropriate PM or AM to the time and convert the clock from 24-hour time to 12-hour. */
if (currentHour>=13) {
convertHour = currentHour-12;
myText = " PM";
}else if (currentHour == 12) {
convertHour = currentHour;
myText = " PM";
} else if (currentHour == 0) {
convertHour = 12;
myText = " AM";
}else {
convertHour = currentHour;
myText = " AM";
}
/* The following code addds a leading "0" if the value of minutes is less than 10*/
if (currentMinute<10) {
currentMinute = "0"+currentMinute;
}
myDisplay_txt.text = "The time is now: \n"+convertHour+":"+currentMinute+myText;
};

(Note that either \n or \r will work as escape sequences to display a new line.)

Timer

The timer is a simple application that tells the viewer how long the movie has been running. In this section, we are not concerned with resetting the timer only with whether or not the elapsed time is displayed. You may remember that we have three controls for this application:

• The dynamic text field that has an instance name of elapsedTime_txt. When the movie starts, this field is empty.
• display_btn
• clear_btn

Let's look at what happens when  the viewer clicks the display_btn button. The getTimer() function is called and its value is stored into the variable named currentTime:
display_btn.onRelease = function() {
currentTime = getTimer();

But, this is returning the time in milliseconds. Remember? We need to convert this time into seconds that everyone understsands. Simple! All we need to do is to divide this number by 1000.
elapsedTime = currentTime/1000;

Now, let's put this value into our dynamic text box:
elapsedTime_txt.text = elapsedTime;

We're done with the display_btn. Now, let's look at the clear_btn. All we need to do here is to clear the display:
clear_btn.onRelease = function() {
elapsedTime_txt.text = " ";
};

The entire section of the timer code follows:
display_btn.onRelease = function() {
currentTime = getTimer();
elapsedTime = currentTime/1000;
elapsedTime_txt.text = elapsedTime;
};
clear_btn.onRelease = function() {
elapsedTime_txt.text = " ";
};

Back

© 2005 Gail W. Issen All rights reserved