29 Replies Latest reply on Sep 27, 2018 7:30 AM by JoãoCésar

    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 Level 1

                    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 Level 1

                            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

                            • 11. Re: Creating a counting up total in Animate
                              kateh12410789 Level 1

                              how do you actually apply this actions script to an object in adobe animate? Ive spent hours googleing and trying to solve this. See attached, im trying to create a the number values spinning from 0 to the relevant numberScreen Shot 2018-08-08 at 15.21.56.png

                              • 12. Re: Creating a counting up total in Animate
                                JoãoCésar Adobe Community Professional & MVP

                                Hi.

                                 

                                Please try this.

                                 

                                AS3 code:

                                import fl.transitions.Tween;
                                import fl.motion.easing.*;
                                import fl.transitions.TweenEvent;
                                
                                function tweenCount(scope:Object, start:Number, end:Number, duration:Number, ease:Function, updateCallback:Function = null, finishCallback:Function = null):void
                                {
                                    scope.count = 0;
                                    var tween:Tween = new Tween(scope, "count", ease, start, end, duration, true);
                                
                                    if (updateCallback != null)
                                          tween.addEventListener(TweenEvent.MOTION_CHANGE, function():void{updateCallback(scope.count);});
                                
                                    if (finishCallback != null)
                                          tween.addEventListener(TweenEvent.MOTION_FINISH, function():void{finishCallback(scope.count);});
                                }
                                
                                tweenCount(this, 0, 1000, 5, Linear.easeInOut, function(count:Number):void{txt0.text = "COUNTER: " + uint(count)}, function(count:Number):void{trace("txt0 finished at: ", count);});
                                
                                tweenCount(this, 500, 0, 2, Sine.easeInOut, function(count:Number):void{txt1.text = "COUNTER: " + uint(count)}, function(count:Number):void{trace("txt1 finished at: ", count);});
                                
                                tweenCount(this, 20, 15000, 3, Back.easeOut, function(count:Number):void{txt2.text = "COUNTER: " + uint(count)}, function(count:Number):void{trace("txt2 finished at: ", count);});
                                

                                 

                                FLA download:

                                animate_cc_as3_counter_2.zip - Google Drive

                                 

                                I hope this helps.

                                 

                                Regards,

                                JC

                                • 13. Re: Creating a counting up total in Animate
                                  kateh12410789 Level 1

                                  Hi Jc

                                   

                                  Thanks for going to the trouble of responding with such a great answer. I have found design to be a very competitive industry so its great to find someone willing to help.

                                   

                                  I feel so stupid but I still cant get it to work. Im really new to both actionscript and Animate although Ive been on two animate courses now and I feel quite proficient in drawing/animating, the scripting side was never covered in the courses I did.  Im a graphic designer trying to transition into developing for animating so I think im finding it hard to pick up due to my lack of knowledge experience in code.

                                   

                                  I would be exceptionally grateful if you would look at what ive done to see if you can identify what im doing wrong because ive spent all morning and I just cant figure it out! Im sure I will be really embarrassed of my stupidity!

                                   

                                  Animated infographics.zip - Google Drive

                                   

                                  Many thanks

                                   

                                  Kate

                                  • 14. Re: Creating a counting up total in Animate
                                    kateh12410789 Level 1

                                    Ps. help is so hard to come across for animate, ive contacted all the adobe evangelists who havent responded. Im willing to hire you for your help

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

                                      There are a few things wrong, the main one being that JC gave you ActionScript code, and you made your FLA be HTML5 Canvas. If it needs to be HTML5 Canvas quite a few of the lines would be different.

                                       

                                      The other problem is that you added lines where the start value you gave wasn't a number. You have >1000, >300, and ~35. I imagine that was just the text you had in the field, but JC's function needs a Number:

                                       

                                      function tweenCount(scope:Object, start:Number, end:Number, duration:Number, ease:Function, updateCallback:Function = null, finishCallback:Function = null):void

                                       

                                      I changed those lines to remove the > and ~, and made it be an ActionScript FLA, and then things looked like they might be working. There's so much animation going on that it's hard to tell for sure!

                                       

                                      So, first thing to do is say whether it needs to be HTML5 Canvas or not, and if it does JC could modify his code for you.

                                      • 16. Re: Creating a counting up total in Animate
                                        JoãoCésar Adobe Community Professional & MVP

                                        Thanks, Colin! Awesome as always.

                                         

                                        Hey, Kate, like Colin said, the two mains problems is that my code is for AS3 documents and also you tried to use non-numeric characters with numbers where should only be numbers.

                                         

                                        But no problem!

                                         

                                        Let's port that code.

                                         

                                        JavaScript code:

                                        this.tweenCount = function(target, props, changeCallback = null, completeCallback = null)
                                        {
                                            if (!target || !props)
                                                  return;
                                        
                                            if (!props.override)
                                                  props.override = true;
                                            if (!props.wait)
                                                  props.wait = 0;
                                            if (!props.start)
                                                  props.start = 0;
                                            if (!props.end)
                                                  props.end = 1000;
                                            if (!props.ease)
                                                  props.ease = createjs.Ease.linear;
                                            if (!props.duration)
                                                  props.duration = 500;
                                        
                                            target.count = props.start;
                                            createjs.Tween.get(target, {override:props.override}).wait(props.wait).to({count:props.end}, props.duration, props.ease).call(function(e)
                                            {
                                                  if (completeCallback != null)
                                                      completeCallback(e);
                                            }).addEventListener("change", function(e)
                                            {
                                                  if (changeCallback != null)
                                                      changeCallback(e);
                                            });
                                        };
                                        
                                        this.tweenCount(this.txt0, {wait:0,   start:0, end:26,   duration:5000, ease:createjs.Ease.linear},    function(e){exportRoot.txt0.text = String(Math.round(exportRoot.txt0.count));},      function(e){console.log("complete");});
                                        this.tweenCount(this.txt1, {wait:200, start:0, end:120,  duration:2000, ease:createjs.Ease.sineInOut}, function(e){exportRoot.txt1.text = String(Math.round(exportRoot.txt1.count));},      function(e){console.log("complete");});
                                        this.tweenCount(this.txt2, {wait:500, start:0, end:300,  duration:2000, ease:createjs.Ease.sineInOut}, function(e){exportRoot.txt2.text = ">" + String(Math.round(exportRoot.txt2.count));}, function(e){console.log("complete");});
                                        this.tweenCount(this.txt3, {wait:0,   start:0, end:358,  duration:2000, ease:createjs.Ease.sineInOut}, function(e){exportRoot.txt3.text = String(Math.round(exportRoot.txt3.count));},      function(e){console.log("complete");});
                                        this.tweenCount(this.txt4, {wait:0,   start:0, end:1000, duration:2000, ease:createjs.Ease.sineInOut}, function(e){exportRoot.txt4.text = ">" + String(Math.round(exportRoot.txt4.count));}, function(e){console.log("complete");});
                                        this.tweenCount(this.txt5, {wait:100, start:0, end:35,   duration:3000, ease:createjs.Ease.backInOut}, function(e){exportRoot.txt5.text =    "~" + String(Math.round(exportRoot.txt5.count));}, function(e){console.log("complete");});
                                        

                                         

                                        FLA download:

                                        animate_cc_html5_tween_count.zip - Google Drive

                                         

                                        Please notice that I created another FLA. But you only have to copy and paste this code on that same frame. I recommend you to remove your link. Also notice that now the duration is passed as milliseconds (1 second == 1000 milliseconds) and that you have a property to delay the tween call (wait).

                                         

                                        Please let us know if something doesn't work.

                                         

                                        Regards,

                                        JC

                                        • 17. Re: Creating a counting up total in Animate
                                          JoãoCésar Adobe Community Professional & MVP

                                          Another two points:

                                           

                                          - The code above is not formatted the way I really wanted because of limitations of the online editor we have here.

                                          - I'm using anonymous functions (function(){}) but you can pass function references if you wish. Like this:

                                           

                                          this.txt0ChangeHandler = function(e)
                                          {
                                              exportRoot.txt0.text = String(Math.round(exportRoot.txt0.count));
                                          };
                                          
                                          this.txt0CompleteHandler = function(e)
                                          {
                                              console.log("complete");
                                          };
                                          
                                          this.tweenCount(this.txt0, {wait:0, start:0, end:26, duration:5000, ease:createjs.Ease.linear}, this.txt0ChangeHandler, this.txt0CompleteHandler);
                                          
                                          • 18. Re: Creating a counting up total in Animate
                                            kateh12410789 Level 1

                                            It works! It took me  a while to figure it out! There was a problem in my original doc but I copied it all into a new doc and it works perfectly! Cant thank you enough JC and Colin! Later in the animation I have planned another number scroll, so we will see how proficient I can be in recreating it! Thanks so much for helping, so nice to know there are some good guys out there! I hope I can be of help to yourselves or someone else out there some time!JoãoCésar

                                            • 19. Re: Creating a counting up total in Animate
                                              JoãoCésar Adobe Community Professional & MVP

                                              Hey, Kate, this is awesome!

                                               

                                              I'm really glad that it worked and that helped you.

                                               

                                              Have a nice week.

                                               

                                              Regards,

                                              JC

                                              • 20. Re: Creating a counting up total in Animate
                                                kateh12410789 Level 1

                                                Could you help me to understand when to use the different file types in Animate, ive not found a clear answer on this, and the teachers on the courses Ive been on didnt seem to know. Obviously I know that the file type should suit the output destination but for example, if I am creating a logo or infographic sting for social media, I would have thought this would be an HTML5 doc. But what is Actionscript and web GL used for?

                                                 

                                                Thanks

                                                 

                                                Kate

                                                • 21. Re: Creating a counting up total in Animate
                                                  kateh12410789 Level 1

                                                  Additionally, there seems to be loads more possibilities and resources for adobe after effects. Would I be better off using that instead of animate?

                                                  • 22. Re: Creating a counting up total in Animate
                                                    JoãoCésar Adobe Community Professional & MVP

                                                    - If you want to output interactive content to the web, then certainly HTML5 (Canvas) and WebGL documents are the way to go. Just keep in mind that WebGL runtime API for Animate CC is still in version 0.2 and that WebGL may not be available for all web browsers.

                                                     

                                                    WebGL

                                                    WebGL is an open web standard for rendering graphics on any compatible browser, without the need for additional plug-ins. WebGL is integrated completely into all the web standards of the browser allowing GPU accelerated usage of image processing and effects as part of the web page canvas. WebGL elements can be embedded with other HTML elements and composited with other parts of the page.

                                                    Create WebGL

                                                     

                                                    HTML5 Canvas

                                                    Canvas is a new element in HTML5, which provides APIs that allow you to dynamically generate and render graphics, charts, images, and animation. The presence of the Canvas API for HTML5, strengthens the HTML5 platform by providing two-dimensional drawing capabilities. These capabilities are supported on most modern operating systems and browsers.

                                                     

                                                    Essentially, Canvas is a bitmap rendering engine, and the drawings are final and cannot be resized. Furthermore, objects drawn on Canvas are not part of the web page's DOM.

                                                     

                                                    Within a web page, you can add Canvas elements using the <Canvas> tag. These elements can then be enhanced using JavaScript to build interactivity.

                                                     

                                                    (...)

                                                     

                                                    Animate CC enables you to create an HTML5 Canvas document with rich artwork, graphics, animations, and so on. A new document type (HTML5 Canvas) has been added to Animate that provides native support for creating rich and interactive HTML5 content. It means that you can use the traditional Animate timeline, workspace, and tools to create content, but produce HTML5 output. With a few simple clicks, you are ready to create an HTML5 Canvas doc and generate a fully functional output.

                                                    Create HTML5 Canvas documents in Animate CC

                                                     

                                                    - If you want to only output a video, animated GIF or other format that doesn't have interactivity, then AS3 documents are the way to go because they have more features than HTML5 (Canvas) documents.

                                                     

                                                    - If you want to develop native apps or games for mobile and/or desktop devices, then you should you an AS3 document + Adobe AIR as the player.

                                                     

                                                    - If you want a hybrid game or app for mobile and/or desktop devices, then you can use a HTML5 document and wrap your output with services like Adobe PhoneGap or Cocoon.io.

                                                     

                                                    - After Effects certainly has way more resources than Animate for FX and animation, but it doesn't have all the drawing capabilities that Animate has and it cannot output interactive content. A common approach is to use Animate for all the raw characters animation and then export to AE for FX, sounds, editing, and so on.

                                                     

                                                    Please don't hesitate to ask if you still any further questions.

                                                     

                                                    Regards,

                                                    JC

                                                    • 23. Re: Creating a counting up total in Animate
                                                      kateh12410789 Level 1

                                                      Hi JC

                                                       

                                                      Me again!

                                                       

                                                      Ive finished my animation and I am trying to export it in a format that will be suited to use on social media sites and websites. Im getting these errors and when I am exporting to video or movie the counter you created for me doesnt work and only half of the movie is exporting! What am I doing wrong? So fustrated! I was so pleased to have made the animation and now Ive fallen at the last hurdle!

                                                       

                                                      I hope you dont mind helping me again.

                                                       

                                                      Thanks

                                                       

                                                      Kate

                                                       

                                                      Screen Shot 2018-09-06 at 08.38.45.pngScreen Shot 2018-09-06 at 08.40.09.pngScreen Shot 2018-09-06 at 08.44.29.pngScreen Shot 2018-08-14 at 13.57.15.png

                                                      • 24. Re: Creating a counting up total in Animate
                                                        JoãoCésar Adobe Community Professional & MVP

                                                        Hi!

                                                         

                                                        Wow. There's really something going on.

                                                         

                                                        The messages from the three first screenshots are warnings to you regarding to canvas/HTML and web browsers limitations. Because even though Animate is very powerful, when using HTML5 documents it will have to output content that meets the unversal standards and limitations of HTML and the web browsers.

                                                         

                                                        So there are effects/filters not supported or with low compatibility between browsers, motion tweens are published as frame by frame animations, and so on.

                                                         

                                                        Nevertheless, some screenshots show that you're using HTML5 Canvas document. But the last ones are showing errors from AS3 documents. Which type of document are you using?

                                                         

                                                        Anyway, I really advise you to use a AS3 document if your final output is video because AS3 documents support way more features.

                                                         

                                                        Please tell us what you think.

                                                         

                                                        Regards,

                                                        JC

                                                        • 25. Re: Creating a counting up total in Animate
                                                          kateh12410789 Level 1

                                                          Thanks for getting back to me JC, the document is an HTML5 canvas. Is this incorrect for publishing to social media?

                                                          • 26. Re: Creating a counting up total in Animate
                                                            kateh12410789 Level 1

                                                            If I convert to AS3 file, the count ups dont work

                                                            • 27. Re: Creating a counting up total in Animate
                                                              JoãoCésar Adobe Community Professional & MVP

                                                              Is your intended output a video? If it is then you should use a AS3 document because you won't be limited by HTML standards.

                                                               

                                                              About the code, you can use the AS3 version I suggested on comment #13.

                                                              • 28. Re: Creating a counting up total in Animate
                                                                kateh12410789 Level 1

                                                                Hi JC

                                                                 

                                                                I did as you suggested, and I have managed to get it all working in an Actionscript 3 file. So now I am trying to export it to video and only 51 seconds of it are exporting. What I have I done wrong this time! So exasperated with myself!!!

                                                                 

                                                                Kate

                                                                 

                                                                CPS18.302-animation.zip - Google Drive

                                                                • 29. Re: Creating a counting up total in Animate
                                                                  JoãoCésar Adobe Community Professional & MVP

                                                                  Hi, Kate!

                                                                   

                                                                  Congrats on making that work.

                                                                   

                                                                  And thanks for the file.

                                                                   

                                                                  I took a look and the problem I could see is that at 51 seconds and at other times you're using a very large image to animate a hole inside of a blue rec. Flash Player has limitations to image sizes and we should always try to avoid huge sizes. Try to keep everyting under 4096 or at most 8192 pixels in the bigger dimension.

                                                                   

                                                                  This huge rec is causing a crash.

                                                                   

                                                                  Here is an example of how you can achieve that same effect using an inverted mask.

                                                                  animate_cc_inverted_mask_animation.zip - Google Drive

                                                                   

                                                                  The big catch is to set the parent Movie Clip blending mode to Layer and the child Movie Clip that is used as a mask to Erase.

                                                                   

                                                                  Regards,

                                                                  JC

                                                                  1 person found this helpful