New Participant

Answered

Creating a counting up total in Animate

Forum|Forum|9 years ago
November 8, 2016
6 replies
17534 views

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;

}

This topic has been closed for replies.

Correct answer Joseph Labrecque

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.

K

kateh12410789

Participating Frequently

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

JoãoCésar17023019

Community Expert

Hey, Kate, this is awesome!

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

Have a nice week.

Regards,

JC

K

kateh12410789

Participating Frequently

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

K

kateh12410789

Participating Frequently

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

JoãoCésar17023019

Community Expert

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

JoãoCésar17023019

Community Expert

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

K

kateh12410789

Participating Frequently

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

Colin Holgate

Inspiring

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.

K

kateh12410789

Participating Frequently

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

JoãoCésar17023019

Community Expert

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

I

Igor5C56

New Participant

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.

Joseph Labrecque

Community Expert

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

designerwolfe62510

New Participant

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

designerwolfe62510

New Participant

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.

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

Joseph LabrecqueCorrect answer

Community Expert

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.

O

oxfordalumniAuthor

New Participant

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.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded