It is currently 24 Jun 2017, 18:11



Text autofollow

Videos, graphics, Flash templates – how to create and play them using CasparCG

Moderators: Macey, Jonas Hummelstrand, didikunz

Text autofollow

Postby Monden » 20 Mar 2017, 10:53

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;
Monden
 
Posts: 15
Joined: 17 Mar 2017, 10:23

Re: Text autofollow

Postby didikunz » 20 Mar 2017, 12:32

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.
Didi Kunz
CasparCG Client-Programmer, Template Maker & Live CG-Operator
Media Support, CH-5722 Gränichen, Switzerland http://mediasupport.ch/
Problems? Guide to posting Bug reports & Feature requests
User avatar
didikunz
 
Posts: 3477
Joined: 10 May 2010, 09:08
Location: Aarau, Switzerland

Re: Text autofollow

Postby Monden » 20 Mar 2017, 13:52

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.
Monden
 
Posts: 15
Joined: 17 Mar 2017, 10:23

Re: Text autofollow

Postby didikunz » 20 Mar 2017, 14:53

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 1277 times
Didi Kunz
CasparCG Client-Programmer, Template Maker & Live CG-Operator
Media Support, CH-5722 Gränichen, Switzerland http://mediasupport.ch/
Problems? Guide to posting Bug reports & Feature requests
User avatar
didikunz
 
Posts: 3477
Joined: 10 May 2010, 09:08
Location: Aarau, Switzerland

Re: Text autofollow

Postby Monden » 20 Mar 2017, 17:06

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
Monden
 
Posts: 15
Joined: 17 Mar 2017, 10:23

Re: Text autofollow

Postby didikunz » 20 Mar 2017, 19:18

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.
Didi Kunz
CasparCG Client-Programmer, Template Maker & Live CG-Operator
Media Support, CH-5722 Gränichen, Switzerland http://mediasupport.ch/
Problems? Guide to posting Bug reports & Feature requests
User avatar
didikunz
 
Posts: 3477
Joined: 10 May 2010, 09:08
Location: Aarau, Switzerland

Re: Text autofollow

Postby Monden » 22 Mar 2017, 12:28

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.
Monden
 
Posts: 15
Joined: 17 Mar 2017, 10:23

Re: Text autofollow

Postby didikunz » 22 Mar 2017, 12:38

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
Didi Kunz
CasparCG Client-Programmer, Template Maker & Live CG-Operator
Media Support, CH-5722 Gränichen, Switzerland http://mediasupport.ch/
Problems? Guide to posting Bug reports & Feature requests
User avatar
didikunz
 
Posts: 3477
Joined: 10 May 2010, 09:08
Location: Aarau, Switzerland

Re: Text autofollow

Postby Monden » 31 Mar 2017, 15:38

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);
}



}

}
}
Monden
 
Posts: 15
Joined: 17 Mar 2017, 10:23

Re: Text autofollow

Postby didikunz » 01 Apr 2017, 08:32

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.
Didi Kunz
CasparCG Client-Programmer, Template Maker & Live CG-Operator
Media Support, CH-5722 Gränichen, Switzerland http://mediasupport.ch/
Problems? Guide to posting Bug reports & Feature requests
User avatar
didikunz
 
Posts: 3477
Joined: 10 May 2010, 09:08
Location: Aarau, Switzerland

Re: Text autofollow

Postby Monden » 03 Apr 2017, 10:21

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?
Monden
 
Posts: 15
Joined: 17 Mar 2017, 10:23

Re: Text autofollow

Postby didikunz » 03 Apr 2017, 12:12

Didi Kunz
CasparCG Client-Programmer, Template Maker & Live CG-Operator
Media Support, CH-5722 Gränichen, Switzerland http://mediasupport.ch/
Problems? Guide to posting Bug reports & Feature requests
User avatar
didikunz
 
Posts: 3477
Joined: 10 May 2010, 09:08
Location: Aarau, Switzerland

Re: Text autofollow

Postby Monden » 04 Apr 2017, 10:13

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?
Monden
 
Posts: 15
Joined: 17 Mar 2017, 10:23

Re: Text autofollow

Postby didikunz » 04 Apr 2017, 10:49

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...
Didi Kunz
CasparCG Client-Programmer, Template Maker & Live CG-Operator
Media Support, CH-5722 Gränichen, Switzerland http://mediasupport.ch/
Problems? Guide to posting Bug reports & Feature requests
User avatar
didikunz
 
Posts: 3477
Joined: 10 May 2010, 09:08
Location: Aarau, Switzerland

Re: Text autofollow

Postby Monden » 04 Apr 2017, 10:59

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.
Monden
 
Posts: 15
Joined: 17 Mar 2017, 10:23

Re: Text autofollow

Postby didikunz » 04 Apr 2017, 11:18

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...
Didi Kunz
CasparCG Client-Programmer, Template Maker & Live CG-Operator
Media Support, CH-5722 Gränichen, Switzerland http://mediasupport.ch/
Problems? Guide to posting Bug reports & Feature requests
User avatar
didikunz
 
Posts: 3477
Joined: 10 May 2010, 09:08
Location: Aarau, Switzerland

Re: Text autofollow

Postby Monden » 05 Apr 2017, 14:54

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.
Monden
 
Posts: 15
Joined: 17 Mar 2017, 10:23

Re: Text autofollow

Postby didikunz » 05 Apr 2017, 15:19

...as I said, I never tried it. Are there many different flags? How many? All nations of the world?
Didi Kunz
CasparCG Client-Programmer, Template Maker & Live CG-Operator
Media Support, CH-5722 Gränichen, Switzerland http://mediasupport.ch/
Problems? Guide to posting Bug reports & Feature requests
User avatar
didikunz
 
Posts: 3477
Joined: 10 May 2010, 09:08
Location: Aarau, Switzerland

Re: Text autofollow

Postby Monden » 06 Apr 2017, 11:41

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.
Monden
 
Posts: 15
Joined: 17 Mar 2017, 10:23

Re: Text autofollow

Postby didikunz » 06 Apr 2017, 12:42

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/
Didi Kunz
CasparCG Client-Programmer, Template Maker & Live CG-Operator
Media Support, CH-5722 Gränichen, Switzerland http://mediasupport.ch/
Problems? Guide to posting Bug reports & Feature requests
User avatar
didikunz
 
Posts: 3477
Joined: 10 May 2010, 09:08
Location: Aarau, Switzerland

Re: Text autofollow

Postby Monden » 06 Apr 2017, 12:50

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?
Monden
 
Posts: 15
Joined: 17 Mar 2017, 10:23


Return to Content

Who is online

Users browsing this forum: No registered users and 3 guests