Highlighted

Auto scaling text expression

Explorer ,
Oct 30, 2020

Copy link to clipboard

Copied

Hi, 

Here is what I want to achieve. I have an instagram animation with a Username in it. If it's a short username, say 4 letters, it needs to stay 'scale 100%'. See here: https://gyazo.com/1ae68fba1beaaf888158f15500589c8e

If it gets a bit longer, say 10 characters, it still needs to be at scale 100%. See here: https://gyazo.com/cfd23995c44a6cfd6784a00096d4583e

But then, if it gets even longer, it needs to start scaling down, as it will otherwise touch the other graphical elements in the animation, see here: https://gyazo.com/714a8134fba65202df6b09c4094f8823

 

How can I achieve this?

 

Thanks for the help in advance.

Like @Mylenium said, you will need a few lines of code and use sourceRectAtTime() to get the width of the Text Layer.

Because it is easier to show you than to explain it, I build it for you 🙂
FitText_20201103.zip 

FitText_20201103.gif

 

In detail:

The Scripts is devided into seperate Expression Sliders, so you can see what is going on in each step.
You can set the target right edge using the Point Control, the red values are calculated.

Screenshot 2020-11-03 at 09.00.39.png

  • max width: the calculated max width of the text box
  • text width: the actual width of the text, using: thisLayer.sourceRectAtTime().width;
  • calc scale: the new scale for the layer calculated from the max width / text width

 

TOPICS
Expressions

Views

65

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

Auto scaling text expression

Explorer ,
Oct 30, 2020

Copy link to clipboard

Copied

Hi, 

Here is what I want to achieve. I have an instagram animation with a Username in it. If it's a short username, say 4 letters, it needs to stay 'scale 100%'. See here: https://gyazo.com/1ae68fba1beaaf888158f15500589c8e

If it gets a bit longer, say 10 characters, it still needs to be at scale 100%. See here: https://gyazo.com/cfd23995c44a6cfd6784a00096d4583e

But then, if it gets even longer, it needs to start scaling down, as it will otherwise touch the other graphical elements in the animation, see here: https://gyazo.com/714a8134fba65202df6b09c4094f8823

 

How can I achieve this?

 

Thanks for the help in advance.

Like @Mylenium said, you will need a few lines of code and use sourceRectAtTime() to get the width of the Text Layer.

Because it is easier to show you than to explain it, I build it for you 🙂
FitText_20201103.zip 

FitText_20201103.gif

 

In detail:

The Scripts is devided into seperate Expression Sliders, so you can see what is going on in each step.
You can set the target right edge using the Point Control, the red values are calculated.

Screenshot 2020-11-03 at 09.00.39.png

  • max width: the calculated max width of the text box
  • text width: the actual width of the text, using: thisLayer.sourceRectAtTime().width;
  • calc scale: the new scale for the layer calculated from the max width / text width

 

TOPICS
Expressions

Views

66

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
Oct 30, 2020 0
Most Valuable Participant ,
Oct 30, 2020

Copy link to clipboard

Copied

This is the old "fit shape box around text" thing just in reverse. A search on this forum can surely turn up some expressions stuff on how to use sourceRectAtTime() to determine the text's pixel size and then in your case the only real trick would be to filter it through a linear() function or whatever to remap the relative scaling.

 

Mylenium

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...
Oct 30, 2020 0
Explorer ,
Nov 03, 2020

Copy link to clipboard

Copied

Like @Mylenium said, you will need a few lines of code and use sourceRectAtTime() to get the width of the Text Layer.

Because it is easier to show you than to explain it, I build it for you 🙂
FitText_20201103.zip 

FitText_20201103.gif

 

In detail:

The Scripts is devided into seperate Expression Sliders, so you can see what is going on in each step.
You can set the target right edge using the Point Control, the red values are calculated.

Screenshot 2020-11-03 at 09.00.39.png

  • max width: the calculated max width of the text box
  • text width: the actual width of the text, using: thisLayer.sourceRectAtTime().width;
  • calc scale: the new scale for the layer calculated from the max width / text width

 

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...
Nov 03, 2020 1