Galeria de Imagens com XML e LightBox

Publicado por Natan D. Alves em 08/11/2009

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

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áveis usadas para mover o MovieClip no palco */
var difX:Number = new Number();
var difY:Number = new Number();
/* 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

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


Assine o nosso Feed
1.228 assinantes,
assine você também!
Publique esse artigo no Twitter Salve este artigo no Delicious Cadastre esse artigo no Dihitt Cadastre esse artigo no UEBA Cadastre esse artigo no Rec6

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.

1 usuário comentou em " Galeria de Imagens com XML e LightBox "

Assine o Feed de Comtentários ou URL de Trackback

MONE266 disse,
Enviado em 15-11-2009 às 11:42 am

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

Deixe o seu comentário abaixo...

 Username (*required)

 Email Address (*private)

 Website (*optional)

 

MXStudio © 2003-2009. Todos os direitos reservados.
É expressamente proibido a cópia, reprodução e difusão dos textos, fotos e outros elementos contidos neste site sem autorização expressa do MXStudio.