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.
imagem.jpg
Moto Ayrton Senna
imagem1.jpg
Mclaren do Senna
imagem2.jpg
Capacete Senna
imagem3.jpg
Ferrari Shumacher
imagem4.jpg
Loro
imagem5.jpg
Trator do Sítio
imagem6.jpg
Carroça antiga
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.
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á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
Escrito por Natan D. Alves
on novembro 8, 2009. Arquivado em Flash.
Você pode seguir as respostas a esse artigo pelo RSS 2.0.
Você pode deixar respostas para esse artigo
Ola natan sou fã do flash apesar de não saber muito de programação …mas são muito uteis sua publicações…obrigada
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
Olá Natan, o script não aparece completo.
Olá pessoal.
Por algum motivo algumas ações foram perdidas, mas já arrumei o tutorial colocando as ações novamente.
[]s
Natan, teria como, fazer as imagens miniaturas de um tamanho, e quando clicasse fosse um tamanho maior?
Valeu
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.
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.
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.
Natan..
Outra dúvida..
Teria como colocar link nas fotos?
Obrigado
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
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’
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.
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.
muda cabelo muda tudo quero fica limda
quero fica linda no photoshop
Parabens pelo Post… Muito bom!
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));
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!
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
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
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
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
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, “”);
Natan,
Segui o tutorial, mas ele funciona parcialmente. Quando abro a segunda imagem, trava o lightbox. O que pode ser???
Velho, só teve um problema nessa galeria, que depois que abre o flash box ela não tem next e prev…
abraço.
Bom dia adoro este vosso website e todos os tutoriais.
Estava com uma duvida.
Criei o ficheiro flash inserindo o componente do lightbox, tenho o arquivo xml tambem criado e as imagens tudo no mesmo local. ao abrir o ficheiro swf a pagina fica em branco. precisava que me ajudasse. Obrigado desde ja
Leonel, tenho o mesmo problema, eu fiz tudo certo, mas quando abre ta em branco ;s