Highlighted

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

Engaged ,
Sep 27, 2020

Copy link to clipboard

Copied

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.

 

Screen Shot 2020-09-28 at 2.29.00 am.png
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. 

Screen Shot 2020-09-28 at 2.32.20 am.png

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.

 

 

 

 

Adobe Community Professional
Correct answer by Rick Gerard | Adobe Community Professional

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.

Screenshot_2020-09-27 11.51.26_idGKnW.png

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.

Screenshot_2020-09-27 12.17.40_5mmYVC.png

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.

TOPICS
Expressions, How to

Views

137

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Engaged ,
Sep 27, 2020

Copy link to clipboard

Copied

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.

 

Screen Shot 2020-09-28 at 2.29.00 am.png
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. 

Screen Shot 2020-09-28 at 2.32.20 am.png

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.

 

 

 

 

Adobe Community Professional
Correct answer by Rick Gerard | Adobe Community Professional

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.

Screenshot_2020-09-27 11.51.26_idGKnW.png

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.

Screenshot_2020-09-27 12.17.40_5mmYVC.png

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.

TOPICS
Expressions, How to

Views

138

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Sep 27, 2020 0
Adobe Community Professional ,
Sep 27, 2020

Copy link to clipboard

Copied

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.

Screenshot_2020-09-27 11.51.26_idGKnW.png

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.

Screenshot_2020-09-27 12.17.40_5mmYVC.png

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 27, 2020 1
Engaged ,
Sep 27, 2020

Copy link to clipboard

Copied

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. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 27, 2020 0
Engaged ,
Sep 27, 2020

Copy link to clipboard

Copied

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?  

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 27, 2020 0
Engaged ,
Sep 27, 2020

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 27, 2020 0
Engaged ,
Sep 27, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 27, 2020 0
Engaged ,
Sep 27, 2020

Copy link to clipboard

Copied

Screen Shot 2020-09-28 at 4.01.29 pm.png

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 27, 2020 0