Quick Tip: Easy Text Transitions with TextAnim Maker

Discover the power of TextAnim Maker and create awesome text transitions. Read on to find out more in this Quick Tip!

Step 1: What is TextAnim Maker?

TextAnim Maker is a Flash based Text Animation tool that creates stunning text animations right in your browser and displays the code you need to use to perform the animation in your project.

It works using its own class called TextAnim, developed by the people of flupie.net.

Step 2: How it Works

TextAnim Maker presents a clean interface showing the different options, controls and panels to customize your text effect.

It also shows a preview of the animation created and the resulting code of the transition.

Step 3: Options

The editor features a series of options (which are properties and methods in the class) which can be edited to modify the final effect, let's take a closer look at those options:

• Mode: The animation will start from the option selected here.
• Split: Splits the text into chars, words or lines.
• AnchorX, AnchorY: Uses the option as the registration point to animate.
• Text: The text to animate, it can contain HTML.
• Interval: Interval between the chars, words or lines animation.
• Delay: Time to wait before start.
• Blocks Visible: A block is the part of TextAnim that contains a text slice, hides them or shows them.

Step 4: Class and Documentation

You can download the TextAnim class from GoogleCode and read the documentation online at the developers' website.

Step 5: Example Animation

This is an example animation created in the editor, here is the code I used:

import flupie.textanim.*;

var txtanim:TextAnim = new TextAnim(myTextField);
txtanim.mode = TextAnimMode.EDGES_CENTER;
txtanim.anchorX = TextAnimAnchor.RIGHT;
txtanim.anchorY = TextAnimAnchor.BOTTOM;
txtanim.interval = 15;
txtanim.blocksVisible = false;
txtanim.effects = myEffect;
txtanim.start();

import caurina.transitions.*;

function myEffect(block:TextAnimBlock):void {
    block.scaleX = block.scaleY = 0;
    block.rotation = -120;
    Tweener.addTween(block, {rotation:0, scaleX:1, scaleY:1, time:.5, transition:"easeoutback"});
}

Conclusion

TextAnim Maker is a great way to create your animations dynamically and quickly. Try it!

Thanks for reading!