Galeria de Imagens com XML
Boa Noite galera. Desculpem a demora, mas estava um pouco “lotado” de trabalho.
Hoje vou explicar pra vocês, ou tentar explicar rsrs, como se faz uma galeria de fotos em Flash utilizando XML.
Dando uma explicada meia por cima:
Vamos fazer uma galeria que as fotos, que vão deslizando para o lado, e se você clicar em alguma, ela abre a maior.
Mãos ao Flash!
Abra seu Flash.
Cria um quadro vermelho, +/- do tamanho da foto, só pra ter uma referência, não precisa ser exatamente.
Na verdade, o quadro pode ser de qualquer cor e qualquer tamanho, rsrs.
Depois coloque um Alpha Zero no Shape. Até aqui simples né?
Em seguida, aperte F8, e converta em MovieClip.
Então agora temos um quadro “invisível” porque está com _alpha zero.
De a “instace name” de “carrega” (sem aspas).
Novamente aperte F8 e converta em MovieClip novamente.
De a “instace name” de “miniaturas” (sem aspas).
Repita o procedimento: F8>MovieClip e dê o nome de “galeria” (sem aspas)
Pronto, quase tudo pronto rs. Mentira, falta um pouco ainda.
Dê um clique duplo sobre galeria, e você estará dentro dela.
Crie uma camada (layer) onde será a nossa Action:
//Definimos uma variável inicial, que será o contador de quantas vezes já executamos a função
i = 0;
//Criando a função atualiza();
function atualiza() {
//uma variavel que carregará nosso XML
var xml:XML = new XML();
//ignora espaços em branco
xml.ignoreWhite = true;
//assim que carregar o xml...
xml.onLoad = function() {
//um atalho para o caminho no XML
dados = xml.firstChild;
//deixa o mc miniaturas invisível
miniaturas._visible = false;
//variavel com quantidade de nós no XML
limite = dados.childNodes.length;
//caminho da foto localizado no XML (que vamos criar depois)
menor = dados.childNodes[i].attributes.foto;
//se (0+1) for menor ou igual ao total de nós no XML executa o seguinte código:
if ((i+1) <= limite) {
//duplica o mc miniaturas, renomeando como mc0, mc1, mc2, etc.
miniaturas.duplicateMovieClip("mc" + i,i);
//a posição x do mc duplicado é ao lado direito da anterior, +12 pixels de espaço entre elas
_parent.galeria["mc" + i]._x = (_parent.galeria["mc" + (i - 1)]._x + _parent.galeria["mc" + (i - 1)]._width) + 12;
//cria a variavel foto dentro da miniatura duplicada, passando o valor que veio do xml.
_parent.galeria["mc" + i].foto = menor;
//ao clicar na miniatura
_parent.galeria["mc" + i].onRelease = function() {
//faz qualquer coisa... insira o comando aqui.
}
//oculta um "loader" falso que vamos fazer depois.
_parent.galeria["mc" + i].carregaFalso._visible = false;
//adiciona +1 ao i que criamos no começo
i++;
}
};
//carrega o XML
teste.load("galeria.xml");
}
//executamos tudo isso que criamos agora.
atualiza();
Feito isso, dê um clique duplo dobre o movieClip miniaturas, para acertarmos os últimos detalhes.
Dentro desse MovieClip, tem uma layer, que é onde está o nosso “quadro invisivel”.
Crie uma layer ABAIXO dessa que tem o quadro, e crie um movieClip com uma animação que vai ser a que aparecerá enquanto a foto nao carregou. Hoje vocês vão aprender a fazer um “carregando” FAKE.
Isso mesmo. Porque fake? É porque ele está abaixo da camada de onde vai carregar a foto. Assim que a foto for carregada, irá sobrepor a animação. Genial né? (risos)
Agora cria outra camada (layer), pode ser em qualquer lugar, vamos usar para inserir o ActionScript.
Insira o seguinte código nesse frame:
//Cria um Loader que nos ajudará a carregar a foto
var loadd:MovieClipLoader = new MovieClipLoader();
//Cria um ouvinte pra manipular o loader.
var ouvinte:Object = new Object();
//Aqui carregamos a foto e jogamos no movieClip "carrega" que criamos.
loadd.loadClip(foto,carrega);
//Assim que terminar de carregar a foto...
ouvinte.onLoadInit = function() {
//suaviza a foto, tira o serrilhado...
carrega.forceSmoothing = true;
//Bom.. aqui estou deixando ela com 60% do tamanho, pra simular a miniatura.
carrega._xscale = 60;
carrega._yscale = 60;
//Essa função, ira executar novamente todo o processo, e carregar a foto seguinte.
_parent.atualiza();
}
loadd.addListener(ouvinte);
Explicando outra coisa do ouvinte que criei. Coloquei onLoadInit porque ele é executado imediatamente após carregar a foto.
Já o onLoadComplete, é executado quando “começa” a carregar a foto. Não! Eu não confundi. É isso mesmo. O onLoadComplete é quando por exemplo, começa 1% carregando a foto, e o onLoadInit, é depois dos 100%.
Então, depois que a foto aparecer, ele executa essa função de tirar o serrilhado, diminuir, etc. Se fizer antes, não vai dar certo.
Agora eu acho que só falta o XML pra terminar. Vou parar de enrolar vocês. Segue o XML:
<?xml version="0.0" encoding="UTF-8" ?>
<galeria>
<conjunto foto="fotos/foto_01.jpg" />
<conjunto foto="fotos/foto_02.jpg" />
<conjunto foto="fotos/foto_03.jpg" />
<conjunto foto="fotos/foto_04.jpg" />
<conjunto foto="fotos/foto_05.jpg" />
<conjunto foto="fotos/foto_06.jpg" />
</galeria>
Acharam que eu iria colocar o Fonte pra baixar? Hahaha. Hoje não. É cansativo, mas vale a pena aprender. Ou prefere ficar sempre dependendo de outros? Volte ao começo, e Releia! Bom trabalho.
Um abraço à todos, e um ótimo fim de semana.
Comentários