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 »

Flame effect TextAnim with Tweensy

Posted: February 6th, 2010 | Author: guindex

Hi, on the last week I was happy with the feedback from people who are using the TextAnim, then talking to Mauro this morning, about some guys who ask about dynamic text animation effects that are possible, I think it depends a lot on what you want, but you can go quite far. So if you still do not know, take a look at Tweensy, property tweener and motion effects library.

This example, I create a TextAnim and say that the effect will use the things of Tweensy, this was the result:

Get Adobe Flash player

Create TextAnim instance

1
2
3
4
5
6
7
8
9
10
11
import flupie.textanim.*;

var myAnim:TextAnim = new TextAnim(label);
myAnim.text = "ALL YOU NEED IS LOVE"
myAnim.mode = TextAnimMode.EDGES_CENTER;
myAnim.blocksVisible = false;
myAnim.effects = myEffect;
myAnim.interval = 150;
myAnim.start();

//...

Tweensy filters and myEffect function

1
2
3
4
5
6
7
8
9
10
11
//...

pdFx = new PerlinDisplacementEffect(302, 100, 0, -2, 3);
fFx = new FilterEffect(new BlurFilter(3, 3, 1));
cFx = new ColorEffect(new ColorTransform(1, 1, 1, 0.95));

public function myEffect(block:TextAnimBlock):void {
   block.alpha = 0;
   block.scaleX = block.scaleY = 4;
   tween.to(block, {alpha:1, scaleX:1, scaleY:1, x:block.posX, y:block.posY}, 2, Sine.easeOut);
}

Source

  1. Download this example: textanim_tweensy_01.zip
  2. Get TextAnim separately: downloads list
  3. Take a look here: Tweensy using folder (beta/source/cs3/fx)
Filed under: TextAnim | Tags: , , , , , , | 22 Comments »