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(); } }
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.
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
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;
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
var pattern:Bitmap = newBitmap(new MyBitmapData(0,0));
myTextField.text = loaderInfo.parameters.text;
1 2 3 4 5 6 7 8
var anim:TextAnim = new TextAnim(myTextField);
anim.effects = myEffect;
anim.blocksVisible = false;
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…)