Conhecendo a TweenLite (Greensock Tweening Plataform)

Classes, Ferramentas, Flash AS3, Geral Adicione um comentário

Este post sobre a TweenLite foi criado incialmente por mim para uma comunidade de developers no Orkut, a FlashPedia, e estou replicando ele aqui no blog porque notei que muita gente tem procurado por ela no google e chegado até meu blog.

Onde conseguir a TweenLite?
http://blog.greensock.com/tweenliteas3
Versão: 10
Free


Observações inciais:

Em sua versão 10 a engine mudou de nome e ganhou novas funcionalidades, que fazem desta família de Classes uma excelente ferramenta de trabalho.

Além da TweenLite fazem parte da Greensock Tweening Plataform:

  • TweenMax
  • TweenGroup

A família toda ganhou uma nova arquitetura baseada em plugins, o que permite extender a potencialidade da TweenLite para alguns efeitos que a TweenMax oferece.

Introdução

A família Tween da greensock.com nasceu quando Jack Doyle, desenvolvedor e evangelista do actionscript criou inicialmente a classe TweenLite, para acelerar seu processo de desenvolvimento para um cliente, visando uma melhora na performance em relação a classe nativa do Flash, a Tween Adobe.
Utilizando de uma estrutura totalmente nova e bem formulada e completamente baseada em objeto ele criou uma Classe que pode ser utilizada para interpolar (alterar valores de um ponto inicial a um ponto final) qualquer propriedade, de qualquer objeto, incluindo sons e papervisions, dentre outros.

Jack Doyle ainda inclui na sua classe os mundialmente conhecidos ‘easings’ (calculos de interpolação) feitos por Robert “the easing hero” Pener, um gênio que hoje faz parte da equipe da Adobe.
Jack Doyle, como todo bom desenvolvedor, distribui essa classe gratuitamente, permitindo o uso comercial das suas classes, desde que o usuário não pague para ver ou utilizar o produto final, ou seja, se você não cobrar pra alguém jogar seu jogo, pode usar.
Não satisfeito e como segundo o próprio Jack diz “eu sonho actionscript”, ele criou uma família de Classes que é um verdadeiro canivete Suíço, podendo ser aplicadas para tudo.

Hoje outros desenvolvedores, como por exmeplo Steven Sacks, que utiliza no seu não menos notável “Gaia FrameWork”, para controlar transições de Filmes.

Comentário pessoal e profissional:

Estudar, entender e acompanhar o desenvolvimento dessa família de Classes é um plus excelente para o profissional em Flash, tanto em AS2 quanto AS3, pois essa família de classes aumenta demasiadamente o workflow além de diminuir em muito o trabalho do processador do usuário.

Documentar a Família inteira em português vai exigir alguns dias, quem sabe semanas de trabalho, mas como eu não me enxergo mais trabalhando sem essa classe, acho muito importante evangelizar seu uso.

Confira no flash abaixo (reduzido para caber) vários exemplos de como a classe funciona. Basta selecionar entre as diferentes opções e clicar em Tween para ver o resultado.

Você precisa fazer o download do Flash Player para visualizar este conteúdo.

A Classe TweenLite

Método estático to
TweenLite.to(target:Object, duration:Number, variables:Object):TweenLite
Onde:
- target:Object é o alvo da interpolação, um movieclip, um botão, um objeto sound, um objeto papervision3d.
- duration:Number é o tempo em segundos que dura a interpolação.
- variables:Object é um conjunto de variáveis contiadas em um objeto, incluindo as propriedades de cada objeto e variáveis da classe, com valores finais e funções a serem executadas.

Exemplo:
Vamos executar uma tween de um objeto chamado “bola” em 1 segundo, movendo-o de sua posição atual para o centro do palco, alterando seu alpha para 50% e sua escala total para 80%, ao final da tween, vamos executar um trace com a palavra “Fim”.

TweenLite.to(bola, 1, {x:stage.stageWidth/2,y:stage.stageHeight/2, alpha:.5, scaleX:.8, scaleY:.8, onComplete:traceIt});
function traceIt():void
{
trace(“Fim”);
}

Método estático from

TweenLite.from(target:Object, duration:Number, variables:Object):TweenLite
Onde:
- target:Object é o alvo da interpolação, um movieclip, um botão, um objeto sound, um objeto papervision3d.
- duration:Number é o tempo em segundos que dura a interpolação.
- variables:Object é um conjunto de variáveis contiadas em um objeto, incluindo as propriedades de cada objeto e variáveis da classe, com valores finais e funções a serem executadas.Funciona do mesmo modo com o método TweenLite.to, porém, fazendo o inverso do método anterior, como?
O método from executa uma interpolação inversa pois ela incia-se nos valores indicados e caminhando em direção ao valor em que o objeto se encontra no palco ao ser inciado.

Exemplo:
Vamos fazer com que a bola, que está – supomos – no canto superior esquerdo, ao inicar o filme, caminhar do centro para este local, mudar seu alpha de 50%

para 100% e sua escala de 80% para 100%, ou seja, ela vai iniciar transformada e terminar como está no palco, desta forma:

TweenLite.from(bola, 1, {x:stage.stageWidth/2,y:stage.stageHeight/2, alpha:.5, scaleX:.8, scaleY:.8, onComplete:traceIt});

Então, ao executar o filme esses valores inseridos como parâmetros serão tomados como inciais, ou seja, vamos fazer o processo inverso do método to.


Parâmetros dos métodos (Versão 9):

  • delay:Number: Número em segundos de espera para inciar uma tween.
  • ease:Function: Você pode especificar uma função de easing, por exemplo ease:Strong.easeOut.
  • easeParams:Array: Um array de parâmetros para você modificar e custmizar sua função de easing.
  • autoAlpha:Number: Funciona como a propriedade “alpha”, mas com esse parâmetro a propriedade “visible” de um objeto também é alterada para “false” quando o objeto se torna 100% transparente, e alterada para “true” quando seu alpha é maior que 0.
  • visible:Boolean: Altera a propriedade “visible” do objeto no fim da interpolação.
  • volume:Number: Modifica o volume de um objeto(MovieClip, SoundChannel, NetStream) utilizando a propriedade soundTransform.
  • tint:uint: Para mudar a cor de um objeto, utilizando valores não inteiros como ex: 0xffffff (para colorir com branco)
  • removeTint:Boolean: Remove a propriedade tint aplicada a um objeto.
  • frame:int: Use para animar um MovieClip para um determinado frame.
  • onStart:Function: Para chamar uma função no início da interpolação.
  • onStartParams:Array Um array contendo parâmetros a serem enviados para a função chamada no evento onStart, ex: onStartParams:["lorem", 1, 0xffcc00].
  • onUpdate:Function: Para chamar uma função sempre e enquanto uma propriedade do objeto for alterada.
  • onUpdateParams:Array: Um array com parâmetros para a função durante a interpolação.
  • onComplete:Function: Para chamar uma função no final da interpolação.
  • onCompleteParams:Array: Um array com parâmetros para essa função no fim da interpolação.
  • persist:Boolean: Quando ativada, essa opção NÃO permite que a tween seja enviada para a “garbage collection”, permitindo que ela possa ser alterada ou atualizada. Por padrão essa opção é false.
  • renderOnStart:Boolean: Utilizado quando você ativa o parâmetro “runBackwards” ou quando utilizando o método from com delayCall. Irei explicar quando explicar esses métodos (delayedcall).
  • runBackwards:Boolean: Troca os valores final e inicial da tween, o método from faz isto automaticamente.
  • overwrite:int: Controla como duas tweens sobre um mesmo objeto simultaneamente se comportam.
    overwrite: 0 (nenhum) – As tweens não se sobrescrevem, mas deve-se tomar cuidado ao aplicar duas tweens diferentes sobre a mesma propriedade de um mesmo objeto.
    overwrite: 1 (todos) – Valor padrão quando NÃO utilizada a classe OverwriteManager e invocado o método OverwriteManager.init(), dessa forma, uma segunda tween sobrescreve completamente uma primeira, sobrescrevendo todas as suas propriedades.
    overwrite: 2 (auto) – Valor padrão quando iniciado o método init() do OverwriteManager, faz com que apenas as propriedades chamadas em ambas as tweens sejam sobrescritas pela nova tween.
    overwrite: 3 (concorrente) – Sobrescreve todas as propriedades do mesmo objeto quando inciada a nova tween.


Método estático delayedCall
TweenLite.delayedCall(delay:Number, onComplete:Function, onCompleteParams:Array)
Serve para definir um intervalo de tempo para executar uma função, uma espécie de time.
Onde:
delay: Tempo em segundos
onComplete: É a função que você vai chamar ao fim do tempo
onCompleteParams: Um array com parâmetros para esta função

Método estático killTweensOf
TweenLite.killTweensOf(target:Object, complete:Boolean)

Serve para forçar o término de todas as tweens de um objeto, você pode inclusive forçar o objeto a terminar a tween (imadiatamente) chamando a função – caso exista – definida no parâmetro onComplete
Onde:
target: O Objeto que as tweens serão finalizadas
complete: Se “true”, finaliza as tweens levando o objeto aos valores finais imediatamente e sem interpolação

Método estático killDelayedCallTo
TweenLite.killDelayedCallsTo(function:Function)

Serve para matar o evento criando pelo método TweenLite.delayedCAll()
Onde:
function: É a função que terá as chamadas finalizadas

Método removeTween
TweenLite.removeTween(tween:TweenLite)

Serve para remover uma instância previamente criada
Onde:
tween: É o nome da instância TweenLite criada que você quer excluir

Método Instanciado

TweenLite(target:Object, duration:Number, vars:Object);
Onde:
target: Objeto a utilizar a tween
duration: tempo em segundos
vars: Um objeto contendo as Variáveis utilizadas para controlar a interpolação e também parâmetros para a tween (ex:x, y, scaleX, alpha, onComplete)

Ex:
var myTween:TweenLite = new TweenLite(obj, 1, {x:100, onComplete:function() {trace(“Ah!”)}});

Exemplo do uso da Arquitetura de Plugins na TweenLite

No exemplo abaixo além de propriedades normais como alpha e scaleX e scaleY eu, usando a arquitetura de plugins consigo alterar também o glow do movieclip, adicionando brilho.  Confira:

Você precisa fazer o download do Flash Player para visualizar este conteúdo.

Para adicionar o plugin Glow, utilizei a seguinte sintaxe:

import gs.TweenLite;
import gs.plugins.GlowFilterPlugin;
import gs.TweenPlugin;
TweenPlugin.activate([GlowFilterPlugin]);

E para alterar adicionar o glow no objeto, utilizei:

TweenLite.to(obj, 1, {glowFilter:{color:0xffffff, alpha:1, blurX:30, blurY:30}});

Mas o que se ganha com a nova arquitetura de plugins?
Supomos que você precise fazer uma animação e aplicar um filtro de Blur (desfoque) em um objeto, a TweenLite não faz isso, a TweenMax faz porém seu tamanho é 11k enquanto a TweenLite é 2,8k e isso pode realmente fazer diferença dependendo do trabalho, alguns banners por exemplo com tamanho limitado não podem dar-se ao luxo de utilizar a TweenMax apenas por um efeito. Com a arquitetura de plugins é possível ativar na base da TweenLite plugins que a TweenMax utiliza, otimizando o desempenho sem desperdiçar Kb.

Em breve mais exemplos

Para quem quiser fazer o download do arquivo fonte utilizado no exemplo, clique no link abaixo:
Download dos Fontes (Flash CS3 ou CS4 apenas)

12 Comentários para “Conhecendo a TweenLite (Greensock Tweening Plataform)”

  1. Isis Disse:

    Poxa, não acredito que ainda não tem comentário nesse post!

    =/

    Você pode explicar como aplicar os efeitos do TwinLite? Ou basta copiar e colar os códigos em uma layer de actions?

    Obrigada, se puder, me avise quando responder: isis_mfs@hotmail.com

    Valeu pelo post, excelente!!!

  2. Eder Lima Disse:

    Isis.
    O post fala até certo ponto de forma profunda sobre a Tweenlite e além dos exemplos feitos por mim, ele tem o programa feito pelo criador para entender como funciona a Classe e um código fonte que eu utilizei no final para download.
    Agora é utilizar o texto junto com os exemplos para estudar e entender o funcionamento. :)

  3. Lanna Disse:

    Totalmente excelente!!! Adorei!

  4. Vilmondes Disse:

    Muito boa a iniciativa.

    Abraço!

  5. Gabriel Ishida Disse:

    bão, muito bão. Vou tentar usar no meu zites…
    Parabéns pelo trabalho muito bem feito e altruista.
    Abraços!

  6. Eder Lima Disse:

    Obrigado Gabriel!
    Estive olhando seu portfolio, você tem excelentes trabalhos!
    Grande abraço! []‘s

  7. JR Peixoto Disse:

    Muito obrigado por me apresentar à TweenLite.

    Grande abraço,
    JR.

  8. marcos Disse:

    Muito bom,gostei.
    Quero aprender.
    Já coloquei a pasta no diretorio do flash.
    Voce pode dar uma explicação básica , como aplicar o codigo do tweeLite do exemplo citado.

    Tem que criar um movie clip e um botão?

  9. FXC Maicon Disse:

    Eder Lima, meus parabéns, seu blog para mim tem sido uma parada obrigatória e tem me auxiliado a entender esta ótima classe. Está de parabéns pela iniciativa.

    Abraço!

  10. Therus Disse:

    Aeeee, primeiro comment de 2010, muito bom seu blog Eder, estou migrando para o TweenLite e o max, estou me surpreendendo com eles, antes eu usava outras classes que eram bem mais complicadas e realmente chatas, pena que a classe do motionBlur do TweenLite….só pagando caro pra ter, mesmo assim é um trabalho incrível. Sucessos.

  11. alex Disse:

    muito bom, parabens pelo post

  12. Sidnei Disse:

    Muito bom esse post, geralmente não encontramos esse tipo de post em portugues, muito obrigado

Deixe um comentário

Spam protection by WP Captcha-Free

RSS Comentários RSS Log in