AS3: dynamic text field to curve (TextField on an arcing path)

Most of the articles here are tightly connected to my daily work. As you probably know from one of my latest posts (runtime font loading/embedding) I worked a lot with texts these days. There was a request for producing curved text from a dynamic field. Of course it wasn't so easy to create such a feature. I wrote a simple class that did the job and I decided to share it.

Here is the simple app that demonstrates how the class works:



You can download the source code of that example and the CurvedText.as class from here.

We all know that it is not possible to transform a TextField object to a curve directly. What we can do is to create as many TextField objects as the letters that we have and set their position and rotation. Also it is very important to embed the font that you are going to use. Otherwise the script will not be able to set the correct x, y and rotation.

1. The CurvedText constructor

- text - the text that will be displayed
- radius - the radius of the circle
- startAngle - the angle where the text will start from
- endAngle - the angle where the text will stop
- direction - CurvedText.DIRECTION_UP or CurvedText.DIRECTION_DOWN
- textFormat - the TextFormat object which will be used (you should at least set the font property at least)
For better understanding of the start and end angle please check the following diagram:

2. Creating the text fields

Nothing special actually. Simply creating a new TextField object for every letter.

3. Positioning the fields

4. The usage of the class

You can download the full source code from here.

P.S.
If you play for a while with the example above you will see that some of the letters are not positioned very well. It is because they have different width than the others. So the script needs a little bit more work to be a perfect one.