• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Creating a counting up total in Animate

New Here ,
Nov 08, 2016 Nov 08, 2016

Copy link to clipboard

Copied

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;

  }

}

Views

15.1K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Nov 08, 2016 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 dyna

...

Votes

Translate

Translate
Community Expert ,
Nov 08, 2016 Nov 08, 2016

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 09, 2016 Nov 09, 2016

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 14, 2017 Feb 14, 2017

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 30, 2017 Nov 30, 2017

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 19, 2022 May 19, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
May 01, 2023 May 01, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 21, 2024 Feb 21, 2024

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 09, 2016 Nov 09, 2016

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 15, 2016 Nov 15, 2016

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 13, 2017 Mar 13, 2017

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 13, 2017 Mar 13, 2017

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 14, 2017 Mar 14, 2017

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 14, 2017 Mar 14, 2017

Copy link to clipboard

Copied

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

  }

}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 08, 2018 Aug 08, 2018

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 08, 2018 Aug 08, 2018

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 21, 2024 Feb 21, 2024

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 22, 2024 Feb 22, 2024

Copy link to clipboard

Copied

LATEST

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 09, 2018 Aug 09, 2018

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 09, 2018 Aug 09, 2018

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 09, 2018 Aug 09, 2018

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 09, 2018 Aug 09, 2018

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 09, 2018 Aug 09, 2018

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
May 18, 2022 May 18, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 18, 2022 May 18, 2022

Copy link to clipboard

Copied

Glad to help!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines