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:
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>
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.
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
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 Feed de Comtentários ou URL de Trackback
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á pessoal.
Por algum motivo algumas ações foram perdidas, mas já arrumei o tutorial colocando as ações novamente.
[]s
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.
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.
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.
