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

Workshop Chapter 10. Creating Timers > Creating an Analog Timer

Creating an Analog Timer

Turning the digital timer you just made into an analog timer is little more than adding a few graphics. In addition to a few clips (for the arms of the clock’s face), we’ll need to translate the values calculated in the updateTimer() into degrees of rotation. It’s an easy task! We’ll use the Sound object for some “clicking” sound effects.

Let’s start by drawing some graphics in the Timer symbol. Delete the display text field. For the clock’s face, draw a large circle with no fill. If you want “hash marks” at 30-degree increments (see Figure W10.4), you can add them, but it is not necessary. Convert the entire shape to a Movie Clip called Face (Be sure to use the center registration option.)

Figure W10.4. The circle that will become the stopwatch face can include hash marks every 30 degrees.

While still inside the Timer symbol, draw a vertical line with a thick stroke. Convert the line to a Movie Clip called Hand—but this time, select the bottom-middle option for registration (see Figure W10.5).

Figure W10.5. The bottom-middle registration point will make the hand rotate like a regular clock hand.

Make a total of four instances of the Hand symbol. Give them instances names of h, m, s, and f, respectively.

Snap the bottom of the h clip to the center of the instance of the Face symbol. Adjust the clip’s length by scaling it so that it’s a little longer than the radius of the instance of Face. In order not to accidentally move this instance, send it to the back by choosing Modify, Arrange, Send to Back.

Snap the bottom of the m clip to the center of the instance of Face and adjust the length of the clip so that it’s about the same length as the radius of the instance of the Face symbol. Use the Properties panel to tint this instance so that you can keep the different hands straight. Send this clip to the back.

Snap the s clip to Face in the same way as you did the m clip and send it to the back.

Rather than snapping the f clip to the center of the instance of the Face symbol, first make a copy of the Face symbol. Reduce the scale of this copy and place it on top of the larger instance of Face (see Figure W10.6).

Figure W10.6. The fractional seconds will be displayed on the smaller instance of the Face symbol.

Believe it or not, we’re almost done. We’re done building all the graphics; we just need to translate the values calculated in the updateTimer() function to _rotation values for the various hand clips.

Inside the updateTimer() function, remove or comment out each if statement. Remember that these if statements add a 0 in front of values less than 10. We’ll need numbers, not strings, to calculate the rotation for the clock face. Remove or comment out the following parts of the updateTimer() function:

if (elapsedM<10) {
  elapsedM = "0"+elapsedM; 
if (elapsedS<10) {
  elapsedS = "0"+elapsedS; 
if (elapsedFractions<10) {
  elapsedFractions = "0"+elapsedFractions; 

Also, in the updateTimer() function, remove the line where display is assigned and replace it with these three lines:

f._rotation= elapsedFractions*3.6;

We multiply minutes and seconds by 6 based on the fact that there are 60 of each per 360 degrees: 360/60 is 6. Try the what-if number 30 for minutes: 30*6 is 180, and that’s exactly how many degrees we need the minute hand to rotate on the circle of the clock. Because one revolution should equal 12 hours, I divided 360 by 12 to get 30 (that is, how many degrees per hour). In the case of fractions that are 1/100 of a second, consider that we want the f hand to go 360 degrees every second. Every 1/100 of a second must be multiplied by 3.6 or 360/100 because it takes 100 hundredths to make a whole second, or a whole circle in this case.


At this point, the movie works pretty well, but I know that on fancy stopwatches, the fractional second hand precisely displays a round fractional number. On the small clock face, the hand we’ve built for fractional seconds appears accurately, but the hand can often appear in odd locations, such as between hash marks. Start and pause the timer a few times to see what I mean (see Figure W10.7). We can’t just change the hash marks because we’d need 100 marks around the circle. Even if we did, the hand wouldn’t touch each one because screen updates won’t appear that frequently. Even if you cranked the frame rate up to 100 fps, it still wouldn’t work.

Figure W10.7. The fractional seconds displayed don’t always correspond to the hash marks on the small clock face.

To address the fractional seconds issue, change the line in the updateTimer() function that assigns the f clip’s _rotation to read as follows:

f._rotation= Math.round(elapsedFractions/10) * 36;

With this version of the formula, we’ll always find the closest tenth of a second and set the rotation to 36 times that tenth because there are 10 36-degree units in a circle. The only problem now is that your hash marks may not represent tenths of a second. You can either make another version of the Face symbol and move the hash marks to every 36 degrees, or change the expression to this version:

f._rotation= Math.floor(elapsedFractions*.12) *30;

This version first calculates a round number of one-twelfth seconds and then multiplies by 30, which is the number of degrees in the hash marks added in step 1 to match our standard clocks with 12 hours per revolution.

One last touch is to modify the init() function to look like this:

function init(){

To make things interesting, let’s add some audio for the seconds and fractional seconds. To do these next steps, you’ll need one very short sound clip such as a click sound. (I included one in the downloadable version of this workshop available at www.phillipkerman.com/actionscripting/.)

We can use the Sound object to make the click sound play once every second. Import a short sound and give it a linkage identifier name of sec—as you learned to do in Chapter 12, “Objects” (see Figure W10.8).

Figure W10.8. To play the sound using scripting, we have to set its linkage.

Inside the init() function, add these lines of code:

sec=new Sound(this); 

Notice that these statements won’t actually start the sound; they just place the sound inside the variable called sec. The fact that we’re attaching the sound to the this clip means that you can have multiple instances of the Timer clip, each of which can maintain its own sound.

Anywhere inside the updateTimer() function after you set elapsedS, place the following if statement:

if (elapsedS<>lastS){

This statement uses the start() method on the sec instance of the Sound object. It does not call start() every time the updateTimer() function executes because updateTimer() executes many times a second based on the enterFrame event. As long as elapsedS is not equal to lastS (another variable we are introducing), start() starts the sound. It then sets lastS to the value of elapsedS so that the next time this function executes, it will again be able to compare the new elapsedS and see whether it’s truly a new value. Depending on your frame rate, the updateTimer() function will be executed many times per second.

At this point, you could take another, even shorter sound and follow steps 12–14 to make it play 10 times a second, or whatever the fractional display is displaying. However, I think this is a good example of where “faking it” is perfectly acceptable and more believable. We don’t really have to make a sound play every tenth of a second. Instead, we can just record a loop that plays 10 clicks per second. Then, whenever the timer is running, we’ll make that loop play; when the timer is stopped, we’ll stop the sound. You just need a nice looping sound that makes 10 clicks a second when it’s playing.

Import the looping sound and give it an identifier name of loopingClick in the same way you named the sound in step 12.

In the init() function, add the following three lines:

loop=new Sound(this); 

This code simply creates another instance of the Sound object in the variable called loop. The reason we stop it at the end is that the Stop button also triggers the init() function (and we’ll want the sound to stop then).

Now all we have to do make the looping sound start and stop when the user plays or pauses. Change the play_btn’s onPress callback to read as follows:

 1 play_btn.onPress=function() {
 2   paused=!paused; 
 3   if (paused){
 4     _parent.onEnterFrame=null; 
 5     _parent.loop.stop(); 
 6   }else{
 7     _parent.onEnterFrame=updateTimer; 
 8     startTime=getTimer()-elapsedTime; 
 9     _parent.loop.start(0,9999999); 
10   } 
11 }

Notice line 9, where the sound starts (and loops many times) and line 5, where the sound stops.



Not a subscriber?

Start A Free Trial

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