Can't set correct anchor position for box which uses a size expression linked to source text.

[wideEyedPupil]

I was following along an Adobe tutorial that has type centred on screen, centred paragraph style and uses a simple expression to make a coloured rounded-rectangle calacute it's size from the sourceRecAtTime() property of the text layer. Then it adds a control slider for a padding effect. Easy enough.

Problem is I need my type left-justified as I'm needing three lines of left just fied type, each lined up at same left margin. So I left justify my first line of type and set it's anchor to the left side of the text box so as I type more chars the text moves out to the right and the existing characters do not move.

Now the rectangle beneath it moves to the wrong position on screen unless same width of text as how i set it up. 

File here: https://u.pcloud.link/publink/show?code=XZUy8JXZIM6QuCiym3YnGXdnlEDLGbvTquSX

I know how to use anchors in Illustrator, InDesign etc but I must admit i find them confusing to use in AE at times. Should I be using anchor or position? If I knew how to access the centre point of the text (x_location + width/2?) then i'd just have a centred anchor on the rectangle and track it to the changing centre point of the text.  

I'm not sure if I can simply set the anchor position for both to the correct positions and that will work or if I need to use an expression to compute the anchor point. I thought of using a centred anchor point for the rectange and tracking it to the calcuated centre of the text layer but I dont know how to get that, and as it is left anchored, the position just stays in the same spot so that doesn't help either.

I don't even know how to think this through it's so confusing, whatever i try doesn't seem to get me any closer to a solution.

please help.

[Rick Gerard · Accepted solution]

The tutorial is very basic, the workflow is a little inefficient, there is no compensation for text layer scale or position, so all Valentina Vee taught you was a very basic approach to creating a box behind a text layer. The idea of changing Transform Rectangle/Scale is not at all useful in a day to day workflow. In my opinion shifting the text layer Anchor Point to the center of the text layer is also not a very good idea, but if you really want to do that you should do it with an expression.

If you want to just use the simple expression in the tutorial you need to select the shape layer, press the U key twice to reveal all of the modified properties of the layer, look for the Rectangle 1/ Rectangle Path 1/Transform property, or the Transform Rectangle 1 property, not the layer/transform property,  and adjust the Shape Layer/Contents/Rectangle 1/Rectangle Path 1/ Positon or the Transform Rectangle 1/ Anchor Point or Position property and make your adjustment for left justified text there. That will properly position the text box but the text box will not stay lined up with the text layer if you move the text. 

My Magic Text Box animation preset includes sliders for X Pad, Y Pad, Baseline Shift, Roundness, and a check box for Left Justified text. Expressions are added to Rectangle Path 1/Size, Rectangle Path 1/Position, Roundness, Transform Rectangle 1/ anchor Point, Transform Rectangle 1/Position, Layer/Transform/Anchor Point, and Layer/Transform Position.  I use index-1 instead of a layer name to look at the text layer above. Three of the expressions, Transform Rectangle 1/Anchor Point, Transform Rectangle 1/Position, and Layer/Transform/Anchor Point are just a simple array setting the x and y values to zero. 

Here are the expressions:

// Rectangle size
txt = thisComp.layer(index - 1);
s = txt.sourceRectAtTime();
padX = effect("Pad X")("Slider");
padY = effect("Pad Y")("Slider");
txtScale = txt.scale * .01;
txtBox = [s.width, s.height] + [padX, padY];
[txtBox[0] * txtScale[0], txtBox[1] * txtScale[1]]

//Rectangle position
txt = thisComp.layer(index - 1);
s = txt.sourceRectAtTime();
padX = effect("Pad X")("Slider");
padY = effect("Pad Y")("Slider");
txtScale = txt.scale * .01;
descFix = effect("Baseline Shift")("Slider");
txtBox = [s.width, s.height] + [padX, padY];
correction = content("Text Box").content("Rectangle Path 1").size;
[txtBox[0] * txtScale[0], (txtBox[1] + (s.top/2) + descFix)  * txtScale[1]] - correction

// Roundness
radiusComp = effect("Roundness")("Slider")* .01;
boxHeight = content("Text Box").content("Rectangle Path 1").size[1] / 2;
radiusComp * boxHeight

// Transform Rectangle 1 Anchor Point, Transform Rectangle 1 Position, Layer Anchor Point
[0, 0]

//Layer position
txt = thisComp.layer(index - 1);
s = txt.sourceRectAtTime();
widthComp = s.width / 2;
if (effect("Left Justify")("Checkbox") == 0)
	txt.position;
else
	[txt.position[0] + widthComp, txt.position[1]]

This is what the comp looks like. I have rearranged the pannels and expanded everything after pressing 'uu' to show you everything I did to the shape layer. I also renamed Rectangle 1 to Text Box to keep things organized.

With these expressions applied to a shape layer you can position the text anywhere you want on a layer, compensate for descenders, set horizontal and vertical padding, and scale the text layer any way you want.  I use it all the time. All of the controls can also be added to the Extended Graphics Panel and you can export a mogrt with a text box you can use In Premiere Pro. 

When you get it working select the Contents of the Shape layer, the Effects header, and the layer Anchor Point and Position property and save your own animation preset. Selecting the properties in this way will give you an animation preset that you can just double click to create the shape layer, then just drag it under any text layer that has the baseline shift set to zero in the character panel and you have a perfect text box ready to customize.

I have a set of about 100 animation presets along with a tutorial series will soon be available for purchase. I will make the announcement as soon as they are ready. 

I should also mention that all of these expressions need to be modified if you want to parent the shape layer to the text layer. When you get a little more experience you should be able to do that by using layer space transformations, but that is a topic for another thread.

[wideEyedPupil]

Thanks Rick, I think you came to the rescue last time I thought it would be a good idea to learn mogrts a year and a half ago.  Yeah the VV tutorial was a lot of words to say not much, seems to be a trend for that these days. And hey, whats a semicolon  called again?! 

Have to say I much prefer doing this stuff in Quartz Composer or Vuo but they don't export to AE plugins (well QC does with the $300 NoiseIndustries plugin tool but Vuo only exports to FCP X plugins so far). AE just seems to completely horible for doing any kind of simple geometry math in. I'll try with all your codes. Yes, decenders mess up alignment!!

Good luck with the tutorials. Someone needs to make so good ones to get the fundementals not just the easy tricks like loop and wiggle. I used to train in industry in Illustrator and Photoshop and I was all about getting my clients/students to aquire the tools to be able to do anything if they set their mind to it. 

[wideEyedPupil]

Rick regards this code:

// Transform Rectangle 1 Anchor Point, Transform Rectangle 1 Position, Layer Anchor Point
[0, 0]

I've noticed that in AE the anochor seems to move around of it's own accord when I do things to the Rectangle live move it, scale it etc. Does this code basically block all that to hold the anchor in place so the rest of the code is effective?  

[wideEyedPupil]

And I can't edit these posts, due to a UI problem with this site in Safari.

The "… More" button that i think hides the Edit button doesn't produce a menu for me in Safari sorry!

[wideEyedPupil]

So sorry about the spelling and grammar mistakes was what I wanted to say.

[wideEyedPupil]

Can't edit posts in FireFox or Safari. For Pete's Sake @Adobe!