Changing Shape Layers size (width) due to text width

[Tim Drage]

… OK i figured it out myself; this in Rectangle 1>Rectangle Path 1>Size will make the box resizing happen before the round corners and other effects. 🙂

t = thisComp.layer(“tessssstr”);
tRect = t.sourceRectAtTime(time,false);
tUL = t.toComp([tRect.left,tRect.top]);
tLR = t.toComp([tRect.left+tRect.width,tRect.top+tRect.height]);
myRect = sourceRectAtTime(time,false);
myUL = toComp([myRect.left,myRect.top]);
myLR = toComp([myRect.left+myRect.width,myRect.top+myRect.height]);
margin = 10;
[(tLR[0]-tUL[0] + 2*margin),(tLR[1]-tUL[1]+ 2*margin)]

Thanks again Dan for another great solution 🙂

[Nuno Trindade]

Many thanks

Can you help me in a simple thing?

If i wont to adjust the text, not in the center, but aligned to the left?

I already download your example… but if i change the alignment of my_Text… the box don’t move…

Thanks

[Multipasser]

Damn, no reply ☺

want also LEFT aligned box!

[Emilio Le roux]

Thank you very much, I was facing a similar problem and this solved it.

Just a tip for everyone – since I am creating lots of these self adjusting boxes, I decided PARENT the boxes to their respective text layers and then replace:

text_width = thisComp.layer(“my_text”).sourceRectAtTime().width;

for:

text_width = parent.sourceRectAtTime().width;

And so on with the rest of the code. This way you can duplicate both text and box several times and as far as the box is parented to the right text, it will have the right size.

[Alberto Garcia]

Hey,

This is not a solution but a workaround. What I did was to simply mask the shape layer to get cropped on the left side (or whichever side you wish). I also repositioned the shape so its center was on top of the beginning of the editable text.
I changed the code a bit as well to match my design:

margin = 0;
text_width = thisComp.layer("my_text").sourceRectAtTime().width*2;
text_height = thisComp.layer("my_text").sourceRectAtTime().height/6;
box_width = text_width + margin*2;
box_height = text_height + margin*2;

[box_width, box_height]

Hope this helps.

[Adam Leverett]

I’m trying to use this code for a text layer for subtitles, so as the voiceover changes, I have another text keyframe and I’d like the box to adjust as the text changes in width. Seems like the code only is seeing the last keyframe text width size. I’m assuming this is because the code doesn’t execute every time there is a new keyframe…is there a way to do this?

[Tomas Bumbulevičius]

Adam, try adding time value of the keyframe into sourceRectAtTime(), like:


textLayer = thisComp.layer("my_text");
textLayer .sourceRectAtTime(textLayer.key(X).time, false).width;


Where X – your keyframe index inside text layer.

With the same logic, if you only keep it ‘time’ only, instead specifying the exact keyframe, it should update automatically.

Find out more:
After Effects Tutorials: motion design, expressions, scripting.
Boxer – Dynamic Text Boxes Template with a Live Preview

[Huntington Carpenter]

Is there a way to separate the width so it stays at a static length but the height still changes?

[Ter Ber]

Thanks so much for this. I only have a minor request for you guys:
How can I scale or change the rectangle’s margin proportionally with the text size?

Thanks again for helping.

[Filip Vandueren]

Like this (Rectangle size):


t = thisComp.layer("my_text");
tRect = t.sourceRectAtTime(time,false);
tUL = t.toComp([tRect.left,tRect.top]);
tLR = t.toComp([tRect.left+tRect.width,tRect.top+tRect.height]);
myRect = sourceRectAtTime(time,false);
myUL = toComp([myRect.left,myRect.top]);
myLR = toComp([myRect.left+myRect.width,myRect.top+myRect.height]);
textSize = t.text.sourceText.style.fontSize;
margin = textSize * 0.8;
[(tLR[0]-tUL[0] + 2*margin)/(myLR[0]-myUL[0]),(tLR[1]-tUL[1]+ 2*margin)/(myLR[1]-myUL[1])]*100;


.style just looks at the fontSize of the very first Character, so if for some layout-reason that character was set at a smaller size and you want to look at a different character, you should use this:

textSize = t.text.sourceText.getStyleAt(1).fontSize;

the index is 0-based, so this example will look at the fontSize of the second character.