sourceRectAtTime difficulties

[holtz]

Hi all,

So I've done quite a bit of research on this new expression "control" and it has tons of possibilities, but I can't get it to work exactly as I want it to and I'm hoping someone here has some insight.

I'm looking at it to control the background shape around text that's input through the newish After Effects editable text for text boxes/lower thirds, etc in Premiere.

Evan Abrams is from whom I initially received the info from in his tutorial: SourceRectAtTime() Expression- Adobe After Effects tutorial - YouTube

Here is his expression work:

This is the expression we wrote on the size:

s=thisComp.layer("Hello people");

x=s.sourceRectAtTime(time-s.inPoint,true­).width;

y=s.sourceRectAtTime(time-s.inPoint,true­).height;

[x,y]

This is the expression we wrote on the position:

content("Rectangle 1").content("Rectangle Path 1").size/2

Works kinda well, but generally only with left justified text for both x and y dimensions AND he failed to point out that the anchor point of the shape layer needs to go to the top left point of the shape layer.

Someone responded to his video about trying it for right justified text and figured out that if the expression for the position is changed from:

content("Rectangle 1").content("Rectangle Path 1").size/2

to:

content("Rectangle 1").content("Rectangle Path 1").size/2*-1

Unfortunately, this doesn't work with multiple lines of text.

Also, the respondent point out that if the position expression is deleted, one can use the center justified text and have it work... but only for a single line of text.

Dan Ebberts‌ pointed out an alternative solution here using solids:

//scale

t = thisComp.layer("text");

margin = 20;

r = t.sourceRectAtTime(time,true);

w = r.width*t.scale[0]/100 + margin;

h = r.height*t.scale[1]/100 + margin;

[w/width,h/height]*100

// position

t = thisComp.layer("text");

r = t.sourceRectAtTime(time,true);

s = t.scale;

ap = t.anchorPoint;

p = t.position;

x = p[0] + (r.left + r.width/2 - ap[0])*s[0]/100;

y = p[1] + (r.top + r.height/2 - ap[1])*s[1]/100;

[x,y]

Unfortunately, when one does the import of the comp from AE to Premiere, the text justification is correct initially, but when the text is changed in premiere the whole thing breaks and it defaults to a left justification for the text and that requires moving the box and text in Premiere to make it how it appeared in AE (although the center justification is lost) and I don't want to have to modify the position property in Premiere.

I found this expression control on Reddit:

[–]dfreynoldsMoGraph/VFX 10+ years 1 point 8 months ago*

Create a text layer with some text, called "A Text Layer"

Create a shape layer with a Rectangle Path element in it.

Put this expression in the size property of the Rectangle Path:

theTextLayer = thisComp.layer("A Text Layer"); 
thePadding = 40; 
theTextRectInfo = theTextLayer.sourceRectAtTime(time); 
theWidth = theTextRectInfo.width + (thePadding*2); 
theHeight = theTextRectInfo.height + (thePadding*2); 
[theWidth,theHeight] 

Put this expression in the position property of the shape layer:

theTextLayer = thisComp.layer("A Text Layer"); 
theTextRectInfo = theTextLayer.sourceRectAtTime(time); 
theX = theTextLayer.toComp([0,0])[0] + (theTextRectInfo.width/2); 
theY = theTextLayer.toComp([0,0])[1] - (theTextRectInfo.height/2); 
[theX,theY]

But as with the other examples, it cannot handle changes in the text justification or multiple lines of text correctly unless everything is left justified in AE.

I need to have an expression control on the text and background shape layer that I can modify for left, center and right justified text that can allow for multiple lines of text to be input in Premiere and it keeps it's original location as it's tested in after effects.

Any ideas?

Thanks for any help you might have!

[UQg · Accepted solution]

If the shape is meant to follow the text like a little dog, it's probably easier to parent it to the text.

Then use your size expression, and in the position, use an expression that sets the center of the rectangle at the center of the text, like this:

rect = thisComp.layer("Hello people").sourceRectAtTime(time-s.inPoint,true);

[rect.left + 0.5*rect.width, rect.top+0.5*rect.height];

It should work (provided that the anchor point of the shape is at default ([0,0]) and if there groups between the shape layer and the rectangle their position/anchorPoint should also be at their default)

and is completely independant of justification, number of lines, etc

[holtz]

Yes! That worked PERFECTLY! Plus, adding a padding variable to the SIZE expression gives a uniform padding around the entire rectangle!

Thanks much UQg‌!

s=thisComp.layer("Try me");

padding=25;

x=s.sourceRectAtTime(time-s.inPoint,true).width;

y=s.sourceRectAtTime(time-s.inPoint,true).height;

[x+padding,y+padding]

Cheers, you made my day!

[Roei Tzoref]

I prefer to use the shape group transform for this. one expression, simple. no problem.

reset your rectangle path properties and use the shape group transform ONLY:

set your anchor point to where you wish. make sure its there, no snapping for shape group's anchor point yet unfortunately. 

use scale + position to set your shape

set this expression for the scale:

t=thisComp.layer("text");
padding=50;
x=t.sourceRectAtTime(time-inPoint,true).width+padding;
[x,value[1]]

I keep the Y value free so adjust through the scale property itself.

here's the project file:

RectAtTimeRTL.aep - Google Drive

[tristansummers]

Alas that will not work with corner roundedness.

Has this been answered anywhere else?

I think I have fixed this before, but project files not to hand.

I also think it didn't translate to Premiere via Animation Template (despite using sliders to be able to build it)

[SquareEyz]

Hi All,

I've just gone down this rabbit hole myself all morning. I've got something that works realy well enough to roll out at the facility I work at, however I just discovered by accident that the width calculated by sourceRectAtTime seems to ignore spaces. I've got decent "padding", but I'm not liking the inconsistency of the end product ( lots of short words in a line vs verbose gesticulations, or Hyphenated-word-combinations, produce drastically varying box widths.

Anyone know an expression tweak to calculate the actual end-to-end width of the text source, one that includes the spaces?

THANKS!

[holtz]

Here is the latest and absolutely best information about sourcerectattime...

sourceRectAtTime(); - After Effects Expressions - YouTube

[SquareEyz]

Wow- thank you so much.
Jake In Motion Has some stellar presentations on Expressions, and I was unaware of him.

Cheers @holtz!

[Dan Ebberts]

>sourceRectAtTime seems to ignore spaces

It would ignore leading or trailing spaces, is that what you're describing, or is it internal spaces? What expression are you using?

Dan

[SquareEyz]

Thank you Dan!

Correct, its only leading and trailing spaces: I was misinterpreting things. I've still been getting some odd "Jumps" in size and position, based on text.

When I get something I'm happy with, I'll share it here.

Thanks all, and thanks Holtz!

D

[jacoba]

Thank you, this helped me align a piece of branding alongside the name as it grows without allowing it to shift up and down as the original rectAtTime property did. Much appreciated!

[edbertcadavero]

If you want to put box in you text. maybe you should put this filter inside your text. And remove the box below.
- Invert

     Channel - Alpha

     Blend with Original - 0    

-Directional Blur

     Directional - 91 (change this value to for the aspect ratio  of the height and width)

     Blur Length 7.5 (height and width control)
-Simple Chocker     View - Matte

     Choke Matte - 0

-Set Matte

     Check Invert Matte

     uncheck Stretch Matte to Fit

-Fill

     Box color that you preffered

-CC Composite

          unCheck RGB Only

additional filter if you have animated linear wipe.

-Linear Wipe

          Transition Completion

                    put this expression inside

                         L = thisLayer;

                         P = L.toComp([0,0,0]);

                         V1 = P[0];

                         V2 = L.sourceRectAtTime().width;

                         linear(value,0,100,100-(((V1-20)/1920)*100),100-(((((V1+V2+40)))/1920)*100))

                       note : the value 20 and 40 at the (V1-20) and (V1+V2 + 40) is depends on the value of the Blue Length at top.

          Wipe Angle -90

[Mathias Moehl]

For these kinds of automatic layouts involving boxes around texts, we also have a great new script called Pins & Boxes, which creates sourceRectAtTime and many other expressions for you. It is very flexible and easy to use:

you can get it here:

https://aescripts.com/pins-and-boxes/