Creating a Digital Clock
1. Open a new, blank file and save it
as "myclock.swi".
2. First, let's add a Dynamic textfield
to hold the clock's data (Insert | Text). Type "12:59:59 PM"
into the text field to use as reference for resizing the text area. In
the 'Name' field, give this text object the name "myClock" and
select the 'Target' option. Open the Text panel and change the type of
textfield to Dynamic.
3. If you are not using a device font,
then you will need to embed the font outline for the font you are using.
By default, "All Characters" is selected; however, since this
is a basic digital clock - it is not necessary to embed the entire font.
By selecting only the characters that will be used for this clock - it
will reduce the size of your exported .SWF file.
4. Press the "abc/123" button
underneath the font name to open the Character Options. Select the option
"Only These Characters". De-select everything except "Digits
(0...9)" and select the option "These Characters". Type
":ampmAMPM" in the space beneath 'These Characters', then press
the 'OK' button to accept these changes.
5. If the text appears on more than one
line in the Layout panel (meaning, if the text has wrapped), then open
the Transform panel and select the "Resize" option. Then, in
the Layout panel, click the white handle on the right side of the text
object and drag to the right to increase the width of the text area.
6. Select the Text Object in the Outline
panel and group it as a sprite (Modify Menu | Grouping | Group as Sprite).
Name this sprite "clock" on the Sprite panel. You should now
have a Sprite named "clock" on the Outline panel, with a dynamic
text object inside it named "myClock".
Scripting the Clock
7. Select the Sprite "clock"
in the Outline panel and open the Script panel.
8. Add an onEnterFrame event to this
Sprite (Add Script | Events | Frame | onEnterFrame). Then, add a Name=Expr
statement to the onEnterFrame event (Add Script | Statements | Name=Expr).
Type "now" into the 'Name' field (without quotes), and type
"new Date()" into the value field below the Operator (also without
quotes). This will create a new Date Object.
9. Next, we will create several variables
to hold the values of the hour, minute, seconds, and the AM/PM extension.
10. To make this process go a bit faster,
we can simply select the "now = new Date()" action in the Script
panel, use CTRL+C to copy the script then use CTRL+V to paste it. Repeat
this process until there is a total of 5 copies of this script.
11. Select the second "now = new
Date()" script from the list and change the value in the 'Name' field
to "hour" (without quotes), and change the value to "now.getHours()"
(again, without quotes).
12. Select the next script and change
the value in the 'Name' field to "minutes" (no quotes) and the
value to "now.getMinutes()" (no quotes).
13. Select the next script and change
the value in the 'Name' field to "seconds" (no quotes) and the
value to "now.getSeconds()" (no quotes).
14. Select the final script and change
the value in the 'Name' field to "extension" (no quotes) and
the value to the string "AM" (with quotes).
Note: At this point, we have everything
we need to accurate display the correct time in the dynamic text field;
however, there is more work to do in order for it to look like a real
clock. Right now, it will display single digit values (eg, "5"
minutes), and we want it to maintain double-digits (eg, "05"
minutes). To accomplish this, we need to add several conditional statements
to alter the value of the variables.
15. Make sure the last script in the
onEnterFrame event is selected, and add an IF conditional (Add Script
| Conditional | IF). In the value field for the IF statement, type "hour
>= 12" (without quotes). Next, add a Name=Expr statement (Add
Script | Statements | Name=Expr). In the 'Name' field, type "extension"
(no quotes), and in the value field below the Operator type "PM"
(with quotes). This means that if the current hour is greater than or
equal to12 (noon) the extension will be set to "PM"; otherwise,
it will remain set to "AM" as we defined earlier.
16. With the last script selected (extension
= "PM"), add another IF conditional ( Add Script | Conditional
| IF). In the value field type in "hour > 12" (no quotes).
Then, add a Name=Expr statement (Add Script | Statements | Name=Expr).
In the 'Name' field, type in "hour" (no quotes) and in the value
field type in "hour - 12" (no quotes). This conditional is inside
the one from Step 15 and will not be executed unless the current hour
is either 12 or greater than 12. What this script does is maintain a 12-hour
clock (eg, 5 PM is displayed as "5") - If the current hour is
greater than 12, then it automatically subtracts 12 from that number.
If you would prefer to display a 24-hour clock (eg, 5 PM is displayed
as "17"), then simply omit this step completely.
17. In order to add another script outside
the IF conditional, you need to select the curly brace that closes this
condition (as shown below):
18. We still have one more conditional
to add for the hour to appear correctly. Since the getHours() method will
produce a value of zero when it is midnight (0 hours), we need to display
it as "12" instead. So, after following Step 17 to get out of
the previous conditional, add a new IF conditional (Add Script | Conditional
| IF). In the value field type in "hour == 0" (no quotes). Next,
add a Name=Expr statement (Add Script | Statements | Name=Expr). In the
'Name' field type "hour" (no quotes) and in the value field
type "12" (no quotes).
19. Now that we have the hour displaying
correctly, we need to make sure that the minutes and seconds are both
displayed as double-digit values at all time (eg. when the minute or second
is less than 10).
20. Once again, follow Step 17 to get
out of the previous IF conditional, and add a new IF conditional statement
(Add Script | Conditional | IF). In the value field type in "minutes
< 10" (no quotes). Then, add a Name=Expr statement (Add Script
| Statements | Name=Expr). In the 'Name' field type in "minutes"
(no quotes) and in the value field type in (exactly as shown): "0"
add minutes
21. We need to do the same for the seconds.
First, get out of the previous IF conditional, then add a new one. In
the value field for this new IF conditional, type "seconds < 10"
(no quotes), then add a Name=Expr statement. In the 'Name' field type
in "seconds" (no quotes) and in the value field type (exactly
as shown): "0" add seconds
Note: For the value of the Name=Expr
statement in both Step 20 and Step 21, the zero ("0") needed
to be enclosed in quotes to make it a string rather than an integer. Without
the quotes, it would have added the values together rather than adding
the "0" at the beginning of the number.
Putting it all Together
22. The only thing left to do is to put
all the values together in a single string so that it can output to our
dynamic text field.
23. Use the instructions from Step 17
to get out of the last IF conditional we added, and then add a Name=Expr
statement (Add Script | Statements | Name=Expr). Use the drop-down menu
next to the 'Target' field and select the text field "myClock",
and type "text" (no quotes) into the 'Name' field. In the value
field under the Operator we will create the string (Note: You can alter
this final step if you desire a different format for displaying the time).
In this value field, type (exactly as shown):
hour add ":" add minutes add ":" add seconds add "
" add extension
24. Go back to the Layout panel and press
Play to test your new digital clock!
The Completed Script for the "clock" Sprite:
