text arc with actionscript

[doognam]

I have a project that needs to take dynamic text and arc it. Similar to this:
http://www.no-refresh.com/button_designer/ (http://go.internet.com/?id=474X1088&url=http%3A%2F%2Fwww.no-refresh.com%2Fbutton_designer%2F)
In this example, select a font then click “create text item”. At this point you can slide the meter to change the arc of the text. This is exactly what I need to do.

My understanding of what needs to be done is I need to first break the letters of the text field into separate text fields, loop thru them then position and rotate each char to the desired arc. The problem is my trigonometry really bites. I’ve tried many tutorials and I’ve gotten similar results, mainly arcing text into a complete circle at different radiuses. But all I need to do is what’s in the example, which is allowing the user to gradually arch the text.

Please any help would be appreciated.

[theCodeBot]

You certainly have the right idea. In fact, what you're planning here is exactly what I would do, and the trigonometry definitely looks like the hardest part.

The basic rundown first, then the trig:

1.) Run some sort of constructor to get your variables all in order.

2.) Allow the user to set the text. Every time they change it, fire some sort of update event. This update even will be handled by a render() function, which I'll discuss in a minute.

3.) When the user sets the angle, also fire your custom render() function.

4.) The render() function itself will have to do something like this:
a.) Grab the text (as a string, not a textfield) and break it into an array of characters
b.) For each character in the array, plop it into it's own unique textField.
Once it's in this textField, put that field into a Sprite container to be sure about size.
c.) Make sure each container's rotation point is in the center to make the trig easier.
d.) Now you can do some math with the arc. Figure out from the arc value:
1.) The radius of an imaginary circle that we'll be tracing around
2.) How far apart (in degrees on a circle) you want the letters to space out.
3.) Starting at 360 degrees and the first character, set the rotation of each letter to the degree we're currently looping at (minus 90, so that we set the top of the letter facing east at the 0 degree mark), and decrease the angle.
4.) Now that they're rotated, use sine and cosine to figure out correct positions.
5.) After all the letters are positioned and rotated, rotate the entire container that they're in so that they are facing the way you want them to.

5.) Whenever the user wants to do something to the entire artificial arc, as you can in the example you provided, you'll want to make the whole container for all the letters become a child of some editing UI (like the box they placed around their arc in the example), and do some more arcane mathematics with that.



I have a feeling you already knew all of that, but I wanted to lay the process out in my own head as well so I didn't give you faulty math :P

For the trig, here's how you'd do the math, assuming everything else has already been handled:

You can use the sine and cosine functions, which Adobe calls Math.cos and Math.sin (http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/Math.html). When you pass the angle you're using to each of these functions, you get the x and y values, respectively, on a circle of radius 1, that a point would fall when at that angle from the center of the circle. You then multiply these values by your imaginary circle's radius to put them on the wider circle.

The circle's radius itself, to be calculated from an arc value ... I have absolutely no idea how you would go about that, seeing as the 0 mark makes the text horizontal (and that would indicate either removing the circle entirely, or making the circle have a near-infinite radius). You'd have to play with that one yourself. Maybe a multiplier, offset, a couple conditionals, I don't know. For all I know, modular algebra is involved :P

If you need some further help, feel free to contact me directly, I'll give you my email address.