• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Tutorial: bold part of a text layer using expressions

Community Expert ,
Nov 11, 2024 Nov 11, 2024

Copy link to clipboard

Copied

About a year ago, I shared a method for After Effects to allow you to add bold to part of a text layer using Text Animators. Trouble was, it was faking bold using rather than an actual bold font. But with After Effects 2025 and the new Per Character styling via expressions, you can now do it for real.

 

I break down how to use the new expression, then I add some slider controls to make it easier to adjust. And finally, I share my latest work in progress which allows to you select words instead of characters.

 

TOPICS
How to

Views

378

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Nov 11, 2024 Nov 11, 2024

Copy link to clipboard

Copied

To avoid issues with occurrences,

I wouldn't have used indexOf()

wordStart = Math.max(0, Math.floor(effect("Word Start")(1)) -1);
numWords = Math.max(1, Math.floor(effect("Num Words")(1)));
words = split(/\s+/);
selectedWords = words.slice(wordStart, wordStart + numWords).join(" ");
regex = new RegExp(`(?:\\s*\\S+\\s*){${wordStart}}`);
m = regex.exec(value);
firstCharIndex = m ? m[0].length : 0;
selectedLength = selectedWords.length + 1;
style
    .setFauxBold(true,firstCharIndex,selectedLength)
    .setFillColor([1,0,0],firstCharIndex,selectedLength);

 screenshot.png

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 11, 2024 Nov 11, 2024

Copy link to clipboard

Copied

Are you kidding me?   2 hours is all it took to come up with a better option???

 

Nice one.

 

I'm a little confused by what this part is doing:

regex = new RegExp(`(?:\\s*\\S+\\s*){${wordStart}}`);
m = regex.exec(value);
firstCharIndex = m ? m[0].length : 0;

I know RegExp + exec looks for a pattern and will find all of the options, but how does the third line then determine which one to show?

 

I'll happily post a follow up video crediting you and singing your praises @Airweb_AE , but I'd like to understand it myself.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Nov 11, 2024 Nov 11, 2024

Copy link to clipboard

Copied

The regex is used to count the number of characters before the selected word (based on wordStart value), which gives us the start of the character range (firstCharIndex).

 

screenshot.png

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 14, 2024 Nov 14, 2024

Copy link to clipboard

Copied

You're making an excellent contribution.

 

Currently, I'm looking to create an expression that allows me to put one or more words in bold. I’ve already found a simple way to do it with continuous words, but I haven't yet found a solution to bold words that are interspersed.

Example: You should maintain a good balance between your work time and your family time; this will allow you to have a more balanced lifestyle.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Nov 14, 2024 Nov 14, 2024

Copy link to clipboard

Copied

Maybe just need to place the words you want to bold within brackets:

 

You should maintain a good balance between
your [work time] and your [family time];
this will allow you to have a [more balanced lifestyle].

 

And to use this expression:

 

var regex = /\[(.*?)\]/g;
var result;
var boldColor = [1, 0, 0];
var newValue = value.replace(regex, '$1');
var newStyle = style;
var ofs = 0;

while ((result = regex.exec(value)) !== null) {
    var matchStart = result.index;
    var matchText = result[1];
    var startIndex = matchStart - ofs;
    var selectedLength = matchText.length;
    
    newStyle = newStyle
        .setText(newValue)
        .setFauxBold(true, startIndex, selectedLength)
        .setFillColor(boldColor, startIndex, selectedLength);
    ofs += 2;
}

newStyle;

 

 

screenshot.png

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 14, 2024 Nov 14, 2024

Copy link to clipboard

Copied

Excellent, my friend! You're a true master! It worked perfectly for me. I’m infinitely grateful for this amazing help. I’d love to follow you on social media or YouTube if you have content on these After Effects topics.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Nov 11, 2024 Nov 11, 2024

Copy link to clipboard

Copied

Same thing, using lines as separators:

 

lineStart = Math.max(0, Math.floor(effect("Line Start")(1)) - 1);
numLines = Math.max(1, Math.floor(effect("Num Lines")(1)));

lines = value.split(/\r/);
selectedLines = lines.slice(lineStart, lineStart + numLines).join("\r");

regex = new RegExp(`(?:.*\r){${lineStart}}`);
m = regex.exec(value);
firstCharIndex = m ? m[0].length : 0;
selectedLength = selectedLines.length;

style
    .setFauxBold(true, firstCharIndex, selectedLength)
    .setFillColor([1, 0, 0], firstCharIndex, selectedLength);

 

screenshot.png

 

 

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 14, 2024 Nov 14, 2024

Copy link to clipboard

Copied

@Airweb_AE  thank you.  I've now updated my video to include your expression with several shout outs to you.

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Nov 14, 2024 Nov 14, 2024

Copy link to clipboard

Copied

Even though I didn't understand everything you said in the video,

I have a feeling it's positive, so thank you! 😂

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 15, 2024 Nov 15, 2024

Copy link to clipboard

Copied

LATEST

All very positive.  I pretended to be frustrated, but then I heaped praise on you.  

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines