Scale multiline text to fit textfield AS3


#1

Hi to all!
I’ve found an interesting way to make multiline text fit the textfield. Maybe it would be helpful for someone

function formatTF(tf:TextField,s:String,w:uint){
    var tfor:TextFormat = new TextFormat();
    tfor.size = 1;
    tf.text = s;
    var ml:Boolean = tf.multiline;
    tf.multiline = true;
    tf.autoSize = "left";
    tf.width = w;
    tf.wordWrap = true;
    tf.setTextFormat(tfor);
    var tfH:Number = tf.height;
    while(tf.maxScrollV<2){
        var fontSize = tfor.size;
        tfor.size = fontSize+1;
        tf.setTextFormat(tfor);
        tf.height = tfH;
    }
    tfor.size = fontSize;
    tf.setTextFormat(tfor);
    tf.multiline = ml;
}

#2

What should this code do? Can you explain?


#3

What I needed is to format input text whatever length it is in a way it should have 2 lines and to fit multiline textfield of defined width. So the function I’ve posted above is increasing font size from 1 till the input text fits the textfield. Here is full text of the .as file, where I’ve changed the function a little bit for my certain tasks.
In this line I’ve limited the lines number by 2 and the maximum font size by 73 (in case the input text is too short)
while(tf.maxScrollV<3&&tfor.size<74)

package {

import flash.display.MovieClip;
import flash.text.TextFieldAutoSize;
import flash.text.TextField;
import flash.text.TextFormat;	
import flash.utils.Timer;
import flash.utils.setTimeout;
import flash.events.TimerEvent;
import flash.events.Event;
import flash.display.Shape;
import flash.geom.ColorTransform; 
import flash.display.Sprite;

import se.svt.caspar.ICommunicationManager;
import se.svt.caspar.IRegisteredDataSharer;
import se.svt.caspar.template.CasparTemplate;
import caurina.transitions.Tweener;


public class topic1 extends CasparTemplate
{
	
	
	public function topic1() {
		super();
		
		mask21.setHeight(48);
	}
	

	
	function formatTF(tf:TextField,s:String,w:uint){
	var tfor:TextFormat = new TextFormat();
	tfor.size = 1;
	tf.text = s;
	var ml:Boolean = tf.multiline;
	tf.multiline = true;
	tf.autoSize = "left";
	tf.width = w;
	tf.wordWrap = true;
	tf.setTextFormat(tfor);
	var tfH:Number = tf.height;
	while(tf.maxScrollV<3&&tfor.size<74){
		var fontSize = tfor.size;
		tfor.size = fontSize+1;
		tf.setTextFormat(tfor);
		tf.height = tfH;
	}
	tfor.size = fontSize;
	tf.setTextFormat(tfor);
	tf.multiline = ml;
	mask21.setHeight(fontSize);
	
}


	
	
	
	
	override public function SetData(xmlData:XML):void 
	{
					
		for each (var element:XML in xmlData.children())
		{
			if (element.@id == "f0")
			{
				formatTF(text11.f0, element.data.@value.toString().toUpperCase(), 1750);
			}
		}
		
	}
}

}


#4

Ok, I see, I usually use this code to keep the font size and don’t wrap the text to the next line, as for instance in lower thirds you want to keep the text on one line only:

private static function ScaleDownTextField(Input:String, Field:TextField, initialFieldWidth:int, initialFieldX:int, align: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;
	}

	if (align == 0)  //left
	{
		Field.x = initialFieldX;
	}
	if (align == 1)  //center
	{
		Field.x = initialFieldX + (initialFieldWidth - Field.width) / 2;
	}
	if (align == 2)  //right
	{
		Field.x = initialFieldX + initialFieldWidth - Field.width;
	}
}

I also sometimes use a hyphenation library to fill a multi line textfield. That makes the text flow smoother. Good for longer paragraphs of text.


#5

I’ve used this method few times, found it on the old forum in your posts )
Thank you