< Day Day Up >

Working with Dates in Flash
It's useful in Flash to be able to access date information—to display the date, make a
movie do specific things on certain dates, create countdown timers, or display the day of
the week for a particular date in history, to name just a few examples.
To use dates in Flash, you create an instance of the Date class by using the following
syntax:

var myDate:Date = new Date(year, month, date); This syntax creates a new Date object named myDate. The parameters in parentheses
associate the Date object with a specific date. For example:

var myDate:Date = new Date(66, 6, 27); This example creates a Date object associated with July 27, 1966. The first parameter
represents the year, the second represents the month, and the third represents the date.
You may wonder why July, which we consider the seventh month in the year, is actually
defined as the sixth month in the script above. In ActionScript, both months and days of
the week are referenced by numbers, beginning with 0; therefore, January is the "zero"
month, February is the first month, March is the second month, and so on—up to
December, which is the eleventh month. Likewise, days of the week begin with Sunday
as the "zero" day, Monday the first day, and so on. The following exercise demonstrates
the usefulness of this numbering system.

To find out the current day of the week, use the following syntax:

var currentDay:Number = myDate.getDay(); If the current day is Thursday (as set on the computer executing the script), currentDay
would have a value of 4 after executing.
Other methods of the Date class allow you to retrieve information about the current hour,
minute, and second, as defined by the user's computer clock. These methods include the
following:

myDate.getHours();

myDate.getMinutes();

myDate.getSeconds(); This functionality can be useful for displaying the current time in an application—
something we'll demonstrate later in this lesson.
TIP
Your project can contain multiple Date objects, each used for a different purpose.

Using the DateChooser Component
The DateChooser component provides an easily recognizable visual interface for
displaying date-related information; in fact, it looks like a calendar. When placed in a
project, the DateChooser component initially displays and highlights the current date
according to the computer's system clock; but the DateChooser component does more
than provide a pretty face for displaying the current date. It's also an interface for
allowing the user to navigate dates. Dates can be selected by clicking them, and months

The date referenced by this object is the currently selected date in the calendar_dc
component instance. Using methods of the Date class, you can retrieve information from
this Date object (such as the selected day, month, and year), so that the application knows
and can react to the date the user has selected.
In the following exercise, you'll create a highly interactive calendar application using
Date objects, the setInterval() function, and an instance of the DateChooser component.
1. Open makeMyDay1.fla in the Lesson16/Assets folder.
This project contains three distinct sections: Calendar, Alarm, and Messages. In
this exercise, we'll concentrate on making the Calendar section functional. The
remaining sections are for later exercises.
The Calendar section consists of five text fields, a button, and a DateChooser
component instance. The five text fields are shown in the following list (from top
to bottom). These settings will be used to display various portions of the date
dynamically:
o time_txt. Displays the current time in hours, minutes, and seconds. The
result is updated for every second that time ticks away.
o calendarDay_txt. Displays the current day of the week (for example,
Saturday).
o calendarDate_txt. Displays the current day of the month (for example, 27).
o calendarMonth_txt. Displays the current month (for example, April).
o calendarYear_txt. Displays the current year (for example, 2004).
The button is named showToday_btn and the DateChooser component instance is
named calendar_dc.

When the application is opened and played initially, the text fields display the
current date and time information. As the user interacts with the calendar_dc
instance, the date information in the text fields is updated accordingly. Clicking
the showToday_btn instance resets the calendar_dc instance and text field
instances to display information related to today's date.
All the elements for this exercise reside on the Calendar Assets layer. Nearly all of


var currentTime:Date = new Date(); 4. Insert the following script after the script added in Step 3:
5.
6. var hour = currentTime.getHours();
7.
8. var minute = currentTime.getMinutes();
9.
10. var second = currentTime.getSeconds();
11. These three lines of script create three variables named hour, minute, second. The
values of these variables are determined by using various methods of the Date
class:
o The getHours() method extracts the current hour from the currentTime Date
object and assigns that value to the hour variable. The getHours() method
always returns an hourly value based on what's commonly referred to as
military time, where the 24 hours in a day are specified in a range from 0 to
23.
o The getMinutes() method extracts minute data from the currentTime Date
object and assigns that value to the minute variable. The value returned by
this method can be anything from 0 (indicating the top of the hour) to 59.
o The getSeconds() method is similar to the getMinutes() method. It returns a
value between 0 and 59 (seconds); our script assigns that value to the
second variable.
To help understand this functionality, let's look at an example. Suppose the current
time on your computer is 4:04:07 p.m. If you execute the updateTime() function

time value into the more widely accepted 12-hour format. The converted value is
stored in a variable named convertHour, which is created on the first line of the
script. The conversion occurs as a result of the conditional statement. Here's the
logic that went into putting it together.
As we mentioned earlier, the getHours() method always returns a value between 0
and 23, representing the hours between 12 a.m. and 11 p.m. 12 a.m. is represented
b
y a value of 0 and 11 p.m. by a value of 23. Between 1 p.m. and 11 p.m., the hour
variable would hold a value between 13 and 23. To reformat this value into the 12-
hour format, we simply need to subtract 12 from it, which results in a new value
between 1 and 11. Perfect! The first part of the conditional statement essentially
says, "If hour has a value equal to or greater than 13, assign convertHour the result
of subtracting 12 from hour." If hour has a value less than 13, this part of the
statement is skipped and the next part evaluated.
The next part of the conditional statement handles what happens when hour has a
value of 0 (representing 12 a.m.). In this case, convertHour is given a value of 12,
which is an appropriate representation of 12 a.m. in the 12-hour format. If neither
of the preceding conditions is true, the value of hour is already appropriate for the
12-hour format (3 a.m. is represented as 3, 10 a.m. as 10, and so on). In such a
scenario, the value of hour is simply assigned to the value of convertHour. In the
end, convertHour always has a value between 1 and 12.

6. Insert the following line after the conditional statement added in Step 5:
7.
8. var convertMinute = (minute < 10) ? "0" + minute : minute;
9.

This line of script adds "0" to minute values less than 10, so that numbers such as
2, 5, and 9 appear as 02, 05, and 09, respectively. Here we've used the ternary
operator (?) to assign a converted minute value to the convertMinute variable.

concatenated values of convertHour, convertMinute, and convertSecond, separated
by colons. The next line displays the resulting value of timeString in the time_txt
text field.
This step completes the construction of the updateTime() function. The only thing
left to do is get the application to call this function repeatedly, once every second.
9. Add the following line of script below the updateTime() function definition:
10.
11. setInterval(updateTime, 1000);
12. This setInterval() action calls the updateTime() function once every second (1,000
milliseconds). Each time the updateTime() function is called, the current time data
stored in the currentTime Date object is updated, extracted, converted, and
displayed. The end result is an up-to-the-second time display. Let's check it out.
10. Choose Control > Test Movie.
As soon as the movie begins to play, the current time is displayed in the time_txt
text field.
We still have a bit more work to do in this exercise.
11. Close the test movie to return to the authoring environment. With the Actions
panel open and Frame 1 of the Actions layer selected, add the following script:
12.
13. function updateDate(eventObj:Object){
14.
15. }
16.
17. calendar_dc.addEventListener("change", updateDate);
18.

The updateDate() function eventually will contain script telling the function how

22. }
23.

This conditional statement helps the function determine what date information to
display. The end result of this statement is a Date object named calendarDate that
contains either today's date information or information related to the currently
selected date in the calendar_dc instance. Let's look at how it works.
When the function is called as a result of the user's interacting with the
calendar_dc instance, an Event object is sent to the function; the Event object
contains a target property value of calendar_dc. The following expression:

eventObj.target.selectedDate != undefined looks for the existence of a selectedDate property on eventObj.target, or the
calendar_dc instance. When the function is called as a result of the user's
interacting with the calendar_dc instance, this expression evaluates to true. When
this function is called at any other time, no Event object is passed to the function,
and the expression evaluates to false.

When the expression evaluates to true, the value of calendar_dc.selectedDate is
assigned to calendarDate, placing a Date object representing the currently selected
date into calendarDate. If the currently selected date in the calendar_dc instance is
July, 27, 2008, for example, the following line of script:

var calendarDate = calendar_dc.selectedDate; is essentially the same as this one:


part of the project work is associating the proper name (based on its index value in
the array) with the numbers ActionScript returns as the current day and month,
respectively.
14. Insert the following line of script after the script added in Step 13:
15.
16. calendarDay_txt.text = nameOfDays[calendarDate.getDay()];
17.

This action sets the information displayed in the calendarDay_txt text field. Here's
how it works.
The getDay() method (inside the brackets) determines the day of the week for the
calendarDate Date object. This method returns a value between 0 and 6, with 0
representing Sunday and 6 representing Saturday. If this method determines that
the day of the week is 3, for example, that value is inserted into the brackets within
the expression, making it look like this:

calendarDay_txt.text = nameOfDays[3]; At this point, calendarDay_txt displays the value residing at index position 3 of the
nameOfDays array: the string value "Wednesday". Knowing that the getDay()
method returns a value between 0 and 6, we created an array (in Step 13) with the
names of the days at corresponding array index positions of 0 through 6. When the
script is executed, the appropriate day name is used based on the numerical value
returned by the getDay() method.

15. Insert the following line of script after the line added in Step 14:
16.
17. calendarMonth_txt.text = nameOfMonths[calendarDate.getMonth()];
18.

18. Add the following script after the line calendar_dc.addEventListener("change",
updateDate);:
19.
20. updateDate();
21.
22. showToday_btn.onRelease = function(){
23.
24. calendar_dc.selectedDate = new Date();
25.
26. updateDate();
27.
28. }
29. The first line here calls the updateDate() function when the application is opened.
The remaining lines assign an onRelease event handler to the showToday_btn
instance. When this event is triggered, the script uses a new Date object
representative of today to set the selectedDate property of the calendar_dc
instance. This causes today's date to be displayed in the instance, no matter what
date the user has navigated to. The second line within the event handler calls the
updateDate() function.
Remember that neither of the two calls to the updateDate() function shown here
sends an Event object to the function. As a result, the function is programmed to
display today's date information automatically.
19. Choose Control > Test Movie to view the project to his point.
As soon as the movie appears, the text fields in the calendar section of the screen
are populated with the appropriate data, displaying the full date. As you select
dates from the calendar_dc instance, the date information is updated accordingly.
Clicking the showToday_btn instance moves the calendar_dc instance to today's