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 »

Embed font for dynamic text animation

Posted: March 1st, 2010 | Author: guindex

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

Filed under: TextAnim | Tags: actionscript, animation, as3, defaulttextformat, embed, embedfonts, flash, font, motion, text, textfield, textformat | 3 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:

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)

Filed under: TextAnim | Tags: actionscript, animation, effect, flame, motion, text, tweensy | 22 Comments »

Example TextAnim with texture

Posted: February 4th, 2010 | Author: guindex

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

Filed under: TextAnim | Tags: actionscript, animation, pattern, text, texture | 5 Comments »

flupie

…because you can get some smiles today