Archive for the ‘TextAnim’ Category
showcase: New Years Eve 2009 invitation
invited our friends to a lovely new years eve with this online New Years Eve invitation
the invitation is build with ActionScript 3.0, using Tweener and TextAnim.
graphics are bought at ActiveDen, then slightly altered.
ActionScript 3.0: creating text animation with textures using TextAnim
when using TextAnim you can add any texture bitmap as pattern for the text.
check out an example of TextAnim animating text
yes, I know, impressive..
but what if replacing the blue color of the text with this texture?
check out an example of TextAnim animation text with a texture bitmap as pattern
the code for the texture example:
import flupie.textanim.TextAnimBlock;
import flupie.textanim.TextAnimTools;
import caurina.transitions.Tweener;
//set your text
myTextField.text = "TextAnim is truly amazing, it rocks rocks ROCKS! TextAnim is truly amazing, it rocks rocks ROCKS! TextAnim is truly amazing, it rocks rocks ROCKS! TextAnim is truly amazing, it rocks rocks ROCKS! TextAnim is truly amazing, it rocks rocks ROCKS!";
//Create a bitmap with library linkage instance.
var pattern:Bitmap = new Bitmap(new TABMD(0, 0));
//Configuration
var anim:TextAnim = new TextAnim(myTextField);
TextAnimTools.setPattern(anim, pattern);
anim.interval = 65;
anim.effects = myEffect;
anim.blocksVisible = false;
anim.start(300); //delay to start
function myEffect(block:TextAnimBlock):void {
block.alpha = 0;
block.x = block.posX + 80;
block.scaleX = block.scaleY = 8;
Tweener.addTween(block, {alpha:1, x:block.posX, scaleX:1, scaleY:1, time:.5, transition:"easeoutsine"});
}
new to TextAnim?
be sure to read this on the very basic usage of TextAnim:
ActionScript 3.0: creating text animation with textures using TextAnim
ActionScript 3.0: the TextAnim class; a great resource for animating text in dynamic TextFields
wow, this TextAnim class makes it so much easier to animate text inside of dynamic TextFields.
first of all, take a look at this example:
very basic use of the TextAnim class, example 01
in the example above, I’ve added a dynamic TextField to stage, instancenamed it “textfield”, embedded the characters, and added this code:
import flupie.textanim.TextAnimBlock;
import caurina.transitions.Tweener;
var anim:TextAnim = new TextAnim(textfield);
anim.animMode = TextAnim.ANIM_TO_LEFT;
anim.breakMode = TextAnim.BREAK_IN_WORDS;
anim.interval = 100;
anim.effects = effectFunction;
anim.blocksVisible = false;
anim.start();
function effectFunction(block:TextAnimBlock):void {
block.alpha = 0;
Tweener.addTween(block, {alpha:1, time:.5});
}
let’s try altering this animation.
let’s change the way the text in the TextField is shown.
right now it’s animated in from right to left, because we use this animMode:
anim.animMode = TextAnim.ANIM_TO_LEFT;
instead of this ANIM_TO_LEFT we can use any of these:
ANIM_TO_RIGHT
ANIM_TO_LEFT
ANIM_TO_CENTER
ANIM_TO_EDGES
ANIM_RANDOM
they are very self-explaining, we’ll go with the ANIM_RANDOM instead.
another thing to change is the breakMode of the content of the TextField.
now we’re using the BREAK_IN_WORDS, but all of these are selectable:
BREAK_IN_LETTERS
BREAK_IN_WORDS
BREAK_IN_LINES
again, no need to explain, we’ll go with the BREAK_IN_LETTERS instead.
last thing to change is the interval of the animation.
so far we’ve used 100 a the interval parameter.
this means that every 100th millisecond a word would be added in the right-to-left word animation above.
if we change this parameter to 60 in our new animation, a letter would be animated in randomly every 60th millisecond.
let’s see what these 3 changes do to our animation:
very basic use of the TextAnim class, example 02
and here’s the code for the second example:
import flupie.textanim.TextAnimBlock;
import caurina.transitions.Tweener;
var anim:TextAnim = new TextAnim(textfield);
anim.animMode = TextAnim.ANIM_RANDOM;
anim.breakMode = TextAnim.BREAK_IN_LETTERS;
anim.interval = 60;
anim.effects = effectFunction;
anim.blocksVisible = false;
anim.start();
function effectFunction(block:TextAnimBlock):void {
block.alpha = 0;
Tweener.addTween(block, {alpha:1, time:.5});
}
I’ll be doing more on this TextAnim class in the days to come, so keep an eye on this blog 
last; things to be aware of:
the text in the Textfield in the examples above is set to be selectable, but the text isn’t selectable, and the Textfield is set to show a border around it, but the border isn’t shown..
and again, remember to embed your characters!