Creation of text along a path

June, 12 2009

The 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.