Problema com galeria de imagem + XML

[raspa 0]

Olá,

 

Estou começando a trabalhar com AS3 e estou tendo um dificuldade de criar uma galeria de imagens com XML. Criei uma lista de imagens em miniaturas que são buscadas de um arquivo XML e gostaria que, ao clicar em uma destas imagens abrisse a imagem maior relativa aquela thumbnail. A ação de clicar e abrir a imagem está funcionando, porém a imagem que retorna não condiz com a imagem que foi clicada. Outra coisa que eu gostaria era que, ao abrir a galeria, a primeira imagem do XML já aparecesse, sendo substituida na medida em que as miniaturas fossem clicadas. Se alguém puder me ajudar eu agradeceria bastante. Abaixo vou passar o códico do XML e o Action que estou utilizando. Obrigado.

 

 

<?xml version="1.0" encoding="utf-8"?>
<imgs>
  <thumbs>
     <thumb>mini_01.jpg</thumb>
     <thumb>mini_02.jpg</thumb>
     <thumb>mini_03.jpg</thumb>
     <thumb>mini_04.jpg</thumb>
  </thumbs>
  <mediums>
     <medium>1.jpg</medium>
     <medium>2.jpg</medium>
     <medium>3.jpg</medium>
     <medium>4.jpg</medium>
  </mediums>
</imgs>

 

 

stop();

import flash.events.Event;
import flash.net.URLRequest;
import flash.display.Loader;
import flash.events.ProgressEvent;


//criamos variaveis para URLrequest e URLLoader
var meuURL:URLRequest = new URLRequest("imgs.xml");
var imgsXML:URLLoader = new URLLoader();

/*fazemos o download do arquivo externo
pelo método URLLoader.load()*/
imgsXML.load(meuURL);

/*adicionamos um ouvinte para o URLLoader
utilizamos o Evento de carregar por completo
e chamamos a função LeiaXML*/
imgsXML.addEventListener (Event.COMPLETE, leiaXML);

//seta a variável que irá contar as thumbs na função onCompleteImgLoader
var contadorThumbs:int = -1;

//cria a função que irá ler o XML
function leiaXML (event:Event):void {
   //cria o objeto XML contendo a informações do arquivo externo usando a propriedade URLLoader.data
   var imgsXML:XML = new XML(imgsXML.data);

       //salva na variável o número de thumbs que existe
       var numberOfThumbs:int = imgsXML.thumbs.thumb.length();

       //cria os objetos Loaders para receberem as imagens indicadas pelo XML e adicionando um listener em cada um para realizar o preload e a função principal ao final
       for (var thumbNumber:Number = 0; thumbNumber < numberOfThumbs; thumbNumber++){
               var mcThumbLoader:Loader = new Loader();
               mcThumbLoader.load(new URLRequest(imgsXML.thumbs.thumb[thumbNumber]));
               mcThumbLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onprogressImgLoader);
               mcThumbLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onCompleteImgLoader);
       };
};

function onprogressImgLoader(event:ProgressEvent)
{
       var percent:Number = event.target.bytesLoaded / event.target.bytesTotal * 100;
       trace(percent);
}

function onCompleteImgLoader(event:Event)
{
       //adiciona 1 a variável que marca a quantidade de thumbs
       contadorThumbs++;

       //cria as variáveis para calcular o tamanho total de todas as thumbs somadas e assim posicioná-las no palco
       var imgsXML:XML = new XML(imgsXML.data);
       var numberThumbs:int = imgsXML.thumbs.thumb.length();
       var sizeThumb:int = imgsXML.thumbs.@size;
       var imgsWidth:int = numberThumbs * sizeThumb;

       //cria os MC`s no palco para receberem os objetos Loader e dá um nome diferente a cada um com base na quantidade de thumbs existentes no XML
       var mcContainerImg:MovieClip = new MovieClip;
       mcContainerImg.name = 'mcContainerImg' + contadorThumbs;

	//criando o indice para carregamento da imagem correspondente
       mcContainerImg.id = contadorThumbs;

       //adiciona os MC`s ao palco
       addChild(mcContainerImg);

       //adiciona a cada MC um container Loader
       mcContainerImg.addChild(event.target.content);

       //posiciona os MC`s contendo as imagens no palco
       mcContainerImg.x = stage.width;
       mcContainerImg.y = stage.height - 125;

       //seta os MC`s como botões e adiciona os listeners de cada um
       mcContainerImg.buttonMode = true;
       mcContainerImg.addEventListener(MouseEvent.CLICK, onclickImg);
}

function onclickImg(event:MouseEvent){

       var imgsXML:XML = new XML(imgsXML.data);
       var xmlNode:Number = event.currentTarget.id;
       var mcMediumLoader:Loader = new Loader();
       mcMediumLoader.load(new URLRequest(imgsXML.mediums.medium[xmlNode]));
       addChild(mcMediumLoader);
       mcMediumLoader.x = 200;
       mcMediumLoader.y = 200;
}

[Pedro Bartulihe 0]

Cara olhando rapiod o codigo, ele puxa a imagem errada pq você usa contadorThumbs++; logo no inicio da funcao, sendo assim a primeira imagem vai comeca com id 1, depois 2 e assim sucessivamente. Sendo que a indexacao de matriz ou xml comeca em 0. Provavelmente quando você clica na imagem ele ta xamando a imagem posterior ne? eh por isso.

 

Para corrigir você pode colocar esse comando no final da funcao, pois assim a primeira vez que atribuir o id sera 0, depois 1 e assim vai..

 

ah esqueci, você disse que gostaria que chamasse a primeira imagem quando iniciasse. Nesse caso eu iria sugerir que você criasse uma funcao que carregasse as imagem, ou seja, uma funcao como carregaImage ( p:int ):void, sendo que p seja o id que você qer carregar. ficaria algo assim:

 

function carregaImage ( p:int ):void

{

var imgsXML:XML = new XML(imgsXML.data);

var xmlNode:Number = p;

var mcMediumLoader:Loader = new Loader();

mcMediumLoader.load(new URLRequest(imgsXML.mediums.medium[xmlNode]));

addChild(mcMediumLoader);

mcMediumLoader.x = 200;

mcMediumLoader.y = 200;

}

 

ae no evento de click você so chama essa funcao passando o id da imagem, dessa forma você pode chamar essa mesma funcao quando inicia passando o parametro 0 que eh o id da primeira imagem.

 

Flww

[raspa 0]

Cara olhando rapiod o codigo, ele puxa a imagem errada pq você usa contadorThumbs++; logo no inicio da funcao, sendo assim a primeira imagem vai comeca com id 1, depois 2 e assim sucessivamente. Sendo que a indexacao de matriz ou xml comeca em 0. Provavelmente quando você clica na imagem ele ta xamando a imagem posterior ne? eh por isso.

 

Para corrigir você pode colocar esse comando no final da funcao, pois assim a primeira vez que atribuir o id sera 0, depois 1 e assim vai..

 

ah esqueci, você disse que gostaria que chamasse a primeira imagem quando iniciasse. Nesse caso eu iria sugerir que você criasse uma funcao que carregasse as imagem, ou seja, uma funcao como carregaImage ( p:int ):void, sendo que p seja o id que você qer carregar. ficaria algo assim:

 

function carregaImage ( p:int ):void

{

var imgsXML:XML = new XML(imgsXML.data);

var xmlNode:Number = p;

var mcMediumLoader:Loader = new Loader();

mcMediumLoader.load(new URLRequest(imgsXML.mediums.medium[xmlNode]));

addChild(mcMediumLoader);

mcMediumLoader.x = 200;

mcMediumLoader.y = 200;

}

 

ae no evento de click você so chama essa funcao passando o id da imagem, dessa forma você pode chamar essa mesma funcao quando inicia passando o parametro 0 que eh o id da primeira imagem.

 

Flww

 

Poxa, Pedro, muito obrigado pela ajuda. Não consegui fazer funcionar o código, sou realmente um analfabeto em Action Script. Tentei trocar de lugar aquele comando, mas o problema seque aparecendo. Se tiveres mais alguma sugestão eu ficaria grato, enquanto isso seguirei quebrando a cabeça aqui. Valeu!

[Pedro Bartulihe 0]

Pois bem Raspa, faz assim, testa esse codigo aqui e ve no que da. Caso continue dando errado fala que resolveremos isso.

import flash.events.Event;
import flash.net.URLRequest;
import flash.display.Loader;
import flash.events.ProgressEvent;


//criamos variaveis para URLrequest e URLLoader
var meuURL:URLRequest = new URLRequest("imgs.xml");
var imgsXML:URLLoader = new URLLoader();

/*fazemos o download do arquivo externo
pelo método URLLoader.load()*/
imgsXML.load(meuURL);

/*adicionamos um ouvinte para o URLLoader
utilizamos o Evento de carregar por completo
e chamamos a função LeiaXML*/
imgsXML.addEventListener (Event.COMPLETE, leiaXML);

//seta a variável que irá contar as thumbs na função onCompleteImgLoader
var contadorThumbs:int = 0;

//cria a função que irá ler o XML
function leiaXML (event:Event):void {
   //cria o objeto XML contendo a informações do arquivo externo usando a propriedade URLLoader.data
   var imgsXML:XML = new XML(imgsXML.data);

       //salva na variável o número de thumbs que existe
       var numberOfThumbs:int = imgsXML.thumbs.thumb.length();

       //cria os objetos Loaders para receberem as imagens indicadas pelo XML e adicionando um listener em cada um para realizar o preload e a função principal ao final
       for (var thumbNumber:Number = 0; thumbNumber < numberOfThumbs; thumbNumber++){
               var mcThumbLoader:Loader = new Loader();
               mcThumbLoader.load(new URLRequest(imgsXML.thumbs.thumb[thumbNumber]));
               mcThumbLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onprogressImgLoader);
               mcThumbLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onCompleteImgLoader);
       };
};

function onprogressImgLoader(event:ProgressEvent)
{
       var percent:Number = event.target.bytesLoaded / event.target.bytesTotal * 100;
       trace(percent);
}

function onCompleteImgLoader(event:Event)
{
       //cria as variáveis para calcular o tamanho total de todas as thumbs somadas e assim posicioná-las no palco
       var imgsXML:XML = new XML(imgsXML.data);
       var numberThumbs:int = imgsXML.thumbs.thumb.length();
       var sizeThumb:int = imgsXML.thumbs.@size;
       var imgsWidth:int = numberThumbs * sizeThumb;

       //cria os MC`s no palco para receberem os objetos Loader e dá um nome diferente a cada um com base na quantidade de thumbs existentes no XML
       var mcContainerImg:MovieClip = new MovieClip;
       mcContainerImg.name = 'mcContainerImg' + contadorThumbs;

               //criando o indice para carregamento da imagem correspondente
       mcContainerImg.id = contadorThumbs;

       //adiciona os MC`s ao palco
       addChild(mcContainerImg);

       //adiciona a cada MC um container Loader
       mcContainerImg.addChild(event.target.content);

       //posiciona os MC`s contendo as imagens no palco
       mcContainerImg.x = stage.width;
       mcContainerImg.y = stage.height - 125;

       //seta os MC`s como botões e adiciona os listeners de cada um
       mcContainerImg.buttonMode = true;
       mcContainerImg.addEventListener(MouseEvent.CLICK, onclickImg);

	//adiciona 1 a variável que marca a quantidade de thumbs
       contadorThumbs++;
}

function onclickImg(event:MouseEvent)
{                
	carregaImage(event.currentTarget.id);			
}

function carregaImage ( p:Number ):void
{
	var imgsXML:XML = new XML(imgsXML.data);
	var xmlNode:Number = p;
	var mcMediumLoader:Loader = new Loader();
	mcMediumLoader.load(new URLRequest(imgsXML.mediums.medium[xmlNode]));
	addChild(mcMediumLoader);
	mcMediumLoader.x = 200;
	mcMediumLoader.y = 200;
}

[raspa 0]

Olá, Pedro, obrigado pela sua atenção no meu problema.

 

O erro persiste, mas observando bem o comportamento do swf consegui perceber o seguinte:

 

As imagens, que no xml estão definidas como "medium", estão entrando na seguencia correta, ou seja, quando se clica na primeira miniatura, aparece a foto 1, e assim sucessivamente. O problema é que as miniaturas (thumb)não estão na ordem que o xml passa. Ao invés de estarem entrando em seguencia...mini_01.jpg...mini_02.jpg...mini_03.jpg...mini_04.jpg...estão aparecendo mini_03.jpg...mini_01.jpg...mini_04.jpg...mini_02.jpg