Fill in Text Box

[DiegoMunoz007]

Is it possible to have an interactive animation text box with a pen following the text as if it was writing by itself? I know I can use a "Guide:Pen" layer to have the pen follow the text as is being written. But I want is an animation that anyone can write a couple of words in the text box and after they write what ever they want they can play the animation and see the pen writing the words in the text box. Can this be done in Flash using Actionscript? If it can can someone give some ideas on how I can achieve this, thank you.

[paul_robertson]

How would the user "write" the words -- by typing them in, or by "writing" with the mouse (or a touch device)?

If they're typing in the words, you could have pre-canned animation for each letter and just position an instance of that animation at the appropriate place and play the animation.

If they're "writing" the words, you could do it with ActionScript. Here's a partial solution (this code assumes that the "this" scope is a Sprite/MovieClip):

1. Use an enterFrame event handler while they're writing and record the positions of the mouse cursor/finger at each frame:

// When you "start" recording:

addEventListener(Event.ENTER_FRAME, recordFrameHandler);

var samplePoints:Vector.<Point> = new Vector.<Point>();

private function recordFrameHandler(event:Event):void

{

     // add a new snapshot of the mouse position

     samplePoints[samplePoints.length] = new Point(mouseX, mouseY);

}

// when you stop recording

removeEventListener(Event.ENTER_FRAME, recordFrameHandler);

Then to play back, use an enterFrame event and redraw a line between each sample (each recorded point):

// start playback

addEventListener(Event.ENTER_FRAME, playbackFrameHandler);

graphics.clear();

graphics.lineStyle(1, 0x000000);

graphics.moveTo(samplePoints[0].x, samplePoints[0].y);

var currentFrame:int = 0;

private function playbackFrameHandler(event:Event):void

{

     currentFrame += 1;

    if (currentFrame > samplePoints.length)

     {

         stopDrawing();

         return;

     }

    graphics.lineTo(samplePoints[currentFrame].x, samplePoints[currentFrame].y);

}

private function stopDrawing():void

{

     removeEventListener(Event.ENTER_FRAME, playbackFrameHandler);

}

Technically your lines won't be exactly the path the user "wrote" since you're just redrawing based on snapshots of where the mouse/finger was, but if your sample interval is small enough (such as one frame) the result will look pretty good.

Paul

[DiegoMunoz007]

Thanks for your reply. When you say pre-canned animation do you mean repetitious animations? Maybe I did not use the write words or explain my design intent. I would like the text box, lets say on a website and after the user types a word or two in the text box they can press enter or a button and the pen will begin writing the words. Thank you.