Visualizador de imagens em flash/xml

[alj 0]

Olá, pessoal,

recebi hoje a seguinte ordem de serviço:

 

 

VISUALIZADOR DE IMAGENS EM FLASH

 

1. O Flash deverá ler as figuras de um arquivo XML.

2. O nome do arquivo XML vai variar de página para página, portanto tem que ser passado do HTML pro Flash usando o parâmetro FlashVars. Tem um tutorial (em inglês) disponível em http://www.permadi.com/tutorial/flashVars/index.html.

3. Abaixo está um exemplo do arquivo XML, que será criado a partir de uma base de dados:

 

 

<?xml version="1.0" encoding="iso-8859-1"?>

<settings>

<display time="5000" />

<transition effect="fade" time="2000" />

</settings>

<images>

<image>http://www.iadb.org/sds/images/img05.gif</image>

<image>http://www.iadb.org/sds/images/global.jpg</image>

</images>

 

 

4. Explicação do XML:

 

a. <settings> tem funções de controle do filme em Flash:

• <display> controla o tempo (time) de exibição de cada figura em milisegundos.

• <transition> controla o efeito (effect) de transição e a duração (time) da transição. Os efeitos podem ser “fade” – a figura atual desaparece enquanto uma outra aparece – ou “wipe” – a nova figura desliza sobre a antiga. A duração da transição (time) também está em milisegundos.

 

b. <images> contém a lista de figuras.

Cada <image> traz referência à URL de uma única figura.

 

 

A questão é que estou precisando desenvolver este visualizador

da maneira mais fácil, simples e rápida possível...

 

bom, é isso...

 

alguém pode me ajudar com alguma dica de como fazer o trabalho?

 

Desde já, agradeço a atenção...

:)

[Antoniosp 2]

Um bom começo:

 

http://forum.imasters.com.br/index.php?showtopic=197379

 

Abraço

[alj 0]

http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

 

Muito obrigado, Antonio!

 

Através da sua dica consegui desenvolver.

Alterei um pouco o código que esta no link que me passou

e resolvi o meu problema perfeitamente.

 

Mais uma vez, Muito Obrigado!

 

Bom,

vou deixar o código final que fiz

com base no código que o Antonio me passou.

Se alguém quiser fazer um visualizador como o meu, basta

criar um novo documento no flash,

copiar o código abaixo e colocar no primeiro frame do filme:

 

 

//Importando as classes para fazer os movimentos dinâmicos

import mx.transitions.*;

import mx.transitions.easing.*;

 

//Criando o xml e fazendo ele ignorar espaços em branco

var tickersXML:XML = new XML();

tickersXML.ignoreWhite = true;

 

//Quando o xml carregar com sucesso executar as funções

tickersXML.onLoad = function(success:Boolean):Void {

 

//(o xml é carregado na última linha do script)

if (success) {

 

//Número total de tickers

n_tickers = tickersXML.childNodes[1].childNodes.length;

//Duração de cada ticker

tempo = tickersXML.childNodes[0].childNodes[0].attributes.time;

//Duração de cada transição

trans_tempo = tickersXML.childNodes[0].childNodes[1].attributes.time;

//Efeito de transição usado

trans_effect = tickersXML.childNodes[0].childNodes[1].attributes.effect;

 

 

/*O ticker_atual será o último pois ao executar a função de

proximoTicker() ele passará automaticamente para o 1º resultado*/

ticker_atual = n_tickers;

 

 

 

//Chamando o primeiro ticker

proximoTicker();

 

//Programando para chamar o próximo a cada 5 seg

ticker_intervalo = setInterval(proximoTicker, tempo);

 

} else {

}

};

 

//Função que passa para o próximo ticker

function proximoTicker():Void {

 

//Se o ticker atual não for o último, aumenta em 1, se for ele vai para 0

ticker_atual < n_tickers - 1 ? ticker_atual++ : ticker_atual = 0;

//Carregando a foto

carregaFoto(tickersXML.childNodes[1].childNodes[ticker_atual].firstChild.nodeVal

ue);

//Definindo o link para quando clicar na foto

 

}

 

//Criando os dois movieclips para carregar as fotos

this.createEmptyMovieClip("fotomc1", 2);

this.createEmptyMovieClip("fotomc2", 1);

 

//Posicionando os mcs no palco

fotomc1._x = fotomc2._x = 0;

fotomc1._y = fotomc2._y = 0;

 

//Definindo qual está em cima (por causa dos fades)

fotoCima = fotomc1;

 

//Colocando a legenda por cima das fotos

legenda_mc.swapDepths(3);

 

//Função que carrega a foto e cria os fades

function carregaFoto(scr:String):Void {

 

//Parando o fade da foto anterior caso ainda esteja ocorrendo

fotoIn.stop();

 

//Criando o mcloader

var mclFoto:MovieClipLoader = new MovieClipLoader();

 

//Carregando a foto

mclFoto.loadClip(scr, fotoCima);

 

//Quando terminar de carregar a foto

this.onLoadInit = function():Void {

 

//Fazer o fadeIn com a foto de cima. Dividi o trans_tempo por 1000 pois no xml ta em milisegundos

fotoIn = new Tween(fotoCima, trans_effect, Regular.easeInOut, 0, 100, trans_tempo/1000, true);

 

//Quando terminar a transição de fotos

fotoIn.onMotionFinished = function():Void {

 

//Pegar a foto de cima e jogar para trás

if (fotoCima == fotomc1) {

 

//Tirando o clip do fotomc2 que irá para frente

mclFoto.unloadClip(fotomc2);

fotomc1.swapDepths(fotomc2);

 

//Ao ir pra frente estará preparado para receber outra foto

fotoCima = fotomc2;

} else {

//Mesma coisa, caso seja o fotomc2 que estiver em cima

mclFoto.unloadClip(fotomc1);

fotomc2.swapDepths(fotomc1);

fotoCima = fotomc1;

}

};

};

//Adicionando o listener ao mcloader

mclFoto.addListener(this);

}

 

 

//Desenvolvido

if(ticker_atual < n_tickers - 1) {

ticker_atual++;

} else {

ticker_atual = 0;

}

 

//Carregando o XML e dando início ao processo

tickersXML.load("tickers.xml");

 

 

Agora crie um XML chamado:

tickers.xml

 

 

o conteúdo deste arquivo XML será:

 

 

<?xml version="1.0" encoding="iso-8859-1"?>

 

<settings>

<display time="5000"/>

<transition effect="_alpha" time="3000"/>

</settings>

 

<images>

<image>foto1.jpg</image>

<image>foto2.jpg</image>

<image>foto3.jpg</image>

<image>foto4.jpg</image>

<image>foto5.jpg</image>

</images>

 

 

Salve o XML e o SWF na mesma pasta

que estão as suas imagens (foto1.jpg, foto2.jpg, etc...)

 

Pronto!

Feito tudo certo, tudo funcionará corretamete....

^_^

[Ivan.Teles 23]

e ai alj beleza cara, eu segui seu codigo e funcionou de boa.

 

so que tenho dois problemas,

 

1 - não carrega as imagens na internet quando online.

2 - o efeito de aparecer a proxima, ele aperece a proxima sobre a anterior mas não some a anterior, depois de aparecido a proxima 100% sobre a anterior ele some de uma vez com a anatrior, o funcionamento é assim mesmo?

 

desde já agradeço sua atenção!

[Drea 0]

Olá Alj,

usei seu código e ele de início funcionou perfeitamente.

Porém, eu preciso de não 1, mas 4 visualizadores de imagens no mesmo .fla

Serão 4 movie clipes, um ao lado do outro passando essas imagens com o efeito de transição que você fez.

Cada movie clipe puxa de um xml diferente.

Copiei todo o código para outro frame de actions e fui mudando os nomes de tudo para não haver variáveis nem movie clipes com nomes repetidos, porém, deu problema nos efeitos: no primeiro mc, não tem mais o alpha na transição, mas expoe cada foto durantre o tempo correto; e no segundo mc, tem o efeito alpha, mas assim que a foto aparece 100% ela some e fica em branco a até que a próxima foto venha com alpha, e assim sucessivamente.

 

No 1º frame da camada actions1, tem este código:

//Importando as classes para fazer os movimentos dinâmicos
import mx.transitions.*;
import mx.transitions.easing.*;

//Criando o xml e fazendo ele ignorar espaços em branco
var arquivo:XML = new XML();
arquivo.ignoreWhite = true;

//Quando o xml carregar com sucesso executar as funções
arquivo.onLoad = function(success:Boolean):Void {

//(o xml é carregado na última linha do script)
if (success) {

//Número total de fotos
n_fotos = arquivo.childNodes[1].childNodes.length;
//Duração de cada foto
tempo = arquivo.childNodes[0].childNodes[0].attributes.time;
//Duração de cada transição
trans_tempo = arquivo.childNodes[0].childNodes[1].attributes.time;
//Efeito de transição usado
trans_effect = arquivo.childNodes[0].childNodes[1].attributes.effect;


/*A foto_atual será a última pois ao executar a função de
proximafoto() ele passará automaticamente para o 1º resultado*/
foto_atual = n_fotos;



//Chamando a primeira foto
proximafoto();

//Programando para chamar a próxima a cada 5 seg
foto_intervalo = setInterval(proximafoto, tempo);

} else {
}
};

//Função que passa para a próxima foto
function proximafoto():Void {

//Se o foto atual não for a última, aumenta em 1, se for ele vai para 0
foto_atual < n_fotos - 1 ? foto_atual++ : foto_atual = 0;
//Carregando a foto
carregaFoto(arquivo.childNodes[1].childNodes[foto_atual].firstChild.nodeValue);
//Definindo o link para quando clicar na foto

}

//Criando os dois movieclips para carregar as fotos
this.createEmptyMovieClip("fotomc1", 2);
this.createEmptyMovieClip("fotomc2", 1);

//Posicionando os mcs no palco
fotomc1._x = fotomc2._x = 2;
fotomc1._y = fotomc2._y = 25;

//Definindo qual está em cima (por causa dos fades)
fotoCima = fotomc1;

//Colocando o brasão por cima das fotos
brasao_mc.swapDepths(3);

//Função que carrega a foto e cria os fades
function carregaFoto(scr:String):Void {

//Parando o fade da foto anterior caso ainda esteja ocorrendo
fotoIn.stop();

//Criando o mcloader
var mclFoto:MovieClipLoader = new MovieClipLoader();

//Carregando a foto
mclFoto.loadClip(scr, fotoCima);

//Quando terminar de carregar a foto
this.onLoadInit = function():Void {

//Fazer o fadeIn com a foto de cima. Dividi o trans_tempo por 1000 pois no xml ta em milisegundos
fotoIn = new Tween(fotoCima, trans_effect, Regular.easeInOut, 0, 100, trans_tempo/1000, true);

//Quando terminar a transição de fotos
fotoIn.onMotionFinished = function():Void {

//Pegar a foto de cima e jogar para trás
if (fotoCima == fotomc1) {

//Tirando o clip do fotomc2 que irá para frente
mclFoto.unloadClip(fotomc2);
fotomc1.swapDepths(fotomc2);

//Ao ir pra frente estará preparado para receber outra foto
fotoCima = fotomc2;
} else {
//Mesma coisa, caso seja o fotomc2 que estiver em cima
mclFoto.unloadClip(fotomc1);
fotomc2.swapDepths(fotomc1);
fotoCima = fotomc1;
}
};
};
//Adicionando o listener ao mcloader
mclFoto.addListener(this);
}


//Desenvolvido
if(foto_atual < n_fotos - 1) {
foto_atual++;
} else {
foto_atual = 0;
}

//Carregando o XML e dando início ao processo
arquivo.load("fotos01.xml");

E no 1º frame da camada actions2, tem este código:

//Importando as classes para fazer os movimentos dinâmicos
import mx.transitions.*;
import mx.transitions.easing.*;

//Criando o xml e fazendo ele ignorar espaços em branco
var arquivo02:XML = new XML();
arquivo02.ignoreWhite = true;

//Quando o xml carregar com sucesso executar as funções
arquivo02.onLoad = function(success:Boolean):Void {

//(o xml é carregado na última linha do script)
if (success) {

//Número total de fotos
n_fotos02 = arquivo02.childNodes[1].childNodes.length;
//Duração de cada foto
tempo02 = arquivo02.childNodes[0].childNodes[0].attributes.time;
//Duração de cada transição
trans_tempo02 = arquivo02.childNodes[0].childNodes[1].attributes.time;
//Efeito de transição usado
trans_effect02 = arquivo02.childNodes[0].childNodes[1].attributes.effect;


/*A foto_atual será a última pois ao executar a função de
proximafoto() ele passará automaticamente para o 1º resultado*/
foto_atual02 = n_fotos02;



//Chamando a primeira foto
proximafoto02();

//Programando para chamar a próxima a cada 5 seg
foto_intervalo02 = setInterval(proximafoto02, tempo);

} else {
}
};

//Função que passa para a próxima foto
function proximafoto02():Void {

//Se o foto atual não for a última, aumenta em 1, se for ele vai para 0
foto_atual02 < n_fotos02 - 1 ? foto_atual02++ : foto_atual02 = 0;
//Carregando a foto
carregaFoto02(arquivo02.childNodes[1].childNodes[foto_atual02].firstChild.nodeValue);
//Definindo o link para quando clicar na foto

}

//Criando os dois movieclips para carregar as fotos
this.createEmptyMovieClip("fotomc3", 4);
this.createEmptyMovieClip("fotomc4", 3);

//Posicionando os mcs no palco
fotomc3._x = fotomc4._x = 184;
fotomc3._y = fotomc4._y = 25;

//Definindo qual está em cima (por causa dos fades)
fotoCima02 = fotomc3;

//Colocando o brasão por cima das fotos
brasao_mc.swapDepths(3);

//Função que carrega a foto e cria os fades
function carregaFoto02(scr:String):Void {

//Parando o fade da foto anterior caso ainda esteja ocorrendo
fotoIn02.stop();

//Criando o mcloader
var mclFoto02:MovieClipLoader = new MovieClipLoader();

//Carregando a foto
mclFoto02.loadClip(scr, fotoCima02);

//Quando terminar de carregar a foto
this.onLoadInit = function():Void {

//Fazer o fadeIn com a foto de cima. Dividi o trans_tempo por 1000 pois no xml ta em milisegundos
fotoIn02 = new Tween(fotoCima02, trans_effect02, Regular.easeInOut, 0, 100, trans_tempo02/1000, true);

//Quando terminar a transição de fotos
fotoIn02.onMotionFinished = function():Void {

//Pegar a foto de cima e jogar para trás
if (fotoCima02 == fotomc3) {

//Tirando o clip do fotomc2 que irá para frente
mclFoto02.unloadClip(fotomc4);
fotomc3.swapDepths(fotomc4);

//Ao ir pra frente estará preparado para receber outra foto
fotoCima02 = fotomc4;
} else {
//Mesma coisa, caso seja o fotomc2 que estiver em cima
mclFoto02.unloadClip(fotomc3);
fotomc4.swapDepths(fotomc3);
fotoCima02 = fotomc3;
}
};
};
//Adicionando o listener ao mcloader
mclFoto02.addListener(this);
}


//Desenvolvido
if(foto_atual02 < n_fotos02 - 1) {
foto_atual02++;
} else {
foto_atual02 = 0;
}

//Carregando o XML e dando início ao processo
arquivo02.load("fotos02.xml");

Sabem como me ajudar?

[alj 0]

e ai alj beleza cara, eu segui seu codigo e funcionou de boa.

 

so que tenho dois problemas,

 

1 - não carrega as imagens na internet quando online.

2 - o efeito de aparecer a proxima, ele aperece a proxima sobre a anterior mas não some a anterior, depois de aparecido a proxima 100% sobre a anterior ele some de uma vez com a anatrior, o funcionamento é assim mesmo?

 

desde já agradeço sua atenção!

 

Hei jivandf, o código carrega online sim...

Dá uma revisada e vê se você botou os endereços corretamente.

 

neste link você vê tudo funcionando online:

http://www.coneas.com.br/2007/template_are...g=inscri%E7%E3o

 

no link, as imagens que aparecem no topo estão rodando por este código.

 

Abraço!

[Ivan.Teles 23]

alj, funcionou sim.. era so questão de localização das imagens!

[Bernardo Medeiros 0]

ALJ, agradeço muito a você pelo código postado aqui.

 

A partir deste, vou tentar implementar botões de controle para o ticker. Assim o usuário poderá voltar a um determinado ticker e pausar a sequência.

 

A propósito, esse código funciona com arquivos .swf?

 

 

[]'s

[alj 0]

ALJ, agradeço muito a você pelo código postado aqui.

 

A partir deste, vou tentar implementar botões de controle para o ticker. Assim o usuário poderá voltar a um determinado ticker e pausar a sequência.

 

A propósito, esse código funciona com arquivos .swf?

 

 

[]'s

 

De nada, Bernardo.

Encontrar ajuda é bom e por isso procuro ajudar no que posso... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Sobre os botões e o swf, pode tentar que dá pra fazer através deste código sim.

 

Neste endereço:

http://www.coneas.com.br

 

Na bola que aparece no centro da página,

roda este código exibindo swfs e jpgs e com os botões de avançar e voltar.

 

Porém os botões não funcionam muito bem...

Acho que é porque, na época, esqueci de botar um preloader de todos os tickers antes de começar a rodar.

Aí, quando se clica em avançar ou voltar, a resposta não é imediata pois o ticker é carregado na hora...

Bom, pelo menos dá pra ver que é possível fazer o que você quer a partir deste código.

 

Abraço!

[filipecrosk 0]

Olá amigos,

 

retomando este tópico..

 

primeiramente gostaria de agradecer ao Alj aí pelo código, peguei e funcionou bacana aqui.

 

Mas gostaria de melhorar ele ainda um pouco mais, mas não sou fera em Actionscript, então se alguém puder me ajudar....

 

O que eu gostaria?

Gostaria de carregar 2 imagens por vez.

Porque?

Porque aí quando carregasse as 2 primeiras imagens, ele começava a animação, e aí mostrava a primeira imagem, depois fazia transição para a segunda. E quando fosse mostrar a 3ª imagem ele já teria carregado ela e a 4ª e assim sucessivamente.

 

O que você acha? é viavel???