It is currently 24 Jun 2017, 09:49



Auto resize text if it doesn't fit text field

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

Moderators: Macey, Jonas Hummelstrand, didikunz

Auto resize text if it doesn't fit text field

Postby croivo » 08 Sep 2014, 20:52

Hi everybody! Does anybody have Actionscript code that will automatically scale down the font size of text if the text doesn't fit text field? Or somehow shrink the text width? Something like this here: http://www.stickerjunkie.com/index.jsp
I was googling about this, but I can't get this to work...
Thank you :)
TV graphics design & animation, Sport CCG Play-out clients
Available for work!
User avatar
croivo
 
Posts: 99
Joined: 06 Apr 2013, 16:03
Location: Croatia

Re: Auto resize text if it doesn't fit text field

Postby didikunz » 08 Sep 2014, 21:45

Try this:

Code: Select all
private static function ScaleDownTextField(Input:String, Field:TextField, initialFieldWidth:int):void
{
   var wi:int = initialFieldWidth;
   Field.autoSize = TextFieldAutoSize.LEFT;
   Field.scaleX = 1;
   Field.text = Input;
   if (wi < Field.width)
   {
      Field.scaleX = wi / Field.width;
   }
}


Arguments:
Input: The text, that shall be displayed in the field
Field: The TextField object
initialFieldWidth: The maximal width of the field.
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: Auto resize text if it doesn't fit text field

Postby croivo » 08 Sep 2014, 21:52

I put this little customized code on first frame of my text layer:
Code: Select all
private static function ScaleDownTextField(myText.text:String, myText:TextField, 300:int):void
{
   var wi:int = initialFieldWidth;
   Field.autoSize = TextFieldAutoSize.LEFT;
   Field.scaleX = 1;
   Field.text = Input;
   if (wi < Field.width)
   {
      Field.scaleX = wi / Field.width;
   }
}

Than I get this errors:
"Scene 1, Layer 'Layer 1', Frame 1, Line 3 1013: The private attribute may be used only on class property definitions."
"Scene 1, Layer 'Layer 1', Frame 1, Line 3 1012: The static attribute may be used only on definitions inside a class."
"Scene 1, Layer 'Layer 1', Frame 1, Line 3 1084: Syntax error: expecting rightparen before dot."
TV graphics design & animation, Sport CCG Play-out clients
Available for work!
User avatar
croivo
 
Posts: 99
Joined: 06 Apr 2013, 16:03
Location: Croatia

Re: Auto resize text if it doesn't fit text field

Postby didikunz » 08 Sep 2014, 22:22

You can not put this into a frame, you need to set your textFields from ActionScript in a separate .as file. See this on how to do that: http://casparcg.com/wiki/Content_/_Media#Creating_Advanced_Flash_Templates
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: Auto resize text if it doesn't fit text field

Postby croivo » 08 Sep 2014, 22:34

Thanks, I will try that tomorrow. Is the code I customized good?
TV graphics design & animation, Sport CCG Play-out clients
Available for work!
User avatar
croivo
 
Posts: 99
Joined: 06 Apr 2013, 16:03
Location: Croatia

Re: Auto resize text if it doesn't fit text field

Postby didikunz » 08 Sep 2014, 23:16

The idea of a static function was, that you can use it to scale different textFields in a SetData function. The way you do it is for only one textField, and then you don't need to do a function. By the way, I think you cannot declare a function with fixed arguments. So you modification is probably wrong.
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: Auto resize text if it doesn't fit text field

Postby croivo » 09 Sep 2014, 11:15

I put this code (now without my modifications)
Code: Select all
private static function ScaleDownTextField(Input:String, Field:TextField, initialFieldWidth:int):void
   {
         var wi:int = initialFieldWidth;
         Field.autoSize = TextFieldAutoSize.LEFT;
         Field.scaleX = 1;
         Field.text = Input;
         if (wi < Field.width)
         {
            Field.scaleX = wi / Field.width;
         }
   }
   
   ScaleDownTextField("Hello", myText, 300);

in a separate .as file, and when I run it, I get:
"1120: Access of undefined property TextFieldAutoSize."
"1120: Access of undefined property myText."
TV graphics design & animation, Sport CCG Play-out clients
Available for work!
User avatar
croivo
 
Posts: 99
Joined: 06 Apr 2013, 16:03
Location: Croatia

Re: Auto resize text if it doesn't fit text field

Postby didikunz » 09 Sep 2014, 12:04

didikunz wrote:You can not put this into a frame, you need to set your textFields from ActionScript in a separate .as file. See this on how to do that: http://casparcg.com/wiki/Content_/_Medi ... _Templates


You need to read the article I pointed you at. It will ONLY work, when you call it from a custom SetData. You can see sort of an example in the tutorial about loadin dynamic images: http://casparcg.com/wiki/Content_/_Media#Tutorial:_Loading_Dynamic_Images_in_a_Flash_Template
Instead of writing the filename on line 22 you would call the function, giving "element.data.@value" as Input value, the textField you want to appear it in as second parameter and the length in the third.

And yes, it willl probably not work with timeline animations. You would need to animate with the Tweener or GreenSocks library or probably you can put your animations into movieclips. The main timeline should only contain a single frame. Sorry, but I have no example template at hand...
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: Auto resize text if it doesn't fit text field

Postby leonedo » 22 Sep 2014, 16:07

Hi guys, question, its seams than this only works with the text to the left, but how can you do it with center-align?
I try to change to TextFieldAutoSize.CENTER, but the textfield keeps moving and growing... any suggestions?
User avatar
leonedo
 
Posts: 35
Joined: 07 Mar 2013, 16:49
Location: Caracas - Venezuela

Re: Auto resize text if it doesn't fit text field

Postby didikunz » 22 Sep 2014, 17:04

It only works left aligned. After sizing you can position it in code by calculating the right bound minus the width of the scaled 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: Auto resize text if it doesn't fit text field

Postby leonedo » 25 Sep 2014, 21:02

Just had to save the x too.. seams to work fine, thanks Didi

Code: Select all
private static function ScaleDownTextFieldCenter(Input:String, Field:TextField):void
      {
         var wi:int = Field.width;
         var xcoord: int = Field.x;
         Field.autoSize = TextFieldAutoSize.CENTER;
         
         Field.text = Input;
         if (wi < Field.width)
         {
            
            Field.scaleX = wi / Field.width;
            Field.x = xcoord;
         }
      }
User avatar
leonedo
 
Posts: 35
Joined: 07 Mar 2013, 16:49
Location: Caracas - Venezuela

Re: Auto resize text if it doesn't fit text field

Postby SteveElkington » 25 Nov 2014, 10:35

Hi Guys
I've finally got this working so I can auto resize my text and align all left right or centre. Great! Brilliant feature!
One problem... I had been using AS to animate my text in with a fade. To do this I had it in a Movie Clip called Text such as this

Code: Select all
Tweener.addTween(Text, {alpha:1.0, time:0.5, delay:1.3, transition:"linear"});


Now though, I've had to take the text out of the movie clip or the font re scaling function mentioned above doesn't work.
Is there a way to make the font rescaling function work when the text is in a movie clip? I've tried a few things like

Code: Select all
<parameter id="text.f0"....


but I can't figure it.
Any thoughts anyone?
Thanks in advance.
User avatar
SteveElkington
 
Posts: 243
Joined: 24 Mar 2014, 13:09
Location: UK

Re: Auto resize text if it doesn't fit text field

Postby didikunz » 25 Nov 2014, 14:48

If you use my code (further down) then you simply put movieclipName.textfieldName as parameter for Field. It works without modification with any level of nesting, that means, a enclosing moveclip can also be inside a movieclip. The same applies to Tweener also. You can animate any property as long as you reference it in this way.

Code: Select all
Tweener.addTween(OuterMC.InnerMC.Objectname, {alpha:1.0, time:0.5, delay:1.3, transition:"linear"});


Or whatever.
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: Auto resize text if it doesn't fit text field

Postby SteveElkington » 25 Nov 2014, 18:08

Awesome, thanks!
I'll have a look tomorrow.
User avatar
SteveElkington
 
Posts: 243
Joined: 24 Mar 2014, 13:09
Location: UK

Re: Auto resize text if it doesn't fit text field

Postby SteveElkington » 26 Nov 2014, 12:25

Yep, that worked a treat! Thank you!
User avatar
SteveElkington
 
Posts: 243
Joined: 24 Mar 2014, 13:09
Location: UK

Re: Auto resize text if it doesn't fit text field

Postby SteveElkington » 26 Nov 2014, 18:16

This might be a bit of a long shot....
Is there a way to make it work with multi line text boxes so that a list of names, each one on a new line, stays on their own line but is scaled down when needed?
User avatar
SteveElkington
 
Posts: 243
Joined: 24 Mar 2014, 13:09
Location: UK

Re: Auto resize text if it doesn't fit text field

Postby didikunz » 26 Nov 2014, 18:28

I would split the multiline input (use string.split() ) and put each line into a separate field, that gets scaled down as needed. It would be very complicate to scale inidividual lines in a multiline textfield.
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: Auto resize text if it doesn't fit text field

Postby ddonoghue » 26 Nov 2014, 23:00

didikunz wrote:I would split the multiline input (use string.split() ) and put each line into a separate field, that gets scaled down as needed. It would be very complicate to scale inidividual lines in a multiline textfield.


I would add that you should calculate the most scaled line percentage and then scale all the lines by that amount so they all look the same size. just applying the function to each separate line independently will make the text appear at different sizes.
Daniel Donoghue
Client and Template Developer

Problems with CasparCG? Guide to posting Bug reports & Feature requests
ddonoghue
 
Posts: 496
Joined: 21 Mar 2013, 23:44
Location: Sweden

Re: Auto resize text if it doesn't fit text field

Postby SteveElkington » 27 Nov 2014, 10:38

Thanks both!
That definitely gives me something to think about. I'll see what I can figure out and may come back with some questions if I get stuck ;)
Many thanks!
User avatar
SteveElkington
 
Posts: 243
Joined: 24 Mar 2014, 13:09
Location: UK

Re: Auto resize text if it doesn't fit text field

Postby tsipas » 27 Nov 2014, 11:33

Hi
I use a different approach method that works either on width or height(for multiline texts)
Code: Select all
public function resizeText(mytext: TextField): void {
         if (mytext.height > 79.10) {
            newSize.size--;
            newSize.letterSpacing -= 0.01;
            txtTestFormat.size = newSize.size;
            txtTestFormat.letterSpacing = newSize.letterSpacing;
            mytext.setTextFormat(txtTestFormat);
            mytext.y += 0.7;
            resizeText(mytext);
         }
           
      }


The mytext.y += 0.7 used to centered text at its area
User avatar
tsipas
 
Posts: 168
Joined: 05 Feb 2012, 18:31

Re: Auto resize text if it doesn't fit text field

Postby bobobear » 16 Nov 2015, 16:36

didikunz wrote:Try this:

Code: Select all
private static function ScaleDownTextField(Input:String, Field:TextField, initialFieldWidth:int):void
{
   var wi:int = initialFieldWidth;
   Field.autoSize = TextFieldAutoSize.LEFT;
   Field.scaleX = 1;
   Field.text = Input;
   if (wi < Field.width)
   {
      Field.scaleX = wi / Field.width;
   }
}


Arguments:
Input: The text, that shall be displayed in the field
Field: The TextField object
initialFieldWidth: The maximal width of the field.


I tried putting this on a .as text and put it on the folder of my .fla.. after compiling with the generator. there's still no text resize when played on the server.

am I missing something?
Attachments
EXP.png
screengrab of the text on my custom software, the files on the folder and the output of the server
EXP.png (88.21 KiB) Viewed 4987 times
bobobear
 
Posts: 12
Joined: 22 Oct 2015, 12:16

Re: Auto resize text if it doesn't fit text field

Postby didikunz » 16 Nov 2015, 18:16

That is only the part of the story, that scales the field. It has to be embedded in a as file, that overwrites the SetText function. See here:

https://dl.dropboxusercontent.com/u/13685023/Schneebericht.fla
https://dl.dropboxusercontent.com/u/13685023/Schneebericht.as
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: Auto resize text if it doesn't fit text field

Postby bobobear » 20 Nov 2015, 06:15

didikunz wrote:That is only the part of the story, that scales the field. It has to be embedded in a as file, that overwrites the SetText function. See here:

https://dl.dropboxusercontent.com/u/13685023/Schneebericht.fla
https://dl.dropboxusercontent.com/u/13685023/Schneebericht.as


I tried this, and compiled it. All i see is black screen from casparCG server. I'm partly confused. But I'm starting to understand the concept.

Another question is, if using greensock, how do I trigger the animation using the casparCG client?

Thanks
bobobear
 
Posts: 12
Joined: 22 Oct 2015, 12:16

Re: Auto resize text if it doesn't fit text field

Postby Falkiner » 09 Jan 2017, 21:43

didikunz wrote:That is only the part of the story, that scales the field. It has to be embedded in a as file, that overwrites the SetText function. See here:

https://dl.dropboxusercontent.com/u/13685023/Schneebericht.fla
https://dl.dropboxusercontent.com/u/13685023/Schneebericht.as


How your .fla file calls your .as file?
Falkiner
 
Posts: 4
Joined: 03 Jan 2017, 23:46

Re: Auto resize text if it doesn't fit text field

Postby didikunz » 10 Jan 2017, 11:02

This is, where all comes together:

Class_Name.PNG
Class_Name.PNG (39.51 KiB) Viewed 1436 times


When you click on the button were it says "Click here to open ..." you can check the link of the two files, if it goes to the correct .as file, everything is ok. Otherways it will create and open a new file.
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: Auto resize text if it doesn't fit text field

Postby ekelofen » 30 Apr 2017, 22:51

didikunz wrote:That is only the part of the story, that scales the field. It has to be embedded in a as file, that overwrites the SetText function. See here:

https://dl.dropboxusercontent.com/u/13685023/Schneebericht.fla
https://dl.dropboxusercontent.com/u/13685023/Schneebericht.as




Thank you for sharing this!
ekelofen
 
Posts: 26
Joined: 14 May 2014, 10:55
Location: Stockholm, Sweden


Return to Content

Who is online

Users browsing this forum: No registered users and 4 guests