| All of us have used a calendar; in fact, most of us use one on a daily basis to plan our days, to remind ourselves of certain events, and more. In Flash, too, it's useful to be able to access date information to display it, to make your movie do specific things on certain dates, to create countdown timers, and to display the day of the week for a particular date in history, to name just a few. To use dates in Flash, you must create an instance of the Date object using the following syntax: myDate = new Date(year, month, date); The above syntax creates a new Date object named myDate . The parameters in parenthesis associate the date object with a specific date. For example: myDate = new Date(66, 6, 27); This 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 be wondering why July, which we consider the seventh month in the year, is actually defined as the sixth in the script above. This is because in ActionScript both months and days of the week are referenced by numbers, beginning with 0. Thus, 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 will demonstrate the usefulness of this numbering system.  NOTE Dates and years are recognized by their true values. Thus, 66 refers to 1966, while 27 refers to the 27th day in the month.
TIP You can continue to add parameters for the hour, minute, second, and millisecond, though you can leave them out if your application doesn't require that precision.
If you want to create a Date object that references the current point in time (as indicated by the user's system clock), you can leave the parameter settings blank. For example, take a look at the following: myDate = new Date(); After you've created the Date object, you can use methods of it to retrieve all sorts of information about that date. For example, the previous line of script would create a Date object that references today's date. To discover the current month, you would use the following syntax: currentMonth = myDate.getMonth(); After executing, currentMonth would have a value of, for example, 5, which represents the month of June. To find out the current day of the week, we would use the following syntax: currentDay = myDate.getDay(); After executing, currentDay would have a value of, for example, 4, which represents Thursday (assuming that is the current day as set on the computer executing the script). NOTE Your project can contain numerous Date objects, each used for a different purpose.
In the following exercise, we'll create a Date object, as well as use various methods to display the current date. -
Open makeMyDay1.fla in the Lesson15/Assets folder. This project contains two scenes, Alarm and Messages. In this lesson, we'll work solely in the Alarm scene, focusing on the calendar portion, which is located on the left side of the stage. We'll work on the other side of the stage in the next lesson. The layers in this scene are named according to their contents. Just below the text that reads, "Today is:" you'll see four text fields named (from top to bottom) currentDay, currentMonth, currentDate, and currentYear. These will be used to dynamically display various portions of the date: currentDay. Displays the current day of the week (for example, "Saturday"). currentMonth. Displays the current month (for example, "April"). currentDate. Displays the current day of the month (for example, "27"). currentYear. Displays the current year (for example, "2002").  We've used a slightly different character setting for each of these text fields to create a nice balance for our design. -
With the Property inspector open, select the top text field, currentDay. Press the Character button that appears on the Property inspector to bring up the Character Options dialog box. At the bottom of this panel you'll see a bunch of jumbled text. These characters represent the specific font outlines we want to embed for this text field. These characters are all of the characters necessary to spell out the days of the week, nothing more. Because this text field will contain dynamically generated text, embedding these fonts will allow the text displayed in this field to appear antialiased, or smooth. The text fields below this one also have specific font outlines embedded (depending on what they will be used to display).  -
With the Actions panel open, select Frame 1 on the Actions layer and add the following script: stop(); today = new Date(); The first action prevents the timeline from moving forward until we instruct it to. The next line of script creates a new Date object named today as soon as the movie begins to play. Since we haven't specified any date parameters within the parentheses, this Date object references the current time on the user's computer (that is, the time when the movie is played). -
Add the following two lines of script to the end of the current script: nameOfDays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; nameOfMonths = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; The first line is used to create an array called nameOfDays ; the second line is used to create an array called nameOfMonths . Each of these arrays contains several string values representing the names of days and months, respectively. These arrays are necessary because although humans assign names to months and days of the week, ActionScript does not. Instead, it references with a number aspects of dates that we normally associate with a name. As you'll see in a moment, the trick to making this 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. -
Add the following line of script at the end of the current script: currentDay.text = nameOfDays[today.getDay()]; This action is used to set the information displayed in the currentDay text field. Here's how it works. The getDay() method (inside the brackets) is used to determine the day of the week for the today object. This method will return a value between 0 and 6, with 0 representing Sunday and 6 representing Saturday. Thus, if this method determines that the day of the week is 3, that value is inserted into the brackets within the expression, making it look like this: currentDay.text = nameOfDays[3]; At this point, you can see that currentDay will display the value residing at index position 3 of the nameOfDays array: the string value of "Wednesday". Knowing that the getDay() method will return a value between 0 and 6, we created an array (in the previous step) with the names of the days at corresponding array index positions of 0 through 6. Thus, when the script is executed, the appropriate day name is used based on the numerical value returned by the getDay() method. -
Add the following line of script at the end of the current script: currentMonth.text = nameOfMonths[today.getMonth()]; This action is used to set the information that's displayed in the currentMonth text field. It works in the same way as the action discussed in the previous step except that the getMonth() method used here will return a numerical value between 0 and 11 (for January through December). The nameOfMonths array has appropriate string values at corresponding index positions. -
Add the following line of script at the end of the current script: currentDate.text = today.getDate(); This action is used to set the information that's displayed in the currentDate text field. It uses the getDate() method, which will return a numerical value between 1 and 31, depending on the date associated with the Date object. Since we want to use the numerical value returned in this circumstance, we don't need to use an array to convert the information to a string value (as discussed in the previous two steps). -
Add the following line of script at the end of the current script: currentYear.text = today.getFullYear(); This action is used to set the information that's displayed in the currentYear text field. It uses the getFullYear() method, which will return a numerical value representing the full year of the date associated with the Date object (for example, 2002). Once again, since we want to use the numerical value returned in this circumstance, we don't need to use an array to convert it to a string value. -
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.  -
Close the test movie and save your project as makeMyDay2.fla. We will continue building on this exercise in the lessons that follow. |
