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

Adobe 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

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

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

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

Adobe 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

Adobe 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

Adobe 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

Adobe Expert

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

N

no_spec

New Participant

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?

Joseph LabrecqueCorrect answer

Adobe 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