Jump to content
Fórum Script Brasil
  • 0

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


rucka55

Question

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!

Link to comment
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      152.1k
    • Total Posts
      651.8k
×
×
  • Create New...