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.
_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.
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:
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.
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.
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(newBlurFilter(3,3,1));
cFx = new ColorEffect(newColorTransform(1,1,1,0.95));
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 = newBitmap(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…)
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
