ADOBE AFTER EFFECTS: Forum Expressions Tutorials Creative Cloud

Color text set with regex

COW Forums : Adobe After Effects Expressions

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Anton Shushar
Color text set with regex
on Mar 26, 2019 at 1:50:12 pm
Last Edited By Anton Shushar on Mar 26, 2019 at 6:29:32 pm

Hi, I am trying to color text that is between a number and a coma, something like this 0text, or 2something,
So I'd rather use regex for this (?<=\d)([a-z]+)(?=,) But unfortunately I don't know how to write the expression right inside Text Animator. Hope you could help me with that.


Return to posts index

Oleg Pirogov
Re: Color text set with regex
on Mar 28, 2019 at 10:53:27 am

First of all lookbehind assertion is not implemented in JS before ECMAScript 2018, thus will not work with AE's legacy expression engine, i.e. will not work in any version before CC 2019. So I will proceed with:

/\d[a-z]+(?=,)/g
, keeping in mind that it also matches the number at the beginning.

Next, for picking the desired characters I will use Expression Selector for Text Animator. It runs its expression for every character indexed as "textIndex" if Based On property = Characters. Note, that for the first char textIndex=1 not 0;

For each textIndex expression evaluates, if the corresponding char is one of those to be colored. And colors it if yes.

Looks like this:

var t = text.sourceText;
var regex = /\d[a-z]+(?=,)/g;

function indexMatched(index){
var matched = false;
var match;
var i=[];

while ((match = regex.exec(t)) !== null){
matched |= match.index<index & index<match.index+match[0].length;
i.push([match, match.index, match.index+match[0].length]);
}
return matched;
}

indexMatched(textIndex-1) ? 100 : 0;


Works like this:

I hope I got it right and that's what you wish for.


Return to posts index

Oleg Pirogov
Re: Color text set with regex
on Mar 28, 2019 at 10:55:55 am

"i" stuff was a debugging thing, you don't need it:
var t = text.sourceText;
var regex = /\d[a-z]+(?=,)/g;

function indexMatched(index){
var matched = false;
var match;

while ((match = regex.exec(t)) !== null){
matched |= match.index<index & index<match.index+match[0].length;
}
return matched;
}

indexMatched(textIndex-1) ? 100 : 0;


Return to posts index


Anton Shushar
Re: Color text set with regex
on Mar 31, 2019 at 10:52:52 am

Thank you master, it saved me tons of time! You are the only person who managed to think of the solution.

I have one more little question: how do I animate this color appearing? Range Selector doesn't work.


Return to posts index

Oleg Pirogov
Re: Color text set with regex
on Mar 31, 2019 at 12:28:47 pm

You're welcome!
If you mean appearing from left to right or smth like that, just add a Range Selector before Expression Selector and change the last line to:
indexMatched(textIndex-1) ? 100*selectorValue : 0;

If you by appearing you mean gradually coloring, you can add a Slider Control to control the transition from 0 to 100% and change the last line to:
indexMatched(textIndex-1) ? effect("Slider Control")("Slider"): 0;


Return to posts index

Anton Shushar
Re: Color text set with regex
on Mar 31, 2019 at 12:33:22 pm

Thank you so much! I am also wondering whether you have issues with previewing it? It just proccess like 30 sec per frame. What can I do with such a delay?


Return to posts index


Oleg Pirogov
Re: Color text set with regex
on Apr 1, 2019 at 5:28:17 am

The code runs for each character each frame. If your text is huge, it might be the cause of your issue.
I suggest forming an array of indices of to-be-colored chars and keeping it a separate layer. This way you at least won't have to run regex and the while cycle every time.


Return to posts index

Anton Shushar
Re: Color text set with regex
on Apr 1, 2019 at 4:37:26 pm

I didn't really get this line:
I suggest forming an array of indices of to-be-colored chars
Coould you explain a bit clearly?
Btw, besides color I'm gonna animate the scale of those words so breaking up the text will lead to kerning issues.


Return to posts index

Oleg Pirogov
Re: Color text set with regex
on Apr 2, 2019 at 1:44:08 am

Make a separate technical text layer ("Array") and apply this expression to sourceText:

var txt =thisComp.layer("Text").text.sourceText;
var regex = /\d[a-z]+(?=,)/g;

function indexMatched(ind){
var matched = false;
var match;

while ((match = regex.exec(txt)) !== null){
matched |= match.index<ind & ind<match.index+match[0].length;
}
regex.lastIndex = 0;
return matched;
}

a = [];
for (var i=0, len=txt.length; i<len; i++){
a.push(Number(indexMatched(i)));
}
a;

("Text" is the original text layer)

Now its sourceText is smth like "0,1,1,1,1,1,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,1,0", each number representing a char in original text, 1=color, 0=not-to-color.
Make the "Array"'s duration 1 frame and convert expression to keyframes, so you can copy that "0,1,1,1,1,1,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,1,0".

Next, change the expression in "Text" layer for the Expression Selector simply to:
arr = [0,1,1,1,1,1,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,1,0];
arr[textIndex-1] ? 100*selectorValue : 0;


This will result in the same coloring as before but with less computations. Of cause, this workaround doesn't work, if "Text"'s sourceText changes in time.


BTW, all of these work well only for one-line texts, cause this code doesn't account for the fact that Selector doesn't count carriage return as a character, so coloring gets shifted by the number of lines. But I'm sure, there's some easy workaround for that.


Return to posts index


Anton Shushar
Re: Color text set with regex
on Apr 2, 2019 at 4:45:15 am

I tried to make exactly what you've said, but for some reasons no text generates in "Array"(it remains empty). However, if I make a copy of the original "Text" and apply the expresion, this error appears:
After Effects warning: Expression Disabled. Error at line 0 in property 'Amount' of layer 2 ('Array') in comp 'Comp 1'.
expression result must be of dimension 3, not 58

BTW, I double-checked that original text layer has name of "Text".


Return to posts index

Anton Shushar
Re: Color text set with regex
on Apr 2, 2019 at 11:41:32 am

I just realised that I was setting that expression into "Array"'s Expresion Selector, not sourceText.
Thanks, it makes almost what I want. But there is one thing that bother me -- when I add scale property besides color, kerning doesn't change, I mean that those regex-filtered words are intersecting neighbour letters, instead of extending space. Is there a workaround?


Return to posts index

Oleg Pirogov
Re: Color text set with regex
on Apr 2, 2019 at 12:02:18 pm

Well that's Animator mechanism.
Try adding tracking property to Animator with an appropriate value.


Return to posts index


Anton Shushar
Re: Color text set with regex
on Apr 2, 2019 at 12:48:59 pm

Yeah, traking property works well, but I'd like it to be depended on scale property, that is percentage value so simple parent won't work.
Do you know how I can make it increace/decrease appropriately with scale?


Return to posts index

Anton Shushar
Re: Color text set with regex
on Apr 4, 2019 at 5:32:08 pm

Ok, thank you so much! You saved me tons of time.
May you give me any of your contact?


Return to posts index

Oleg Pirogov
Re: Color text set with regex
on Apr 5, 2019 at 12:27:37 pm

>May you give me any of your contact?
My FB is in my profile, feel free to contact me there.


Return to posts index

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