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 |
ShareThis
Natan, achei o máximo o teu tutorial e o resultado postado dessa galeria em flash, mas no meu não funcionou. Deu uns errinhos no código, mas arrumei aqui. Só que as fotos não carregam. Será que você poderia enviar o arquivo fla pra mim dar uma olhada onde errei?
Muito interessante a galeria! Pelo que entendo consegui fazer igualzinho mas não funcinou tmb…
Gostaria de conseguir fazer funcionar.
Abraço.
NÃO FUNCIONA!!!!!
Augusto, meu E-mail está no final do site, você pode me enviar suas dúvidas que eu te ajudo a soluciona-las.
galera eu to comecando agora a mexer com o flash e ja encontrei o problema desse tuto, na verdade ele esta funcionando perfeitamente o unico problema está na configuração do XML que as tags tem que ser fechadas corretamente, quem trabalha com sites sabe de cara que ta errado:
<image<
o certo seria:
sendo assim o codigo do flash nao encontra nenhuma imagem pra carregar, eu fiz aqui e foi belezinha ^^ parabens gostei muito do seu tuto vlws natan
Olá Rafael.
Realmente, o tutorial tinha esse problema, isso aconteceu desde a mudança do portal do MXStudio. Tentei diversas vezes arrumar mas o problema sempre continuava, por milagre consegui arrumar, e agora tudo está certinho.
[]s
não funciona ele simplesmente n carrega nada e da erro em todo código na hora de testar
ja descobri oque da erro, sao as ” “, usadas ai no exemplo. aqui eu re coloquei tudo e deu certo ;D
Hola,
Es excelente el post. Pero me podrían ayudar, no funciona la galería. Estoy usando flash mx 2004.
gracias.
Salu2
Olá! Muio bom o resultado. Parabéns!
Mas no meu não funcionou infelizmente.
Criei todos os MovieClips com seus respectivos nomes na instância. E copiei e colei o código. E nada apareceu além dos MovieClips.
Será que esqueci de alguma coisa?
Sou leigo, estou começando agora.
Desde já, agradeço!
PERFEITO , FUNCIONOU DIREITINHO CARREGOU AS FOTOS O PROBLEMA É QUE OS BOTÕES PROX E ANT NÃO EXERCEM AS SUAS DEVIDAS FUNÇÕES OU SEJAM NÃO FUNCIONAM PODE ME AJUDAR COM ISSO ? OBRIGADO.
É, eu esqueci sim de alguma coisa.
De verificar os nomes na instância.
Hauhauhau!
Valeu
OI , FAZEM DEZ MINUTOS QUE POSTEI O ULTIMO COMENTARIO E ACHEI O PROBLEMA , ESTA TUDO FUNCIONANDO PERFEITAMENTE , APENAS APAGUEI A TAG QUE DESABILITA OS BOTÕES E DEU TUDO CERTO , PARABÉNS PELO POST E MUITO OBRIGADO , VALEU .
MEUS AMIGO NAO FUNCIONA DE JEITO NENHUM! ME SALVEM!!
ola, estou atrás de um script similar ao que vc passou aí em cima, porem que as fotos passes sozinhas para frente, gostaria de utilizar em fotos em destaque na pagina inicial…
abraços
NO MEU FUNCIONOU QUASE TUDO MENOS AS LEGENDAS E A PORCENTAGEMM AJUDAAAA PLEASE:D
Perfeito cara Valeeeuu!! Show seus tutoriais!!!
Galera nao vi nenhum problema em fazer essa galeria .. basta construir todos os componentes que ocupam o palco de forma correta e instanciá-los tbm de forma correta .. parabéns belíssima materia !
Nao consigo fazer sua galeria funcionar e ja mandei dois emails e vc até o momento nao deu resposta e ja se fazem alguns dias.
Muito atencioso de sua parte, nao acha???
to chateado e nao acredito que vc haje assim..
Obrigado
Zeus Paes