banner em flash com botoes VOLTAR E AVANÇAR

[ROLLL!!!!]

Estou tendo um problema com um banner que me parecia simples de fazer...

Imaginem um banner onde terei logotipos rodando nele, passa um, depois outro e assim adiante. Porém o usuário terá as opções em dois botoes de passar pra frente ou voltar para ver e rever esses logotipos...

para avançar, não tenho muito problema, a dificuldade é fazer com que ao clicar no botão "voltar" a animação volte, fazendo uma reversão dos frames, segue um exemplo:

http://www.bridalubrificantes.com.br/

é o banner inferior do lado direito do site.

Valewww, aguardo!!

Abraçoos!

Editado Abril 17, 2009 por ROLLL!!!!

[Pooh]

ROLL

logo estarei postando um fla com a solução, usarei o mc_tween2.as classe com um belo acervo de scripts de movimento.

porém o script é ajustável, deixarei variáveis para determinar o numero total de Imagens(logos).

Os pontos também serão configuráveis.(ponto de entrada, ponto de Amostra e ponto de saida);

Tenho alguns compromisso agora 18:00 por isso estarei de volta a noite para lhe postar a solução.

[Pooh]

Bom aqui está, vou fazer uma breve explicação e no final tens o código fonte. ^_^

O problema era fazer um sistema o qual simulasse uma "paginação" porém de forma que você não estivesse limitado ao numero de páginas.

E também não se limitar a ter de fazer a animação.

Não é muito viável depender de prevFrame e nextFrame poderia fazer uma relação assim: Defina um numero máximo de frames entre um logo e outro, e nesses frames faça a animação.

Imagine que esse número seja 24.

Agora se quer que seu movieClip volte apenas diga para ele:

for(i=0;i<24;i++)
{
_root.mc.prevFrame();
}

Com isso ele executa 24 vezes a volta do frame o que faria sua animação "voltar". Porém nem sempre isso seria a melhor escolha pois ficaria parecendo um "espelho" já que a a animação seria feita de trás para frente. Por isso fiz uso da classe de movimento mc_tween2 para eliminar a necessidade de se fazer a animação. vamos lá:

stop();
#include "mc_tween2.as"

paramos a linha de tempo e incluimos o mc_tween.as, essa declarão so é válida para flash 9, as2 e anteriores.

import flash.geom.Point;

Importo a biblioteca que me permite usar pontos, já que não gosto de definir 2 coordenadas em variáveis diferentes.

var numImgs:Number = 4; //número de imagens
var i:Number = 0; // variável de contagem
var currentImg:Number = 0; //imagem atual

var Status:Boolean = false; //status de clicke

var btVoltar:Button = _root.btVoltar; // botão voltar
var btAvancar:Button = _root.btAvancar; //botão avançar

var centroY:Number=Stage.height/2; //defini uma variável contendo a posição dentral do Stage para cada eixo;
var centroX:Number=Stage.width/2;

var pontoInicio:Point = new Point(-100,centroY); //ponto de ínicio    
var pontoFinal:Point = new Point(Stage.width+100,centroY); //ponto final
var pontoMeio:Point = new Point(centroX,centroY); // ponto de amostra

Cá estão algumas definições todas comentadas, porém as unicas que devem ser melhor explicadas são os pontos. como mostra a imagem, com relação a "Avançar" a imagem parte do pontoInicio e para no PontoMeio que é aonde ela fica exposta. Ao clikar novamente em avançar, a imagem atual vai para o ponto Final e a proxima imagem vai do pontoInicio até o PontoMeio. Quando se tratar de "Voltar" o oposto será feito, elas partirão do pontoFinal até o pontoMeio e a imagem atual vai partir do pontoMeio até o pontoInicio. Simples assim. Código do botão Avançar

btAvancar.onPress = function(){
    if(Status==false){
        Status=true;
        
        
    if(currentImg==0)
    {
        attachMovie("Img"+1,"img"+1,_root.getNextHighestDepth());
        _root["img"+1]._x=pontoInicio.x;
        _root["img"+1]._y=pontoInicio.y;
        _root["img"+1].tween("_x",pontoMeio.x,1,"easeOutElastic");
        Status=false;
        currentImg++;
    }else{
        _root["img"+(currentImg)].tween("_x",pontoFinal.x,1,"easeOutElastic");
        setTimeout(deletaMC,500,_root["img"+(currentImg)]);
    if(currentImg==numImgs)
    {
        currentImg=0;
    }
    attachMovie("Img"+(currentImg+1),"img"+(currentImg+1),_root.getNextHighestDepth());
        _root["img"+(currentImg+1)]._x=pontoInicio.x;
        _root["img"+(currentImg+1)]._y=pontoInicio.y;
        _root["img"+(currentImg+1)].tween("_x",pontoMeio.x,1,"easeOutElastic");
        currentImg++;
    }
    
    }
    
}

É colocada uma verificação em "Status" que seria se o botão está disponível afim de evitar bugs de excesso de clicks. verifica se é a primeira vez que está clikando ou seja imagem atual = 0; tem uma interpretação diferente pra cada botão no caso de avançar a proxima imagem é a primeira, no caso de voltar seria a ultima. Como não sei quantas imagens você as coloque em um MovieClip em que o nome comece com Img e depois venha o numero, como exemplo usei movieclips: "Img1","Img2","Img3","Img4" e exporte todos para action script e no primeiro frame. A ação tween veio da classe mc_tween, ela move o movieClip da posição atual até a desejada. Existem inumera funções todas listadas aki: MC Tween | Documentação A nossa tem as seguintes propriedades:

<MovieClip|Sound|TextField>.tween(property(ies), ending value(s) [, seconds, animation type, delay, callback, extra1, extra2]);

porém não precisamos usar todas elas usarei apenas "Property" , "ending value", "Seconds" e "Animation type";

_root["img"+numImgs].tween("_x",pontoMeio.x,1,"easeOutElastic");

Temos ai a nossa propriedade sendo o a posição X do movieclip, vamos movelo até o pontoMeio em "1" segundo, o movimento será traçado pela equação de movimento chamada "easeOutElastic"; Todos os movimentos podem ser enconstrados aqui:MC Tween | Tipos de animação Façamos ainda uma verificação para saber quando chegamos à última imagem

if(currentImg==numImgs)

que nesse caso voltamos à primeira imagem. Código do botão Voltar

btVoltar.onPress = function () {
        if(Status==false){
        Status=true;
        
        
        if(currentImg==0)
    {
        attachMovie("Img"+numImgs,"img"+numImgs,_root.getNextHighestDepth());
        _root["img"+numImgs]._x=pontoFinal.x;
        _root["img"+numImgs]._y=pontoFinal.y;
        _root["img"+numImgs].tween("_x",pontoMeio.x,1,"easeOutElastic");
        Status=false;
        currentImg=numImgs;
    }else{
    //MOVIE CLIP ATUAL VAI PARA O PONTO FINAL
        _root["img"+(currentImg)].tween("_x",pontoInicio.x,1,"easeOutElastic");
        setTimeout(deletaMC,500,_root["img"+(currentImg)]);
    //NOVO MOVIE CLIP VAI PARA O PONTO MEIO
    if(currentImg==1)
    {
        currentImg=numImgs+1;
    }
    attachMovie("Img"+(currentImg-1),"img"+(currentImg-1),_root.getNextHighestDepth());
        _root["img"+(currentImg-1)]._x=pontoFinal.x;
        _root["img"+(currentImg-1)]._y=pontoFinal.y;
        _root["img"+(currentImg-1)].tween("_x",pontoMeio.x,1,"easeOutElastic");
        currentImg--;
    }
    
        }
}

Basicamente igual ao botão avançar com a diferença na verificação de ao invés verificar se chegou à última imagem, ele verifica se chegou à primeira. Função que deleta os MovieClips para não sobrecarregar o filme em caso de muitas imagens fiz questão de colocar uma função que após o clipe de filme chegar a posição "final" ele seja apagado.

function deletaMC (mc:MovieClip)
{
    mc.removeMovieClip();
    Status=false;
}

Bom acho que é isso.

para otimizar, basta mudar a animation Type para alguma que goste mais, e os pontos, assim pode fazer com que a imagem venha da diagonal ou qualquer outra posição;

Não me preocupei em transformar a ação do botão em uma função estruturada, portanto o código ficou meio extenso.

Qualquer bug é só relatar

Arquivo fonte: Paginação.fla

Obs* É necessário ter o plugin mc_tween2.as instalado, caso não tenha, pegue aqui: Mc_Tween Version 2.28.29

Desconsidere alguns massacres linguísticos :lol:

Abraços

Pooh

Editado Abril 19, 2009 por Pooh

[ROLLL!!!!]

Pow, cara, valeu pela atenção mesmo, viu!!!!! :)

Vou fazer desse jeito que você me passou, axei muito legal sua atitude de postar tudo isso ai, vai me ajudar muito e tenho certeza que vai ajudar muita gente também!!

Abração, cara :)

Pode ter certeza que vou seguir tudo que me passou!

Obrigado pela força!!!

[Pooh]

Boa Sorte ! ^_^