MXStudio » Flash » Galeria de Imagens com XML e LightBox

Galeria de Imagens com XML e LightBox


Olá comunidade.

Neste tutorial, irei mostrar a vocês como criar uma Galeria de Imagens com XML no Flash utilizando o efeito LightBox presente em algumas páginas HTML. Os requisitos para esse tutorial são:

  • Flash 8, Flash CS3 ou Flash CS4
  • Conhecimento com interação do Flash com XML
  • Componente FlashLightBox

Criando o XML

Vamos começar criando o XML. O arquivo XML irá conter o nome das imagens e a legenda que será exibida. Tanto o arquivo XML quanto as imagens precisam estar no mesmo diretório do arquivo FLA do Flash. Salvem o XML com o nome de imagens.xml.

<?xml version="1.0" encoding="utf-8"?>
<imagens>
   <foto>
      <imagem>imagem.jpg</imagem>
      <texto>Moto Ayrton Senna</texto>
   </foto>
   <foto>
      <imagem>imagem1.jpg</imagem>
      <texto>Mclaren do Senna</texto>
   </foto>
   <foto>
      <imagem>imagem2.jpg</imagem>
      <texto>Capacete Senna</texto>
   </foto>
   <foto>
      <imagem>imagem3.jpg</imagem>
      <texto>Ferrari Shumacher</texto>
   </foto>
   <foto>
      <imagem>imagem4.jpg</imagem>
      <texto>Loro</texto>
   </foto>
   <foto>
      <imagem>imagem5.jpg</imagem>
      <texto>Trator do Sítio</texto>
   </foto>
   <foto>
      <imagem>imagem6.jpg</imagem>
      <texto>Carroça antiga</texto>
   </foto>
</imagens>

Download do Componente FlashLightBox

Para criar o efeito LightBox vamos usar o Componente que eu desenvolvi. O link para baixar o Componente e instruções de como instalar estão em meu Blog.

Componente FlashLightBox

Criando a galeria

Após terem baixado e instalado o Componente, vamos criar um novo arquivo no Flash. Abram o painel de Componentes (Ctrl+F7 ou Window, Components) e joguem para o palco o Componente FlashLightBox, abram o painel Properties e dêem instancia de flb para ele. O Componente pode estar posicionado no local que desejar, ele não irá aparecer quando seu arquivo rodar.

Diferentemente das outras galerias que mostrei como criar aqui no MXStudio, nessa galeria não é preciso criar nenhum MovieClip, campo de texto, nem nada. Tudo será criado a partir do ActionScript. Nós vamos carregar as imagens, adicionar uma borda a cada imagem e adicionar uma sombra usando o Filtro DropShadow, cada imagem será dimensionada para um tamanho randomico, assim como sua posição e rotação. Podemos mover as imagens pela tela e para ver a imagem com o tamanho original clicamos duas vezes sobre a imagem para que ela seja revelada com o efeito LightBox.

Vamos as ações da Galeria, quem estiver usando o ActionScript 2, copiem e colem essas ações no mesmo frame que o Componente está:

/* Importa a Classe do Filtro DropShadow */
import flash.filters.DropShadowFilter;
/* Alinha o arquivo para o canto superior esquerdo */
Stage.align = "TL";
/* Desabilitamos o dimencionamento do arquivo */
Stage.scaleMode = "noScale";
/* Variável que vai ser usada no setInterval */
var intervalo:Number = new Number();
/* Variável usada no duplo clique do mouse */
var count:Number = 0;
/* Variável que armazena o total de itens do XML */
var total:Number = new Number();
/* Criamos um listener */
var listener:Object = new Object();
/* Criamos uma instancia da Classe XML */
var xml:XML = new XML();
/* Ignoramos os espaços em branco */
xml.ignoreWhite = true;
/* Carregamos o arquivo XML */
xml.load("imagens.xml");
/* Ao carregar o arquivo XML */
xml.onLoad = function(ok) {
	/* Se não deu erro */
	if (ok) {
		/* Identificamos o primeiro nó do XML */
		xmlNode = this.firstChild;
		/* Armazena o total de itens do XML */
		total = xmlNode.childNodes.length;
		/* Chama a função carrega */
		carrega();
	} else {
		/* Mostra a mensagem de erro */
		trace("Erro");
	}
}
/* Função que carrega as imagens */
function carrega() {
	/* Criamos um laço para percorrer todos os itens do XML */
	for (var i=0; i<total; i++) {
		/* Criamos um novo MovieClip */
		var mc:MovieClip = this.createEmptyMovieClip("mc"+i, this.getNextHighestDepth());
		/* Criamos um MovieClip que servirá de alvo para carregar a imagem */
		var holder:MovieClip = mc.createEmptyMovieClip("holder", mc.getNextHighestDepth());
		/* Rotacionamos o MovieClip de forma randomica */
		mc._rotation = Math.round(Math.random()*-30)+10;
		/* Armazena o número do nó do XML */
		mc.id = i;
		/* Ao precionar do Mouse no MovieClip */
		mc.onPress = function() {
			/* Jogamos ele pra cima de tudo */
			this.swapDepths(this._parent.getNextHighestDepth());
			/* Incrementamos a variável do duplo clique */
			count++;
			/* Se ela for igual a 1 */
			if (count == 1) {
				/* Movimenta o MovieClip */
				startDrag(this, false);
				/* Iniciamos um intervalo para saber se o usuário irá clicar novamente */
				/* Fazemos isso para saber se é um clique duplo ou não */
				intervalo = setInterval(verifica, 250);
			/* Se a variável for igual a 2 */
			/* Significa que o duplo clique aconteceu */
			} else if (count == 2) {
				/* Zeramos a variável */
				count = 0;
				/* Encerramos o intervalo */
				clearInterval(intervalo);
				/* Chamamos a função carrega do Componente FlashLightBox */
				/* A função recebe o endereço da imagem e o texto para a legenda */
				flb.carrega(xmlNode.childNodes[this.id].childNodes[0].firstChild.nodeValue, xmlNode.childNodes[this.id].childNodes[1].firstChild.nodeValue);
			}
		};
		/* Ao soltar do Mouse */
		mc.onRelease = mc.onReleaseOutside = function() {
			/* Paramos de movimentar o MovieClip */
			this.stopDrag();
		}
		/* Criamos uma instancia da Classe DropShadowFilter */
		var sombra:DropShadowFilter = new DropShadowFilter();
		/* Modiciamos o angulo */
		sombra.angle = 45;
		/* Modificamos o blurX e blurY */
		sombra.blurX = 5;
		sombra.blurY = 5;
		/* Modificamos a distancia */
		sombra.distance = 3;
		/* Modificamos a intencidade da sombra */
		sombra.strength = 0.75;
		/* Criamos um Array que armazena os filtros usados */
		var filtro:Array = new Array();
		/* Adicionamos ao Array a sombra */
		filtro.push(sombra);
		/* Aplica a sombra ao MovieClip */
		mc.filters = filtro;
		/* Criamos uma instancia da Classe MovieClipLoader */
		var loader:MovieClipLoader = new MovieClipLoader();
		/* Carregamos a imagem */
		loader.loadClip(xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue, holder);
		/* Modificamos o tamanho dela randomicamente */
		holder._xscale = (Math.random()*20)+60;
		holder._yscale = holder._xscale;
		/* Modificamos a posição da imagem */
		holder._x = 10;
		holder._y = 10;
		/* Adicionamos um listener a instancia da Classe MovieClipLoader */
		loader.addListener(listener);
	}
}
/* Função chamada caso o usuário não clique duas vezes sobre a imagem */
function verifica() {
	/* Zera a variavel */
	count = 0;
	/* Encerramos o intervalo */
	clearInterval(intervalo);
}
/* Ao carregar a imagem */
listener.onLoadInit = function(alvo:MovieClip) {
	/* Definimos a cor de fundo da borda */
	alvo._parent.beginFill(0xFFFFFF, 100);
	/* Começamos a desenhar a borda de acordo com o tamanho da imagem */
	alvo._parent.lineTo(0, 0);
	alvo._parent.lineTo(0, alvo._height+20);
	alvo._parent.lineTo(alvo._width+20, alvo._height+20);
	alvo._parent.lineTo(alvo._width+20, 0);
	/* Termina de desenhar */
	alvo._parent.endFill();
	/* Modifica a posição do MovieClip de forma randomica */
	alvo._parent._x = Math.round(Math.random()*(Stage.width-alvo._width));
	alvo._parent._y = Math.round(Math.random()*(Stage.height-alvo._height));
}

Quem estiver usando ActionScript 3 as ações são essas:

/* Alinha o arquivo para o canto superior esquerdo */
stage.align = StageAlign.TOP_LEFT;
/* Desabilitamos o dimencionamento do arquivo */
stage.scaleMode = StageScaleMode.NO_SCALE;
/* Variavel que armazena o MovieClip selecionado */
var alvo:MovieClip;
/* Variável que armazena a quantidade de itens do XML */
var total:Number = new Number();
/* Criamos uma instancia da Classe XML */
var xml:XML = new XML();
/* Criamos uma instancia da Classe URLLoader */
var arquivo:URLLoader = new URLLoader();
/* Carregamos o XML */
arquivo.load(new URLRequest("imagens.xml"));
/* Adicionamos um event listener chamando a função arquivoOk */
arquivo.addEventListener(Event.COMPLETE, arquivoOk);
/* Função chamada assim que o XML é carregado */
function arquivoOk(event:Event):void {
	/* Armazenamos os dados do XML na instancia da Classe XML */
	xml = new XML(event.target.data);
	/* Armazenamos o total de itens */
	total = xml.foto.length();
	/* Chama a função carrega */
	carrega();
}
/* Função que carrega as imagens */
function carrega() {
	/* Criamos um laço para percorrer todos os itens do XML */
	for (var i=0; i<total; i++) {
		/* Criamos um MovieClip */
		var mc:MovieClip = new MovieClip();
		/* Rotacionamos ele randomicamente */
		mc.rotation = Math.round(Math.random()*-30)+10;
		/* Habilitamos o clique duplo do Mouse */
		mc.doubleClickEnabled = true;
		/* Adicionamos um event listener para quando o mouse for clicado no MovieClip */
		mc.addEventListener(MouseEvent.MOUSE_DOWN, mcPress);
		mc.addEventListener(MouseEvent.MOUSE_UP, mcRelease);
		/* Adicionamos um event listener para o clique duplo */
		mc.addEventListener(MouseEvent.DOUBLE_CLICK, mcDoble);
		/* Armazena o número do nó do XML */
		mc.id = i;
		/* Criamos uma instancia da Classe DropShadowFilter */
		var sombra:DropShadowFilter = new DropShadowFilter();
		/* Modificamos o angulo da sombra */
		sombra.angle = 45;
		/* Modificamos o blurX e blurY */
		sombra.blurX = 5;
		sombra.blurY = 5;
		/* Modificamos a distancia */
		sombra.distance = 3;
		/* Modificamos a intencidade da sombra */
		sombra.strength = 0.75;
		/* Criamos um Array para armazenar os filtros utilizados */
		var filtro:Array = new Array();
		/* Adicionamos no Array a sobra criada */
		filtro.push(sombra);
		/* Adiciona os filtros ao MovieClip */
		mc.filters = filtro;
		/* Criamos uma instancia da Classe Loader */
		var loader:Loader = new Loader();
		/* Desabilitamos o mouse */
		loader.mouseEnabled = false;
		/* Carregamos a imagem */
		loader.load(new URLRequest(xml.foto[i].imagem));
		/* Modificamos o tamanho da imagem randomicamente */
		loader.scaleX = (Math.random()*0.2)+0.6;
		loader.scaleY = loader.scaleX;
		/* Modificamos a posição da imagem */
		loader.x = 10;
		loader.y = 10;
		/* Adicionamos um event listener para saber quando terminou de carregar a imagem */
		loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderOk);
		/* Adiciona a imagem ao MovieClip criado */
		mc.addChild(loader);
		/* Adiciona o MovieClip ao palco */
		addChild(mc);
	}
}
/* Função chamada quando a imagem termina de ser carregada */
function loaderOk(event:Event):void {
	/* Criamos uma referencia para a imagem */
	var loader:Loader = event.target.loader;
	/* Criamos uma referencia ao MovieClip */
	var mc:MovieClip = MovieClip(loader.parent);
	/* Definimos a cor de fundo da borda */
	mc.graphics.beginFill(0xFFFFFF, 1);
	/* Começamos a desenhar a borda no MovieClip de acordo com o tamanho da imagem */
	mc.graphics.lineTo(0, 0);
	mc.graphics.lineTo(0, loader.height+20);
	mc.graphics.lineTo(loader.width+20, loader.height+20);
	mc.graphics.lineTo(loader.width+20, 0);
	/* Termina de desenhar */
	mc.graphics.endFill();
	/* Modifica a posição do MovieClip de forma randomica */
	mc.x = Math.round(Math.random()*(stage.stageWidth-mc.width));
	mc.y = Math.round(Math.random()*(stage.stageHeight-mc.height));
}
/* Função chamada quando clicamos duas vezes sobre a imagem */
function mcDoble(event:MouseEvent):void {
	/* Chamamos a função carrega do Componente FlashLightBox */
	/* A função recebe o endereço da imagem e o texto para a legenda */
	flb.carrega(xml.foto[event.target.id].imagem, xml.foto[event.target.id].texto);
}
/* Função chamada quando clica com o mouse sobre o MovieClip */
function mcPress(event:MouseEvent):void {
	/* Identificamos o alvo */
	alvo = MovieClip(event.target);
	/* Coloca o alvo a frente dos demais MovieClips */
	addChild(alvo);
	/* Movimenta o MovieClip */
	alvo.startDrag();
}
/* Função chamada quando soltamos o botão esquerdo do mouse */
function mcRelease(event:MouseEvent):void {
	/* Paramos de movimentar o MovieClip */
	event.target.stopDrag();
}

Aqui está um exemplo da galeria funcionando:
Exemplo galeria

Conclusões

Chegamos ao fim de mais um tutorial. Um exemplo bem simples de como usar o Componente FlashLightBox e uma oportunidade para aprender a criar uma galeria usando apenas ActionScript.

Gostaria de aproveitar a oportunidade e convidar todos os leitores a visitarem meu Portfolio Online, lá você poderão encontrar todos os meus trabalhos e tutoriais desenvolvidos: http://www.natanalves.com

Um abraço a todos e até a próxima.

Autor: Natan D. Alves – Moderador do Fórum de Flash & ActionSctipt MXSTUDIO
Qualquer dúvida envie um e-mail para natanalves@mxstudio.com.br ou acesse nosso fórum


24 Comments to Galeria de Imagens com XML e LightBox

  1. Novembro 15, 2009 at 11:42 am | Permalink

    Ola natan sou fã do flash apesar de não saber muito de programação …mas são muito uteis sua publicações…obrigada

  2. Felpe's Gravatar Felpe
    Novembro 24, 2009 at 3:32 am | Permalink

    Olá Natan, tbm sou seu fã caro
    otimo tutorial
    nao entendo muito de programação, porem, acho q tanto pra AS2 e AS3 ta faltando uma parte da Action ali no final,
    eu tentei seguir o tutorial e da erro de AS
    verifica pra gente ae ta?
    Parabens pelo tutorial

  3. ronytorres's Gravatar ronytorres
    Dezembro 1, 2009 at 6:56 am | Permalink

    Olá Natan, o script não aparece completo.

  4. Felipe Vaz's Gravatar Felipe Vaz
    Dezembro 4, 2009 at 11:22 pm | Permalink

    Natan, teria como, fazer as imagens miniaturas de um tamanho, e quando clicasse fosse um tamanho maior?

    Valeu

  5. Dezembro 5, 2009 at 9:06 pm | Permalink

    Gostaria de paranbeniza-lo por esta matéria
    O componente foi impressionável.
    E de longe o melhor tutorial sobre o assunto que já vi.

  6. Victor's Gravatar Victor
    Janeiro 5, 2010 at 5:49 pm | Permalink

    Muito bom o tutorial Natan!
    Mas gostaria de saber como faço para as imagens aparecem em um espaço determinado, um quadrado por exemplo.

  7. Aflim's Gravatar Aflim
    Janeiro 13, 2010 at 10:30 am | Permalink

    Natan..
    Parabens pelo tutorial.. muito bom.

    Estou com uma dúvida.
    Gostaria de colocar um menu junto à galeria no mesmo swf.
    Mas gostaria q este menu sempre ficasse no a frente das fotos. Tem como vc me ajudar?

    Fiz o menu aqui mas fica atrás das fotos.

    Obrigado.

  8. Aflim's Gravatar Aflim
    Janeiro 13, 2010 at 11:22 am | Permalink

    Natan..

    Outra dúvida..
    Teria como colocar link nas fotos?

    Obrigado

  9. Carlos Roberto's Gravatar Carlos Roberto
    Janeiro 16, 2010 at 12:33 pm | Permalink

    Ola Natan!

    Tive o conhecimento do site a pouco dias atras, achei muito legal o conteudo,porem algumas explicações deixaram a desejar. Sei q a pessoa q tenta desenvolver junto a explicação tem q possuir o conhecimento da ferramenta mas mesmo assim se torna um pouco complicado devido os esclarecimentos escasso da materia.
    Espero rever suas matérias com mais qualidade

    ATT.
    Carlos Roberto F. de Melo

  10. hercules's Gravatar hercules
    Fevereiro 26, 2010 at 5:08 pm | Permalink

    esta dando um ploblema e nao consigo descobri a solusão
    flb.carrega(xml.foto[event.target.id].imagem, xml.foto[event.target.id].texto);
    informação do erro( ” flb.carrega(xml.foto[event.target.id].imagem, xml.foto[event.target.id].texto); ” )
    o plobema esta nesta linha so ‘Ect’

  11. Março 1, 2010 at 8:37 pm | Permalink

    Quando fui tentar fazr o mu ddeu o mesmo erro do comentário do hercules, sera q vc poderia dar uma resposta pra gente sobre esse erro , de mais vlw pelo tuto , só fico no aguardo dessa questão.

  12. Março 1, 2010 at 8:38 pm | Permalink

    Quando fui tentar fazer o meu deu o mesmo erro do comentário do hercules, sera q vc poderia dar uma resposta pra gente sobre esse erro , de mais vlw pelo tuto , só fico no aguardo dessa questão.

  13. Março 18, 2010 at 1:06 am | Permalink

    muda cabelo muda tudo quero fica limda

  14. Março 18, 2010 at 1:08 am | Permalink

    quero fica linda no photoshop

  15. Helder Zebral's Gravatar Helder Zebral
    Março 20, 2010 at 8:54 pm | Permalink

    Parabens pelo Post… Muito bom!

  16. Rafael's Gravatar Rafael
    Março 22, 2010 at 2:23 am | Permalink

    E ai natan, ótimo tuto, deu certo aqui, só queria saber como posso fazer para que essas imagens fique em seguência uma do lado da outro bunitinhu?
    Obrigado desde já!!!
    /* Modifica a posição do MovieClip de forma randomica */
    mc.x = Math.round(Math.random()*(stage.stageWidth-mc.width));
    mc.y = Math.round(Math.random()*(stage.stageHeight-mc.height));

  17. landskron's Gravatar landskron
    Abril 3, 2010 at 2:44 am | Permalink

    Natan…obrigado mais uma vez por um ótimo tutorial!
    Estava procurando exatamente esse componente…é perfeito! Utilizei-o com AS3, arrastei para o stage, selecionei o primeiro frame…apertei F9….copiei e colei o código em AS3…e funcionou de primeira! Aí comecei a fazer as minhas customizações.
    É muito raro se achar material bom para consulta na internet…parabéns! Excelente!

  18. Rafael Miguel's Gravatar Rafael Miguel
    Maio 19, 2010 at 10:29 pm | Permalink

    Boa noite Natan,

    Muito show seu tutorial, bom estou com alguns problemas quando tento rodar o swf ele gera esse pau.

    **Error** Scene=Scene 1, layer=Layer, frame=1:Line 79: The class ‘flash.filters.DropShadowFilter’ could not be loaded.
    var sombra:DropShadowFilter = new DropShadowFilter();

    **Error** Scene=Scene 1, layer=Layer, frame=1:Line 117: Statement block must be terminated by ‘}’
    listener.onLoadInit = function(alvo:MovieClip) {

    **Error** Scene=Scene 1, layer=Layer, frame=1:Line 129: Syntax error.
    alvo._parent._y = Math.round(Math.random()*(Stage.height-alvo._height));

    Total ActionScript Errors: 3 Reported Errors: 3

  19. Cintia's Gravatar Cintia
    Maio 20, 2010 at 6:23 pm | Permalink

    Boas…

    Não percebo muito de flash, tentei seguir o tutorial, mas não consegui concretizar a galeria.

    Era ótimo para nós se pusesse um video passo a passo…

    Voce tem aqui um otimo trabalho, parabens

    Obrigado

  20. Junho 3, 2010 at 4:19 pm | Permalink

    Olá Natan, parabens pelo tuto.
    Deu tudo certinho aqui.
    Mas como faço para colocar as fotos todas alinhadas uma do lado da outra e na posição certinha (sem ser vertical)?

    Abraço

  21. Eleandro's Gravatar Eleandro
    Agosto 23, 2010 at 7:04 pm | Permalink

    Olá, Natan…. minha galeria está dando erro nesta linha

    108 flb.carrega(xml.foto[event.target.id].imagem, xml.foto[event.target.id].texto);

    se colocar essa linha como comentário e desativar o evento de double.click rola… mas e se quiser que funcione… pode me ajudar?

    desde já agradeço

  22. Eleandro's Gravatar Eleandro
    Agosto 30, 2010 at 3:41 pm | Permalink

    Olá Pessoal.. resolvido…

    a linha que no meu deu problema é a seguinte:

    flb.carrega(xml.foto[event.target.id].imagem, xml.foto[event.target.id].texto);

    reparem que a linha passa 3 argumentos:

    flb.carrega(“nome da imagem que deve abrir” , “texto que deve ser exibido” , “link para abrir a imagem em outra janela”)

    e deve ser o seguinte:

    flb(“imagem”,”texto”,”link”) caso não tenha link deixe: ” ”

    flb.carrega(xml.foto[event.target.id].imagem, xml.foto[event.target.id].texto, “”);

  23. Everaldo's Gravatar Everaldo
    Agosto 31, 2010 at 9:59 am | Permalink

    Natan,

    Segui o tutorial, mas ele funciona parcialmente. Quando abro a segunda imagem, trava o lightbox. O que pode ser???

Deixe um Comentario

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="">

Natan D. Alves

Fã e divulgador da plataforma Flash e do ActionScript, músico nas horas vagas e estudante do curso de Ciência da Computação.

Últimos Artigos do Autor