ADOBE AFTER EFFECTS: Forum Expressions Tutorials Creative Cloud

percentage counter problem...

COW Forums : Adobe After Effects

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Nick Natteaupercentage counter problem...
by on Feb 15, 2012 at 7:18:48 pm

So I have a percentage counter expression I copied from this forum, but my problem is that the number characters keep moving left and right as the numbers climb. How can I get the font not to move left and right as this happens??? Not sure if it's a kerning issue.

I just want the numbers to stay in place as the counter counts up.

Thanks in advance for any tips, help.


Return to posts index

Kevin CampRe: percentage counter???
by on Feb 15, 2012 at 7:50:31 pm

i'm not sure what you've tried already, but if you wanted to avoid expressions, you could probably use the numbers effect and manually add a percent sign at the end (using a separate text layer, if needed parent it to the numbers layer).

you can also use a text layer and an expression.

an easy way is to create a new text layer (you don't need to type anything in it) and add an expression slider control.

type 'uu' (that's the letter u 2 times quickly) to reveal the source text property for the text layer. select that and choose animation>add expression to enable expressions for that property. in the expression field, type Math.round( then use the expression pickwhip and drag it to the slider value, and then continue typing )+"%". so the expression would look something like this:

Math.round(effect("Slider Control")"Slider"))+"%"

the result should put the current slider value followed by the % sign into the text layer. now you can key frame the slider value to animate the counter.

Kevin Camp
Senior Designer
KCPQ, KMYQ & KRCW


Return to posts index

Nick NatteauRe: percentage counter???
by on Feb 15, 2012 at 8:31:13 pm

Thanks very much Kevin. I feel dumb asking but can you tell me what slider value you're referring to and where would I find it??? I don't see a slider in the source text area, just a stop watch.


Return to posts index


Kevin CampRe: percentage counter???
by on Feb 15, 2012 at 8:50:30 pm

you have to add a slider expression control 'effect' (it in the effects, under expression controls, though it's not exactly an effect).

there are actually several expression control 'effects', and they can be very useful when you need to control or animate expression values.

Kevin Camp
Senior Designer
KCPQ, KMYQ & KRCW


Return to posts index

Nick NatteauRe: percentage counter???
by on Feb 15, 2012 at 9:14:44 pm

Thank you so much Kevin. It worked! If I might just ask you one more follow up:

I need for my percentages to diplay as "2.60% instead of "3". I need the double decimal option.


Return to posts index

Kevin CampRe: percentage counter???
by on Feb 15, 2012 at 9:37:04 pm

try this:

effect("Slider Control")("Slider").value.toFixed(2)+"%"

change the toFixed() value to the number of decimal places needed. note that this method doesn't round the thousandths to the nearest hundredth, it just lops off the extra decimal places. if you need it to round, i might be able to figure that out...

Kevin Camp
Senior Designer
KCPQ, KMYQ & KRCW


Return to posts index


Nick NatteauRe: percentage counter???
by on Feb 15, 2012 at 9:44:06 pm

Excellent Kevin, thanks so much. But how can I get the font not to move. As the numbers climb in value they're moving left to right to left to right. I was hoping to get the number characters to stay in place. Isn't it osme kind of dynamic kerning issue possibly???


Return to posts index

Kevin CampRe: percentage counter???
by on Feb 15, 2012 at 10:01:34 pm

you could try making the text layer right justified (option in the paragraph panel). this would lock the percent sign, and the numbers would move to the left as they grew to the tens, hundreds, etc.

most fonts have fixed width kerning/tracking for numbers, if the font you are using doesn't, then you may want to choose another font. some programs have an option to make any font fixed width, but i don't think ae does....

Kevin Camp
Senior Designer
KCPQ, KMYQ & KRCW


Return to posts index

Nick NatteauRe: percentage counter???
by on Feb 17, 2012 at 7:53:16 pm

Hi Kevin,

Sorry to bother you again. Can you just tell me how to insert commas into my figures in the expression.

Tried searching the cow forums, but can't figure out how to simply add commas to my numbers:

e.g. 12567890...12,567,790


Return to posts index


Declan SmithRe: percentage counter???
by on Feb 17, 2012 at 8:18:24 pm

You could use something like what is described here:
http://www.mredkj.com/javascript/numberFormat.html

i.e., in your source text, assuming that the number value is in a variable called nStr:

This basically runs over the number and inserts the commas for every three digits, then adds anything after the decimal point if it were supplied.

nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(d+)(d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
x1+x2


Given that nStr is 100000 result would be 100,000
nStr=1234.56 result=1,234.56
nStr=100000000 result=100,000,000

etc etc

Declan Smith
http://www.madpanic.tv
FCS3 / After Effects CS5 / Combustion / Canon 7D / Canon XL2


Return to posts index

Declan SmithRe: percentage counter???
by on Feb 17, 2012 at 8:34:33 pm

More efficient way of adding in commas:

str="1232224.2";
regEx = new RegExp('(-?[0-9]+)([0-9]{3})');
while(regEx.test(str)) {
                         str = str.replace(regEx, '$1,$2');
}
str;

Declan Smith
http://www.madpanic.tv
FCS3 / After Effects CS5 / Combustion / Canon 7D / Canon XL2


Return to posts index

Nick NatteauRe: percentage counter???
by on Feb 17, 2012 at 8:40:44 pm

Hi Declan,

Thanks very much but I still can't get it to work. Kevin had me insert this for percentages:

effect("Slider Control")("Slider").value.toFixed(0)+"%"

But I changed it to: effect("Slider Control")("Slider").value.toFixed(0)+"Miles" for Miles or "Km"
if I needed to show a decimal counter counting up a distance.

That text that you gave me...where would it be inserted in this script:

effect("Slider Control")("Slider").value.toFixed(0)+" Miles" Before? After? within???


Return to posts index


Declan SmithRe: percentage counter???
by on Feb 17, 2012 at 9:08:30 pm

Hi Nick

You would have your expression something like below. The first line grabs the value from the slider in the format you want it, with the text suffix of "Miles". Then the regular expression does the work of searching groups of three numbers. The very last line returns the final formatted value.

str=effect("Slider Control")("Slider").value.toFixed(0)+"Miles";

regEx = new RegExp('(.*[0-9]+)([0-9]{3})');
while(regEx.test(str)) {
                         str = str.replace(regEx, '$1,$2');
}
str

Declan Smith
http://www.madpanic.tv
FCS3 / After Effects CS5 / Combustion / Canon 7D / Canon XL2


Return to posts index

Declan SmithRe: percentage counter???
by on Feb 17, 2012 at 9:32:27 pm

Nick

Here it all is as a one liner



(effect("Slider Control")("Slider").value.toFixed(0)+" Miles").replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");


Enjoy!

Declan Smith
http://www.madpanic.tv
FCS3 / After Effects CS5 / Combustion / Canon 7D / Canon XL2


Return to posts index

Declan SmithRe: percentage counter???
by on Feb 15, 2012 at 10:15:56 pm

I think what you may need to do is go to the paragraph window, select the text then choose the right justify option. This will ensure that each character stays in its own space and grow right to left only.



Hope this is what you are looking for.

Declan Smith
http://www.madpanic.tv
FCS3 / After Effects CS5 / Combustion / Canon 7D / Canon XL2


Return to posts index


Nick NatteauRe: percentage counter???
by on Feb 16, 2012 at 12:14:54 am

Thanks Kevin and Declan. I just discovered that this issue happens with certain fonts and not others.

It seems to happen with fonts I downloaded from sites like "dafont.com" and "myfonts.com", not with any Mac OSX fonts. Good to know. But thank you both for your help and will follow your recommendations.


Return to posts index

Nick NatteauRe: percentage counter???
by on Feb 16, 2012 at 12:23:09 am

Declan, I tried left, center, and right, but certain fonts just seems to do that regardless of whatever justification I choose.


Return to posts index

Declan SmithRe: percentage counter???
by on Feb 16, 2012 at 12:39:24 am

I think I know what you mean, when the numbers change each character slightly shifts either left or right ?

It looks like it is the kerning. I changed the kerning from metrics to 0 for the "American Type" font (which had the wobbling) and this appears to have fixed it. Worth trying. I set the kerning for each character position separately. I set the static text as 100%, selected all the text and changed the kerning to 0.

Declan Smith
http://www.madpanic.tv
FCS3 / After Effects CS5 / Combustion / Canon 7D / Canon XL2


Return to posts index

Nick NatteauRe: percentage counter???
by on Feb 16, 2012 at 1:07:15 am

Thanks very much Declan, yes that's exactly what I meant...the characters shifting slightly left/right

The font that was doing this is "KP Duty" - a stencil font downloaded from "myfonts.com"

KP Duty.

Not sure why that particular font would do this when animated in a decimal counter expression.
But yes, some appear to do it while others don't. But thanks again.


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2017 CreativeCOW.net All Rights Reserved
[TOP]