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:
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:
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:

I declared a variable with the characters (_chars) that I want to shuffle like a normal string.
In the method of effect (shuffleEffect) I use the property vars of TextAnimBlock to record the final text content of each block.
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.
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: actionscript, animation, effect, flash, simulation, text, textfield, tweener, typewriter | 14 Comments »

14 Comments on “Typewriter effect with TextAnim AS3”

1 Felix Sanchez said at 9:38 pm on December 16th, 2010:
Man, another fine example of how TextAnim can be used. Love it. Will be sure to spread the word in Denmark :O)

Thanks
Felix
2 Dr Schizo said at 9:59 pm on January 25th, 2011:
I love this library. Unfortunatly, I tried to make a loop out of this animation and after a while, the number of frames per second drop exponentially and the animation freeze.

There might be a problem with the garbage collector. Is there a way to prevent such a thing?
3 guindex said at 2:33 pm on January 26th, 2011:
Hey Schizo,

This can be a problem, but in fact, I suggest that you review the flow that you made this loop. Be careful to not create new instances of TextAnim each loop, or something like that. Another alternative is to use the method:

myTextAnim.dispose();

This kills all the internal process of the class.

I hope this helps, if you need to just talk.
4 Dr Schizo said at 5:18 pm on January 26th, 2011:
Thank you a lot for this answer.

I did the change but without any success. Here a really simple test. I create only one instance of TextAnim and the only thing I do at every loop is to hide the blocks and start the animation again. And still… after a while, the animation is freezing.

package
{
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFormat;
import flupie.textanim.TextAnim;
import flupie.textanim.TextAnimEvent;

public class Test7 extends Sprite
{
private var _tf:TextField;
private var _fm:TextFormat;
private var _ta:TextAnim;
private var _txt:String = “FINAL EXAMPLE TYPEWRITER DELAY/SHUFFLE CHARS – TEXTANIM AS3″;

public function Test7()
{
_fm = new TextFormat(new Gosmick().fontName, 19, 0×000000);

_tf = new TextField();
_tf.defaultTextFormat = _fm;
_tf.text = _txt;
addChild(_tf);

_ta = new TextAnim(_tf);
_ta.interval = 5;
_ta.onComplete = anim;
anim();
}

private function anim(e:TextAnimEvent=null):void
{
_ta.blocksVisible = false;
_ta.start();
}
}
}

I tried as well to dispose of the textanim and there is a bug.

package
{
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFormat;
import flupie.textanim.TextAnim;
import flupie.textanim.TextAnimEvent;

public class Test7 extends Sprite
{
private var _tf:TextField;
private var _fm:TextFormat;
private var _ta:TextAnim;
private var _txt:String = “FINAL EXAMPLE TYPEWRITER DELAY/SHUFFLE CHARS – TEXTANIM AS3″;

public function Test7()
{
_fm = new TextFormat(new Gosmick().fontName, 19, 0×000000);

_tf = new TextField();
_tf.defaultTextFormat = _fm;
_tf.text = _txt;
addChild(_tf);

_ta = new TextAnim(_tf);
_ta.interval = 5;
_ta.onComplete = anim;
_ta.blocksVisible = false;
_ta.start();
}

private function anim(e:TextAnimEvent=null):void
{
_ta.dispose();
}
}
}

Here the message error:

TypeError: Error #1009: Cannot access a property or method of a null object reference
at flash.events::EventDispatcher/dispatchEvent()
at flupie.textanim::TextAnim/completeHandler()[/Users/guindex/projects/me/flupie/textanim/branches/linked/source/flupie/textanim/TextAnim.as:644]
at ()[/Users/guindex/projects/me/flupie/textanim/branches/linked/source/flupie/textanim/DispatchFlow.as:146]
at Function/http://adobe.com/AS3/2006/builtin::apply()
at SetIntervalTimer/onTimer()
at flash.utils::Timer/_timerDispatch()
at flash.utils::Timer/tick()

The tests are really simple. I don’t see what I did wrong. Do you know what I should change?

Thanks in advance.
5 Dr Schizo said at 3:35 pm on January 30th, 2011:
Hello everybody,

Anybody knows how to avoid cpu overload while repeting indefinitely text animations ? I find the library great, but if there is no way to avoid such a overheat problem, it limits hugely its pratical usefulness

Thanks in advance for reading this post and maybe for answering to it!

Dr Schizo
6 guindex said at 3:28 am on January 31st, 2011:
Hello Schizo,

I think I understand, this is something that is not clear in the documentation, let me try to explain. Callbacks and events on TextAnim has no association with the animation.

In your case, you’re using the callback “onComplete”, to loop it does not work, because it is triggered when the class ends to break the blocks of text and not when the animation ends. For this type of loop I suggest you to put delays as a setTimeout for example.

I made another example that the process never goes down, and can help you, download it here: http://flupie.net/blog/wp-content/uploads/2011/01/textanim_loop.zip

And please let me know.
7 felipe said at 12:49 pm on February 4th, 2011:
Hi, awesome effect! But how can I edit and generate my customized swf file?
8 Randalfien said at 12:54 pm on February 27th, 2011:
Hi,
First of all, thanks for this amazing library. I have spent a lot of time doing basically the same thing, consequently I discovered you did a way better job!

I do have one problem, I’m trying to make my movie a button, and TextAnim object somehow resists displaying a handcursor, when the mouse is over it. Is there anything that prevents that?

I tried something like this, for my main class
” mouseEnabled = true;
buttonMode = true;
mouseChildren = true;
useHandCursor = true; ”
and even specifically for the textAnim object..
” myTextAnim.mouseEnabled = true;
myTextAnim.buttonMode = true;
myTextAnim.mouseChildren = true;
myTextAnim.useHandCursor = true; ”
but it doesnt work.
Any help , please?
9 Randalfien said at 1:10 pm on February 27th, 2011:
Ok, so I figured it out, so for those who run into the same problem try to add this code
”
var bloc:TextAnimBlock = myTextAnimObj.firstBlock;
var i:int = 0;
while (bloc)
{
bloc.mouseChildren = false;
bloc = bloc.nextBlock;
}
“
10 guindex said at 7:04 pm on February 27th, 2011:
Hi Randalfien,

I really could not simulate your problem, TextAnim does nothing about mouseChildren or anything like that. It’s just a Sprite like any other, you simply add a mouseChilren = false; in the container where the instance of TextAnim was added.

I tried to simulate the possible problems, but i don’t know how can you do that. Follow the link to download for example: http://goo.gl/AAiVE

I hope you can find the problem.

–
11 Dr Schizo said at 5:23 pm on April 3rd, 2011:
Hi guindex,

I’m really sorry I’ve been so long to answer to you.

I used a timer to queue the animations instead of using the onComplete handler. It might have done a difference, but I couldn’t really see it on the frame rate.

Then, I was looking for something else on the net and I found a really interesting article comparing Tweener and Tweenmax speed: http://blog.greensock.com/tweening-speed-test/

The performance gap is huge. I replaced Tweener by TweenMax on my animation and there is now absolutely no cpu overload!

The dialog system of my little web browser game looks now so much better thanks to you… and TweenMax The game is not yet online but as soon as it is, I will send you the link so you can see the result and I will thank you in the credits page.

Thanks again for this great app and for your support !
12 guindex said at 7:31 pm on April 3rd, 2011:
Hey Dr Schizo!

That’s really nice to hear, actually I’m a big fan of Tweener, and for some reason never stop to use it, but I know that Tweener now is not so updated for every specific issue of flash player optmization. I don’t like TweenLite, it’s a kind of personal thing, I don’t know why. But if it works for you, that’s all!

I really apreciate that you make your issue resolved, and I’m completly thankfull.

–
13 giannis said at 5:54 pm on November 4th, 2011:
First of all your library is super great!I succeed to make the animation i wanted,but i noticed something unexpected.The textfield moves i little to the right when animates.Why is that?I can post the code if it makes easier to explain.
14 furreca said at 6:49 pm on November 4th, 2011:
Can you send to us an example?

Thanks giannis!

flupie

…because you can get some smiles today

Typewriter effect with TextAnim AS3

14 Comments on “Typewriter effect with TextAnim AS3”

Leave a Reply

Categories

Recent Posts

Helpers