Typewriter effect with TextAnim AS3

Posted: December 15th, 2010 | Author: guindex

That’s a really debt of TextAnim examples, the typewriter effect in Flash is maybe the most famous trick with text animations. I know this example has a lot of alternatives to get the same result. So, on this case we’ll do something simple just to demonstrate the flexibility of TextAnim + Tweener.

So let’s start now, example #01:

Get Adobe Flash player

 On this example I create TextAnim instance without any effects, it’s pure TextAnim dispatching blocks at interval time (20 ms) almost all parameters are default.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
    //...
    public class ta_typewriter extends Sprite
    {
        public var _tf:TextField;
        public var _fm:TextFormat;
        public var _ta:TextAnim;
        public var _color:uint = 0xC9F1FA;
       
        public function ta_typewriter()
        {      
            _fm = new TextFormat(new DSDigital().fontName, 16, _color);
           
            _tf = new TextField();
            _tf.autoSize = TextFieldAutoSize.LEFT;
            _tf.multiline = true;
            _tf.embedFonts = true;
            _tf.defaultTextFormat = _fm;
            _tf.text = "FIRST EXAMPLE SIMPLE TYPEWRITER - TEXTANIM AS3";
            addChild(_tf);
           
            _ta = new TextAnim(_tf);
            _ta.interval = 20;
            _ta.blocksVisible = false;

            _ta.start();
        }
    }

Example #02:

Get Adobe Flash player

 Here I put a lot of extra effects and details, just to give more context. But the TextAnim settings still simple, who does all that happen is Tweener. Download it here.

How does it work:

  1. I declared a variable with the characters (_chars) that I want to shuffle like a normal string.
  2. In the method of effect (shuffleEffect) I use the property vars of TextAnimBlock to record the final text content of each block.
  3. In the same method, add a Tweener which is actually a caller to the method updateChars that will scramble the characters (one block at a time). Random a character using any of the _chars in onUpdate callback.
  4. Still in Tweener, also declared the onComplete, to restore the original character.

Peace of code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
    //...
    public class ta_typewriter extends Sprite
    {
        public var _tf:TextField;
        public var _fm:TextFormat;
        public var _ta:TextAnim;
        public var _cursor:ACursor;
        public var _space:int = 5;
        public var _chars:String = "^-.*@#$%!&543210";
        public var _color:uint = 0xC9F1FA;
        public var _glow:GlowFilter = new GlowFilter(_color, .4, 6, 6);
       
        public function ta_typewriter()
        {
            _cursor = new ACursor();
            _cursor.filters = [_glow];
            addChild(_cursor);
           
            _fm = new TextFormat(new DSDigital().fontName, 16, _color);
           
            _tf = new TextField();
            _tf.autoSize = TextFieldAutoSize.LEFT;
            _tf.multiline = true;
            _tf.embedFonts = true;
            _tf.defaultTextFormat = _fm;
            _tf.text = "CLICK TO START";
            addChild(_tf);
           
            _ta = new TextAnim(_tf);
            _ta.filters = [_glow];
            _ta.effects = shuffleEffect;
            _ta.interval = 20;
            _ta.blocksVisible = false;
            _ta.start(1000);
           
            stage.addEventListener(MouseEvent.CLICK, clickStart, false, 0, true);
        }
       
        public function clickStart(e:MouseEvent):void
        {
            _ta.text = "FINAL EXAMPLE TYPEWRITER DELAY/SHUFFLE CHARS - TEXTANIM AS3";
            _ta.blocksVisible = false;

            _ta.start(3000);
        }
       
        public function shuffleEffect(b:TextAnimBlock):void
        {
            b.vars.char = b.text;
            _cursor.x = _ta.x + b.x + _space;
            _cursor.y = _ta.y + b.y;
           
            Tweener.addTween(b, {time:.2, onUpdate:updateChars, onUpdateParams:[b], onComplete:completeRandom, onCompleteParams:[b]});
        }
       
        public function updateChars(b:TextAnimBlock):void
        {
            var index:int = Math.round(Math.random() * _chars.length);
            b.text = _chars.slice(index, index + 1);
        }
       
        public function completeRandom(b:TextAnimBlock):void
        {
            b.text = b.vars.char;
        }
    }
    //...

That’s all, if you have problems, please send suggestions, thanks!

Filed under: TextAnim | Tags: , , , , , , , , | 14 Comments »