Text on a curved path in Flex - Resurrected

Updated: I’m going ahead and making the rough original source available since I have less time to work on this than expected. Please let me know if this helps you on any project or at least gets you started :)

One of the more popular posts on this blog is “Warping Text in Flex“. People are frequently asking for the source code and I am frequently not giving it to them (unless they say please) because it’s really really dreadful. Truly. So I have brought the project back to life as something I’m not embarrassed of.

An open sourced as-is etc version of this component will be posted shortly (preview below). The component will use a three point Bézier curve for the text path. Currently, this version uses the geometry classes from http://www.algorithmist.net/ but the released version may or may not.

Here is an early preview of the soon-to-be released TextPath component (please leave suggestions below):


(Right click to view source)

Thank you for reading - Please leave comments, suggestions etc!

16 Responses to “Text on a curved path in Flex - Resurrected”


  1. 1 T. Scot Clausing

    I’ll start the suggestions off myself … let me know if you agree/disagree with any of them.

    1) Adding additional control points in order to form complex paths.
    2) Draggable handle skins.
    3) Ability to specify “filling the path (as it is above)” or typing normally on the path.
    4) A bindable, event dispatching ControlPoint class in order to bind to and from control point values.

  2. 2 T. Scot Clausing

    Oh this is awesome. Apparently this is already much further under way in Degrafa. This project should wipe mine out :) http://algorithmist.wordpress.com/2008/10/06/text-along-a-spline-ii/

    And by the way, a big thank you to Jim Armstrong for Singularity and his excellent blog. I thoroughly enjoy both.

    Enjoy.

  3. 3 Colin Shreffler

    Scot: I am looking for something exactly like this for a project I’m working on. Can you provide your source code or can you help me find source somewhere that will provide this kind of functionality?

  4. 4 T. Scot Clausing

    Hey Colin,

    Thanks for asking. I haven’t had much time to continue working on this, so the original source is now available.

    Scot

  5. 5 Sajid

    Hello ,
    This is realy good effort :)

  6. 6 Eric Clemmons

    Wow! This is fantastic work!

    Please send me a private e-mail on what else needs to be done & if a tip may speed up progress.

  7. 7 jason olmsted

    This is great work, and I look forward to going through the source code.

    If, however, you just need to curve the text on a circle, I have a couple of blog posts covering that:

    http://blog.shortfusion.com/index.cfm/2009/1/25/Circular-Text-In-Flex-Explained

  8. 8 DotA - Rikimaru

    Thanks Scot, your code really helped me.

    By the way, a little improvement from me :) If you try to bring third dot near first one, you can see that some Letters are cut.
    If this issue causes problems just change UITextField to TextField in TextPathCharacter.as ;)

  9. 9 J.Taniguchi

    Hi all;

    Nice piece of code! I’ve added 1 line of code on TextPath.as. At the first line after opening the handleMouseMoveEvent function (line 430), I’ve added the code [ event.stopImmediatePropagation(); ].
    This code allows you to call the class through code constructor and add a custom drag and drop function into it. Without this piece of code, adding drag and drop would unable the 3 dragable handles of the text.

    Thanks for sharing!
    Best Regards :)

  10. 10 Ain Tohvri

    Great job, even though on the 1st version of your ‘Warping Text in Flex‘ the leading of the text looks much better!

  11. 11 Radu Gaspar

    Very nice! …but i do have one question about this. I’ve managed to change the color of the text, that was fairly easy, but how do i change the font size?

  12. 12 T. Scot Clausing

    Hi Radu,

    Please take a look at:
    UITextField’s setTextFormat(…) method and the TextFormat class.

  13. 13 Radu Gaspar

    Hi Scot… i rushed the code and didn’t notice there was a “font-size” in Style section of the mxml. Thanks for the quick response!

    Best regards :)

  14. 14 Radu Gaspar

    Hi Scot, i have another question :)
    Is there a way to change the alignment of the text? Right now if you type a 4 letter word for example, it streches it evenly between the 3 points… what if i want that text centered on the path, not distributed along the entire path?
    Right now it’s like the text is justified

  15. 15 Radu Gaspar

    Nevermind, i found a workaround that problem… just add a few spaces at the begining of the word and at the end, and the text is centered :P

  16. 16 Santanu.K

    Scot, this is awsome..! But I also like to know if you could share the old demo code with us. I really do have a exactly such requirement in my project. So I wonder, if you can share that code with us too! :)
    Awsome dude!

Leave a Reply