Create shape/box based on word index

[Kevin Camp]

there’s not an easy way….

you can use sourceRectAtTime() but you have to separate each word on a separate layer… which wouldn’t be too bad if the text was on a single line. you’d also need to determine the max number of words, since you’d need that many text layers pre-made.

if you need the text to wrap to new lines, it will get more complicated.

you can easy change the color of an individual word in a text layer with AE’s text animators, if that would work…

Kevin Camp
Art Director
KCPQ, KZJO & KRCW

[Christian Simpson]

Thanks for the reply Kevin, yeah I was afraid it wasn’t completely possible.

[Tomas Bumbulevičius]

Hey Christian,

could you please elaborate more what you mean by this?

>a shape behind a piece of text that is based around the word index.

1. Do you want to have a solution, where paragraph of text would have a shape behind the particular word of the phrase, and this should move along the text as you skim through the slider?
2. Are you going to make that adjustment of highlight, manually?
3. It needs to work independent from the phrase length?

Thanks!

[Kalleheikki Kannisto]

Imposing one limitation makes this (relatively) doable with expressions. The one limitation is that you would need to have manual line breaks at the end of each line of text.

If you started from that, you would then need three additional copies of the text layer where you pulled substrings of the original text (by sourceText expressions):

Copy 1: All text from the beginning up to and including the word to be highlighted
Copy 2: The words between the last manual line break and the word to be highlighted
Copy 3: Just the word to be highlighted

Using those three layers you could then calculate, using SourceRectAtTime, all the necessary coordinates for your highlight box.

Copy 1 would give you the y-position in relation to the top of the textbox.
Copy 2 would give you the x-position in relation the the left edge of the text box and
Copy 3 would give you the width (and height) of the highlight

Not particularly simple, but doable.

Kalleheikki Kannisto
Senior Graphic Designer

[Christian Simpson]

To better elaborate what my true end goal to do is I would like a slider that allows an editor to go to the index number needed to highlight the word they want to highlight in a paragraph of text.

So based on the slider the box is created with my desired padding around the word based on index. Not sure if that makes sense.

[Kevin Camp]

Kudos to you Kalleheikki, that’s pretty ingenious.

Christian, if Kalleheikki doesn’t get back to you, I may take a look at this over the weekend… although I have easter eggs to color….

Kevin Camp
Art Director
KCPQ, KZJO & KRCW

[Kalleheikki Kannisto]

Here’s a basic implementation. Somewhat error-prone. You will have to do the line breaks as paragraph breaks without a space character before the line break. There area few other issues, the primary being that with mixed case on some words the highlight goes too low. This is due to the extenders in letters like “j” that push the bottom of the textbox down. You’d be better off changing the y position to be a fixed multiple of the number of lines, which can be done pretty easily. But then you will need to know the line spacing value, so this would require a separate slider.

Also, currently you will have to break the text at the same point where it would reflow automatically in the textbox. This behavior could be changed so that this not a requirement.

AE CC2017 file.

12313_texthighlighting.aep.zip

Kalleheikki Kannisto
Senior Graphic Designer

[Kalleheikki Kannisto]

Looks like this. Might work as is with all upper case letters.

Kalleheikki Kannisto
Senior Graphic Designer

[Christian Simpson]

Wow, this is amazing, it actually works. Brilliant Kalleeikki, thank you very much. Incredible.

[Christian Simpson]

One thing I noticed after a while was how changing the font seems to break everything. Do you know why that would be?