 |
Lucas Ferreira (contato@lucasferreira.com) Lucas Ferreira é webdeveloper, atuante na área de web desde 2001. Com experiência em diversas linguagens, dentre as principais PHP, JS e AS. Amante do Flash, tem contato com a ferramenta desde sua versão 4. |
Galeria de Fotos Facillitada
Olá Flashers de plantão,
Em minhas andanças pela internet, notei que as pessoas que trabalham com flash e estão em um nível ainda não avançado, possuem uma grande dificuldade em criar galerias de imagens, principalmente com paginação de registros. Bom, foi para facilitar um pouco, eliminar os cálculos de linhas, colunas, paginação e etc., que eu criei uma classe para facilitação disso, que pode ser baixada aqui, e deverá ser colocada na mesma pasta do arquivo .fla da galeria.
Esta galeria tem como princípio básico, dados vindos de um xml, que contem as informações sobre as imagens, uma thumb e a imagem em tamanho original.
Arquivo XML:
Copie o código abaixo, e personalize como quiser, sempre fazendo referencia a imagem pequena(fp) e imagem grande(fg), logo após, salve o arquivo com o nome de fotos.xml, no diretório em que vamos trabalhar.
<?xml version="1.0" encoding="UTF-8"?>
<fotos>
<foto fp="imgs/foto1p.jpg" fg="imgs/foto1g.jpg"/>
<foto fp="imgs/foto2p.jpg" fg="imgs/foto2g.jpg"/>
<foto fp="imgs/foto3p.jpg" fg="imgs/foto3g.jpg"/>
<foto fp="imgs/foto1p.jpg" fg="imgs/foto1g.jpg"/>
<foto fp="imgs/foto2p.jpg" fg="imgs/foto2g.jpg"/>
<foto fp="imgs/foto3p.jpg" fg="imgs/foto3g.jpg"/>
<foto fp="imgs/foto1p.jpg" fg="imgs/foto1g.jpg"/>
<foto fp="imgs/foto2p.jpg" fg="imgs/foto2g.jpg"/>
<foto fp="imgs/foto3p.jpg" fg="imgs/foto3g.jpg"/>
<foto fp="imgs/foto1p.jpg" fg="imgs/foto1g.jpg"/>
<foto fp="imgs/foto2p.jpg" fg="imgs/foto2g.jpg"/>
<foto fp="imgs/foto3p.jpg" fg="imgs/foto3g.jpg"/>
</fotos>
Iniciando no Flash:
Começaremos criando um arquivo no flash com o nome de galeria.fla com quatro camadas: actions, carregando..., layout, fundo, e a seguinte configuração de palco:
Logo após vá na camada layout, e desenhe um quadrado responsável pela área de carregamento da imagem grande, e o instancie como img_grande:
Depois crie um movie vazio posicionando aonde deverá ficar as miniaturas das imagens ainda na camada layout, e o instancie como conteinerInicial:
Crie mais um movie vazio, e posicione aonde deverá ficar os botões de páginação, e o instancie de paginacao:
Crie um mc, que deverá ficar somente na bilioteca, este com 3 camadas e 3 frames, a primeira vazia, com uma action de stop(); no primeiro frame. A segunda camada deve conter uma caixa de texto dinamic, não selecionável com o instance de pg. Na terceira camada, deverá conter os fundos do botão, no primeiro frame o botão normal, no segundo ao passar por cima, e no terceiro ao ser pressionado. Por fim nosso mc para o botão de páginação ficará assim:
Logo após clique com o botão direito neste mc na biblioteca, vá em Linkage, e defina as seguintes configurações:
Vamos aos Códigos
Tudo no primeiro frame, siga os passos.
1º Função de carregamento dos dados e inicialização:
//variaveis da sequencia...
var fotos:Array = new Array;
//função de inicio do projeto...
function init():Void {
//carregando xml...
var loadDados:XML = new XML();
loadDados.ignoreWhite = true;
loadDados.onLoad = function(sucess) {
if (sucess) {
//primeiro nó: fotos;
var f = this.firstChild.childNodes;
//listando conteúdo do nó e inserindo no array de fotos
for (var i = 0; i<f.length; i++) {
var novaimg:Object = new Object(); //criando o objeto de cada foto
novaimg.img_p = f[i].attributes.fp;
novaimg.img_g = f[i].attributes.fg;
fotos.push(novaimg); //inserindo objeto no array
}
//chamando função q faz a galeria...
criaGaleria();
}
};
//load no arquivo .xml
loadDados.load("fotos.xml");
}
2º Agora vamos a função responsável pela criação da galeria (criaGaleria):
//função que cria a galeria
function criaGaleria():Void {
car._visible = 0;
//preloader de imagens grande, usando MovieClipLoader...
//fica livre para usar como quiser...
var mvlIMG:MovieClipLoader = new MovieClipLoader();
var mvlOBJ:Object = new Object();
mvlOBJ.onLoadStart = function(){
car._visible = 1;
}
mvlOBJ.onLoadProgress = function(obj, bl, bt){
var p = (Math.round(bl/bt) * 100) //porcentagem carregada da imagem
car.p.text = "Carregando... " + p + "%";
}
mvlOBJ.onLoadComplete = function(){
car._visible = 0;
}
mvlIMG.addListener(mvlOBJ);
//
//criando sistema de galeria(quantidade de fotos, fotos por pagina, colunas, altura miniatura,
//
largura, espacamento x, e y);
_global.galeria1 = new Distribute(fotos.length, 8, 2, 80, 60, 4, 3);
//
var objGal1:Object = new Object();
objGal1.onDistStart = function() {
//ação de inicio da distribuição das fotos...
//verifica se o mc já está no palco, caso esteja, remove para nova página...
if(_root.miniaturas){
//removendo miniaturas anteriores na troca de pagina...
_root.miniaturas.removeMovieClip();
}
//duplicando o mc conteiner q vai conter as miniaturas, para um novo que poder ser removido...
_root.conteinerInicial.duplicateMovieClip("miniaturas", 1);
//definindo onde o mcConteiner deve aparecer...
miniaturas._x = conteinerInicial._x; // _x
miniaturas._y = conteinerInicial._y; // _y
//escondendo...
miniaturas._visible = 0;
};
//
objGal1.onDistUpdate = function(info:Object) {
//puxando da bliblioteca o mc com linkage miniatura, e ja posicionando de arquivo com o _x e _y
//passados pelo var info...
_root.miniaturas.attachMovie("miniatura", "fp_"+info.iObj, galeria1.nDepth(_root.miniaturas), {_x: info.x, _y: info.y});
//informando ou passando, para miniatura, qual é sua foto grande...
_root.miniaturas["fp_"+info.iObj].img_g = fotos[info.index].img_g;
//criando o movie clip alvo para receber a img pequena, dentro do mc Conteiner...
_root.miniaturas["fp_"+info.iObj].createEmptyMovieClip("img_p", 1);
//carregando thumb via loadMovie...
_root.miniaturas["fp_"+info.iObj].img_p.loadMovie(fotos[info.index].img_p);
//definindo ação de clique na miniatura, para ampliar...
_root.miniaturas["fp_"+info.iObj].onRelease = function(){
//usando o obj mvlIMG, para carregar a imagem grande...
mvlIMG.loadClip(this.img_g, img_grande);
}
};
objGal1.onDistEnd = function(info:Object) {
//ação de distribuição completa, exibindo mc Conteiner, chamado de miniaturas...
miniaturas._visible = 1;
};
//definindo ao objeto galeria1, os objetos e eventos que deve utilizar...
galeria1.addEventListener("onDistStart", objGal1);
galeria1.addEventListener("onDistUpdate", objGal1);
galeria1.addEventListener("onDistEnd", objGal1);
//
//montando paginação, pegase o nº de paginas e faz o paginador...
//função responsável pelo click dos bts da paginação...
function setPg(obj){
//restaurando todos bts, para o primeiro frame...
for (i=0; i<galeria1.nPages; i++) {
var mcPgAtual = this._parent["mcPg_" add i];
if(mcPgAtual != this) mcPgAtual.gotoAndStop(1); //todos voltam menos o atual...
}
//definindo o frame q deve mostrar...
this.lastFrame = 3;
//mostrando página solicitada...
var iAtual:Number = int(this.pg.text);
galeria1.showPage(iAtual);
}
for (i=0; i<galeria1.nPages; i++) {
//ataxando ao mc vazio, paginacao, os bts de página...
var mcPgAtual = paginacao.attachMovie("mcPg", "mcPg_" add i, i);
mcPgAtual._x = (i*(mcPgAtual._width+3)); //posicionando bt no mc...
mcPgAtual.pg.text = (i+1); //setando no bt, a pg dele...
//definindo eventos e ações paga o bt da página...
mcPgAtual.onRollOver = function(){
//pega o frame atual e armazena, caso o bt seja o bt de página clicada...
this.lastFrame = this._currentframe;
//ao passar por cima acende
this.gotoAndStop(2);
}
mcPgAtual.onRollOut = function(){
this.gotoAndStop(this.lastFrame);
}
mcPgAtual.onRelease = setPg;
}
//
//mostrando pagina 1 e setando o botão de pg 1...
paginacao["mcPg_0"].gotoAndStop(3);
galeria1.showPage(1);
}
3º Completando, o inicio do projeto:
//
//iniciando por fim, a galeria...
init();
Agora so publicar e testar nossa galeria:
Clique aqui para baixar os arquivos utilizados neste tutorial.
Até a próxima e abracetas... ;)