The CurveText class

Creation of text along a path

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 tect output from the center instead of the letf? Cheers! D

On 11-26-2010 Anjali commented:

this is a good tutorial. Just wanted some clarification. From where is createCurve() getting called? How are we setting the radius in the code?


Anjali, there is a Document class, where the ct object is created. Here is a simple code snippet. The radius is determined by pathWidth and pathHeight. It can be ecliptical as well.


var ms:String = "text";
var pathWidth:int = 75;
var pathHeight:int = 75;
var _angle:int = 180;
ct = new CurveText();
addChild (ct);
ct.createCurve (ms, pathWidth, pathHeight, _angle);
		
	

On 12-03-2010 Monit commented:

Trying to use the code with a flash document. Getting an error 1180:Call to possible undefined method addFrameScript.


Monit, you must be using a script as a document class, which extends Sprite and at the same time you have frames in your movie. Either eliminate the frames or extend the MovieClip class.

Mail Form

Leave any comments here. Please enter a valid email.