• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Workshop Chapter 10. Creating Timers > Creating a Digital Timer

Creating a Digital Timer

Here are the steps to follow to create a digital timer:

Create a new Movie Clip symbol called Timer. Basically, we want to make a clip that we can place in any other movie.

Inside Timer (where you’ll stay for the rest of this workshop chapter), create a Dynamic Text field with an instance name of display. Make the field wide enough to accommodate about 10 characters based on whichever size of font you use. I recommend the font _typewriter or another monospace font because fonts that have variable widths make the timer jump around as it keeps changing.

Draw a small box for the Stop button and draw a triangle for the Play button, and leave them as shapes (see Figure W10.2).

Figure W10.2. The square will become the Stop button and the triangle will become the Play button.

Draw a square shape that will become an invisible button. Make it an invisible button by first converting it to a button and then moving the square shape (from the Up frame of the button) to the Hit frame of the button. Come back to the Timer clip and create two instances of the invisible button. Place them on top of the square (for Stop) and triangle (for Play). Finally, give the two invisible button instances names of stop_btn and play_btn, respectively (see Figure W10.3).

Figure W10.3. Invisible buttons (stop_btn and play_btn) are placed on top of plain shapes.

Now we can spend some time in the frame script for the Timer symbol. First, let’s just try to make the display update as the movie plays. Type the following code into the frame script:


Naturally, this lacks several features, but it succeeds in continuing to change the display field’s text property. Because I know we’ll want Timer to turn on and off, we’ll be assigning the onEnterFrame callback to null (when we want it to stop). It will be slightly easier if we change the preceding code to point to a function (rather than defining it inline, as shown).

Change the code to read

function updateTimer(){

This is really the same thing, but this way it will be easy to change the updateTimer() function—as we have a lot to do there.

Rather than walking through how to revise the updateTimer() function, just use this code as-is and I’ll explain it below:

 1 function updateTimer () {
 2     elapsedTime = getTimer(); 
 3   // hours: 
 4   var elapsedH = Math.floor(elapsedTime/3600000); 
 5   var remaining = elapsedTime-(elapsedH*3600000); 
 6   // minutes: 
 7   var elapsedM = Math.floor(remaining/60000); 
 8   remaining = remaining-(elapsedM*60000); 
 9   if (elapsedM<10) {
10     elapsedM = "0"+elapsedM; 
11   } 
12   // seconds: 
13   var elapsedS = Math.floor(remaining/1000); 
14   remaining = remaining-(elapsedS*1000); 
15   if (elapsedS<10) {
16     elapsedS = "0"+elapsedS; 
17   } 
18   // hundredths: 
19   var elapsedFractions = Math.floor(remaining/10); 
20   if (elapsedFractions<10) {
21     elapsedFractions = "0"+elapsedFractions; 
22   } 
23   // build the nice display string: 
24   display.text=elapsedH+":"+elapsedM+":"+elapsedS+":""+elapsedFractions; 
25 }


This code looks much worse that it is. Line 2 places the elapsed milliseconds (getTimer()) into our elapsedTime variable. (Actually, we’ll come back to adjust this line later.) Then, line 4 calculates the full hours that have elapsed by placing into the variable elapsedH just the integer portion of elapsedTime divided by 3600000 (the number of milliseconds in an hour). Then we have to calculate the remaining milliseconds. Suppose that 2 hours and 10 minutes have passed. If you know that there have been 2 whole hours, you need only the remaining 10 minutes’ worth of milliseconds to calculate the remainder. The remaining=elapsedTime - (elapsedH*3600000) statement in line 5 subtracts the total number of hours just calculated (elapsedH) multiplied by the number of milliseconds in an hour from the original elapsedTime. For the remaining values—elapsedM, elapsedS, and elapsedFractions—first we calculate how many full minutes or seconds or fractions remain, and then we subtract that number of milliseconds from the remaining variable so that each subsequently smaller value is based on what’s leftover. In addition, on lines 9, 15, and 20, we check each value; if the value is less than 10, we insert a 0 in front of the value. (By the way, you could probably figure out a way to use the % modulo operator to calculate the remaining variable in all the preceding cases.) Finally, a nice string is fashioned with colons in line 25, where the display field’s text property is assigned.

Timer should work pretty well at this point. However, it starts timing from the start only. Let’s write some callback functions for the onPress events for the two buttons.

To let the user control things with the buttons, cut the line of code added in step 6 (this.onEnterFrame=updateTimer) and in its place type this code:

play_btn.onPress=function() {

The idea is that when the user clicks the button play_btn, the onEnterFrame callback will point to the updateTimer function. However, it fails because this is the button itself. You must change it to read:

play_btn.onPress=function() {

Next, let’s get the Stop button working:

stop_btn.onPress=function() {

Notice that the second line will make the display appear cleared when the user presses the Stop button. (Otherwise, the Stop button would behave more like a Pause button.) It works pretty well now except when the user first clicks the Play button, Timer shows how much time has elapsed since the beginning of the movie—not from the time the button was pressed. (You can test the movie and wait a few seconds before pressing Play to see what I mean.)

The problem with the updateTimer() function is that it reports the elapsed time from the start of the movie. We want to know how much time has passed since the Play button was pressed. All we need to do is store in a variable the time at which the Play button is pressed and subtract that from the calculations in updateTimer(). There are two steps: First, change the onPress callback for the play_btn button to read as follows:

play_btn.onPress=function() {

Next, change the first line of code inside the updateTimer() function (that currently reads elapsedTime = getTimer()) to read as follows:

elapsedTime = getTimer()-startTime;

Now the updateDisplay() function will base its calculations on the amount of time that has passed since the user pressed the Play button. It’s still not finished, though. Now the Stop button fails to start things over. That is, if the user clicks Play, then Stop, then Play again, the timer appears to pick up from when the Stop button was pressed. To remedy that, add this line of code to the Stop button’s callback:


Okay, it finally works without fail. But I want more features! We basically had a “pause” feature by mistake, so it’d be nice if the user could pause and then resume. All we need to do is make a new button and use the pause code placed on the Stop button by mistake. Let’s do that.

Create a new shape for the Pause button and place an instance of the invisible button on top of it. Give the invisible button an instance name of pause_btn. Finally, place this code in the frame script:

pause_btn.onPress=function() {

Pretty simple, eh? At this point, I think a usability issue is worth addressing. I don’t think the user should be able to pause unless Timer is currently timing, or play unless Timer is currently paused or stopped. It’s really quite easy. We’ll put both blocks of the code from the Pause and Play buttons into one button. We’ll need a variable to tell us whether Timer currently paused so that we know which block to execute. We’ll get to the graphics in a second, but first let’s just trash the Pause button and make the Play button really a Play/Pause button.

Trash the invisible pause_btn instance and remove the callback for pause_btn’s onPress event. Here is the revised code for the play_btn’s callback:

1 play_btn.onPress=function() {
2   paused=!paused; 
3   if (paused){
4     _parent.onEnterFrame=null; 
5   }else{
6     _parent.onEnterFrame=updateTimer; 
7     startTime=getTimer()-elapsedTime; 
8   } 
9 }

This code reflects both the Pause button’s code (line 4) and the Play button’s code (lines 6 and 7). They just appear exclusively based on the value of the variable paused. I just made up the paused variable, so we have not only to toggle its value every time the user presses Play/Pause (line 2), but we need to set it to true both initially and any time user presses the Stop button.

Instead of having the same code in two places (namely, everything the Stop button does), let’s take the code from the Stop button and put it in a function that we can also call at the start of the movie. Change the stop_btn’s onPress callback to read:

stop_btn.onPress=function() {

Then create the init() function as follows:

function init(){

This is the same as before, with the addition of the paused variable.

Finally, let’s trigger the init() function at the very start. Outside of any functions, just type the following:


Now we just have to make the Pause/Play button look like it’s toggling. Select the triangle shape (not the Play button) and convert it to a Movie Clip. Double-click this new clip and insert a new keyframe in frame 2. Draw two vertical rectangles for the Pause button’s look. Go back to the Timer clip and give the instance of this new symbol the name pp (for “Pause/Play”).

Finally, add the following line of code to the init() function:


This way, the clip will appear to be stopped on frame 1 initially (and any time the user presses the Stop button).

Finally (and I promise this is the last “finally”), place the following line of code in front of everything else inside the play_btn’s onPress callback:


The idea is that when the user presses Play, if paused is true, the pp clip will jump to frame 2 (true is evaluated as 1). Otherwise, the clip jumps to frame 1. You could certainly write a more verbose solution involving an if statement, if you wanted.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint