TextField to MovieClips Challenge

programming flash
1

I’d like to challenge anyone here to write some AS2 that takes a dynamic text field with text in it, with embedded fonts, possibly letter-spacing etc - and turns it into a bunch of movie clips, one movie clip per letter.

The only condition is - the letter movie clips need to be arranged on stage in exactly the same position they were in the original textfield…

Now I know people will mention textFormat - trust me - I’ve tried it all, thats why I’m asking here…

Why? Cause I’ve just finished the final touches on the latest update of my really cool text animation class that I’m selling on FlashDen, and I’d be happy to give a copy of the class to anyone who can help me - since the textfield to letter mc positioning is the only thing I cant work out properly.

Click Here for a demo of the latest version - Notice that once you click to view the first transition, when the animation is done, the letters arent in the right place.

I’m not trying to solicit sales for this class, I just really want it to be perfect cause it has so many really cool features already, and I’m kinda proud of it (latest version allows for custom easing, onComplete functions, transition any property, uses TweenLite for speed, animate letters or words, pass start and end values for each property, pass absolute or relative values, pass functions instead of values, change speed and gap between each letter, reanimate to new values, restart, and more).

So please, if you want a copy of the class, or if you want a challenge - or if you already know how to do it :wink: - your posts would be appreciated :bounce:

2

hmm, intressting, which i had time. :slight_smile:

3

:stuck_out_tongue: I wish you had time too…

Anyone actually got time :D?

4

Maybe this will help? Seems to me that you just need some way to capture the _x/_y position of every text element which TextMetrics.getTextBounds and TextMetrics.getLineMetrics appear to do. I guess that all you have to do is loop through the text in the textfield and then store the data into an array, or as properties of an object, which can then be referenced to position your movieclips.

It even takes account of the automatic padding that Flash applies to textfields, which I suspect might be the cause of some of your misalignment.

http://blog.greensock.com/textmetrics/

5

I did look at that, thanks - only problem I have is - I’d have to loop through by letters, and there would be more than one instance of the same letter. for example

“Hello how are you”

If i was to do a textmetrics on the letters x and y - how would i tell it to look for the second “e” in that string?

6

TextMetrics.getSubstringMetrics

Description: Finds all instances of a particular substring in the TextField and returns an object for each one with the following properties: x, y, width, height, lineHeight, leading, ascent, descent

Place each of the characters from “Hello how are you” into an array, then loop through the array, apply TextMetrics.getSubstringMetrics to each element of the array and get 17 objects holding all of the individual properties?

Alternatively, download the TextMetrics AS file and look at how the code calculates the x/y positions. Then adapt this code to use in your own project.

7

Ok, I’ve got the lineheight working correctly, now the only thing left to do is the letterspacing.

If you have a bunch of letters in movie clips, what values would you add to an incrementing number, starting from 0, for each letter, so that everything is positioned correctly as far as gaps between each letter goes?

Ive tried

letter._width-4, letter._width, letter.textWidth etc… what combination should I use for each letter?

Ps glos, thanks for the suggestion, I’m still confused as to how to use a method that returns an array of all matches for one specific letter, to then position all those letters, without then doubling up and feeding it the same letter for each occurrence…