Skip to main content
K
kg77
Inspiring
January 12, 2025
Answered

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

  • January 12, 2025
  • 2 replies
  • 592 views

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:

 

 

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!

Correct answer kg77

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)

2 replies

K
kg77AuthorCorrect answer
Inspiring
January 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)
ShiveringCactus
Community Expert
ShiveringCactusCommunity Expert
Community Expert
January 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;
}
K
kg77Author
Inspiring
January 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.

ShiveringCactus
Community Expert
ShiveringCactusCommunity Expert
Community Expert
January 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?

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices