Page 1 of 1

Text autofollow

PostPosted: 20 Mar 2017, 10:53
by Monden
I am a beginner in using CasparCG, so please don't mind if I ask something that is elementary. I have a problem when running the flash template in CasparCG. The code presented below is suppose to create an autofollow effect for the text. The request is to have a Movie Clip (it has to be a Movie Clip for the fading effect) containing three dynamic text fields (which I created as a symbol) which should be centered inside of it. This works fine in Flash, but during flash template generating, it seems that text width becomes an absolute value, so when I input different text for the text fields in CasparCG, the text does not align correctly. I guess it has something to do with the definition of variables, functions and classes.


Code: Select all
 brojdresa.x = blanko.x + 438 - (brojdresa.textWidth + ime.textWidth + prezime.textWidth + 2 * blanko.textWidth)/2;
      ime.x = brojdresa.x + brojdresa.textWidth + blanko.textWidth;
      prezime.x = brojdresa.x + brojdresa.textWidth + blanko.textWidth + ime.textWidth + blanko.textWidth;

Re: Text autofollow

PostPosted: 20 Mar 2017, 12:32
by didikunz
Iguess the problem could be, that a fields textWidth property does NOT return it's contents size, but the size it has been created inside the designer. So if your field has a width of say 600px it will return 600px. The trick here is to make the field as small as possible and set the fields autoSize property to TextFieldAutoSize.LEFT; That makes the field adapt it's width to the containing text.

Re: Text autofollow

PostPosted: 20 Mar 2017, 13:52
by Monden
I've tried what you've suggested, but it didn't work.

This is what it looks like in Flash and that is how it should be.
Image
This is what it looks like in the Screen consumer, after I've entered a different text than the one in the designer (longer, in this case).
Image
So, as you've said, the problem is that textwidth is taken from the designer (Flash) and is not recalculated for the new text that I've entered in CasparCG.

Re: Text autofollow

PostPosted: 20 Mar 2017, 14:53
by didikunz
No, you did not make the textfields as small as possible. In the designer put in a text like "1" (without the ") and then make the leght of the field as small as possible. So that the text (after switching on autosize) extend the field in any case, Then you will get the correct textWidth readout.
In the picture bellow you see 3 fields made very small and expanding while text is added.
Grab1.png
Grab1.png (4.78 KiB) Viewed 1275 times

Re: Text autofollow

PostPosted: 20 Mar 2017, 17:06
by Monden
I did as you said.
Image
And this is what I got (of course I entered longer text in CasparCG, but only the width of the field from the designer is visible)
Image

Re: Text autofollow

PostPosted: 20 Mar 2017, 19:18
by didikunz
Sorry, read carefully:
didikunz wrote: The trick here is to make the field as small as possible and set the fields autoSize property to TextFieldAutoSize.LEFT; That makes the field adapt it's width to the containing text.

You forgot to set the autoSize property. If you don't, the fields stay as small as they are.

Re: Text autofollow

PostPosted: 22 Mar 2017, 12:28
by Monden
I've implemented AutoSize as seen in the picture below.

Image

The designer preview still works fine.

Image

CasparCG Screen Consumer shows this.

Image

The problem is that the text field widths are calculated using the text entered in the designer and, I presume, during generating template transformed into a constant and applied that way when I enter different text in CasparCG Client.

Re: Text autofollow

PostPosted: 22 Mar 2017, 12:38
by didikunz
Aha, you run your script from an action frame. That will not work, you need to have an extra .as script and run the code AFTER all fiels are populated with data.

See here: http://casparcg.com/wiki/Content_/_Media#Creating_Advanced_Flash_Templates
and here: http://casparcg.com/wiki/Content_/_Media#Tutorial:_Loading_Dynamic_Images_in_a_Flash_Template

Re: Text autofollow

PostPosted: 31 Mar 2017, 15:38
by Monden
Thank you for your effort, Didi. Unfortunatelly, I still haven't managed to bring this project to an end. I've followed the instructions on the link that you've posted and managed to generate the flash template, but when I tried to run it in Caspar Client it showed nothing. Here is what I did.

package {
import flash.text.TextField;
import flash.text.TextFormat;
import flash.display.Sprite;
import flash.display.MovieClip;
import se.svt.caspar.ICommunicationManager;
import se.svt.caspar.IRegisteredDataSharer;
import se.svt.caspar.template.CasparTemplate;

public class AutoResizeText extends CasparTemplate {

public function AutoResizeText() {
var textField:TextField = new TextField();
var textFormat:TextFormat = new TextFormat();

textField.text = 'Marko Stankic Marko Stankic Marko Stankic Marko Stankic Marko Stankic Marko Stankic Marko Stankic Marko Stankic';
textField.multiline = false;
textField.width = stage.stageWidth/2;
textField.height = stage.stageHeight/16;
textField.x = stage.stageWidth/4;
textField.y = stage.stageHeight/4;
textField.border = true;

textFormat.size = 34;
textFormat.letterSpacing = 5;
textField.setTextFormat(textFormat);

autoResizeTextField(textField, textField.width, textField.height);

addChild(textField);
}

public function autoResizeTextField(textField:TextField, fieldWidth:int, fieldHeight:int):void{
var textFormat:TextFormat = textField.getTextFormat();

while(textField.textWidth > textField.width && textFormat.letterSpacing > -2){
textFormat.letterSpacing = int(textFormat.letterSpacing) - 1;
textField.setTextFormat(textFormat);
}

while(textField.textWidth > textField.width){
textFormat.size = int(textFormat.size) - 1;
textField.setTextFormat(textFormat);
}



}

}
}

Re: Text autofollow

PostPosted: 01 Apr 2017, 08:32
by didikunz
In your code you create a new textfield, and add it to the stage, but there is no way forCaspar to set the text. You need to overwrite SetData() for this to work. Inside SetData you can use objects alredy on the stage. If you look at the example code for the dynamic image loading, you see this.

For initialisations, if necessary, don't use the constructor, but overwrite postInitialize. That runs after the template has been created, when all objects are loaded and placed on the stage, but befora nything is visible.

So you would set your textfields to autosize inside postInitialize. Then inside SetData you loop trough the xml nodes and set your textfields text properties. After the loop, but still inside SetData you do the math to arrange the fields one after the other. At that moment the size of the fields will readout valid values.

Re: Text autofollow

PostPosted: 03 Apr 2017, 10:21
by Monden
I've tried to download Team_Statistics.fla which is used in the example in your link, but, unfortunately, it is unavailable for download due to an error. Is there a way that I can get it?

Re: Text autofollow

PostPosted: 03 Apr 2017, 12:12
by didikunz

Re: Text autofollow

PostPosted: 04 Apr 2017, 10:13
by Monden
Ok, I've figured this out, but, actually, what I need is to swap an animation from Casparcg, for example a waving flag. Is there a way that this can be done?

Re: Text autofollow

PostPosted: 04 Apr 2017, 10:49
by didikunz
Monden wrote:Ok, I've figured this out, but, actually, what I need is to swap an animation from Casparcg, for example a waving flag. Is there a way that this can be done?


Anything can be done :) What do you mean, having a dynamic animation? Do having a flag animation somewhere and sending that to the template? I never did this, I only use static pictures. But I think it could be done somehow. You should be able to load some animation similar to pictures...

Re: Text autofollow

PostPosted: 04 Apr 2017, 10:59
by Monden
I have a created an animation in Flash by placing a series of pictures inside of a symbol and then put that symbol inside of a movie clip on the main timeline. What I actually need is to swap that symbol with another one from Casparcg.

Re: Text autofollow

PostPosted: 04 Apr 2017, 11:18
by didikunz
You would use the FLVPlayback component in a similar fashion as the UILoader. You can also set the source property to an URL of a videoclip that you have somewhere on the system. That's at lest what I figured out by looking at Adobe's documentation. As I said, I never tried it...

Re: Text autofollow

PostPosted: 05 Apr 2017, 14:54
by Monden
I replaced UILoader with FLV Playback (with the same AS3 class as in the previous example) and it would only play flv videos (without alpha) in Flash. After creating a flash template, I tried running it in Caspar and nothing happened, just black screen. It wouldn't play mov files even in Flash.

Then I tried to do it with a video object. Also worked fine in Flash with flv, but I got nothing in Caspar.

Re: Text autofollow

PostPosted: 05 Apr 2017, 15:19
by didikunz
...as I said, I never tried it. Are there many different flags? How many? All nations of the world?

Re: Text autofollow

PostPosted: 06 Apr 2017, 11:41
by Monden
I did it with FLV Playback component. Works fine, thank you. The only thing I need now is to preserve transparency (alpha channel), but I'll open another topic for that.

Re: Text autofollow

PostPosted: 06 Apr 2017, 12:42
by didikunz
You should be able to export flv with alpha channel. At least here it says so: https://blogs.adobe.com/creativecloud/exporting_video_with_an_alpha/

Re: Text autofollow

PostPosted: 06 Apr 2017, 12:50
by Monden
Newer versions of Adobe products don't support exporting to flv. I'll try with an older version.

One more thing - I'm having a problem with running this template with external video files. Occasionally, Caspar Client just shows black screen when I try to run the template. Then I check other templates, and they work fine. After pressing F2 for a while, at some point, it starts running for a second or 2 and then blacks out again. Do you have any idea what might be the cause of this problem?