como linkar externamente uma galeria de fotos feita com uma classe?

[rucka55]

Olá pessoal,

Esse tutorial abaixo foi feito pelo Lucas Ferreira em outro fórum e se trata de uma galeria de fotos feita através de uma classe criada.

Muito bom!! Funciona que é uma beleza!

O problema é o seguinte: Como faz para chamar essa galeria externamente em outro arquivo?

Eu tentei e as fotos da galeria não aparecem :blink:

Alguém sabe como solucionar isso?

...Aí esta o link e o tutorial

-----------------------------------

http://www.imasters.com.br/artigo/3495/act...os_facillitada/

........................................

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.attributes.fp;

novaimg.img_g = f.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 já 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 artigo.

Até a próxima e abracetas!