4 Replies Latest reply on Feb 24, 2010 4:36 PM by Rick Gerard

    How to make a 60 second countdown timer

    Chris Lowry Level 1

      Hi there.


      Trying to make a clock that counts down from 60 seconds to 0. Displaying it exactly like the 60, 59 ,58, etc.


      How do I do this. I've played with Effect>Text>Number, but I don't get it.


      Anyone wanna give me a clue?



        • 1. Re: How to make a 60 second countdown timer
          Todd_Kopriva Level 8

          There are some alternatives to using the Numbers effect listed on this page.


          There are also several useful pages that come up with this search.

          • 2. Re: How to make a 60 second countdown timer
            Rick Gerard Adobe Community Professional & MVP

            You could also apply the following expression to a Text layer's Source Text property:



            st = 60;
            t = st - time;
            c = timeToTimecode(t);


            The first line defines the st variable to 60 seconds.

            The second line defines the t variable as the start time (st) minus the composition time.

            The third line defines the c variable by converting "t" to timecode.


            The last line prints c


            The result at the first frame of the composition is 00;01;00;00

            The next frame would be 00;00;59;00 providing the composition is running at 30 frames or 29.97 fps.


            You can use the mask tools to hide the frames counter. If your comp is running at a different frame rate you can set the timecode base to any value by writing the third line like this: (this is for 24 fps)



            c = timeToTimecode(t,timecodeBase = 24);


            Your counter will work well with monospaced fonts. The numbers will jump around with most other fonts because the kerning will be changing.


            If your counter needs to start at 60 then just create another text layer and cut to the countdown when it starts. That's a lot less work than writing an expression that will do it and still count frames.


            I hope that this helps.

            • 3. Re: How to make a 60 second countdown timer
              A. Cobb Level 3

              You can also make it work with proportional fonts.  To do so, set the font size to 0.1, add a text animator with scale and tracking properties, set the scale property to a very high number to compensate for the tiny font size (say, 50000) and set the tracking to a value that gives you the spacing you want.  This effectively turns the proportional font into a fixed-width font, so kerning goes out the window, and it will probably make a typographer somewhere cry.

              • 4. Re: How to make a 60 second countdown timer
                Rick Gerard Adobe Community Professional & MVP

                Another option would be to make your count down timer count in tenths of a second. The expression would look like this:



                st = 60;
                t = st - time;
                t1 = Math.floor(t);
                t2 = t.toFixed(1).substr(-2);
                t1 + t2


                Here's the explanation.


                Line 1 defines the start time (st) as 60 seconds.

                Line 2 is the same as above. The start time is subtracted from the composition time to give us a variable "t".

                Line 3 defines the seconds variable by rounding the time of the composition to a whole number for the variable t1.

                Line 4 defines the variable t2 as tenths by taking the time and fixing it to a single decimal place (1) then setting a period or decimal point 2 spaces back (-2). If you want to count by hundredths just change the (1) to a (2) and the (-2) to a (-3).


                Line 5 prints the value of t1 and then t2 in a single line with no spaces.


                There you go. A simple expression based countdown timer that count in seconds rounded to the nearest tenth.


                BTW, the font trick suggested by A. Cobb sounds like a neat trick. I'll have to give it a try some day.