[Tutorial] Criar animação de texto dinâmico

[Guilherme Almeida 0]

Este é um rápido tutorial de como fazer animações com

texto dinâmico (dynamic TextField).

 

Antes de mais nada, é preciso entender um pouco como

funciona. TextAnim é uma classe AS3 para criar animação

com texto, basicamente ela faz um "breakApart" em um

TextField que pode ser por letras, palavras ou linhas.

 

Você só precisa criar uma função para animar os blocos.

Nesse tutorial vou usar o Tweener para fazer a animação,

fique a vontade para usar qualquer tween que preferir.

 

Siga os passos:

1 - Crie um TextField dinâmico e escreva qualquer coisa nele;

2 - Faça o embed da font que escolher;

3 - Instancie o TextField como myText;

4 - Faça o download da TextAnim aqui: http://code.google.com/p/textanim/

5 - Faça o download do Tweener (ou o que preferir): http://code.google.com/p/tweener/

6 - Coloque o .fla e as classes todos na mesma pasta;

7 - Coloque o seguinte código no primeiro frame da timeline:

 

import flupie.textanim.*;
import caurina.transitions.Tweener;

var anim:TextAnim = new TextAnim(myText);
anim.effects = myEffect;
anim.blocksVisible = false;
anim.start();

function myEffect(block:TextAnimBlock):void
{
    block.alpha = 0;
    block.x = block.posX + 20;
    Tweener.addTween(block, {x:block.posX, alpha:1, time:.5});
}

Você pode modificar vários parâmetros da textanim

para fazer qualquer animação. Aqui tem a documetação

da TextAnim (inglês): http://guindex.com/flupie/textanim/docs/

 

=)

[Matheus Brito 12]

Show. Vlw pelo tuto.

Abs

[Elektra 102]

Oi Guilherme.

 

Criei uma caixa de texto dinâmico, instanciei como myText, fonte verdana, bold, size 43, cor #CC0000, selecionei as 4 opções Character Embedding --> Latin.

 

O fla e os arquivos caurina e flupie se encontram na mesma pasta.

 

Testei aqui nenhum erro no compilador.

 

 

É possível que nos informe um exemplo para ver o efeito em ação?

 

Não tenho domínio do action e estou estudando por minha conta o uso de classes.

 

Agradeço se puder auxiliar.

 

Abraços

[Guilherme Almeida 0]

Oi Guilherme...

 

Oi Elektra,

 

O efeito é algo parecido com isso http://guindex.com/flupie/textanim/pattern/

lá tem um exemplo pra baixar também.

[Elektra 102]

Muito obrigada pela atenção.

 

Apenas um detalhe, na página de origem o efeito não é visualizado no IE8, já no Firefox fica perfeito.

 

Em ambos tenho o Flash Player atualizado.

 

Abraços

[Elektra 102]

Correção, mesmo sem solicitar atualização do Flash Player e eu ter efetuado este procedimento há poucos dias, fiz o download e o efeito também pode ser visualizado no IE8.

 

Não foi possível editar o post anterior devido a uma pane no fórum.

 

Achei interessante a possibilidade de usar a TweenMax, uma classe que estou começando a estudar.

 

Obrigada Guilherme, valeu mesmo.