Curved Text In Flex - Holy Crap It Works!

I talked earlier about displacement maps in a post that didn't match its subject as well as it ought to have; my reasons for not using displacement maps for my particular application were not well explored. Hopefully, the demo showed that, with my workings to date, the final product, while interesting, was pretty weak quality-wise.

The amazing thing was that, the next night, in about two hours of playing, I managed to get mostly what I needed, so I thought I would share a demo that allowed one to play with many of the variables including:

  • Path radius
  • Spacing between characters
  • Angular offset of the string (the starting point)
  • Angular offset of the characters
  • Font Size
  • Font Family
  • as well as guide lines ...

So, go ahead and take a look at the demo of my flex writing text on a circular path.

I am still tweaking this guy, so I've decided to hold back on the source for a little while. Once I get past a couple of hurdles, I'll probably make this my first stab at a swc.

Those technical hurdles involve change the axis of rotation for my characters. This might prove to be trivial, I hope so, but I haven't had a chance to dive too deeply into that yet. Additionally, I am looking to write the text in the opposite direction and add the ability to individually correct and bump the component characters. If you play with changing the font, you'll notice that some work better than others.

Towards the end of per character tweaking, I have been experimenting with the transform tool from senocular that I found from Alessandro Crugnola's article on his modification to the TransformTool. These work great on images. My problem, thus far is that, while I can rotate, resize, and skew my text, I can't seem to move my individual characters. I was trying to be lazy, but as that is failing, I will start spelunking.

I also want to mention the work done by Jim Freer. He was kind enough to blog on how he accomplished circular text in Flash Player 9 without embedding fonts. It is a really clever method of capturing non-rotated text as a bitmap and then working with the resultant image; which rotates very nicely. Luckily for me, I got side-tracked long enough for Flash Player 10 to be released, but I definitely appreciated the insight into the workaround. He also has some interesting articles on sorting XML in Actionscript. [He also made me feel really guilty about the paucity of comments I had made - in a later blog, I will talk about how commenting on other people's blog isn't just a friendly way to show appreciation, but can be incredibly self-serving as well]

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
Nadeem's Gravatar Great Work, When will we able to see the source code?
# Posted By Nadeem | 12/28/08 3:03 PM
jason olmsted's Gravatar Thanks for the nice words.

I'm not sure yet when I'll be ready to release ... I've started building a set of knob classes to use in lieu of the sliders (found some great examples online, but the blogger didn't post the code - it's an epidemic! You can see what I mean at ).

I'll try to kick out a post sometime soon that at least goes over the theory and gives a good starting point for those that are interested in it. Stay tuned.
# Posted By jason olmsted | 12/28/08 6:57 PM
rose's Gravatar Great Work, When will we able to see the source code?

please i want to see the source code.
# Posted By rose | 1/8/10 12:46 AM
abid's Gravatar good work, When will we able to see the source code?
please i want to see the source code.
# Posted By abid | 1/8/10 1:50 AM
Preston Lewis's Gravatar Have you had a chance to finish this project? I'd absolutely LOOOVE to have a peak into your genius. :)
# Posted By Preston Lewis | 5/26/10 2:32 PM
Kheta Ram Sansi's Gravatar Can I have code for same ?
# Posted By Kheta Ram Sansi | 7/30/10 10:27 AM
Atishay Jain's Gravatar please help me is i want to know is that possible to make styles in text fonts like bottom arcs, upper arcs text by using text layout framework.
# Posted By Atishay Jain | 2/11/11 7:20 AM
BlogCFC was created by Raymond Camden. This blog is running version Contact Blog Owner