|
Displaying the Month, Day, and
Year
Introduction
The aim of
this tutorial is to cover various methods of the Date Object as well as
using Arrays.
1.
Start a new, blank file (at least 300 x 150 - width by height
on the Movie panel) and save it as "mydate.swi"
Setting
up the Text
2.
Insert a Text object (Insert | Text). Open the Text panel and change it
to a Dynamic text field. Select the font, font color, and font size that
you want to use, and type "September 30, 2004" on the Text panel.
This will be used as a guide for resizing the text field so that every
date will be displayed without wrapping. At the top of the Text panel,
give this text object the name "myDate" (without quotes) and
make sure to select the 'Target' option.
3.
Open the Transform panel and select the 'Resize' option. Click on the
white handle on the right side of the text object (in the Layout panel)
and drag it to the right to resize its width. Make sure that the text
field is wide enough to hold our entire date display.
4.
Select the "myDate" text object from the Outline panel and group
it as a sprite (Modify Menu | Grouping | Group as Sprite). Name the sprite
"dateDisplay" on the Sprite panel.
Creating
an Array to Display the Month
5.
Make sure the Sprite "dateDisplay" is selected in the Outline
panel then open the Script panel.
Note:
When using the getMonth() method for the Date object, an integer between
0 and 11 will be returned (0 for January, 11 for December). To convert
this value into a string (eg, "January", "February",
etc.) we will use an Array.
6.
Add an onLoad event to this Sprite (Add Script | Events | Frame | onLoad).
7.
Add a Name=Expr statement to the onLoad event (Add Script | Statements
| Name=Expr). In the 'Name' field, type in "month" (no quotes)
and in the value field below the Operator type in "new Array()"
(no quotes). This will create an empty Array Object.
8.
Add an Evaluate statement under the previous Name=Expr statement (Add
Script | Statements | Evaluate). In the field at the bottom, type in (exactly
as shown): month[0] = "January"
Note:
This will assign the string "January" to the first position
in the Array (which is defined by the index value of zero).
9.
Select the previous Evaluate statement in the Script panel and press CTRL+C
to copy it, then press CTRL+V eleven times (which will give one statement
for each month). At this point, the Script panel should appear similar
to this:
10.
Select the second Evaluate statement (underneath the first instance of
month[0] = "January" statement) from the list on the Script
panel, and increase the number in the square brackets by one and change
the text to the next month "February". So, this statement should
now appear like this: month[1] = "February"
11.
Go down through the list of statements increasing the number in the brackets
by one more than the statement before it (until you get to 11) and change
the string to the next month. When you are finished, the Script panel
should appear similar to this:
Creating
the Date Object
12.
Add an onEnterFrame event to the Sprite (Add Script | Events | Frame |
onEnterFrame).
13.
Add a Name=Expr statement to the onEnterFrame event (Add Script | Statements
| Name=Expr). In the 'Name' field, type in "now" (no quotes),
and in the value field below the Operator type in "new Date()"
(no quotes). This will create a new Date Object.
Displaying
the Date in the Dynamic Text Field
14.
Add another Name=Expr statement under the previous one (Add Script | Statements
| Name=Expr). Use the drop-down menu next to the 'Target' field and select
"myDate" from the list. In the 'Name' field type "text"
(without quotes). In the value field below the Operator, we will display
the text in our desired format. In the value field, type (exactly as shown):
month[now.getMonth()] add " " add now.getDate() add ",
" add now.getFullYear()
Note:
You can alter the order of the methods from the last part of Step 14 to
change the way the date is displayed, for example - if you wanted to display
the date as something like "30 September, 2004", you would change
it to:
now.getDate() add " " add month[now.getMonth()] add ",
" add now.getFullYear()
Summary
An array
object was created to convert the integer value of the getMonth() method
into a String value corresponding with the correct month. When "now.getMonth()"
is converted to an integer (eg, May = 4) the corresponding index position
in the array is displayed (eg, month[4] = "May").
The Completed Script for the "dateDisplay" Sprite:
onLoad
() {
month = new Array();
month[0] = "January";
month[1] = "February";
month[2] = "March";
month[3] = "April";
month[4] = "May";
month[5] = "June";
month[6] = "July";
month[7] = "August";
month[8] = "September";
month[9] = "October";
month[10] = "November";
month[11] = "December";
}
onEnterFrame() {
now = new Date();
myDate.text = month[now.getMonth()] add " " add now.getDate()
add ", " add now.getFullYear();
} |
|
