Update: New updated example in “Text on a curved path in Flex - Resurrected” - please see instead of this entry.
There was some discussion in the 615Flex Google group earlier about how to warp text in a Flex application. (If you have any valuable input or resources please leave them in the comments). I thought it would be fun to mess around with the idea, so I put together this really weak example of a text warp component.
Read on to see a little example …
How I did it - better ideas?
- Come up with some function of x for the path that the text will follow. In this example it’s f(x) = multiplier * x^2.
- Break a string into an array of characters.
- Loop through the array:
- calculate the x positions for each character based on some offset value (horizontal slider in the example below)
- calculate the y position using the equation from step one (vertical slider in the example used as a multiplier to expand or contract)
- calculate the necessary rotation for the character based on the slope of the line tangent to the curve at x, y. (I’m just approximating here.)
That’s about it. (Make sure you’re using an embedded font).
Text along a path in Flex
(No source. When I say it’s weak, I really mean it.)
The original goal was to match the effect from the ‘advanced demo’ here. Again, if you have any additional resources on how to accomplish something along these lines please let me know! Thanks.
Just wondering if you had experimented any more with this. Thanks.
Hey Shawn - I’m obsessed with this, actually. Unfortunately I don’t have time to finish what I’ve started. The latest concept allows you to define control points for a bezier curve and render text along the path. This would allow for much much more complicated curves. Again … just no free time in sight.
If you have the time, the classes at http://www.algorithmist.net/as3pc.html will get you started. Please let me know what you come up with!
Update: Please read “Text on a curved path in Flex - Resurrected” for newer information.