flupie

Typewriter effect with TextAnim AS3

guindex — Wed, 15 Dec 2010 20:45:02 +0000

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!

Text animation sequence

guindex — Thu, 10 Jun 2010 21:19:46 +0000

A long time ago I want to talk about it, but for many things became impossible, so finally let’s talk about something very usefull to do with TextAnim. In the begining, when TextAnim became public we receive some question about how is possible to create sequences of text animation, and can TextAnim provide support for it?

So, that’s a good question, in the begining the class had a lot of extra thing, for effects, tween, alignment, text formating and many others, and one day we decide remove all that things and make TextAnim clear, with only one feature: “break apart the TextField” this is something really hard to do when you have a lot of code, so that’s reason to TextAnim has nothing for that, and even then we can’t scape of create a Tools class (TextAnimTool), naturaly all the other things that TextAnim has today are to make it to the best way.

Sequences are something really great, but looking closer, it’s out of original scope. We recommend that you make all your particular things manualy, because the class was design for things like that and it’s really simple. Special thanks to Lucas Motta that was the most faster guy, he sent a usefull class to do sequences at the first week, check out it here.

When we think about sequences, or crazy similar things, we have to consider a lot of things more then change text on a interval, change the text format size/font/color/align, play sounds, change time/interval/delay images, filters and so on, anything.

Here is one other example of sequence, with other rules, that’s nothing new but can be usefull too:

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

//...
public class TASequence extends Sprite
{
public var _sequence:Array;
public var _i:int = 0;
public var _tf:TextField;
public var _fm:TextFormat;
public var _ta:TextAnim;

public function TASequence()
{
_fm = new TextFormat("myFontName", 32, 0xFF0000);

_tf = new TextField();
_tf.autoSize = "left";
_tf.embedFonts = true;
_tf.defaultTextFormat = _fm;
addChild(_tf);

_ta = new TextAnim(_tf);

_sequence = [
{htmlText:"My text 1", interval:50, effects:my1Effect, next:5},
{htmlText:"FOR \"#d6156c\">DYNAMIC TEXT ANIMATION", interval:50, effects:my2Effect, next:6},
{htmlText:"My other text 3", interval:30, mode:"random", effects:my3Effect, next:6}
];

playNext();
}

public function playNext():void
{
_ta.effects = _sequence[_i].effects;
_ta.interval = _sequence[_i].interval;
_ta.htmlText = _sequence[_i].htmlText;
_ta.blocksVisible = false;

_ta.start();

if (_i < _sequence.length-1)
setTimeout(playNext, _sequence[_i].next * 1000);

_i ++;
}
}
//...

Download source

TextAnim text sequence animation example: textanim_sequence.zip
TextAnim latest version: downloads list

Embed font for dynamic text animation

guindex — Mon, 01 Mar 2010 13:53:51 +0000

One thing that worried us at first is find the best way to do embedFonts. I do not know if there is the “best” way to do this, but many people talk about it out there. The TextAnim has nothing implemented to do this, it only expects a TextField with everything ready.

It depends on your workflow, some people prefer to load the font from an external file (.ttf) as a property class. Others prefer the SWC approuch, creating an instance of the font library and exports from Fash. Theres the approach of loading a swf with font inside, and registerFont in the application. Actually, you need to ensure that fonts are loaded and instantiated, as in any other case to use dynamic fonts in Flash.

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

package
{
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFormat;

import flupie.textanim.*;
import caurina.transitions.*;

[SWF(width='605', height='200', backgroundColor='#000000', frameRate='60')]

public class TAExternalFont extends Sprite
{
[Embed(source="/BradBunR.ttf", fontName="BradBunR", mimeType="application/x-font")]
public var BradBunR:Class;

public var ta:TextAnim;
public var tf:TextField;

public function TAExternalFont()
{
tf = new TextField();
tf.autoSize = "left";
tf.embedFonts = true;
tf.defaultTextFormat = new TextFormat("BradBunR", 26, 0xFFFFFF);
tf.text = "TextAnim with external font";
addChild(tf);

TextAnim.create(tf, {effects:myEffect, mode:"lastToFirst"}).start();
}

public function myEffect(block:TextAnimBlock):void
{
//...

Tweener.addTween(block, {alpha:1, scaleX:5, scaleY:5, time:.5, transition:"easeinoutback"});
Tweener.addTween(block, {scaleX:1, scaleY:1, time:.3, transition:"easeinoutquart", delay:.5});

//...
}
}
}

I prepared two examples, the first “ta_external_font.zip” loads the file (.ttf) that piece of code above is part of that example. The other “ta_swc_font.zip” font is created in Flash and export a SWC with the class, I used this example to show how you can use external text with HTML, for example loading an XML and assigning the htmlText property of TextAnim.

Download source

External font file example: ta_external_font.zip
Embed font inside swc file: ta_swc_font.zip
TextAnim latest version: downloads list

Flame effect TextAnim with Tweensy

guindex — Sat, 06 Feb 2010 00:12:14 +0000

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:

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

Download this example: textanim_tweensy_01.zip
Get TextAnim separately: downloads list
Take a look here: Tweensy using folder (beta/source/cs3/fx)

Example TextAnim with texture

guindex — Thu, 04 Feb 2010 03:32:59 +0000

Hey!

Basically I created an instance of TextAnim with an initial effect and a pattern (you can apply some TextAnimTool useful tools). That receives the URL parameter with text. Then put some delays that simply change the property and start the animation again.

This is a quick example of use of TextAnim to demonstrate the basic operation of the Class. Sure, you can ready a bit more on documentation.

Create Bitmap and getting text by the parameters on loaderInfo

1 2	var pattern:Bitmap = new Bitmap(new MyBitmapData(0,0)); myTextField.text = loaderInfo.parameters.text;

Create TextAnim

1
2
3
4
5
6
7
8

import flupie.textanim.*;

var anim:TextAnim = new TextAnim(myTextField);
TextAnimTools.setPattern(anim, pattern);
anim.effects = myEffect;
anim.blocksVisible = false;

anim.start();

IMPORTANT! Don’t forget to embed the font that you want to use.

NOTE: The most important thing to note myEffect is a function, this function is called for each block of text, and must receive a TextAnimBlock as parameter, then create effect using the tween engine that you prefer (Tweener, BTween, GTween, Tweensy, TweenMax…)

Effect function

1
2
3
4
5
6
7
8

//create your animation effect...

function myEffect(block:TextAnimBlock):void {
block.alpha = 0;
block.x = block.posX - 40;
block.scaleX = block.scaleY = 3;
Tweener.addTween(block, {alpha:1, x:block.posX, _scale:1, time:.5});
}

DOWNLOAD

1 – Take an example like: textanim_pattern.zip
2 – You need to download the last version of TextAnim: TextAnim download list
3 – Do not forget to download your favorite tween engine separate. For this example I used Tweener