Keeping Time with TimerEvent

All the events explored in this chapter so far rely on audience input. There are other types of events that occur as part of a process and don't involve audience input. A good example is the TimerEvent, which triggers an event when a specified amount of time has passed. Suppose you're developing a quiz and you want to give students 30 seconds to answer each question. You could use a TimerEvent to move to the next question every 30 seconds. Sounds merciless, doesn't it?

Here's an example that's not quite so cruel. All it does is change the text on the screen after a certain interval. Open a new document, and then add a TLF read-only text field to the stage. Put some placeholder text in the field, like the word "blank." In the Properties panel, name the dynamic text field tfTimerText. Using ActionScript, you can create a Timer object. Using the properties of the timer object, you can set it to trigger an event after a certain amount of time has passed. This example uses the event to change the text in the dynamic text box. Initially, it says, "It's not yet time." The color of the type is blue. After the timer event, the text reads "Now it's time!" as shown in Figure 13-12, and the color of the type changes to red.

In this example, a timer event is used to change the text displayed in a dynamic text field.

Figure 13-12. In this example, a timer event is used to change the text displayed in a dynamic text field.

1   var timer:Timer = new Timer(1000,3);
2
3   tfTimerText.text = "It's not yet time.";
4   tfTimerText.textColor = 0x0066FF;
5
6   timer.addEventListener(TimerEvent.TIMER_COMPLETE, timerCompleteListener);
7   timer.start();
8
9   function timerCompleteListener(evt:TimerEvent):void
10  {
11      tfTimerText.text = "Now it's time!";
12      tfTimerText.textColor = 0xFF0000;
13  }

You can't just drag a timer out of the Tools palette like a circle or a text box, so you have to use ActionScript code to create a new object. That's exactly what the code in line 1 does. From left to right it creates a variable called timer (lowercase t) which is of the data type Timer (uppercase T). The = new Timer portion of the line creates the timer object. The numbers inside of the parentheses are the parameters you use to set the timer. The first number sets the delay property, and the second number sets the repeatCount property. The ActionScript Timer measures time in milliseconds, so 1000 equals a second. With repeatCount set to 3, the timer waits 3 seconds before triggering the TIMER_COMPLETE event. Setting these two numbers is sort of like winding up a kitchen timer to a specified interval.

In line 3, a new string of characters is displayed in the text box: "It's not yet time." The following line sets the color of the text to blue. If you've read from the beginning of this chapter, line 6 probably looks familiar. It registers the event listener called timerCompleteListener. As you can probably guess, line 7 starts the countdown. Lines 9 through 13 are the event listener for TIMER_COMPLETE. The function displays the new message in the text box, "Now it's time!" And it changes the type to red for added dramatic effect.

Note

You can download the Flash document for this example, 13-8_Timer_Event.fla, from the Missing CD page at www.missingmanuals.com/cds.