Creating a number counter that counts in increments of .05 in After Effects.

[sylvvia]

I need to create a number counter that counts in increments of .05 in After Effects.  Any advice on how to do this?

Many thanks!

[Tim Kurkoski]

This is relatively easy to do with an expression on a text layer's Source Text property. Use the existing timeToFrames() method and divide by 2:

timeToFrames(t = time + thisComp.displayStartTime, fps = 1.0 / thisComp.frameDuration, isDuration = false)/2;

But if you don't want it to trim the decimal place off of integer values, use the toFixed() method.

halfFrames = (timeToFrames(t = time + thisComp.displayStartTime, fps = 1.0 / thisComp.frameDuration, isDuration = false))/2;

halfFrames.toFixed(1);

Just for kicks, I expanded a version that pads leading zeros for up to three pre-decimal digits:

halfFrames = (timeToFrames(t = time + thisComp.displayStartTime, fps = 1.0 / thisComp.frameDuration, isDuration = false))/2;

if (halfFrames >= 10 && halfFrames < 100) {

halfFrames = "0" + halfFrames.toFixed(1);

}

else if (halfFrames >= 0 && halfFrames < 10) {

halfFrames = "00" + halfFrames.toFixed(1);

}

else {

halfFrames.toFixed(1);

}

[sylvvia]

thanks so much for the response.  I actually need to do a counter that goes from 0.00 to 1.30  in .05 increments.  So it would go: 0.00, 0.05, 0.10, 0.15   and so on up to 1.30.  Your above expressions count in .5 increments... I can't get my head around what I need to change to make it work..   any input would be appreciated

thanks!

[Dan Ebberts]

A source text expression like this should work:

rate = 10; // ticks per second

ticks = Math.floor((time - inPoint)*rate);

Math.min(ticks/20,1.3).toFixed(2)

Adjust the rate variable to suit your needs.

Dan

[Tim Kurkoski]

Dan Ebberts wrote:

A source text expression like this should work:

rate = 10; // ticks per second

ticks = Math.floor((time - inPoint)*rate);

Math.min(ticks/20,1.3).toFixed(2)

Adjust the rate variable to suit your needs.

Dan

As ever, Dan has created a more elegant solution than my brute-force methods.

[sylvvia]

great! thanks!  now how can I make it have monospacing so the decimal point and numbers are steady, not moving left and right....  can't find that setting in the text panel....

[Tim Kurkoski]

There is no explicit control for this in the Character panel, it's not a property of the font or character appearance, it's how After Effects builds the text string.

Using a monospaced font will help, it keeps the width of each character predictable.

But to keep the text position static you need to force the length of the text to stay the same. In other words, keep the number of characters consistent on every frame.

In my examples above, I used the toFixed() method to define how many characters come after the decimal point. To define the number of characters before the decimal point I had to use a bit of if/else code. Dan can correct me if I'm wrong, but I'm not aware of a built-in Javascript method to define leading zeroes.

If you don't want the leading zeroes to be visible, you could simply animate a mask that hides them.

I have also forgotten to mention that there is an old effect called Numbers, which can be animated to do what you'd like. You'll probably still have to apply an expression to the Value/Offset/Random value to get your 0.05 increments. It's the (very) old-school way of doing the job.

[sylvvia]

thanks for all the help Tim!  I was using the numbers effect before.  The problem with it is that there is no way to kern the numbers, just track.  The expressions you gave me work great.  I may just end up motion stabilizing the decimal point if I can't figure anything else out.

all the best

Sylvia

[Tim Kurkoski]

sylvvia wrote:

I may just end up motion stabilizing the decimal point if I can't figure anything else out.

That sounds like an unnecessarily complicated method. I recommend padding the leading digits. That should keep the length of the text stable. (See my last post for more detail.)

[sylvvia]

thanks you guys!  I got it to work by placing-

timeToFrames(t = time + thisComp.displayStartTime, fps = 1.0 / thisComp.frameDuration, isDuration = false) / 20;

into the "value/offset/random" property of the numbers effect.

all the best

Sylvia

[Tim Kurkoski]

Sorry, I misread your post. Sneaky little zero.

It's all math. What's happening is that we're asking After Effects for the current frame number (by using timeToFrames(); you can largely ignore what happens inside of the parenthesis) and then dividing it so we get the result we want. Dividing by 2 will give you 0.5 increments. Dividing by 10 would give you 0.1 increments. Dividing by 20 will give you 0.05 increments. You can adapt what I wrote above by change the /2 to /20:

timeToFrames(t = time + thisComp.displayStartTime, fps = 1.0 / thisComp.frameDuration, isDuration = false) / 20;

If you need the decimal places to stay steady, now you have to tell toFixed to use 2 decimal places. Following the example I created above:

halfFrames.toFixed(2);

Makes sense?

[scrawford220878]

Is there a way I can get the same effect but use it along with a slider?

[Mylenium]

Simply substitute time with your slider value/ link.

Mylenium