Creating a counting up total in Animate

Report · Nov 08, 2016

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;

}

Report · Nov 08, 2016

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.

Report · Nov 09, 2016

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.

Report · Feb 14, 2017

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

Report · Nov 30, 2017

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

Report · May 19, 2022

Thanks, Dude! I can use this too! Great code my dude!

Report · May 01, 2023

Hi Joseph, apologies for replying to a thread that is so old! I am using your code to animate a counter, and the numbers that I'm working with are qute small — eg. 50. This means that the counter rips through the count quickly and I'm trying to make the count take a longer time. I've adjusted the countUpInc to 1 (to count in ones) and I'm trying to alter the var totalSecs:int = 30000; line to use different values (I'd like the count to 55 to take 4 seconds), but adjusting this to var totalSecs:int = 4; doesn't seem to make any difference to the duration. Please can you help? Many thanks, Simon

Report · Feb 21, 2024

I just cant figure out what exactly is wrong, I dont manage to make this work.
So i create a text box, dynamic one, and name the instance "counter". Should I type something inside, like "0", or nothing?
Then, I add action on the first frame, the one you wrote. I hit enter, but nothing happens. So Im missing some step, right?

Report · Nov 09, 2016

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

Report · Nov 15, 2016

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?

Report · Mar 13, 2017

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

Report · Mar 13, 2017

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.

Report · Mar 14, 2017

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

Report · Mar 14, 2017

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);

}

Report · Aug 08, 2018

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 number

Report · Aug 08, 2018

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

Report · Feb 21, 2024

I just cant figure out what exactly is wrong, I dont manage to make this work.
So i create a text box, dynamic one, and name the instance "counter". Should I type something inside, like "0", or nothing?
Then, I add action on the first frame, the one you wrote. I hit enter, but nothing happens. So Im missing some step, right? Im working in an HTML document btw, for Google ads.

Report · Feb 22, 2024

Hi.

You can achieve this in one tween call. Like this:

createjs.Tween
	.get(this.yourTF)
	.to({ counter: 0 }, 0)
	.to({ counter: 100 }, 1000, createjs.Ease.sineOut)
	.on("change", function(e){ e.target.target.text = String(Math.round(e.target.target.counter)); });

I hope this helps.

Regards,

JC

Report · Aug 09, 2018

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

Report · Aug 09, 2018

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.

Report · Aug 09, 2018

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

Report · Aug 09, 2018

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

Report · Aug 09, 2018

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);

Report · May 18, 2022

Thank you.. you saved me a lot of work 🙂

Report · May 18, 2022

Glad to help!

Creating a counting up total in Animate

1 Correct answer