[JMBRASIL]

Olá,
Com a ajuda do forum,estou estudando "classe tween" as2.0.

Estou fazendo uma animação mais estou com dúvida.

Quero que a animação apareça,depois ela volta para o ponto inicial e apaceça novamente.
Que função faz a animação voltar ao ponto inicial e carregar novamente?

Veja:
Animação


A ação que usei:

import mx.transitions.Tween;
import mx.transitions.easing.*;

var TweenX:Tween = new Tween(barra, "_x",Regular.easeOut, 0,120, 2, true); // barra "flash"
mx.transitions.TransitionManager.start(barra, {type:mx.transitions.Zoom, direction:mx.transitions.Transition.IN, duration:3, easing:mx.transitions.easing.Bounce.easeOut});

var andaTween:Tween = new Tween(nome, "_alpha",Back.easeIn,0,200,2,true);
var andaTween:Tween = new Tween(nome2, "_alpha",Back.easeIn,0,500,3,true);


Sendo que são três Movie Clips.

[Rodrigo Pixel]

blz?

Você vai ter que usar eventos do objeto pra conseguir manipular seu código como quer.
Por exemplo um evento de quando a animação acabar(onMotionFinished), chama uma função criada por você, e nessa função você faz toda animação de voltar, que seria só inverter os valores usados na primeira animação e aplicar novamente nos objetos.

Coloquei seu código dentro de funções, fica mais fácil manipular e reusar depois. Não é uma regra, ok? É só preferência pra organizar e ficar mais fácil ler o código.

AS2

CÓDIGO

//importa classes
import mx.transitions.*;
import mx.transitions.easing.*;


//declara variaveis aqui
//antes de usa-la em todo codigo
var tweenX:Tween;
var tweenNome1:Tween;
var tweenNome2:Tween;

//inicia animacao de ida
vaiAnimacao();


/******************
* FUNCTIONS
******************/

//aqui voce faz valores pra ciniciar valores
function vaiAnimacao():Void
{
    trace("inicia animacao");

    TransitionManager.start(barra, {type:Zoom, direction:Transition.IN, duration:3, easing:Bounce.easeOut});
    tweenX = new Tween(barra, "_x", Regular.easeOut, 0, 120, 2, true); // barra "flash"
    tweenNome1 = new Tween(nome, "_alpha", Back.easeIn, 0, 200, 2, true);
    tweenNome2 = new Tween(nome2, "_alpha", Back.easeIn, 0, 500, 3, true);
    
    //aqui acontece um evento, quando acabar a ultima animacao, dispara funcao voltaAnimacao...
    tweenNome2.onMotionFinished = voltaAnimacao;
}


//aqui voce faz valores invertidos e muda ordem pra voltar animacao
function voltaAnimacao():Void
{
    trace("volta animacao");
    
    tweenNome2 = new Tween(nome2, "_alpha", Back.easeIn, nome2._alpha, 0, 3, true);
    tweenNome1 = new Tween(nome, "_alpha", Back.easeIn, nome._alpha, 0, 2, true);
    
    TransitionManager.start(barra, {type:Zoom, direction:Transition.OUT, duration:3, easing:Bounce.easeIn});
    tweenX = new Tween(barra, "_x" ,Regular.easeOut, barra._x, 0, 2, true); // barra "flash"
}

Estuda esses links sobre Tween:
http://blog.ericksouza.com/30/
http://www.mxstudio.com.br/flash/estudo_de...__classe_tween/

Te convido conhecer outras classes de animação além dessa que você quer usar.
Uns dos motivos: melhor desempenho na animação, mais opções de controle de objetos e efeitos, melhor suporte e documentação da classe pra estudos.
A lógica de uso é a mesma da classe Tween, muda apenas a maneira como aplica o código.

Algumas exemplos de classes de animação.
No próprio site dos autores tem toda documentação, exemplos etc.
Tweener by Zeh
http://code.google.com/p/tweener/
TweenMax/Lite by greensock
http://blog.greensock.com/

Dê uma procurada no google sobre essas classes(ou outras), você encontra artigos, tutorias e exemplos.
Existe também outras classes sobre animação, mas vai da preferência de uso e necessidade.

Abraço.

[JMBRASIL]

Olá Amigo,
Não quero tudo "mastigado",é que meu conhecimento em flash é limitado,tem coisas que não estou entendendo.

Consegui fazer o retangulo com o nome "Flash"(mc barra),voltar a animação,só que tem como ela ser Continua? Quero toda a animação continua,isso é possível?
Carrega a animação depois "alpha" e a animação aparece novamente de forma continua.


Veja a mudança que fiz:
O que está em vermelho eu mudei


//importa classes
import mx.transitions.*;
import mx.transitions.easing.*;


//declara variaveis aqui
//antes de usa-la em todo codigo
var tweenX:Tween;
var tweenNome1:Tween;
var tweenNome2:Tween;

//inicia animacao de ida
vaiAnimacao();


/******************
* FUNCTIONS
******************/

//aqui voce faz valores pra ciniciar valores
function vaiAnimacao():Void
{
trace("inicia animacao");

TransitionManager.start(barra, {type:Zoom, direction:Transition.IN, duration:3, easing:Bounce.easeOut});
tweenX = new Tween(barra, "_x", Regular.easeOut, 0, 120, 2, true); // barra "flash"
tweenNome1 = new Tween(nome, "_alpha", Back.easeIn, 0, 200, 2, true);
tweenNome2 = new Tween(nome2, "_alpha", Back.easeIn, 0, 500, 3, true);

//aqui acontece um evento, quando acabar a ultima animacao, dispara funcao voltaAnimacao...
tweenNome2.onMotionFinished = voltaAnimacao;
}


//aqui voce faz valores invertidos e muda ordem pra voltar animacao
function voltaAnimacao():Void
{
trace("volta animacao");

tweenNome2 = new Tween(nome2, "_alpha", Back.easeIn, nome2._alpha, 0, 3, true);
tweenNome1 = new Tween(nome, "_alpha", Back.easeIn, nome._alpha, 0, 2, true);

TransitionManager.start(barra, {type:Zoom, direction:Transition.IN, duration:3, easing:Bounce.easeOut});
tweenX = new Tween(barra, "_x" ,Regular.easeInOut, barra._x, 0, 200, true); // barra "flash"
}


Veja:
Resultado

[Rodrigo Pixel]

É só chamar a função vaiAnimacao() quando terminar voltaAnimacao() e vice e versa, ficando em um "loop".
Por isso criei uma função pra cada tarefa, uma pra "ida" e outra pra "volta" da animação, depois manipulo essas funções usando eventos do Tween.

Veja se assim vai:

CÓDIGO

//importa classes
import mx.transitions.*;
import mx.transitions.easing.*;


//declara variaveis aqui
//antes de usa-la em todo codigo
var tweenX:Tween;
var tweenNome1:Tween;
var tweenNome2:Tween;

//inicia animacao de ida
vaiAnimacao();


/******************
* FUNCTIONS
******************/

//aqui voce faz valores pra ciniciar valores
function vaiAnimacao():Void
{
    trace("inicia animacao");
    
    TransitionManager.start(barra, {type:Zoom, direction:Transition.IN, duration:3, easing:Bounce.easeOut});
    tweenX = new Tween(barra, "_x", Regular.easeOut, 0, 120, 3, true); // barra "flash"
    tweenNome1 = new Tween(nome, "_alpha", Back.easeIn, 0, 200, 2, true);
    tweenNome2 = new Tween(nome2, "_alpha", Back.easeIn, 0, 500, 3, true);
    
    //aqui acontece um evento, quando acabar a ultima animacao, dispara funcao voltaAnimacao...
    tweenNome2.onMotionFinished = voltaAnimacao;
}


//aqui voce faz valores invertidos e muda ordem pra voltar animacao
function voltaAnimacao():Void
{
    trace("volta animacao");
    
    tweenNome2 = new Tween(nome2, "_alpha", Back.easeIn, nome2._alpha, 0, 3, true);
    tweenNome1 = new Tween(nome, "_alpha", Back.easeIn, nome._alpha, 0, 2, true);
    
    TransitionManager.start(barra, {type:Zoom, direction:Transition.OUT, duration:3, easing:Bounce.easeIn});
    tweenX = new Tween(barra, "_x" ,Regular.easeInOut, 120, 0, 3, true); // barra "flash"
    
    //aqui acontece um evento, quando acabar a ultima animacao, dispara funcao voltaAnimacao...
    tweenX.onMotionFinished = vaiAnimacao;
}

Ainda sim, sugiro conhecer a classe TweenMax/Lite ao invés classe Tween do flash.
http://blog.greensock.com/timelinelite/

Abraço.

[JMBRASIL]

Amigo,
Muito obrigado,muito obrigado mesmo.
Funcionou.

Somente fiz uma pequena alteração para que,o nome Flash(mc barra),carregue dentro do contorno branco.

//importa classes
import mx.transitions.*;
import mx.transitions.easing.*;


//declara variaveis aqui
//antes de usa-la em todo codigo
var tweenX:Tween;
var tweenNome1:Tween;
var tweenNome2:Tween;

//inicia animacao de ida
vaiAnimacao();


/******************
* FUNCTIONS
******************/

//aqui voce faz valores pra ciniciar valores
function vaiAnimacao():Void
{
trace("inicia animacao");

TransitionManager.start(barra, {type:Zoom, direction:Transition.IN, duration:3, easing:Bounce.easeOut});
tweenX = new Tween(barra, "_x",Back.easeOut,0,130, 3, true); // barra "flash"
tweenNome1 = new Tween(nome, "_alpha", Back.easeIn, 0, 200, 2, true);
tweenNome2 = new Tween(nome2, "_alpha", Back.easeIn, 0, 500, 3, true);

//aqui acontece um evento, quando acabar a ultima animacao, dispara funcao voltaAnimacao...
tweenNome2.onMotionFinished = voltaAnimacao;
}


//aqui voce faz valores invertidos e muda ordem pra voltar animacao
function voltaAnimacao():Void
{
trace("volta animacao");

tweenNome2 = new Tween(nome2, "_alpha", Back.easeIn, nome2._alpha, 0, 3, true);
tweenNome1 = new Tween(nome, "_alpha", Back.easeIn, nome._alpha, 0, 2, true);

TransitionManager.start(barra, {type:Zoom, direction:Transition.OUT, duration:2, easing:Back.easeOut});
tweenX = new Tween(barra, "_x" ,Back.easeOut,140, 0, 3, true); // barra "flash"

//aqui acontece um evento, quando acabar a ultima animacao, dispara funcao voltaAnimacao...
tweenX.onMotionFinished = vaiAnimacao;
}


Veja:
Resultado Swf



Agora referente a classe tweenlite e tweenmax,essas classes são uma especie de plugins ?


Entrei no site que voce indicou baixei o arquivo As2.0.

O que tenho que fazer para instalar essas classes?

Existe uma pasta nomeada "com" ,me disseram que era colocar esta pasta no diretorio do flash,mas nada aconteceu.

É o meu primeiro contato com esta classe,me ajuda.

[Rodrigo Pixel]

Agora referente a classe tweenlite e tweenmax,essas classes são uma especie de plugins ?

Entrei no site que voce indicou baixei o arquivo As2.0.

O que tenho que fazer para instalar essas classes?

Existe uma pasta nomeada "com" ,me disseram que era colocar esta pasta no diretório do flash,mas nada aconteceu.

É o meu primeiro contato com esta classe,me ajuda.

Não são bem "plugins", são apenas classes AS que aumentam a capacidade do Flash de fazer algo. Nesse casso conhecido também como Third-lilbraries class, são classes criadas e mantidas por terceiros e não necessariamente criada ou mantida pelo software (Flash) em si.

Por exemplo, a classe Tween que você usou no exemplo, já está disponível no Flash, instalada em uma pasta do programa e disponível pra uso. Por isso, não precisa baixar essa classe Tween pra usá-la.
Já a classe TweenMax/Lite (ou qualquer outra que você baixar), pertencem a um ou mais autores, nesse caso pra usa-la, você precisa baixar os arquivo das classes e instalar/inserir no mesmo local do seu projeto, ou configurar pra ter acesso "global"(ex: coloca os arquivos das classes em um lugar/pasta fixa pra ter acesso depois).

Tem diversos tipos de classes, vai achar tanto pra animação(essa que informei TweenMax), pra 3D engines, Physics engines, Utilidades, etc. Mas todas ainda sim são classes, e você também pode criar suas próprias classes.

Geralmente no site do autor tem toda documentação, de como usar, exemplos, pra que serve, etc. Uma boa idéia é baixar e ver os exemplos pra entender as estrutura de arquivos e código.

Resumindo, esses são um dos passos pra baixar classes e usar no seu projeto:
1- Baixe a classe pelo site do autor;
2- Coloque todos arquivos(com pastas caso tiver) da classe na mesma pasta do seu arquivo .Fla, pro flash conseguir ter acesso a essas classes quando você usar o import no código. no caso da TweenMax deve importar a pasta com.
3- Consulte documentação pra entender como utilizar a classe bem como seus métodos, propriedade e eventos da classe;

Isso vale tanto pra AS2 quanto pra AS3.

Estude a documentação da classe TweenMax/Lite no site do autor:
http://blog.greensock.com/

Se você entendeu a lógica de uma classe Tween, facilmente você conseguirá migrar pra outras classes do mesmo gênero.




Mas vamos lá, um exemplo genérico de acessar e usar classes.

Tecnicamente você já sabe usar classe no código, mas vamos a parte "teórica" que pode confundir um pouco no começo, mas é importante conhecer pelo menos o básico dessa estruturas pra não se perder.
Repare como exemplo na classe Tween que você usou no AS2.

No começo do código você usa o termos:

CÓDIGO

//importa classes
import mx.transitions.*;
import mx.transitions.easing.*;

O que isso quer dizer exatamente?

Basicamente quer dizer é, fala pro flash saber quais classes que você quer usar durante o código, nesse caso, códigos que estão no seu frame.
Cada frame que usar uma classe como a Tween por exemplo, você terá que importar as novamente as classes pela declaração
import pastaRaizdaClasse.segundaPastaDaClasse.NomeDaClasse;

Considere o import como sendo um "atalho" de acesso até essas classe por código.

O que você acha menos "trabalhoso" ou digamos confuso e difícil leitura de código, escrever assim:

CÓDIGO

var tweenX:mx.transitions.Tween = new mx.transitions.Tween(barra, "_x", mx.transitions.easing.Back.easeOut,0,130, 3, true);

Ou assim:

CÓDIGO

//importa classes
import mx.transitions.*;
import mx.transitions.easing.*;

var tweenX:Tween = new Tween(barra, "_x", Back.easeOut, 0, 130, 3, true);

Eu acho mais fácil a 2º opção pra leitura.

O resultado é o mesmo, a diferença que no 1º exemplo, você tem que passar todo caminho de pastas pro flash acessar a classe Tween, sendo que no 2º exemplo se importar no começo a estrutura de pastas e classes que quer usar, bastaria chamar o nome da Classe usada quando for declarar instância.

Quando diz criar instância, é criar um objeto que vai representar a classe usada, usando o operador new na declaração do código e armazenar esse objeto em uma variável do mesmo tipo da classe usada. Então quando chama o nome da variável, automaticamente ela representa a classe com propriedades, métodos e eventos, etc.

Repare que não precisa colocar a extensão do arquivo da classe: .as (de ActionScript). Usa apenas o Nome da classe em si, o flash já deduz que se trata de uma classe de extensão .as.

Também quando tem o asterisco (*) no final depois do ponto (.), significa que ele está importando (deixando disponível acesso ao código) todas as classes que existem naquela pasta depois do ponto (.).

Só importar a classe não faz nada, isso é um dos passo pra classe funcionar no código. Depois você deverá usar a classe pra fazer o que precisa.


Mas onde esses arquivo de classes estão exatamente?
Como a classe que você baixou o arquivo com classes, está numa estrutura de pastas, essa estrutura é importante pro funcionamento da classe criada pelo autor.
Se mudar essa estrutura definida, provavelmente a classe não funciona como deveria. Seria mesma coisa como mudar o endereço da sua casa, sendo que o carteiro já está no meio do caminho chegando com correspondência no endereço antigo, vira uma bagunça, e vai dar um belo erro de entrega do arquivo.

No código Actionscript essas pastas tem acesso por pontos (.) ao invés de usar barras (/) como usamos pra procurar arquivo no Explorer.

Por exemplo no caso da classe TweenMax(http://blog.greensock.com/), a estrutura das classes estão todas dentro da pasta com, e dentro dessa pasta "com" tem mais outra pasta greensock, e dentro dessa tem outras classes e outras pastas com outras classes...

Se quisse ter acesso a classe TweenMax por exemplo, seria:

CÓDIGO

import com.greensock.TweenMax

Agora o flash, sabe que é esse endereço com/greensock/TweenMax.as que ele vai tentar acessar quando você usar essa classe no código.

Obs: Pra usar a classe em si, use a documentação no site do autor. Tem tudo lá.


Resumindo, por isso, pra importar a classe que esta na estrutura de pastas, sempre usa o import no começo do código, e sempre tem que ter esse arquivo pra o flash conseguir achar quando compilar(converter em SWF) o arquivo.

A diferença da classe Tween do Flash, é que ela já está configurada pra ter acesso "global" em uma pasta na sua maquina, algo como:
mx/transitions/Tween.as

E no actionscript o acesso desse arquivos é por pontos(.) no lugar de barras(/) :
mx.transitions.Tween



Nomes de pastas e arquivos

Repare também que tem uma convenção nos nomes, são case-sensitive (sensitivo a letras minusculas e maiusculas).
Nome de pastas são todas letras minúsculas, nome de Classe primeira letra de cada palavra é maiúsculas.
Ex:
pasta.NomeDaClasse

é diferente de:
PASTA.NomeDaClasse

e é diferente de:
PASTA.NOMEDECLASSE

E assim por diante. Então mantenha o mesmo nome definido pelo autor da classe.

Nada impede de você escolher umas das opções de como declarar o uso de classes no código. Você só tem que manter uma estrutura que a classe funcione e também criar um padrão quando escrever código, pra facilitar sua própria vida e de quem for trabalhar com você.


Acesso global de classes
Tem uma maneira de deixar essas classes que você baixou pra ter acesso "global", instalado em uma pasta fixa, pra não precisar copiar toda hora a pasta com arquivo pra poder usar no seu projeto. Mas por agora, sugiro acostumar primeiro com essa estrutura de classes, depois você começa usar outros métodos de acesso.



Não sei se consegui ser claro ou confundir ainda mais.
Se quiserem acrescentar/corrigir, postem aí.

Abraço.

[ubi_rj]

Rodrigo, um texto desse tamanho precisa de introdução, agradecimento, capa, contra capa e bibliografia !

hahahaha

Ta muito bom.

Abraço !

[JMBRASIL]

Muito obrigado!