Olá Comunidade. Dessa vez iremos aprender a criar uma Galeria de Imagem usando XML. Não é uma galeria comum, usaremos a Classe Tween para fazer um efeito bem intereçante.Pré-requisitos para esse tutorial
- Flash MX 2004 ou Flash 8
- Conhecimento com Interação com XML
Criando o XML
Vamos ao XML que conterá nossas Imagens e seus títulos. Salve como 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>
Criando nossa Galeria
Vamos criar nossa galeria. Você poderá fazer da maneira que desejar. Comecei com um palco com dimenções de 550×420. Os nome em Vermelho são os nomes de instância de cada MovieClip.
Uma coisa muito importante. O MovieClip borda tem que ter seu ponto de registro no meio. Como na Imagem:
Com nossos MovieClips criados e instanciados vamos ao ActionScript. Coloquem isso no frame:
/* Importamos a Classe Tween */
import mx.transitions.Tween;
import mx.transitions.easing.*;
/* Criamos uma variável para a foto atual */
var fotoAtual:Number = 0;
/* Dizemos que o MovieClip preloader tem o _xscale igual a 0 */
preloader._xscale = 0;
/* Criamos uma variável para o MovieClipLoader */
var meuMVC:MovieClipLoader = new MovieClipLoader();
/* Criamos um Listener para o MovieClipLoader */
var meuListener:Object = new Object();
/* Criamos uma variável para o XML */
var dadosXML:XML = new XML();
/* Ignoramos os espaços em Branco */
dadosXML.ignoreWhite = true;
/* Carregamos o XML */
dadosXML.load("imagens.xml");
/* Quando o XML for carregado */
dadosXML.onLoad = function() {
/* Dizemos qual é o primeiro Nó */
xmlNode = this.firstChild;
/* Criamos uma variável para o total */
total = xmlNode.childNodes.length;
/* Chamamos a função mostraImagem chamando a primeira imagem */
mostraImagem(0);
};
/* Função responsável por Carregar as Imagens do XML */
function mostraImagem(imagem) {
/* Descarregamos qualquer conteúdo que esteja no MovieClip holder */
holder.unloadMovie();
/* Deixamos o MovieClip preloader com _xscale igual a 0 */
preloader._xscale = 0;
/* Mostramos o MovieClip preloader */
preloader._visible = true;
/* Deixamos o MovieClip holder com _alpha igual a 0 */
holder._alpha = 0;
/* Desabilitamos o botão ant */
ant.enabled = false;
/* Desabilitamos o botão prox */
prox.enabled = false;
/* Apagamos o texto */
texto.text = "";
/* Carregamos a imagem */
meuMVC.loadClip(xmlNode.childNodes[imagem].childNodes[0].firstChild.nodeValue, holder);
/* Usamos o listener para saber o progresso do carregamento */
meuListener.onLoadProgress = function(alvo:Object, bLoad:Number, bTotal:Number) {
/* Criamos uma variável para saber quanto carregou */
var porcentagem:Number = Math.round(bLoad/bTotal*100);
/* Mostramos o quanto carregou */
porcento.text = porcentagem+"%";
/* Deixamos o MovieClip preloader com o mesmo _xscale do carregameto */
preloader._xscale = porcentagem;
};
/* Quando terminar de Carregar */
meuListener.onLoadInit = function() {
/* Para usar a Classe Tween temos que criar variáveis */
/* Aqui iremos aumentar o MovieClip borda para o mesmo tamanho do MovieClip holder mais 16 para poder fazer uma borda */
var tww:Tween = new Tween(borda, "_width", Back.easeOut, borda._width, holder._width+16, 1, true);
/* Aqui iremos aumentar o MovieClip borda para o mesmo tamanho do MovieClip holder mais 16
para poder fazer uma borda */
var twh:Tween = new Tween(borda, "_height", Back.easeOut, borda._height, holder._height+16, 1, true);
/* Aqui movemos o MovieClip holder */
var twhx:Tween = new Tween(holder, "_x", Back.easeOut, holder._x, borda._x-holder._width/2, 1, true);
/* Aqui movemos o MovieClip holder */
var twhx:Tween = new Tween(holder, "_y", Back.easeOut, holder._y, borda._y-holder._height/2, 1, true);
/* Aqui movemos o MovieClip ant */
var twant:Tween = new Tween(ant, "_y", Back.easeOut, ant._y, (borda._y+holder._height/2)+8, 1, true);
/* Aqui movemos o MovieClip prox */
var twpro:Tween = new Tween(prox, "_y", Back.easeOut, prox._y, (borda._y+holder._height/2)+8, 1, true);
/* Aqui movemos o campo de texto */
var twtxt:Tween = new Tween(texto, "_y", Back.easeOut, texto._y, (borda._y+holder._height/2)+8+ant._height, 1, true);
/* Mostramos o texto */
texto.text = xmlNode.childNodes[imagem].childNodes[1].firstChild.nodeValue;
/* Quando a variavel twhx acabar de se mover */
twhx.onMotionFinished = function() {
/* Deixamos o MovieClip preloader invisivel */
preloader._visible = false;
/* Apagamos o texto do campo de texto porcento */
porcento.text = "";
/* Aqui deixamos o MovieClip holder ficar com alpha igual a 100 */
var twha:Tween = new Tween(holder, "_alpha", Regular.easeOut, 0, 100, 1, true);
/* Quando a variavel twha acabar */
twha.onMotionFinished = function() {
/* Habilitamos o MovieClip ant */
ant.enabled = true;
/* Habilitamos o MovieClip prox */
prox.enabled = true;
};
};
};
}
/* Ao precionar do botão prox */
prox.onPress = function() {
/* Se a variável fotoAtual for menor que o total de fotos */
if (fotoAtual<(total-1)) {
/* Incrementamos a variavel fotoAtual */
fotoAtual++;
/* Chamamos a função mostraImagem passando o parametro fotoAtual */
mostraImagem(fotoAtual);
}
};
/* Ao precionar do botão ant */
ant.onPress = function() {
/* Se a variável fotoAtual for maior que 0 */
if (fotoAtual>0) {
/* Decrementamos a variável fotoAtual */
fotoAtual--;
/* Chamamos a função mostraImagem passando o parametro fotoAtual */
mostraImagem(fotoAtual);
}
};
/* Adicionamos um Listener ao MovieClipLoader */
meuMVC.addListener(meuListener);
Aqui um Exemplo da Galeria funcionando.
Considerações Finais
Aprendemos hoje a criar uma Galeria de Imagem usando XML. O mais legal dessa Galeria são as animações quando se carrega uma imagem. Uma boa é estudar a Classe Tween, com ela podemos fazer vários efeitos legais.
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 |
