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
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
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