Process

Download File: tracer.fla
Download File: drawer.fla

The way I’ve got things set up – I’m working with two .fla files. One to do the tracing (tracer.fla) and one that does the drawing/display (drawer.fla). I’m using the Output Window to get all my information for me, so you’ll need to start off by opening tracer.fla in Flash.

Controls:

1) Space bar activates/deactivates movie clip duplication. This way, you can draw without having to make everything one continuous line.
2) Number buttons determine size (1 through 0). I’ve got one as the smallest, and zero as the largest size. On the first frame of the file, there’s code that size1, size2, size3, etc. Size3 is set at 1 (100%), and is triggered by the “3” button. Size 1 is set at 0.3 (30%), and is triggered by the “1” button. Adjust these values to make the letters bigger or smaller.

The tracer .fla is set up to track mouse movements. If duplication is “on”, then a blank movie is duplicated at the mouse’s x/y position. At the same time, the appropriate letter (determined by the lyrics variable, and linked in the library) is attached to this blank movie clip. Note that there’s also a hitTest going on, so that you can’t “draw” outside of the boundary.

Most of the code is either on the first frame of the movie, or on the picture movie clip itself. Tweak what you want, and when you’re ready, hit Ctrl-Enter and test the movie to begin.

Once a letter is drawn, we output the information that we need. In the Output Window, you’ll see lines like this:

<mt xpos=”669.95″ ypos=”149″ resize=”0.8″ /&rt;<mt xpos=”674.95″ ypos=”148″ resize=”0.8″ /&rt;<mt xpos=”679.95″ ypos=”148″ resize=”0.8″ /&rt;<mt xpos=”680.95″ ypos=”152″ resize=”0.8″ /&rt;<mt xpos=”682.95″ ypos=”163″ resize=”0.8″ /&rt;

Like I said, I had this set up originally for XML. What we’re after here is the information we’ll need to recreate our drawing: namely, the x position, the yposition, and the transform size of each letter. Think of everything in the Output Window as a recipe or roadmap, for recreating your drawing. Once you’re done, right click anywhere in the white space, and save the log to your desktop.

This next bit is where it gets a little hacky. On looking over it again, this seems horribly inefficient. There has to be a better way to feed all this info into Flash. Essentially, what I end up doing is breaking apart all the info and making three humongo arrays: xPosArray, yPosArray and resizeArray.

Use a bit of Find and Replace (and some regular expressions), and you’re in business. For example:

Extract xpos info, ditch the rest:
Find: (xpos=”[0-9.]+”)( [ \”=a-zA-Z0-9\.]+)
Replace: \1

Get rid of hard returns, replace with a comma and a space:
Find: \n
Replace: ,

All that’s left now is to open up the drawer.fla, and add in our array information to frame 2. For example, the xPosAray would be something like:

xPosArray = [“455.95”, “457.95”, “467.95”, “475.95”, “484.95”, “494.95”, etc.];

That’s it! You should now be able to see your drawing, recreated before your eyes. Overall file size of your drawer.swf should be relatively low (for my attempt, it was around 15K).

Final note: my animation is set at 31 fps (this seemed to time out best, keeping pace with the audio). If you want a smoother draw, or want more letters faster… simply up the fps in the drawer.fla file.