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

Answer 1

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