How would I go about making this work?

[tcabaco]

Hi

I'm in the stages of brainstorming ideas for a web site for a new font that is coming out. For one of the ideas I wanted to make something interactive and sort of experimental. Basically I want to have each character of the font be represented by a tiny circle; all the circles will then be randomly placed on stage. On roll over each circle a small blobby window opens up next to it showing which character it represents. Until now, no problem, but here's where I need help:

I want to have a dynamic text field where the user can insert text and click a button to preview it on stage. When that button is clicked I want the circles corresponding to the input characters to be placed in position and reveal the word. Basically make the circles move from their random location on stage to a centered location and reveal their letters, and in doing so revealing the word the user input.

What I'm trying to understand is how I would go about doing this. I know all the characters on stage will be inside an array. I know that when the user inputs the text I have to create a for loop, having as limit the number of characters keyed in including spaces; but I don't know how to relate a keyed in letter in a dynamic text field with the array of objects on my stage.

I'm not looking for actual code or anything, just help with know what the best course of action to achieve this would be.

Thanks!

[creatify]

There are many ways to achieve this, but one simple way would be the following. I'd store reference to your letters in a Dictionary object. An array would work too.

var dict:Dictionary = new Dictionary():
dict["a"] = _circleaClip;
dict["A"] = _circleAClip;
etc...

You can then store the text entered into a string variable. Then, loop through that string based on it's length:

var s:String = textField.text;
var len:uint = s.length;
for(......) {
// in this loop you can use index or substr to find each character that was keyed in
var ltr:String = s.substr(i,1);

}

Then, if you isolate "a" you find the appropriate circle clip and animate it down via:

trace(dict[ltr]);

The other challenges are, if the person types in banana, you're going to need two of your nClips and 3 of your aClips, if you have those clips linked in the library, no problem as you'll just add new children. The biggest problem is, if you're actually going to formulate the word with those individual letters, the end result will probably look pretty bad unless it's a monospaced font because you can't easily kern all those letters. So, the word may look like;

b ana n a

If I were going to purchase a font and see that, I'd think twice about it not know that's just because you animated each letter to sit side by side with the same gap in between - make sense?

You can cheat this though, have all your letters animate into place, then create a textField and copy in input text into your display textField and fade that in while your letters fade out. You'll see some overlap during the transition, but at least you won't have to come up with a kerning algorithm for individual clips and you'll let the textField and flash text engine kern the letters which is as good as you can get in Flash for the most part. (unless you to tackle the Text Engine objects)