10 Replies Latest reply on Nov 30, 2017 4:44 AM by toveskj

    Creating a counting up total in Animate

    oxfordalumni

      I'm still relatively new to using Animate (and particularly the action coding).  I want to create a counting up total, like this one CountUp.js

       

      I've tried to create it using the code below but it either comes up with the total number and nothing else, or an error message "#1120: Access of undefined property countUp", any help would be much appreciated!!

       

      var countUpInc:Number = 6429;

      var totalSecs = 304709;

      var countUp = totalSecs;

       

      counter.text = countUp;

       

      var time:Timer = new Timer(countUpInc * 1000);

       

      time.addEventListener(TimerEvent.TIMER, tick);

       

      function tick(e:TimerEvent):void {

       

        if(CountUp == 304709) {

             trace("count up complete");

             time.stop();

             countUp = totalSecs;

        } else {

             countUp = countUp + countUpInc;

             counter.text = countUp;

        }

      }

        • 1. Re: Creating a counting up total in Animate
          JosephLabrecque Adobe Community Professional

          Hello. Use the following code:

           

          var countUpInc:int = 100;

          var totalSecs:int = 30000;

          var countUp = 0;

           

           

          var countTimer:Timer = new Timer(countUpInc);

          countTimer.addEventListener(TimerEvent.TIMER, timerHandler);

          countTimer.start();

           

           

          function timerHandler(e:TimerEvent): void {

            if (countUp == 304709) {

            countTimer.stop();

            countUp = totalSecs;

            } else {

            countUp = countUp + countUpInc;

            counter.text = countUp;

            }

          }

           

          Note that your initial capitalization of "CountUp" was causing an error and you must have a dynamic textfield on the stage with an instance name of "counter". I also modified some of your variables for clarity.

          • 2. Re: Creating a counting up total in Animate
            oxfordalumni Level 1

            Thank you so much Joseph that works perfectly!

             

            I have one question, is there a way to make the numbers tick by faster, I wanted it to tick up to the final number within 2 seconds?

             

            Thanks again for all your help.

            • 3. Re: Creating a counting up total in Animate
              JosephLabrecque Adobe Community Professional

              Sure, just lower countUpInc - it's the interval that the timer ticks.

              • 4. Re: Creating a counting up total in Animate
                no_spec Level 1

                JosephLabrecque

                Hi, I just found your timer code and I'd like to understand the variables a bit better. is there a resource you'd recommend?

                • 5. Re: Creating a counting up total in Animate
                  JeuWert

                  Hi Joseph

                   

                  This is great, thank you!

                   

                  I am also new to this - at least at action coding - can I ask how you can add your code in an HTML5 canvas?

                   

                   

                  Best regards

                  Jesper Andersen

                  • 6. Re: Creating a counting up total in Animate
                    designerwolfe62510

                    Hi!

                     

                    Warning: I'm *super* new to code ...

                     

                    I'm trying to use this with a HUGE number: 3,013,499 to be exact -- WITH the commas. Any way to do that with by modifying the code? And I think it might be impossible, but any way to tick up to that number from 0 within less than 15 seconds? I tried breaking apart the number into three sections, but then I get errors within the action script.

                     

                    Thanks!

                    Jodi

                    • 7. Re: Creating a counting up total in Animate
                      Colin Holgate MVP & Adobe Community Professional

                      I imagine you know that number is 47 × 97 × 661, all of which are prime numbers.

                       

                      The counting up to the number should be a reasonably easy for loop or a timer. The adding the commas might be tougher, but there is a NumberFormatter class:

                       

                      Adobe Flash Platform * Formatting numbers

                       

                      You would feed it the number from the counter function, and it would create the commas version, which you would most likely put into a text field for the user to see.

                      • 8. Re: Creating a counting up total in Animate
                        designerwolfe62510 Level 1

                        Thank you *so* much for your response, Colin.

                         

                        I am truly a novice with action script. Can't emphasize that enough, ha ha! I've always been able to get by manually creating simple 2D animations right within the timeline, but this request from the client has stumped me.

                         

                        Right now I've got the following code for my Instance ("Callers" -- the number of callers who contacted an agency's call center in 2016). It works great, but it takes about 10 minutes to tally to 3,013,499, and I need it to get there in about 15 seconds, It also doesn't display the commas. I'm not sure how to speed this up! Also, I have no idea where to insert the NumberFormatter class into the script ... Can you help me modify the code?

                         

                        var countUpInc:int = 1;

                        var totalSecs:int = 15;

                        var countUp = 0;

                         

                         

                        var countTimer:Timer = new Timer(countUpInc);

                        countTimer.addEventListener(TimerEvent.TIMER, timerHandler);

                        countTimer.start();

                         

                         

                        function timerHandler(e:TimerEvent): void {

                          if (countUp == 3103499) {

                          countTimer.stop();

                          countUp = totalSecs;

                          } else {

                          countUp = countUp + countUpInc;

                          Callers.text = countUp;

                          }

                        }

                         

                        Utterly grateful for your time and guidance!

                         

                        Jodi

                        • 9. Re: Creating a counting up total in Animate
                          Colin Holgate MVP & Adobe Community Professional

                          Here is your script with the number formatter bits added:

                           

                          var nf:NumberFormatter = new NumberFormatter("en-US");

                          var countUpInc: int = 1;

                          var totalSecs: int = 15;

                          var countUp = 0;

                          var countTimer: Timer = new Timer(countUpInc);

                          countTimer.addEventListener(TimerEvent.TIMER, timerHandler);

                          countTimer.start();

                          function timerHandler(e: TimerEvent): void {

                            if (countUp == 3103499) {

                            countTimer.stop();

                            countUp = totalSecs;

                            } else {

                            countUp = countUp + countUpInc;

                            Callers.text = nf.formatNumber(countUp);

                            }

                          }

                          1 person found this helpful
                          • 10. Re: Creating a counting up total in Animate
                            toveskj

                            Hi. I found this answere, but I need more background to make it work.

                             

                            I'm really new to Animate, and I am making a animated donut chart and I want the percentages to count up from 0 to 50.

                             

                            Do I wirte something in the dynamic textbox before i make it a movie clip and put the action code on it? And in what frame should I Put the code. I want the countdown to start from 0 at the same time as the donut chart fills up and stop at 50 when its full. Do I need code in more frames than one?

                             

                             

                            Best regards
                            Tove