Text animation sequence

Posted: June 11th, 2010 | Author: guindex

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.

TextAnim sequence example

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:

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
    //...
    public class TASequence extends Sprite
    {
        public var _sequence:Array;
        public var _i:int = 0;
        public var _tf:TextField;
        public var _fm:TextFormat;
        public var _ta:TextAnim;

        public function TASequence()
        {
            _fm = new TextFormat("myFontName", 32, 0xFF0000);
           
            _tf = new TextField();
            _tf.autoSize = "left";
            _tf.embedFonts = true;
            _tf.defaultTextFormat = _fm;
            addChild(_tf);
           
            _ta = new TextAnim(_tf);
           
            _sequence = [
                {htmlText:"My text 1", interval:50, effects:my1Effect, next:5},
                {htmlText:"FOR <font color=\"#d6156c\">DYNAMIC TEXT</font> ANIMATION", interval:50, effects:my2Effect, next:6},
                {htmlText:"My other text 3", interval:30, mode:"random", effects:my3Effect, next:6}
            ];
           
            playNext();
        }
       
        public function playNext():void
        {
            _ta.effects = _sequence[_i].effects;
            _ta.interval = _sequence[_i].interval;
            _ta.htmlText = _sequence[_i].htmlText;
            _ta.blocksVisible = false;
           
            _ta.start();
           
            if (_i < _sequence.length-1)
                setTimeout(playNext, _sequence[_i].next * 1000);

            _i ++;
        }
    }
    //...

Download source

  1. TextAnim text sequence animation example: textanim_sequence.zip
  2. TextAnim latest version: downloads list
Filed under: TextAnim | Tags: , , , , , , , , , | 10 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.

TextAnim effect glow example

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

  1. External font file example: ta_external_font.zip
  2. Embed font inside swc file: ta_swc_font.zip
  3. TextAnim latest version: downloads list
Filed under: TextAnim | Tags: , , , , , , , , , , , | 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:

Get Adobe Flash player

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

  1. Download this example: textanim_tweensy_01.zip
  2. Get TextAnim separately: downloads list
  3. Take a look here: Tweensy using folder (beta/source/cs3/fx)
Filed under: TextAnim | Tags: , , , , , , | 22 Comments »