| Olá Comunidade. Vamos a mais uma Coluna de Flash. Atendendo a pedidos, iremos criar uma Galeria de Imagem com miniaturas, seguindo o mesmo efeito do Tutorial Passado:
Galeria de Imagem com XML
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 as imagens maiores, as menores e seus títulos. Salve como imagens.xml.
<?xml version="1.0" encoding="utf-8"?>
<imagens>
<foto>
<imagemG>imagem.jpg</imagemG>
<imagemP>imagemp.jpg</imagemP>
<texto>Moto Ayrton Senna</texto>
</foto>
<foto>
<imagemG>imagem1.jpg</imagemG>
<imagemP>imagemp1.jpg</imagemP>
<texto>Mclaren do Senna</texto>
</foto>
<foto>
<imagemG>imagem2.jpg</imagemG>
<imagemP>imagemp2.jpg</imagemP>
<texto>Capacete Senna</texto>
</foto>
<foto>
<imagemG>imagem3.jpg</imagemG>
<imagemP>imagemp3.jpg</imagemP>
<texto>Ferrari Shumacher</texto>
</foto>
<foto>
<imagemG>imagem4.jpg</imagemG>
<imagemP>imagemp4.jpg</imagemP>
<texto>Loro</texto>
</foto>
<foto>
<imagemG>imagem5.jpg</imagemG>
<imagemP>imagemp5.jpg</imagemP>
<texto>Trator do Sítio</texto>
</foto>
<foto>
<imagemG>imagem6.jpg</imagemG>
<imagemP>imagemp6.jpg</imagemP>
<texto>Carroça antiga</texto>
</foto>
</imagens>
Criando nossa Galeria
Vamos criar nossa galeria. Crie o Layout que achar melhor. Comecei com um palco com dimenções de 550×550. A disposição das camadas será essa:
Os nomes em vermelho são as instancias dos objetos:
holder: MovieClip em branco, posicione na camada Conteúdo
preloader: MovieClip, posicione na Camada Conteúdo
porcento: Campo de texto dinâmico, posicione na Camada Conteúdo
borda: MovieClip, posicione na Camada Conteúdo
recebe: MovieClip em branco, posicione na Camada Recebe
mascara: MovieClip, posicione na Camada Máscara
scrollBar: Componente criado, posicione na Camada ScrollBar
texto: Campo de texto dinâmico, posicione na Camada Conteúdo
Uma coisa muito importante. O MovieClip borda, precisa ter seu ponto de registro no meio. Como na imagem:
Vocês devem estar se perguntando. Que ScrollBar é esse. Esse ScrollBar foi criado por um de nossos Colunistas, Hugo Ferreira da Silva. Nós vamos seguir as mesmas regras de criação dos MovieClips. Para os que não conhecem ou não tenham criado, segue o Link do Tutorial:
ScrollBar para MovieClips e TextFields
O tutorial ele criou um ScrollBar vertical, nesse tutorial criaremos um na horizontal. Portanto, posicione os MovieClips na horizontal, sem segredos. Mesmo assim, precisamos adaptar o código para que o Scroll funcione na horizontal. Substitua os códigos dele por esse:
import mx.transitions.Tween;
import mx.transitions.easing.*;
/* Coloca no tamanho normal */
_xscale = _yscale=100;
/* Pode ser um movieclip ou um textfield */
var alvo = _parent[alvo];
/* Posição inicial do movieclip em y */
var sy:Number = alvo._x;
/* Altera o tamanho da barra */
track._width = track_width;
/* Tira a maozinha dos botões */
pan.useHandCursor = track.useHandCursor=false;
/* Mínimo em _y q o pan pode ir */
var miny:Number = Math.round(track._x);
/* Máximo em _y q o pan pode ir */
var maxy:Number = Math.round(track._x+track._width-pan._width);
/* Quando pressionar o pan */
pan.onPress = function() {
/* Inicia o arrastamento */
startDrag(this, false, miny, this._y, maxy, this._y);
};
/* Quando soltar o mouse */
pan.onRelease = pan.onReleaseOutside=function () {
/* para o arrastamento */
stopDrag();
};
/* Quando precionar o track */
track.onPress = function() {
/* Move o pan */
pan._x = _xmouse-pan._width/2;
/* Se o pan passar do valor máximo volta para o máximo */
if (pan._x>=maxy) {
pan._x = maxy;
}
/* Se o pan passar do valor mínimo volta para o mínimo */
if (pan._x<=miny) {
pan._x = miny;
}
};
/* Quando precionar o btn_esq */
bt_esq.onPress = function() {
esquerda = true;
direita = false;
};
/* Quando soltar o btn_esq */
bt_esq.onRelease = bt_esqu.onReleaseOutside=function () {
esquerda = false;
direita = false;
};
/* Quando precionar o bt_dir */
bt_dir.onPress = function() {
esquerda = false;
direita = true;
};
/* Quando soltar o btn_dir */
bt_dir.onRelease = bt_dir.onReleaseOutside=function () {
esquerda = false;
direita = false;
};
/* Cria o onEnterFrame */
this.onEnterFrame = function() {
if (esquerda) {
/* Se não estiver a ponto de ir além do que pode */
if (pan._x-1>miny) {
pan._x -= 10;
} else {
pan._x = miny;
}
}
/* Se estiver descendo */
if (direita) {
/* Se não estiver a ponto de ir além do que pode */
if (pan._x+1<maxy) {
pan._x += 10;
} else {
pan._x = maxy;
}
}
var s:Number = ((pan._x-miny)/(maxy-miny))*100;
var p:Number = (alvo._width-mascara)/100;
/* Move o objeto */
var twScrool:Tween = new Tween(alvo, "_x", Back.easeOut, alvo._x, sy-(p*s), 0.8, true);
};
Outra coisa, precisamos dizer algumas coisas ao ScrollBar criado, quem ele deve mover, o tamanho da barra e o tamanho da mascara. Deixaremos igual a essa imagem:
Reparem uma coisa. Criei o scrollBar com largura de 450, então devo deixar o campo Altura da Mascara com o tamanho do ScrollBar. O campo Alvo preenchemos com o MovieClip que queremos que faça o scroll, e Altura da Barra, pode até deixar em branco que não vai influenciar em nada para nós. Falta criarmos um MovieClip que vai receber as imagens pequenas:
alvo: MovieClip em branco, posicione na camada alvo
barra: MovieClip, posicione na camada barra
Com nossos MovieClips e ScrollBar criados e instanciados vamos ao ActionScript. Coloquem isso no primeiro frame na camada Actions:
/* Importamos a Classe Tween */
import mx.transitions.Tween;
import mx.transitions.easing.*;
/* Variável para saber se carregou */
var carregado:Boolean = false;
/* Criamos uma variável para o MovieClipLoader para as fotos maiores */
var meuMCL:MovieClipLoader = new MovieClipLoader();
/* Outra variável para o MovieClipLoader esse é para as fotos menores */
var pequenoMCL:MovieClipLoader = new MovieClipLoader();
/* Criamos um Listener para o MovieClipLoader */
var meuListener:Object = new Object();
/* Outro Listener */
var pequenoListener: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(ok) {
/* Se não teve erro */
if (ok) {
/* Dizemos qual é o primeiro Nó */
xmlNode = this.firstChild;
/* Criamos uma variável para o total de itens no XML */
total = xmlNode.childNodes.length;
/* Chamamos a função montaPequeno() */
montaPequeno();
/* Chamamos a função carregaImagem chamando a primeira imagem */
carregaImagem(0, 0);
} else {
/* Exibimos uma mensagem de erro caso não carregue o XML */
mensagem.text = "Erro ao Carregar o arquivo XML";
}
};
/* Função monta pequeno */
function montaPequeno() {
/* Variável para posicionar o MovieClip */
var inicio = 0;
/* Criamos um for para cada item do XML */
for (var i = 0; i<total; i++) {
/* Chamamos o MovieClip pequeno */
var mc:MovieClip = recebe.attachMovie("pequeno", "pequeno"+i, recebe.getNextHighestDepth());
/* Pocisionamos ele */
mc._x = inicio*mc._width+inicio*10;
/* Incrementamos inicio */
inicio++;
/* Carregamos a imagem pequena */
pequenoMCL.loadClip(xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue, mc.alvo);
/* Deixamos o MovieClip barra com _yscale igual a 0 */
mc.barra._yscale = 0;
/* Pegamos a imagem */
mc.bt.imagem = i;
/* Pegamos a legenda */
mc.bt.legenda = i;
/* Ao pressionar do da Imagem Pequena */
mc.bt.onPress = function() {
/* Se a variável carregado for igual a true */
if (carregado == true) {
/* Carregamos a Imagem selecionada */
carregaImagem(this.imagem, this.legenda);
/* Carregado igual a falso */
carregado = false;
/* Apagamos o texto */
texto.text = "";
}
};
}
/* Verificamos se o ScrollBar é menor que o MovieClip recebe */
if (recebe._width<=scrollBar._width) {
scrollBar.unloadMovie();
}
}
/* Usamos o Listener para saber o progresso do Carregamento */
pequenoListener.onLoadProgress = function(target_mc, loadedBytes, totalBytes) {
/* Criamos uma variável para saber o quanto carregou */
var carregados:Number = Math.round(loadedBytes/totalBytes*100);
/* Deixamos o MovieClip barra com _yscale igual a variável carregado */
target_mc._parent.barra._yscale = carregados;
};
/* Função para carregar a Imagem grande */
function carregaImagem(arquivo, txt) {
/* Deixamos o MovieClip preloader com _xscale igual a zero */
preloader._xscale = 0;
/* Deixamos o MovieClip preloader visível */
preloader._visible = true;
/* Descarregamos qualquer conteúdo que esteja no MovieClip holder */
holder.unloadMovie();
/* Deixamos o MovieClip holder com alpha igual a zero */
holder._alpha = 0;
/* Carregamos a imagem maior selecionada */
meuMCL.loadClip(xmlNode.childNodes[arquivo].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);
/* Movemos o MovieClip mascara */
var twma:Tween = new Tween(mascara, "_y", Back.easeOut, mascara._y, (borda._y+holder._height/2)+16, 1, true);
/* Movemos o MovieClip recebe */
var twr:Tween = new Tween(recebe, "_y", Back.easeOut, recebe._y, (borda._y+holder._height/2)+16, 1, true);
/* Movemos o ScrollBar */
var twsP:Tween = new Tween(scrollBar, "_y", Back.easeOut, scrollBar._y, (borda._y+holder._height/2)+recebe._height+22, 1, true);
/* Movemos o campo de texto */
var twtxt:Tween = new Tween(texto, "_y", Back.easeOut, texto._y, (borda._y+holder._height/2)+recebe._height+47, 1, true);
/* Mostramos o texto */
texto.text = xmlNode.childNodes[txt].childNodes[2].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, 0.6, true);
/* Quando a variavel twha acabar */
twha.onMotionFinished = function() {
/* Deixamos a variável carregado igual a true */
carregado = true;
};
};
};
}
/* Adicionamos um Listener ao MovieClipLoader */
meuMCL.addListener(meuListener);
/* Adicionamos um Listener ao MovieClipLoader */
pequenoMCL.addListener(pequenoListener);
Aqui um exemplo da Galeria funcionando
Considerações Finais
Hoje aprendemos como criar uma galeria de imagem mostrando miniaturas, tudo vindo de um XML. Mais uma vez utilizamos a Classe Tween para criar efeitos de forma rápida e mais bonitas.
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 |
