-
How to use “sourceRectAtTime” expression with accents
Hi everyone !
First of all I have to say that I’m french so my English vocabulary is limited and that I’m not really good at scripting so…I’ll try to be as explicit as I can.
Some weeks ago I was looking for a way to create some cool lower thirds in after effects and have them stretch up to fit automatically the text I want.
So I created my text and my background animation. I precomposed this background animation and add a corner pin on it and then used the very useful expression “sourceRectAtTime()” so that the animation fits the size of the text.The idea was to be able to create multiple lower thirds by importing titles using the plugin “CompsFromSpreadsheet” and have my background animations to fit the size of the text in all comps.
This actually works pretty well. But I have one big problem (that makes me regret I wasn’t born in an English speaking country)
As soon as my title contains an accent such as Â,Î, Ô, É, È… the size of the text layer obviously change and my text is no longer centered. The box streches from the bottom to fit the new size.
Here is a screencaps of the problem and the expressions associated with it.
creativecow_sourcerectaccent.jpg
I know I could just add the expression “sourceRectAtTime().height” to the top right corner of the corner pin effect by the other thing is that I’d like to be able to create texts with multiple lines.
I want my background to fit the size of the text even if this one contains accent and be able to add lines if I have to.At work, we thought we could use two text layers, one with accents that defines the size of my background animation, and the other one with or without accents that is displayed. This is a workaround that would work but is there a way to remove accented letters with non accented letters automatically in After Effects ? (by using an expression?)
I’ve been searching for a solution but not any of the workarounds I thought of worked :/
I’d like to hear what you think about that and if you have any solution, I’ll take it !Thanks!
//So far these are the expressions I use on the corner pin effect of my background animation composition //// Top left //
[effect("Quatre coins")("Supérieur gauche")[0],effect("Quatre coins")("Supérieur droit")[1]]
// Top right //
x=thisComp.layer("TITLE é").sourceRectAtTime().width;
[x,effect("Quatre coins")("Supérieur droit")[1]]// Bottom left //
[effect("Quatre coins")("Supérieur gauche")[0],effect("Quatre coins")("Inférieur droit")[1]]
// Bottom right //
y=thisComp.layer("TITLE é").sourceRectAtTime().height;
[effect("Quatre coins")("Supérieur droit")[0],y] -
12 Replies
-
If you’re using corner pin, I’d do something like this:
//upper left:
L = thisComp.layer(“text”);
r = L.sourceRectAtTime(time,false);
fromComp(L.toComp([r.left,r.top]))// upper right:
L = thisComp.layer(“text”);
r = L.sourceRectAtTime(time,false);
fromComp(L.toComp([r.left+r.width,r.top]))// lower left:
L = thisComp.layer(“text”);
r = L.sourceRectAtTime(time,false);
fromComp(L.toComp([r.left,r.top+r.height]))// lower right:
L = thisComp.layer(“text”);
r = L.sourceRectAtTime(time,false);
fromComp(L.toComp([r.left+r.width,r.top+r.height]))Dan
-
Wow, it looks so simple…
It works like a charm thank you so much Dan ! It greatly simplyfies the expressions too.
I’m going to need some time to break down how you did this but that’s great.I have another question though. What if I’d like my lower thirds to have the exact same height wether their texts have accents or not.
I’ll try to explain.
In our videos, we usually use a fade transition between sequences. It would be great to have the lower thirds all at the same height, accents or not.
That would of course mean that in the case of a title with no accents, the background animation would be larger in y and the text would be centered.
This is what I mean:The thing is I still want to be able to add lines. Not sure it’s possible.
Anyway, that’s a really good solution you’ve helped me a lot !
-
Here’s a hack you can try. Pick a string that has the greatest y extents you might need (“Ég” in this example). Then add a source text expression like this to your text layer:
if (time < 0) “Ég” else value
Then modify your corner pin expressions like this:
// upper left
L = thisComp.layer(“text”);
r1 = L.sourceRectAtTime(-1,false);
r2 = L.sourceRectAtTime(time,false);
fromComp(L.toComp([r2.left,r1.top]))// upper right
L = thisComp.layer(“text”);
r1 = L.sourceRectAtTime(-1,false);
r2 = L.sourceRectAtTime(time,false);
fromComp(L.toComp([r2.left + r2.width,r1.top]))// lower left
L = thisComp.layer(“text”);
r1 = L.sourceRectAtTime(-1,false);
r2 = L.sourceRectAtTime(time,false);
fromComp(L.toComp([r2.left,r1.top + r1.height]))// lower right
L = thisComp.layer(“text”);
r1 = L.sourceRectAtTime(-1,false);
r2 = L.sourceRectAtTime(time,false);The expressions should pick up the max y dimensions by getting the sourceRect from a negative time, where the string is “Ég” (or whatever you set it to), but use the actual sourceRect to calculate the width.
Dan
-
The hack works really well in one text line and that’s awesome but for some unknown reason (at least unknown to me) it doesn’t work when I write on multiple lines.
EDIT: Problem solved, just need to remove r1 from lower left and lower right
I’m breaking down your expressions and learning more about toComp(), fromComp() and sourceRectAtTime() functions.
There is something I still don’t understand.I’ve seen that you used “r.left” and “r.top” to get the extreme left and top positions of the text bounding box. To get the right and bottom values, you used “r.left + r.width” instead of “r.right” (which seems not to exist). That’s my question: why is it impossible to get the extreme right and bottom values of the bounding box directly by using “r.right” or “r.bottom” ?
Of course, “r.left+r.width” does the job but I’m curious to know why such function doesn’t exist.
Again, Dan, thank you so much !
-
>That’s my question: why is it impossible to get the extreme right and bottom values of the bounding box directly by using “r.right” or “r.bottom” ?
I’m not sure why they did it that way originally, but the expressions implementation matches the way they did it with scripting (which came first).
Dan
-
Ok, I’ve been playing with these expressions for hours and it works great but in certain conditions.
Maybe I’ve started things the wrong way. The problem is the corner pin effect I think. When I want to add round corners to my shape layer in my precomposition, the corner pin effect will of course stretch it all and it looks pretty bad especially when I write long titles.
I managed to do the scripting again on a shape layer, directly in my main composition. I’m using a rectangle shape.
Here is a screenshot
It works but only on 1 line. And that’s because unlike the corner pin effect, I can’t have the coordinates of my shape layer points and lock the top points while the bottom points could still move vertically.
I do not wish to take any more of your time but do you think there is a solution for this ?
//Text layer/sourceTextif (time < -1) "E" else
if (time < 0) "É" else value//Shape layer/Content/Rectangle 1/Rectangle Path/Size
L = thisComp.layer(1);
r1 = L.sourceRectAtTime(-1,false);
r2 = L.sourceRectAtTime(time,false);[r2.width,r1.height]
//Shape layer/Content/Rectangle 1/Rectangle Path/Position
content("Rectangle 1").content("Tracé rectangulaire 1").size/2;
-
Based on what you’re trying to do, rather than craft a convoluted expression, I think I’d recommend doing it with a script to size and position your background that you would run after you populate your comps. There’s a learning curve, but I think it would give you a more flexible and robust solution.
Dan
-
Sebastian,
I’ve been trying to do the same as you and with help from several sources I finally found a set of expressions that do exactly what I want for centered text, left and right justified text, and with multiple lines:
Try it out!
*steve
{Shape Layer that follows the size of the text input}
ON SHAPE LAYER THAT’S Parented to the text layer:Rectangle path size expression:
s=thisComp.layer("Text");
paddingx=35;
paddingy=25;
x=s.sourceRectAtTime(time-s.inPoint,true).width;
y=s.sourceRectAtTime(time-s.inPoint,true).height;
[x+paddingx,y+paddingy]Rectangle Path position expression:
s=thisComp.layer("Text");
rect = thisComp.layer("Try to the me asdasdasd").sourceRectAtTime(time-s.inPoint,true);
[rect.left + 0.5*rect.width, rect.top+0.5*rect.height];
-
Oops, this part: “Try to the me asdasdasd” should be “Text” or whatever else your text layer is called.
-
Hi I am trying to get this to work but the text seems to be sitting half out side the bottom of the shape layer, please see this image
Reply to this Discussion! Login or Sign Up