Creation of text along a path
June, 12 2009The CurveText class
This class is based on the new Flash 10 Textengine. With just a few lines one can create text along an arc. The script is shown below.
/****************************************************************************
CurveText class
copyright: Joachim Schnier, Flashscript.biz 2009
This class will curve string along a path.
***********************************************************************/
package biz.Flashscript.text
{
import flash.display.Sprite;
import flash.text.engine.*;
public class CurveText extends Sprite
{
private static var container:Sprite;
private static var myAngle:Number;
private static var rads:Number;
private static var fontDescription:FontDescription;
private static var format:ElementFormat;
private static var textElement:TextElement;
private static var textBlock:TextBlock;
private static var lineWidth:Number;
private static var textLine:TextLine;
//
public function CurveText ():void
{
}
public function createCurve (_string:String="text",
pathWidth:int=150, pathHeight:int=150, _angle:int=360,
fontsSize:int=14, textColors:uint=0x000000, myFont:String="Impact"):void
{
/*
* We set a text format for the size, color and font.
*/
fontDescription = new FontDescription(myFont);
format = new ElementFormat(fontDescription);
format.fontSize = fontsSize;
format.color = textColors;
try
{
/*
* We separate the string into individual letters.
*/
for (var i:int = 0; i<_string.length; i++)
{
var ca:String = _string.charAt(_string.length - i - 1);
/*
* We create the size of the angle of the circle depending on the _angle.
*/
myAngle = (i * _angle / (_string.length-1));
rads = myAngle * Math.PI / 180;
/*
* We create a TextElement for each letter and insert it into a TextBlock.
* We select a high lineWidth to make sure that the width is large enough for
* the font size.
*/
textElement = new TextElement(ca,format);
textBlock = new TextBlock();
textBlock.content = textElement;
lineWidth = 20;
textLine = textBlock.createTextLine(null,lineWidth);
/*
* Here we position each textline to create the curve.
*/
textLine.x = pathWidth * Math.cos(rads);
textLine.y = pathHeight * Math.sin(-rads);
/*
* We need to rotate each letter according to its position in the circle.
*/
textLine.rotation = 90 - myAngle;
addChild (textLine);
textLine = textBlock.createTextLine(textLine,lineWidth);
}
}
catch (e:Error)
{
trace (e);
}
}
}
}
Comments
On 7-15-2009 Ravinder Tawni commented:
Nice tutorial
On 11-10-2009 Decbrad commented:
Awesome!Just wondering if it is possible to start the text output from the center instead of the letf? Cheers! D
On 12-30-2009 jasonk commented:
I'm wondering the same thing as I'm feeding dynamic text to multiple curved areas. It would also be nice to find a way to do the spacing based on the actual widths of the letters so it writes out words along a curve based on the input rather than preset radious as in this case.Mail Form
Leave any comments here. Please enter a valid email.