Need Help w/ Multiple variables in Per-character Text-Attribute Script

Report · Jan 12, 2025

I'm in the newest version of AfterEffects (v.25.1), and I'm trying to set up a MOGRT that's relatively complex on the backend, and I need some help getting the code to work. I'll try to explain what I'm going for.

I have a template for a lower third graphic, and I want to be able to select specific sections of text by using sliders, and then apply preset custom formatting to that text by using a dropdown menu which lists four possible formatting options. Here's what the Essential Graphics setup looks like:

Screenshot 2025-01-12 160300.jpg

As you can see by there being 5 different groups, I want to be able to make up to five text selections, and have these same options for each one individually: 1) start index of the text selection, 2) length of the text selection, and 3) ability to choose what formatting preset is applied. (For example, I want to be able to select the second word in the lower third and make it italics, and also select the fourth word and make it smallcaps, etc.)

I have code that works exactly the way that I want it for one text selection. But I don't know how to add it such that it will work with up to five selections. Here's my code so far (including unused variables for the expression controllers in Groups 2-5).

var fc = thisComp.layer("Formatting Controller");
// Group 1
var start1 = fc.effect("Start Index—Section 1")("Slider");
var length1 = fc.effect("Length—Section 1")("Slider");
var style1 = fc.effect("Style—Section 1")("Menu").value;
//Group 2
var start2 = fc.effect("Start Index—Section 2")("Slider");
var length2 = fc.effect("Length—Section 2")("Slider");
var style2 = fc.effect("Style—Section 2")("Menu").value;
//Group 3
var start3 = fc.effect("Start Index—Section 3")("Slider");
var length3 = fc.effect("Length—Section 3")("Slider");
var style3 = fc.effect("Style—Section 3")("Menu").value;
// Group 4
var start4 = fc.effect("Start Index—Section 4")("Slider");
var length4 = fc.effect("Length—Section 4")("Slider");
var style4 = fc.effect("Style—Section 4")("Menu").value;
// Group 5
var start5 = fc.effect("Start Index—Section 5")("Slider");
var length5 = fc.effect("Length—Section 5")("Slider");
var style5 = fc.effect("Style—Section 5")("Menu").value;

switch (style1) {
	case 1:
		text.sourceText.style
			.setFont("LaskiSlab-RegularItalic",start1,length1);
		break;
	case 2:
		text.sourceText.style
			.setSmallCaps(true,start1,length1);
		break;
	case 3:
		text.sourceText.style
			.setFont("LaskiSlab-RegularItalic",start1,length1)
			.setSmallCaps(true,start1,length1);
		break;
	case 4:
		text.sourceText.style
			.setFont("NarkissAsafVariable-Regular",start1,length1)
			.setApplyStroke(false,start1,length1);
		break;
	default:
		text.sourceText;
}

How do I write an expression which allows this kind of format-switching on a per-selection basis?

Any help is appreciated, thank you!

Report · Jan 13, 2025

I might be missing something, but is it not just adding another case to the switch?

var fc = thisComp.layer("Formatting Controller");
// Group 1
var start1 = fc.effect("Start Index—Section 1")("Slider");
var length1 = fc.effect("Length—Section 1")("Slider");
var style1 = fc.effect("Style—Section 1")("Menu").value;
//Group 2
var start2 = fc.effect("Start Index—Section 2")("Slider");
var length2 = fc.effect("Length—Section 2")("Slider");
var style2 = fc.effect("Style—Section 2")("Menu").value;
//Group 3
var start3 = fc.effect("Start Index—Section 3")("Slider");
var length3 = fc.effect("Length—Section 3")("Slider");
var style3 = fc.effect("Style—Section 3")("Menu").value;
// Group 4
var start4 = fc.effect("Start Index—Section 4")("Slider");
var length4 = fc.effect("Length—Section 4")("Slider");
var style4 = fc.effect("Style—Section 4")("Menu").value;
// Group 5
var start5 = fc.effect("Start Index—Section 5")("Slider");
var length5 = fc.effect("Length—Section 5")("Slider");
var style5 = fc.effect("Style—Section 5")("Menu").value;

switch (style1) {
	case 1:
		text.sourceText.style
			.setFont("LaskiSlab-RegularItalic",start1,length1);
		break;
	case 2:
		text.sourceText.style
			.setSmallCaps(true,start1,length1);
		break;
	case 3:
		text.sourceText.style
			.setFont("LaskiSlab-RegularItalic",start1,length1)
			.setSmallCaps(true,start1,length1);
		break;
	case 4:
		text.sourceText.style
			.setFont("NarkissAsafVariable-Regular",start1,length1)
			.setApplyStroke(false,start1,length1);
		break;
	case 5:
		text.sourceText.style
			.setFont("OTHER FONT",start1,length1)
			.setApplyStroke(false,start1,length1);
		break;
	default:
		text.sourceText;
}

Report · Jan 13, 2025

No, all that would do is allow for a fifth preset in thr dropdown menu for Group 1. I have five separate dropdown menus (one for each selection). The switch is just being controlled by style1, but I also need to have style2, style3, etc.

Report · Jan 13, 2025

Sorry. Misunderstood.

1) Are you asking for 5 lots of text selection on a single block of text, e.g, The Quick Brown Fox Jumps over the Lazy Dog

OR

2) Are you asking for one block of text to accept 5 different styles?

e.g.:

The Quick Brown Fox Jumps Over in the Lazy Dog (in font1)

or

The Quick Brown Fox Jumps Over in the Lazy Dog (in font2)

etc... with the additional styling provided by the sliders?

Report · Jan 13, 2025

The first one you said. Five selections of text on a single block of text. Each selection has its own dropdown menu to choose what the format on that individual selection will be, but all five dropdown menus have the same four format options (Italics, Smallcaps, Italics+Smallcaps, Narkiss Asaf).

Report · Jan 13, 2025

So, when it comes to styling, you can apply multiple setFonts(), something like:

text.sourceText.style.setFont("ArialRoundedMTBold",1,10).setSmallCaps(true,5,20).setFont("BebasNeue-Regular",15,25);

Report · Jan 13, 2025

Right, but what I'm looking to do is basically have those styles switchable by using the five dropdown menus. I know this isn't actually how the syntax works, but what I want is code that does this:

text.sourceText.style
	.setStyle1(true,start1,length1)
	.setStyle2(true,start2,length2)
	.setStyle3(true,start3,length3)
	.setStyle4(true,start4,length4)
	.setStyle5(true,start5,length5)

Basically, I don't know how to use the dropdown menus style1 through style5 to change the setFont or setSmallcaps or whatever to switch inside the code. I don't know how to change "setFont" into a variable that can be whatever I want. I want those dropdown menus to change what the style itself is. Does that make sense?

Report · Jan 14, 2025

I was discussing this with my brother, and he had an epiphany and solved my problem! This is the code he came up with. It's bulky, but it certainly gets the job done.

var fc = thisComp.layer("Formatting Controller");

// Group 1
var start1 = fc.effect("Start Index—Section 1")("Slider");
var length1 = fc.effect("Length—Section 1")("Slider");
var style1 = fc.effect("Style—Section 1")("Menu").value;

switch (style1) {
	case 1:
		var italicStart1 = start1;
		var italicLength1 = length1;
		var smallCapStart1 = 0;
		var smallCapLength1 = 0;
		var hebrewStart1 = 0;
		var hebrewLength1 = 0;
		break;
	case 2:
		var italicStart1 = 0;
		var italicLength1 = 0;
		var smallCapStart1 = start1;
		var smallCapLength1 = length1;
		var hebrewStart1 = 0;
		var hebrewLength1 = 0;
		break;
	case 3:
		var italicStart1 = start1;
		var italicLength1 = length1;
		var smallCapStart1 = start1;
		var smallCapLength1 = length1;
		var hebrewStart1 = 0;
		var hebrewLength1 = 0;
		break;
	case 4:
		var italicStart1 = 0;
		var italicLength1 = 0;
		var smallCapStart1 = 0;
		var smallCapLength1 = 0;
		var hebrewStart1 = start1;
		var hebrewLength1 = length1;
		break;
	default:
		var italicStart1 = 0;
		var italicLength1 = 0;
		var smallCapStart1 = 0;
		var smallCapLength1 = 0;
		var hebrewStart1 = 0;
		var hebrewLength1 = 0;
}

// Group 2
var start2 = fc.effect("Start Index—Section 2")("Slider");
var length2 = fc.effect("Length—Section 2")("Slider");
var style2 = fc.effect("Style—Section 2")("Menu").value;

switch (style2) {
	case 1:
		var italicStart2 = start2;
		var italicLength2 = length2;
		var smallCapStart2 = 0;
		var smallCapLength2 = 0;
		var hebrewStart2 = 0;
		var hebrewLength2 = 0;
		break;
	case 2:
		var italicStart2 = 0;
		var italicLength2 = 0;
		var smallCapStart2 = start2;
		var smallCapLength2 = length2;
		var hebrewStart2 = 0;
		var hebrewLength2 = 0;
		break;
	case 3:
		var italicStart2 = start2;
		var italicLength2 = length2;
		var smallCapStart2 = start2;
		var smallCapLength2 = length2;
		var hebrewStart2 = 0;
		var hebrewLength2 = 0;
		break;
	case 4:
		var italicStart2 = 0;
		var italicLength2 = 0;
		var smallCapStart2 = 0;
		var smallCapLength2 = 0;
		var hebrewStart2 = start2;
		var hebrewLength2 = length2;
		break;
	default:
		var italicStart2 = 0;
		var italicLength2 = 0;
		var smallCapStart2 = 0;
		var smallCapLength2 = 0;
		var hebrewStart2 = 0;
		var hebrewLength2 = 0;
}

// Group 3
var start3 = fc.effect("Start Index—Section 3")("Slider");
var length3 = fc.effect("Length—Section 3")("Slider");
var style3 = fc.effect("Style—Section 3")("Menu").value;

switch (style3) {
	case 1:
		var italicStart3 = start3;
		var italicLength3 = length3;
		var smallCapStart3 = 0;
		var smallCapLength3 = 0;
		var hebrewStart3 = 0;
		var hebrewLength3 = 0;
		break;
	case 2:
		var italicStart3 = 0;
		var italicLength3 = 0;
		var smallCapStart3 = start3;
		var smallCapLength3 = length3;
		var hebrewStart3 = 0;
		var hebrewLength3 = 0;
		break;
	case 3:
		var italicStart3 = start3;
		var italicLength3 = length3;
		var smallCapStart3 = start3;
		var smallCapLength3 = length3;
		var hebrewStart3 = 0;
		var hebrewLength3 = 0;
		break;
	case 4:
		var italicStart3 = 0;
		var italicLength3 = 0;
		var smallCapStart3 = 0;
		var smallCapLength3 = 0;
		var hebrewStart3 = start3;
		var hebrewLength3 = length3;
		break;
	default:
		var italicStart3 = 0;
		var italicLength3 = 0;
		var smallCapStart3 = 0;
		var smallCapLength3 = 0;
		var hebrewStart3 = 0;
		var hebrewLength3 = 0;
}

// Group 4
var start4 = fc.effect("Start Index—Section 4")("Slider");
var length4 = fc.effect("Length—Section 4")("Slider");
var style4 = fc.effect("Style—Section 4")("Menu").value;

switch (style4) {
	case 1:
		var italicStart4 = start4;
		var italicLength4 = length4;
		var smallCapStart4 = 0;
		var smallCapLength4 = 0;
		var hebrewStart4 = 0;
		var hebrewLength4 = 0;
		break;
	case 2:
		var italicStart4 = 0;
		var italicLength4 = 0;
		var smallCapStart4 = start4;
		var smallCapLength4 = length4;
		var hebrewStart4 = 0;
		var hebrewLength4 = 0;
		break;
	case 3:
		var italicStart4 = start4;
		var italicLength4 = length4;
		var smallCapStart4 = start4;
		var smallCapLength4 = length4;
		var hebrewStart4 = 0;
		var hebrewLength4 = 0;
		break;
	case 4:
		var italicStart4 = 0;
		var italicLength4 = 0;
		var smallCapStart4 = 0;
		var smallCapLength4 = 0;
		var hebrewStart4 = start4;
		var hebrewLength4 = length4;
		break;
	default:
		var italicStart4 = 0;
		var italicLength4 = 0;
		var smallCapStart4 = 0;
		var smallCapLength4 = 0;
		var hebrewStart4 = 0;
		var hebrewLength4 = 0;
}

// Group 5
var start5 = fc.effect("Start Index—Section 5")("Slider");
var length5 = fc.effect("Length—Section 5")("Slider");
var style5 = fc.effect("Style—Section 5")("Menu").value;

switch (style5) {
	case 1:
		var italicStart5 = start5;
		var italicLength5 = length5;
		var smallCapStart5 = 0;
		var smallCapLength5 = 0;
		var hebrewStart5 = 0;
		var hebrewLength5 = 0;
		break;
	case 2:
		var italicStart5 = 0;
		var italicLength5 = 0;
		var smallCapStart5 = start5;
		var smallCapLength5 = length5;
		var hebrewStart5 = 0;
		var hebrewLength5 = 0;
		break;
	case 3:
		var italicStart5 = start5;
		var italicLength5 = length5;
		var smallCapStart5 = start5;
		var smallCapLength5 = length5;
		var hebrewStart5 = 0;
		var hebrewLength5 = 0;
		break;
	case 4:
		var italicStart5 = 0;
		var italicLength5 = 0;
		var smallCapStart5 = 0;
		var smallCapLength5 = 0;
		var hebrewStart5 = start5;
		var hebrewLength5 = length5;
		break;
	default:
		var italicStart5 = 0;
		var italicLength5 = 0;
		var smallCapStart5 = 0;
		var smallCapLength5 = 0;
		var hebrewStart5 = 0;
		var hebrewLength5 = 0;
}

text.sourceText.style
	.setFont("LaskiSlab-RegularItalic",italicStart1,italicLength1)
	.setSmallCaps(true,smallCapStart1,smallCapLength1)
	.setFont("NarkissAsafVariable-Regular",hebrewStart1,hebrewLength1)
	.setApplyStroke(false,hebrewStart1,hebrewLength1)
	.setFont("LaskiSlab-RegularItalic",italicStart2,italicLength2)
	.setSmallCaps(true,smallCapStart2,smallCapLength2)
	.setFont("NarkissAsafVariable-Regular",hebrewStart2,hebrewLength2)
	.setApplyStroke(false,hebrewStart2,hebrewLength2)
	.setFont("LaskiSlab-RegularItalic",italicStart3,italicLength3)
	.setSmallCaps(true,smallCapStart3,smallCapLength3)
	.setFont("NarkissAsafVariable-Regular",hebrewStart3,hebrewLength3)
	.setApplyStroke(false,hebrewStart3,hebrewLength3)
	.setFont("LaskiSlab-RegularItalic",italicStart4,italicLength4)
	.setSmallCaps(true,smallCapStart4,smallCapLength4)
	.setFont("NarkissAsafVariable-Regular",hebrewStart4,hebrewLength4)
	.setApplyStroke(false,hebrewStart4,hebrewLength4)
	.setFont("LaskiSlab-RegularItalic",italicStart5,italicLength5)
	.setSmallCaps(true,smallCapStart5,smallCapLength5)
	.setFont("NarkissAsafVariable-Regular",hebrewStart5,hebrewLength5)
	.setApplyStroke(false,hebrewStart5,hebrewLength5)

Need Help w/ Multiple variables in Per-character Text-Attribute Script

1 Correct answer

Photos