Multiline Handwriting

Question

I need to develop an animation in Flex that simulate someone handwriting a textarea with dynamic content. I don't care about the pen following the actual curves of the font, but I need a clean way to show the text line by line, with a mask that follows the position of the pen.

Something like this, but with a native textarea and my own font:

http://activeden.net/item/handwriting-animation-tool-v25/11733

the textarea in mxml can have only one mask, so I guess I should create my mask programmatically. Has anyone done this yet?

thank you

Flex isn't really designed for this; If possible, I would design this in Flash, and export the library symbol as a SWF which you can then embed and use in a Flex application. — JeffryHouser, Feb 18 '11 at 19:02

score 3 · Accepted Answer · answered Feb 19 '11 at 04:03

There are a few different techniques to create true effect - like what is shown on that website. And be aware that it is pretty tedious work. What you can do in Flex is to show the lines of text sequentially revealing the letters with the mask of any shape. Here is simple example:

<fx:Script>
    <![CDATA[
        import mx.graphics.SolidColor;

        import spark.components.Group;
        import spark.components.RichText;
        import spark.primitives.Rect;

        private function createMultilineMask():void
        {               
            var txt:RichText = new RichText();
            txt.x = 20;
            txt.width = 260;
            txt.text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempus, eros ac dignissim interdum...";
            txt.setStyle('fontFamily', 'Times');
            txt.setStyle('fontStyle', 'italic');
            txt.setStyle('fontSize', 16);
            txt.setStyle('color', 0xFF0000);                

            var textMask:Group = new Group();

            var ln1:Rect = new Rect();
            ln1.x = 0;
            ln1.y = 0;
            ln1.width = 0;
            ln1.height = 14;
            ln1.fill = new SolidColor(0x000000);
            textMask.addElement(ln1);

            var ln2:Rect = new Rect();
            ln2.x = 0;
            ln2.y = 20;
            ln2.width = 0;
            ln2.height = 14;
            ln2.fill = new SolidColor(0x000000);
            textMask.addElement(ln2);

            var ln3:Rect = new Rect();
            ln3.x = 0;
            ln3.y = 40;
            ln3.width = 0;
            ln3.height = 14;
            ln3.fill = new SolidColor(0x000000);
            textMask.addElement(ln3);

            var container:Group = new Group();
            container.x = 100;
            container.y = 100;
            container.mask = textMask;
            container.maskType = 'clip';
            container.addElement(txt);
            addElement(container);

            addEventListener(Event.ENTER_FRAME, drawLine);

            function drawLine(event:Event):void
            {
                if (ln1.width < 300)
                    ln1.width += 2;
                else if (ln2.width < 300)
                    ln2.width += 2;
                else if (ln3.width < 300)
                    ln3.width += 2;
                else
                    removeEventListener(Event.ENTER_FRAME, drawLine);
            }
        }
    ]]>
</fx:Script>

HTH FTQuest

this is exaclty what I needed! I don't like the enterframe part, but spot on! the only thing I forgot to mention that it's a flex 3 project, but whatever, I might even move it to flex 4. Are groups the same as containers in Flex 3? Thank you for the time and effort to write that! — Alberto M, Feb 19 '11 at 07:54

Multiline Handwriting

1 Answers1