Auto Textbox Resize
Here are a few handy expressions we use to help with our workflow when a layer shape that sits under text needs to automatically resize based on the size of the text above it. We also adds in a couple of slider controls so you can fine tune the margin margin of space around the text.
First you need to open up a new comp and create a text layer with a rectangle layer shape directly underneath it. Then, you'll need to apply the following expression to the text layers anchor point. This makes the anchor point of the text layer automatically adjust depending on the text you enter. To do this, just select the text layer and hit 'A' on the keyboard to drop down the anchor point control. Then you can 'alt'-click on the stopwatch icon to allow you to type in the first part of the expression.
R = thisLayer.sourceRectAtTime(time);
T = R.top;
L = R.left;
W = R.width;
H = R.height;
The last line of this expression depends on how you would like to align your text. So select the next line depending on your needs.
X Centre Y Centre:
[L+W/2,T+H/2]
X Left Y Lower:
[L,T+H]
X Right Y Lower:
[L+W,T+H2]
From these three examples you should be able to see how you can adjust this last line of this expression to enable you to align the text to any other position you require.
Once that's all sorted you'll need to add two expression slider control layers to the layer shape below the text. Simply select the shape layer and go to - Effect - Expression Controls - Slider Control. Rename the two slider controls to 'X_margin' and 'Y_margin' by selecting each one and hitting enter. This way you can adjusting the values to whatever seems right for your project.
Finally, we can add the two expressions that control the layer shape size and position so that it updates with the text layer. Meaning that when the text layer becomes longer or shorter, so does the layer shape. If you move the text the layer shape follows.
This expression needs to be applied to the transform position of the layer shape:
t = thisComp.layer(index-1);
tRect = t.sourceRectAtTime(time,false);
tUL = t.toComp([tRect.left,tRect.top]);
tLR = t.toComp([tRect.left+tRect.width,tRect.top+tRect.height]);
tCenter = (tUL + tLR)/2
myRect = sourceRectAtTime(time,false);
myUL = toComp([myRect.left,myRect.top]);
myLR = toComp([myRect.left+myRect.width,myRect.top+myRect.height]);
myCenter = (myUL + myLR)/2;
delta = myCenter - tCenter;
value - delta
This needs to be applied to a rectangle path size (not the layers scale):
t = thisComp.layer(index-1);
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]);
X_margin = effect("X_margin")("Slider");
Y_margin = effect("Y_margin")("Slider");
[(tLR[0]-tUL[0] + 2*X_margin),(tLR[1]-tUL[1]+ 2*Y_margin)]
And that's it. Now you can update the text at any time and the text box will automatically update.
Just as a couple of little side notes, this expression requires the text box to always be the layer immediately below the text layer because of the 'index-1' part of this expression. And as this expression is linked to the layer shapes path size, and not the layers scale, this means you can add rounding to the layer shape corners which don't become distorted when the layer shape changes it's dimensions.