Botoes Next e Prev (Proximo e Anterir)

[fajota 0]

E ai amigo tudo bem?

 

Eu fiz uma galeria em XML no AS3 que ao clicar em um botao, aparece os itens referente a categoria do botao.

 

Agora o que eu gostaria da ajuda de voces é para fazer eu movimentar esses itens em um botao Next e Prev. Pois quando aparecem os itens do botao, ao clicar no botao Next, o os itens vao sumindo da tela, ao clicar em Prev, eles vao voltando. Se alguem puder ajudar.

 

O link para voces verem esse problema é esse: link do exemplo com erro

 

O arquivo pode ser baixado aqui

 

O codigo todo do flash segue abaixo onde em está em vermelho são as linhas referentes ao movimento de proximo e anterior:

 

import flash.display.MovieClip;

import flash.display.Loader;

import flash.net.URLLoader;

import flash.net.URLRequest;

import flash.net.navigateToURL;

import flash.events.Event;

import flash.events.MouseEvent;

import flash.xml.XMLDocument;

import caurina.transitions.Tweener;

 

//Valor de distancia entre os itens

var posY:uint = 5;

 

//Variável para saber qual a lista de produtos atual

var currentList:int;

 

//carregamento do XML

var urlLoader:URLLoader = new URLLoader();

urlLoader.load(new URLRequest("xml/products_gallery.xml"));

urlLoader.addEventListener(Event.COMPLETE, onComplete);

 

//Criando o objet xml e a xmlList

var xml:XML;

var xmlList:XMLList;

 

//Função disparada quando terminar de carregar o XML

function onComplete(evt:Event):void

{

//Armazena o XML

xml = new XML(evt.target.data);

//Armazena o total de nós foto do XML

xmlList = xml.children();

 

//trace(xmlList);

 

//Chama a função que lista os botões das categorias de produtos

listButtons();

}

 

//Função que lista os nós de categorias do xml

function listButtons():void

{

//loop para contar os nós de categorias

for (var i:int = 0 ; i < xmlList.length() ; i++)

{

//criamos um novo objeto que está na library

var mcButton:ButtonMC = new ButtonMC();

 

//posicionamos um botao abaixo do outro

mcButton.y = (mcButton.height + posY) * i;

//armazemanos o indice do movieclip

mcButton["btn"] = i;

//colocamos o nome do paramentro type do xml no textfield do botao

mcButton.txtType.text = xmlList.@type;

//trocamos o ponteiro do mouse e deixamos ele clicável

mcButton.buttonMode = true;

mcButton.mouseChildren = false;

 

//Chama a função que lista os produtos da categoria referente ao botao clicado

mcButton.addEventListener(MouseEvent.CLICK, callProducts);

 

//adicionamos ao stage

mcMenu.addChild(mcButton);

}

 

//setamos os valores para o scrollbar que rola os botoes

sb.init(mcMenu, "easeOutBack", 2, true, 2);

}

 

var position:int = 0;//posição inicial do primeiro item

var visItems:int = 3;//numero de itens visiveis

var spacing:int = 12.3;//distancia entre os itens

var offset:int = 25;

 

//Lista os produtos de uma categoria

function listProducts(list:int):void

{

var posX:int;//nova posição X do item

var min:int = position;//a menor posição X de um item é igual a posição inicial do primeiro item da lista

var max:int = position + visItems;//o maximo de items a mostra na tela, é aposição do primeiro mais o total de items visiveis

 

//removemos o grupo anterior para que fique somento o atual

while(mcProductsList.numChildren)

{

mcProductsList.removeChildAt(mcProductsList.numChildren - 1);

}

 

for (var i:int = 0; i < xmlList.(@id == list).product.length(); i++)

{

//criamos um novo objeto que está na library

var mcProduto:Product = new Product();

//armazemanos o indice do movieclip

mcProduto["prod"] = i;

//

var alph:int = Number(i >= min && i < max);

//posicionamos um botao do lado do outro

var xPos:int = i * (mcProduto.width + spacing);

//

var xTar:int = position * (spacing + mcProduto.width);

 

//colocamos o nome do paramentro name do xml no textfield do botao

mcProduto.txtNome.text = xmlList.(@id==list).product.@name; //xmlList.product.@name;

//carregamos as imagens dentro do mcProduto

mcProduto.carrega(xmlList.(@id==list).product.@photo);

//trocamos o ponteiro do mouse e deixamos ele clicável

mcProduto.buttonMode = true;

mcProduto.mouseChildren = false;

 

//Chama a função que lista os produtos da categoria referente ao botao clicado

mcProduto.addEventListener(MouseEvent.CLICK, callURL);

 

//adicionamos ao stage

mcProductsList.addChild(mcProduto);

 

if(i < min)

{

posX = xPos - offset - xTar;

}

else if (i >= max)

{

posX = xPos + offset - xTar;

}

else

{

posX = xPos - xTar;

}

 

Tweener.addTween(mcProduto, {x:xPos, time:.5, transition:"easeInSine"});

Tweener.addTween(mcProduto, {alpha:alph, time:.3, transition:"easeInSine"});

}

}

 

//Ao clicar em um dos botoes do mcMenu aparece sua lista de produtos

function callProducts(evt:MouseEvent):void

{

//atribuimos acad botao o seu paramentro xml de id

currentList = xmlList.@id[evt.currentTarget["btn"]];

//trace(currentList);

 

//chamamos a função qu lista os produtos e como parametro passamos o valor de id do botao clicado

listProducts(currentList);

}

 

//Função para associar os links do xml ao produtos

function callURL(evt:MouseEvent):void

{

var callLink:URLRequest = new URLRequest(xmlList.product.@url[evt.currentTarget["prod"]]);

navigateToURL(callLink, "_self");

}

 

//atribuimos listeners ao botoes btnPrev e btnNext

btnPrev.addEventListener(MouseEvent.CLICK, scrollPrev);

btnNext.addEventListener(MouseEvent.CLICK, scrollNext);

 

//função do btnPreb

function scrollPrev(e:MouseEvent = null):void

{

if(position <= 0){return};

position--;

//chamamos a função listProducts

listProducts(currentList);

}

 

//função do btnNext

function scrollNext(e:MouseEvent = null):void

{

if(position >= xmlList.product.length() - visItems){return};

position++;

//chamamos a função listProducts

listProducts(currentList);

}

 

[Thiago de Oliveira Cruz 21]

Bom ao meu ver quando entrei no site...

Os botões estão funcionando perfeitamente.

 

tudo que você teria de fazer é pegar o novo x de cada imagem... toda vez que ela andar... para que assim não apareça como se ele estivesse andando tudo novamente cada vez que é apertado o botão...

 

No entanto não vi nenhum outro problema

 

Poderia se explicar melhor o que você quer fazer??

 

abraços

[fajota 0]

Tudo bem amigo?

 

Entao ao clicar nos botaos para navegar para a direita, para o proximo, os itens vao somumindo da tela, na verdade eles ficam invisiveis, pq se você coloca o mouse em cime, o ponteiro muda para a maosinha.

 

E ao clicar para a esquerda, voltar para o anterior, eles vao voltando a aparecer.

 

O certo seria ao clicar para a aparecer o proximo, o primeiro objeto, ou nó 0, saiae de lugar para os itens q nao aparecem na tela. Entao sempre terei tres itens a mostra e sempre os dos cantos saiam para dar lugar para um proximo.

 

Algo parecido no Flash como esse feito no ajax http://sorgalla.com/projects/jcarousel/exa...c_ajax_php.html

[Thiago de Oliveira Cruz 21]

Bom então tudo que você precisa fazer é o seguinte.

 

Coloque todas as fotos que você quer em 1 XML todas elas... não esqueça de nenhuma rs :P brincadeira podem ser só 6 para testar

 

Depois crie um contador e você vai "enganar os usuarios"... fazendo um efeito visual

 

Pois quando você clica da a impressão de que tudo foi arrastado para a direita, nessa hora você vai acrescentar 1 ao seu contador e com isso vai acabar fazendo as imagens andar.

 

Como fazer isso?

 

Carregue todas as fotos do XML em um Array... e vai depois almentando o array conforme as pessoas forem clicando... assim vai desaparecer o anterior e vai aparecer o novo.

 

Por exemplo sem usar seu código vou dar um exemplo criando aqui:

var foto1:Loader = new Loader();
var foto2:Loader = new Loader();
var foto3:Loader = new Loader();

foto1.x = 0;
foto2.x = 150;
foto3.x = 300;
addChild(foto1);
addChild(foto2);
addChild(foto3);
vai.addEventListener(Event:MouseEvent.CLICK, proxima);

function proxima(e:MouseEvent):void {
  foto1.load(new URLRequest(array[i]));
  foto2.load(new URLRequest(array[i+1]));
  foto3.load(new URLRequest(array[i+2]));
  addChild(foto1);
  addChild(foto2);
  addChild(foto3);
  i++;
}

Onde o array vai ser o array que você criou com o XML

Ou seja você mudaria de foto no seco dessa maneira sem um efeito bunitinho das fotos andando e tals...

 

O que você pode fazer seria fazer o efeito dele andar... mudar as fotos :) e depois re colocar eles na tela +/- como eu fiz.

 

Acredito que ai iria dar o efeito que você quer

 

Ajudei?

Ou te deixei mais confuso rs

 

Abraços

[fajota 0]

Faaala berseck. beleza?

 

Eu vou tentar aki essa dica q você falou. Se der algum problema, eu posto o erro. E tbm ao final quando tudo tiver funcionando certinho eu posto a solução tbm.

 

Valeu por enquanto.