Classe Tween no Flash, por Marcelo Duende

Avaliação:

| Publicado em: 11/02/2007

Classe Tween no Flash

Marcelo Duende Designer e Flash Developer, atualmente residindo em Curitiba-PR. http://marceloduende.com.br

Classe Tween no Flash

Trabalhando com tween dentro do flash

Bom dia pessoal, hoje vamos aprender um pouco mais sobre a classe tween, que é muito útil para nossos projetos.
Vou trabalhar com funcoes.as, que deixa o arquivo mais organizado e limpo.

Bom vamos lá.

Crie um arquivo chamado funcoes.as

Dentro dele insira o seguinte.

/*

   Autor: Marcelo Duende
   Classe Tween
   12/2/2007

   Portfolio 2007
   http://marceloduende.com.br

   Sobre a Classe Tween

   Back
   Strong
   Bounce
   None
   Elastic
   Regular

   easeInOut
   easeNone
   easeIn
   easeOut

   Exemplos

   easingY(mc, "Strong.easeOut", this._y, this._y+10, 20);

*/
Stage.scaleMode = "noScale";
Stage.showMenu = false;

// Importando a classe para o Flash
import mx.transitions.easing.*;
import mx.transitions.Tween;
// SclateTo
function ScaleTo(mc:MovieClip, easeType:Function, comeco:Number, final:Number, frames:Number):Void {
   var mc_tweenY:Tween = new Tween(mc, "_yscale", easeType, comeco, final, frames);
   var mc_tweenX:Tween = new Tween(mc, "_xscale", easeType, comeco, final, frames);
}
/*

Exemplo
ScaleTo(meu_mc, tipo, tamanho_inicial, tamanho_final, frames);

*/

// RotateTo
function RotateTo(mc:MovieClip, easeType:Function, comeco:Number, final:Number, frames:Number):Void {
   var mc_tweenY:Tween = new Tween(mc, "_rotation", easeType, comeco, final, frames);
}
/*

Exemplo
RotateTo(meu_mc, tipo, grau_inicial, grau_final, frames);

*/

// Função para movimento o Objeto no eixo _y
function easingY(mc:MovieClip, easeType:Function, comeco:Number, final:Number, frames:Number):Void {
   var mc_tween:Tween = new Tween(mc, "_y", easeType, comeco, final, frames);
}
/*

Exemplo
easingY(meu_mc, tipo, posição_inicial, posição_final, frames);

*/
// Função para movimento o Objeto no eixo _x
function easingX(mc:MovieClip, easeType:Function, comeco:Number, final:Number, frames:Number):Void {
   var mc_tween:Tween = new Tween(mc, "_x", easeType, comeco, final, frames);
}
/*

Exemplo
easingX(meu_mc, tipo, posição_inicial, posição_final, frames);

*/

Pronto, nossas ações já estão prontas para funcionar

Agora crie um arquivo flash com 576 x 500px

Salve-o como index.fla

Aqui crie duas camadas, as e elementos.

Obs.: Deixe a camada AS sempre bloqueada, use apenas para inserção de còdigo.

Na camada elementos, crie três MovieClips, e instancie-os de: "primeiro_mc", "segundo_mc" e "terceiro_mc" sem as aspas.

Agora vá até sua camada AS e aperte F9 para abrir o editor AS. Dentro dele insira o seguinte:

/*

   Autor: Marcelo Duende
   Classe Tween
   12/2/2007

   Portfolio 2007
   http://marceloduende.com.br


*/

#include "funcoes.as"
//Vamos chamar nossas funções

easingY(primeiro_mc, Strong.easeOut, 0, 200, 20);
//Determinei o eixo Y da nossa bola, dando um valor de início 0 e final de 200 px, com uma duração de 20 frames
easingX(segundo_mc, Strong.easeOut, 0, 200, 20);
//Determinei o eixo X da nossa bola, dando um valor de início 0 e final de 200 px, com uma duração de 20 frames
easingX(terceiro_mc, Strong.easeOut, 0, 450, 40);
easingY(terceiro_mc, Strong.easeOut, 0, 450, 40);
//Na terceira bola atribuí dois valores, X e Y, o que faz a bola andar na diagonal

Isso vai dar vida a sua animação.

Animações feitas por AS otimizam em 30% o tamanho do arquivo, não precisando gerar tweens em sua timeline.
Existem mais tipos de transição, no arquivo funcoes.as comentei as outras formas de uso.

Espero ter ajudado, na próxima semana, estarei colaborando com a classe FilterBlur. Até lá pessoal

Marcelo Duende
Flash Developer
http://marceloduende.com.br

Tiago Oliveira <etsete@gmail.com>

Muito bom, animação sem usar time line, "timelineless"...

Marcelo Duende <marcelo@marceloduende.com.br>

Hehe, também chamo de timelineless essa forma de animação, puro marketing, ;)

Rodolfo <rodolfo@codstudio.com>

parabéns.

muito bom

Ricardo Alvarenga <agentericardo@gmail.com>

excelente mesmo, muito bom, vou passar a estudar isso agora