Fit lowerthird to text

graphics
howto
template
flash

#1

I’m pretty new to CasparCG and Action-script and still try to figure out a lot.
I just started making my templates in Adobe Animate and a thing i’m trying to do is how to adjust the size of a lower-third to the amount of text that is entered. right now I do this by creating two template with different lengths but there is probable an better way. Does anybody have a clue how to do this?


#2

Sure, but it’s not so easy to explain. I will try to find an example, that I can share.


#3

What kind of lower third are you using? Is it a plain shape or an image?
How are you filling the data? SetData override or just default caspar-friendly textfields?


#4

It’s both.

First foto is a plane shape with a wipe in/out
Lowerthird

Second one is a png sequence with a more advanced intro/outro
Lowerthird2

If you have an example for this that would be great.


#5

Image 1: Your idea is to adapt the whole shape to the longer of the two text lines, right?
Image 2: Can be tricky to get a png-sequence animation to a variable size, How do you want to do that? By masking away the remaining area?


#6

Yes the idea is for the whole shape with two lines of text.

The idea was to make it in two layers:
layer 1: left of lower-third
layer 2: middel + right of lower-third
where by layer 2 can move left or right depending on the amount of text.


#7

Dependent on the way the animation moves, that is a way to do it. Great.


#8

The animation moves in from the bottom.

But now I have to figure out how to do this. :sweat_smile:


#9

You need to overwrite SetData. Before you set the text property of your TextFields you need to set
Field.autoSize = TextFieldAutoSize.LEFT;
While “Field” is the instance name of the given TextField. After you set the text property, you can use.
Field.width
to query the size of the TextField. Then write code to move the objects accordingly. By the way: I looked around on my PC and did not found an example, that is easy enough to be understandable.