Circle with text

[Nordi]

hey i'm prette new at the flash thing, but i hope someone can help me...
my problem is, i want som text to move around a circle


so it looks like its flying around the circle. So its flying from the midle(like the pics) then goes out to the rigth and come again to the left, and it just keep going on like that
hope u can upload the .swf file so i can see how it's done....hope u guys understand what i mean.a bad example

[Nordi]

nobody can help me?

[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

[jbum]

Attached is a project file demonstrating the basic technique I described above.

And here is a link to a demo of the effect.

http://www.krazydad.com/bestiary/studioLogo.html

I kind of liked this effect, so I made a modified version for my website:

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


- Jim

[blakedbarnett]

I was wonder if you could tell me how or create flash that would not only rotate the text but also rotate an object say a flat ring with the text. I am sure it is very similar but would like some direction.

[tonyphilly]

Greetings to Jim and the rest.

Hey JBum, i was wondering if you can send me a .fla of text rotating like http://krazydad.com/bestiary/askjim.html but not moving up and down while scrolling.

Thanks.

Tony.