Certa vez fui contatado por uma empresa de São Paulo (que prefiro não mencionar o nome) para prestar consultoria em um projeto que eles estavam com dificuldade em finalizar. O Cliente era uma empresa de prestação de seguros bastante conhecida que queria um simulador de prioridades que funcionava da seguinte forma:

A área de opções continha quatro opções de prioridades para o cliente. Exemplo: Casa, Família, Poupança e Futuro (Não lembro bem quais eram).

O usuário escolhia uma ordem de prioridades que de acordo com a ordem que ele clicava nas opções, a área de “Escolhas” ia se preenchendo respeitando a ordem de escolha das opções de cima pra baixo de forma animada. Na sequência, o simulador verificava a ordem escolhida pelo usuário e calculava qual era o tipo de seguro ideal para aquele cliente. Deu pra entender qual era o caso?

Então, aconteceu que essa empresa (a qual me contratou) já havia iniciado o projeto. E como eles não conheciam de ActionScript o suficiente para fazer animações dinâmicas, iniciaram a fazer as animações (trajetória de cada prioridade a partir do ponto inicial até o local na lista de Escolhas) na Timeline sem o auxílio de código (além de simples gotoAndPlay ou gotoAndStop).
Imaginem só, as combinações possíveis de disposição entre as possibilidades de escolha do usuário resultavam em 256 combinações possíveis. Ou seja, da forma que estavam fazendo, 256 Cenas em um filme.

Desconsiderando o tremendo saco e paciência que quem estava fazendo esse projeto teria que ter para criar essas 256 Cenas, o tamanho do arquivo também ficaria enorme! Além do detalhe que se o usuário clicasse em qualquer outra opção antes de uma animação acabar, destruiria o roteiro concordam? A minha missão era reduzir o tamanho do arquivo de forma viável.

O resultado, é que o arquivo que teria 256 Cenas, cada uma com no mínimo 50 frames, ou seja, 12.800 Frames em um filme acabou com 1 (UM) frame graças ao uso de animações dinâmicas nesse projeto.

Animação dinâmica consiste em utilizar o ActionScript para animar objetos de interface de forma interativa e como o próprio nome diz, dinâmica. Abaixo segue um exemplo simples do uso de animação dinâmica no Flash.

Download [exemplo_01.fla]

Note que na bola animada sem animação dinâmica, o movimento quando você passa o mouse sobre a bola não é preciso. E quando você passa o mouse sobre a bola e tira antes que a animação termine, ocorre uma mudança brusca na animação causando uma má impressão do espectador.

Enquanto no exemplo com animação dinâmica, o movimento é preciso mesmo passando o mouse rapidamente sobre a bola.

Concluímos então que até as mais simples animações necessitam ser dinâmicas para uma melhor impressão do usuário.

Até a versão MX do Flash, somente existiam duas possibilidades para se criar animações dinâmicas. Eram elas:

1. Animação com onEnterFrame – Baseada no evento “onEnterFrame” da classe MovieClip que simula a passagem de frames do filme.

A animação com onEnterFrame quebrou muitos galhos e ainda é usada em alguns casos no MX 2004. Porém não é indicada.
Esse tipo de animação gerou uma enorme discussão nas principais listas de Flash do mundo todo pela sua dificuldade de manipulação. Uma das dificuldades desse tipo de animação era a seguinte:

botaoRodar.onRelease = function() {
     umMovieClip.onEnterFrame = function() {
        this._rotation += 5;
        if (this._rotation>=200) {
            delete this.onEnterFrame;
        }
    };
};
botaoAndarX.onRelease = function() {
    umMovieClip.onEnterFrame = function() {
        this._x += 5;
        if (this._x>=400) {
            this._x = 400;
            delete this.onEnterFrame;
        }
    };
};

Esse exemplo possui dois botões ( “botaoRodar” e “botaoAndarX” ) e um MovieClip (“umMovieClip”). O funcionamento seria bastante simples: O usuário clicaria no botão rodar e o movieClip iniciaria a rotação até atingir 200 graus. E ao clicar no botão “botaoAndarX” o movieClip se deslocaria até a posição x = 400 do Stage até parar. Teoricamente, tudo bem. Se não fosse por um pequeno problema: O evento onEnterFrame é sobrescrito a cada clique dos botões. O que causaria um erro lógico na animação. E se o usuário por exemplo clicasse no botaoRodar e em seguida clicasse no botaoAndarX antes que a animação de rotação terminasse, a mesma iria parar pois o evento “onEnterFrame” do movieClip “umMovieClip” foi sobrescrito no clique do botão “botaoAndarX”. Deu pra entender o problema?

Então a comunidade trabalhou muito na solução desse tipo de problema até que se chegou a conclusão que o MovieClip deveria ser uma classe que transmitisse eventos assim como é a “Mouse” e a “Key” e isso é assunto para vários artigos e eu posso discutir mais à frente.
Notaram o problema, né?

2. Animação com setInterval – O método setInterval é usado para executar uma determinada função repetidamente respeitando um intervalo de tempo definido pelo usuário em millisegundos. Exemplo:

animacao = setInterval(function(){
    umMovieClip._x += 5;
    if(umMovieClip._x >= 400){
        umMovieClip._x = 400;
        clearInterval(animacao);
    }
},10);

Com o setInterval, conseguimos ter uma melhor independência entre animações em relação ao onEnterFrame. Porém a dificuldade de animações de múltiplos MovieClips e múltiplas propriedades ainda é grande. Além do que ainda exige um bom conhecimento matemático do programador para fazer determinadas animações como Elástica, Queda, Easing etc ...

O Flash MX 2004 trouxe um novo modelo de componentes de interface. E entre eles está o Combobox demonstrado na figura abaixo.

Download [exemplo_02.fla]

Note que a animação de descida das opções do Combobox é diferente para cada instância do componente. Os componentes do Flash MX 2004 que possuem animação utilizam a Classe Tween para realizar os movimentos.

A Classe Tween ainda não possui documentação disponível pela macromedia. Ela pode ser achada no seguinte endereço:

<unidade de disco>:<instalação do Flash MX 2004><idioma>First RunClassesmxeffectsTween.as

O Uso da classe Tween é bastante simples. Veja o exemplo a seguir:

var oListAnima = new Object();
var animacao = new mx.effects.Tween(oListAnima, 0, 100, 1000);
oListAnima.onTweenUpdate = function(posicao:Number):Void{
    umMovieClip._y = posicao;
};
oListAnima.onTweenEnd = function(posicaoFinal:Number):Void{
    trace("animação terminou em: " + posicaoFinal);
};

Vamos entender o código!

Na primeira linha, criamos um objeto que será o listener da animação. O listener, será o objeto (de qualquer classe, até mesmo MovieClip) que irá responder pelos eventos causados pela animação. O método construtor da Tween pede quatro argumentos. São eles:

1 – tweenListener (Objeto que responde aos eventos da animação)
2 – valor(res) inicial(ais) (Número ou Array de números com os valores iniciais da animação)
3 – valor(res) final(ais) (Número ou Array de números com valores finais da animação)
4 – Duração da animação em millisegundos.

No exemplo passado, os valores inicial e final foram usados para movimentar o movieClip “umMovieClip” no eixo Y. Porém poderia ser utilizado para qualquer outra finalidade.

Como falei, os valores inicial e final também podem ser Arrays de números. Como por exemplo, para movimentar um MovieClip no eixo X e Y em valores diferentes. Exemplo:

//Objeto Listener
var oListAnima = new Object();

//Criando a instância da Tween
var animacao = new mx.effects.Tween(oListAnima, [0, 20], [100, 300], 1000);

//Evento ocorrido a cada “passo” da animação
oListAnima.onTweenUpdate = function(posicoes:Array):Void{
    umMovieClip._y = posicoes[0]; //Primeira posição do Array
    umMovieClip._x = posicoes[1]; //Segunda posição do Array
}
//Evento ocorrido ao fimj da animação
oListAnima.onTweenEnd = function(posiciesFinais:Array):Void{
    trace("animação terminou em: " + posiciesFinais);
};

Note que todo o controle de cálculo da animação é feito pela própria Tween e os valores parciais da animação são informados ao evento “onTweenUpdate” de acordo com o tipo de dado passado na criação da Tween através dos argumentos (valores iniciais e finais).
Caso você informe número para esses valores, números serão passados para os eventos “onTweenUpdate” e “onTweenEnd”. Caso passe Arrays, Arrays serão passados para os eventos.

Dissertando ainda mais os eventos, notamos que a Tween basicamente transforma um valor em outro durante um intervalo de tempo informado por você.

Ainda usando como base o exemplo passado, perceba que ele transforma 0 (primeiro valor do Array inicial) em 100 (primeiro valor do Array final) e transforma 20 (segundo valor do Array inicial) em 300 (segundo valor do Array final).

E tem mais! (parece até propaganda de Polishop). Com a Tween, também é muito simples mudar o tipo da animação! Veja o exemplo a seguir:

Download [exemplo_03.fla]

Cada objeto Tween, possui uma propriedade chamada “easingEquation” que define a equação responsável pelo cálculo do movimento da animação. Existem algumas equações já prontas no pacote “mx.transitions.easing”

<unidade de disco>:<instalação do Flash MX 2004><idioma>First RunClasses mx ransitionseasing

Neste diretório você encontrará alguns arquivos .AS que são classes úteis para criação de animações dinâmicas.

Abaixo segue o código comentado do exemplo passado:

//Usando import para mais fácil referência às Classes
import mx.effects.Tween;
import mx.transitions.easing.*;

//Array de Buttons
var aBotoes:Array = [bElastic, bBounce, bStrong, bBack];
//Array de Classes
var aClasses:Array = [Elastic, Bounce, Strong, Back];

//Objeto global de configuração
var config:Object = new Object();

//Função de inicialização
function inicia():Void{
    //Configurando os botões
    for(var i = 0; i < aBotoes.length; i++){
        //Definindo o tipo de animação para cada botão
        aBotoes[i].classe = aClasses[i];

        aBotoes[i].onRelease = function():Void{
            //Quando clicado no botão, definimos qual deve ser a classe usada para animar
            config.classe = this.classe;
            //Marca o quadrado de seleção do botão
            selec._x = this._x;
        };
    }
    //Marca o primeiro botão
    aBotoes[0].onRelease();

    //Evento onMouseDown executado ao clique do mouse em qualquer ponto
    bola.onMouseDown = function():Void{

        //Cria a animação usando Arrays nos valores iniciais e finais
        var ani:Tween = new Tween(this, [this._x, this._y], [_xmouse, _ymouse], 600);

        //Define o easingEquation de acordo com a seleção do usuário
        ani.easingEquation = config.classe.easeOut;

        //Evento onTweenUpdate
        this.onTweenUpdate = this.onTweenEnd = function(posicoes:Array):Void{
            this._x = posicoes[0];
            this._y = posicoes[1];
        };
    };
}

//Iniciando a aplicação
inicia();

As possibilidades do uso da Classe Tween são infinitas! Você pode animar com tamanhos, posições, coordenadas, cores etc.

Visto tudo isso, chegamos à seguinte conclusão:

Animação dinâmica, do contrário do que se imagina, é bem mais simples e produtiva do que animação estática (aquelas de Timeline). Se você não concorda com isso, experimento fazer uma animação Elástica somente com o uso da Timeline. Se conseguir, experimento fazer qualquer alteração nessa animação como mudar a velocidade dela! Vai dar um trabalhão hein? Agora experimente mudar uma animação Elástica para uma animação de Queda ! Vai dar mais trabalho ainda!

Usando animação dinâmica, você consegue fazer tudo isso somente com a simples alteração de poucos valores no código, Bom hein !?

Exemplo 1 - Elástico:

var animacao = new mx.effects.Tween(oList, 0, 300, 1000);
animacao.easingEquation = mc.transitions.easing.Elastic.easeOut;

Exemplo 2 - Queda:

var animacao = new mx.effects.Tween(oList, 0, 300, 1000);
animacao.easingEquation = mc.transitions.easing.Bounce.easeOut;

Exemplo 3 - Volta:

var animacao = new mx.effects.Tween(oList, 0, 300, 1000);
animacao.easingEquation = mc.transitions.easing.Back.easeOut;

Você pode encontrar vários tipos de equações de easing no endereço : www.robertpenner.com/easing.

Esse foi o primeiro de muitos assuntos que ainda pretendo discutir aqui com vocês e espero que tenham gostado!

Um abraço e até a próxima!