Circle with text

[jbum]

I'm going to describe the basic technique I would use for this. Warning: this is very actionscript heavy and requires a little trigonometry. If you're new to Flash, as you say you are, I wouldn't recommend this as a first project.

If I have time later tonight, I'll post a sample, but it may take a couple days because it's the weekend, and this will take me an hour or two to mock up...

EDIT: And so I did - see the following post.


The reason it requires trig is that I would use the Math.sin() and Math.cos() function to produce the circular effect. If you are unfamiliar with this technique, I would suggest reading some of the threads on sin/cos that I have posted here:

http://krazydad.com/bestiary/askjim.html

Here's the basic technique:

1. I would make a movieclip called letter_mc which is intended to hold a single letter. It contains a dynamic text field that uses an embedded font.

2. I would write a function called called 'orbit_letters' which accepts the string of text to be displayed. The function walks thru each letter in the string, and creates a movieclip for each letter in the string.

Each movieclip is created using the attachMovie() call, which attaches an instance of the letter_mc clip from my library. The letter is written into the dynamic text field.

The dynamic text field is set to autoSize, so I can measure the textWidth after writing the letter in. This enables me to use proper letter-spacing for proportional fonts.

I used a similar trick in my typewriter movies, here:

http://krazydad.com/bestiary/bestiary_adventure.html

and here:

http://krazydad.com/bestiary/bestiary_underwood.html

... the text is broken up into individual movieclips, one for each letter.

Also, importantly, the dynamic text field uses an embedded font, so I can animate it, scale it, rotate it, etc.

3. After creating each letter movieclip, I now know how long the entire string is (by adding up the textwidth of each movie).

Now I can loop thru each movieclip and assign a variable to each movie which assigns it a position on the circle as a ratio from 0-1, using _x / totalwidth.

When I'm done assigning the letters, they will each have a field 'pos' which can be used for circular placement:

letter1.pos = 0
letter2.pos = .1
letter3.pos = .2
etc...

The actual numbers are different, and would be assigned in a loop using ratio mathematics. e.g.

code:

---

for (i = 1; i <= NumberLetters; ++i)

{

  this['letter'+i].pos = this['letter'+i]._x / totalTextWidth'

}

---

Then I assign each letter an onEnterFrame handler which uses Math.cos() and Math.sin() to compute the letter's _x and _y position, it's _rotation, and it's scale.

For this part of the movie, I will use essentially the same trick I used in this recent thread which was used to make a circular rotating menu,

http://www.flashkit.com/board/showth...hlight=receive

Near the bottom of that thread, I posted a lengthy description of the techniques involved to make that style of menu. One difference here is that I would only scale in the _xscale direction and not in the _yscale direction, to create the impression that the letters are flipping around. I would also change the alpha calculations to hide the clips that in the 'back'.

I would also need to add the diagonal effect you used in your illustration. This could be done directly as part of the sin/cos -> x/y/z calculation, OR I could rotate a container movieclip that the letters are attached to.

That's the basic plan.

You'll notice that I am borrowing heavily from previous projects I have done. This is a common techique used by programmers - you build up a lot of small projects and then start combining them together in various ways.

Like I said, this is not necessarily a good first project, but you might want to divide and conquer and work on different small parts of this project, with an eye to eventually combining the techniques.

- Jim