Publicado em 12 de jan.

Tutorial Slideshow Dinâmico

Esse tutorial foi postado em meu blog:

berseck.wordpress.com

Bom galera, eu vo aqui mostrar como que se faz um slideshow dinâmico.

Aqui como deve ficar no final :)

/applications/core/interface/imageproxy/imageproxy.php?img=http://img397.imageshack.us/img397/9820/slide.jpg&key=93d3d062003c7d2f35b3729cb6fafc6791d6806e2084d64edf167b85121eeaa4" alt="Imagem Postada" />

Eu criei esse slideshow devido a necessidade que eu tive...

E então fiz ele ficar dinâmico para poder adicionar quantas imagens você quiser

Então vamos ao código!

//importo as funções necessárias

import mx.transitions.Tween;
import mx.transitions.easing.*;
import flash.display.Stage;

Stage.scaleMode = "noScale";

//Crio o loader
var mcl:MovieClipLoader = new MovieClipLoader();
//Crio os clips a serem carregados

var alvo:MovieClip = _root.createEmptyMovieClip("alvo", _root.getNextHighestDepth());
var alvo2:MovieClip = _root.createEmptyMovieClip("alvo2", _root.getNextHighestDepth());

//Pego o tamanho do palco

var StageW:Number = Stage.width;
var StageH:Number = Stage.height;

//Digo a posição inicial das fotos no palco - centralizando-as

alvo._x = StageW/2;
alvo._y = StageH/2;
alvo2._x = StageW/2;
alvo2._y = StageH/2;

//Pego os valores de altura, largura, x e y dos clips

var alvoX:Number = alvo._x;
var alvoY:Number = alvo._y;
var alvoWidth:Number = alvo._width;
var alvoHeight:Number = alvo._height;

var alvo2X:Number = alvo2._x;
var alvo2Y:Number = alvo2._y;
var alvo2Width:Number = alvo2._width;
var alvo2Height:Number = alvo2._height;

//Crio minha Array
var dados:Array = new Array;

//Crio meu contador
var atual:Number = new Number;

//Função que carrega as fotos do arquivo

var carrega:LoadVars = new LoadVars();
carrega.load('slide.html');
carrega.onLoad = function (success:Boolean){
	if(success){
 fotos = carrega.fotos;
 var dados = fotos.split(",");
 criaarray = function(){
 return(dados);
 }
 carregafilme(dados);
	}else{
 trace("Falha ao carregar os dados");
	}
};

//Função que carrega a primeira seqüencia de fotos

function carregafilme(dados){
	imagem1(dados, atual);
	timer = function(){
 loopeterno();
 clearInterval(tempo);
	}
	tempo = setInterval(timer, 3000);
};

// Função para avançar 1 foto

intervalo = function(){
	dados = criaarray();
	i = incrementa(dados);
	imagem2(dados, i);
	var anima1:Tween = new Tween(alvo, "_alpha", Linear.easeIn, 100, 0, 3, true);
	var anima2:Tween = new Tween(alvo2, "_alpha", Linear.easeIn, 0, 100, 3, true);
	anima2.onMotionFinished = function(){
 imagem1(dados, i);
	}
};

// Função para voltar 1 foto

volta = function(){
	dados = criaarray();
	i = decrementa(dados);
	imagem1(dados, i);
	var anima1:Tween = new Tween(alvo, "_alpha", Linear.easeIn, 0, 100, 3, true);
	var anima2:Tween = new Tween(alvo2, "_alpha", Linear.easeIn, 100, 0, 3, true);
	anima2.onMotionFinished = function(){
 imagem2(dados, i);
	}
};

// Função que carrega o primeiro clip

function imagem1(a, i){
	num = a[i];
	mcl.loadClip(a[i], alvo);
	mcl.addListener(this);
	return(num);
};

// Função que carrega o segundo clip

function imagem2(a, i){
	num = a[i];
	mcl.loadClip(a[i], alvo2);
	mcl.addListener(this);
	return(num);
};

// Função para aumentar 1 no numero de fotos

function incrementa(a){
	atual++
	if(atual > (a.length - 1)){
 atual = 0;
 return(atual);
	}
	return(atual);
};

// Função para diminuir 1 no numero de fotos

function decrementa(a){
	atual--;
	if(atual < 0){
 atual = (a.length - 1);
 trace(atual);
 return(atual);
	}
	return(atual);
};

//Chamo um loop eterno

loopeterno = function(){
	intervalo();
};

// Ao carregar

function onLoadInit(alvo) {
	redimensionar(alvo);
	alvo._x = alvoX + (alvoWidth/2) - (alvo._width/2);
	alvo._y = alvoY + (alvoHeight/2) - (alvo._height/2);
};

// Redimensiona

function redimensionar(alvo){
	alvo._xscale = 100;
	alvo._yscale = 100;
	if(alvo._width > alvo._height and alvo._width > StageW){
 alvo._xscale = ((StageW)*(100))/alvo._width;
 alvo._yscale = alvo._xscale;
	}
	else if(alvo._height > alvo._width and alvo._height > StageH){
 alvo._yscale = ((StageH)*(100))/alvo._height;
 alvo._xscale = alvo._yscale;
	} else {
 alvo._xscale = 100;
 alvo._yscale = 100;
	}
};

mcl.addListener(this);

looptimer = setInterval(loopeterno, 9000);Código todo comentado :)

Espero que vocês gostem

Qualquer coisa é só falar

Para baixar clique aqui

Abraços

Discussão (31)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Eder Fortunato· 12 de jan.

muito bom, valew por disponibilizar

com certeza será útil

[]´s

Rodrigo Henrique· 12 de jan.

Sou inciante, e nem deveria estar aqui. Mas esse código onde coloco? No bloco de notas no Macromedia Flash 8?

Gostaria que vocês me dessem uma "luz" sobre isso.

Estou fazendo um site aqui e gostaria de tirar minhas dúvidas.

Agradeço a atenção.

Luan Messias· 14 de jan.

Aew o/

Primeiramente muito Obrigado pelo script xD

mas infelizmente nao concegui usar li o codigo vi que ele pede um .html

queria saber o que esse html faz e de onde o script puxa as fotos http://forum.imasters.com.br/public/style_emoticons/default/pinch.gif

Valeu xD

Thiago de Oliveira Cruz· 14 de jan.

Ele pede o html que tem os dados...

Eu chamo aqui

var carrega:LoadVars = new LoadVars();
carrega.load('slide.html');
carrega.onLoad = function (success:Boolean){
	if(success){
 fotos = carrega.fotos;
 var dados = fotos.split(",");
 criaarray = function(){
 return(dados);
 }
 carregafilme(dados);
	}else{
 trace("Falha ao carregar os dados");
	}
};

Ali onde está slide.html é o site que chama esse swf que você colocou o código

Eu coloco o parametro:

E assim vou colocando as fotos lá

Você pode puxar também por um XML ou um dado pelo PHP....

Se só vai ter de modificar minha função onLoad para receber esse dado corretamente e converte-lo em uma Array... para que ele possa continuar as funções normais sem dar erro ;)

Boa sorte

Duvidas é só postar... mandar mp... etc

Abraços

Rodrigo Henrique· 9 de mar.

Bom, agradeço mas infelizmente não consegui, deu um erro.

Gostaria de saber se você tem uma vídeo-aulas ou vídeo-aulas para me passar sobre como criar menu, site, animações e etc em Flash. De como utilizar o Dreamweaver e tals.

Agradeço a atenção.

Thiago de Oliveira Cruz· 9 de mar.

bom se o seu inglês for bom ;)

www.gotoandlearn.com é um otimo site de referencia de video aula.

e o proprio site deles mesmo www.imasters.com.br é uma otima fonte de referencia.

tem também www.pontoflash.com........ tem varios foruns....... kirupa.com e assim vai

O negocio é o que você ta procurando então google neles...

E o arquivo de slideshow está desponivel para o download só baixar e testar... mudar as fotos que coloquei no html para umas que você deseje.

na linha

Abraços

Rodrigo Resende· 9 de mai.

nao deu certo..

quando eu abro a pagina slide.htm

aparece uma caixa em java script com o seguinte:

"This page requires AC_RUNACTIVECONTENT.js"

O que eu faço?

Thiago de Oliveira Cruz· 9 de mai.

Coloque esse arquivo que é gerado junto com o flash na pasta que está o flash ou dentro da pasta scripts que o flash criou ;)

Abraços

Matheus Brito· 9 de mai.

Muito bom, agora so uma dica quando postar um tuto poste um exemplo de como ficará, assim já da pra ter ideia do que vem pela frente.

Abs thiago

@O blog mudou o endereco foi?

Thiago de Oliveira Cruz· 9 de mai.

Foi :P

Pq tava f*** xD mexe com aquele blog ruim da vida lá... alem de não ter estatisticas nem nada...

Para eu ter ideia do que a galera vem procurar no blog né :)

Já no wordpress tem tudo ;)

Vou colocar um exemplo

Abraços

inx· 20 de ago.

To apanhando pra fazer ele com xml!

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

Thiago de Oliveira Cruz· 20 de ago.

Tenta fazer assim:

var xml:XML = new XML();
xml.ignoreWhite = true;
xml.load('slide.xml');
xml.onLoad = function (success:Boolean){
 if(success){
 var cn = xml.firstChild.childNodes;
 for(var i = 0; i < cn.length; i++){
 dados[i] = cn.childNodes;
 }
 carregafilme(dados);
 }else{
 trace("Falha ao carregar os dados");
 }
};

Tava aqui pensando agora...

Muito mal feito esse meu código O_O...

Tem como melhorar absurdos isso ae rs.

Depois eu refaço e posto denovo

Abraços

adsoncs· 28 de ago.

Berseck, cara me ajuda... como eu faria pra colocar rollover com descrição das imagens nesse .html ou da uma luz em xml.

Abração e valeu cara.

Thiago de Oliveira Cruz· 28 de ago.

Para colocar um rollOver...

Primeiramente você cria um ToolTip

ou seja um quadradinho que contenha um campo de texto dentro...

E ai na função de onLoadInit

você coloca alvo.onRollOver = nome da função...

Ou digita ali function e faz com que apareça um tooltip referente a aquele alvo

Abraços

Evandro Silva· 21 de set.

Amigo, estou precisando adapatr esse seu slideshow para rodar fotos com tempos diferentes (cada foto com um tempo especifico) sem botoes, quero que mude de imagem automaticamente e que cada foto fique na tela de acordo com o tempo que for especificado pra ela no xml.

Depois de exibir a ultima imagem do xml ele atualize o xml pra pegar possiveis alterações na lista de imagens.

Isso é possível?

Agradeço a ajuda.

Thiago de Oliveira Cruz· 21 de set.

Possivel é basta que você altere o código para tal...

Pois atualmente ele não faz isso...

Abraços

Evandro Silva· 21 de set.

Você nao poderia me ajudar com isso? Pois não consegui fazer as fotos ter tempo de duração diferentes.

Thiago de Oliveira Cruz· 21 de set.

Modifique a função intervalo... e timer

Para isso.

Tente fazer... e poste seus resultados lá na parte principal do forum para continuar a responder

Abraços

filhook· 10 de out.

Amigo ótimo tutorial. Consegui implementar tranquilo….só que quando joguei em um servidor online em um site como Background dinamico do site….na hora de trocar as imagens…como os fundos são um pouco grandes (em bytes) some a imagem e deppois q aparece….você tem como me ajudar a fazer um load da imagem e só trocar quando ela estiver totalmente carregada no Cache??

Da uma olhada ai no meu site: http://www.versatili.com.br

valeu.

Thiago de Oliveira Cruz· 11 de out.

Você precisa usar a função onLoadProgress() do MovieClipLoader

Faz um loop por todas as imagens carregando elas... ai sim coloca para iniciar o processo do slideshow é a melhor maneira...

Uma vez que esse código ai foi feito para um banner ou um pequeno slideshow não para um background de página.

Abraços

romoaldoberto· 10 de nov.

Agradeco autor pois testei e funcionou perfeitamente o arquivon swf.

Só tive que botar umas fotos e acrescentar o script "AC_RUNACTIVECONTENT".

FICOU PORRETA.

GRATO........

fefiorani· 29 de jan.

como adiciona esse script AC_RUNACTIVECONTENT"??

Thiago de Oliveira Cruz· 30 de jan.

O flash cria ou o dreamweaver

Ou procura no google que você tbm acha

abraços

ancorarte· 23 de fev.

>
O flash cria ou o dreamweaver

Ou procura no google que você tbm acha

abraços

Precisava de uma troca de imagens acontecendo como neste site

http://www.tevet.net/#/works/

que é diverso do padrao que adotei para o site(em construção)

http://www.leiladanziger.com/menu.html

Em Works, no link "Pallaksch" para este trabalho a cliente cismou de uma solução igual ao site do tevet...

tentei implementar o seguinte codigo(minha praia é desenho, mas quando o codigo complica um pouco, me desespero)

function init() {

	imagens = new Array();

	imagens[0] = "pal01.jpg";

	imagens[1] = "pal02.jpg";

	imagens[2] = "pal03.jpg";

	imagens[3] = "pal04.jpg";

	imagens[4] = "pal05.jpg";

	imagens[5] = "pal06.jpg";

	imagens[6] = "pal07.jpg";

	imagens[7] = "pal08.jpg";

	imagens[8] = "pal09.jpg";

 

	quantasImagens = imagens.length;

 

	IntervaloEntreImagens = 10;

 

	ImagemAtual = 0;

	createEmptyMovieClip("recebeImagens", 1);

	carregaImagem(imagem[0]);

}

init();

function carregaImagem(val) {

	recebeImagens.loadMovie(val);

	monitoraCarregamento = setinterval(this,"esperaPelaImagem", 100);

}

function esperaPelaImagem() {

	if (recebeImagens.getBytesLoaded()>4 && recebeImagens.getBytesLoaded()== recebeImagens.getBytesTotal()) {

 clearInterval(monitoraCarregamento);

 chamaTrocaImagem = setinterval(this,"trocaImagem",intervaloEntreImagens*1000);

	}

}

function trocaImagem() {

	clearInterval(chamaTrocaImagem);

	imagematual++;

	if (imagemAtual<quantasImagens) {

 carregaImagem(imagens[imagemAtual]);

	}

}

que colhi numa revista da Info de 2004...mas nao funcionou...

o flash nao acusou erros de script, qual a falha?

Gostei deste codigo pois nao possui botoes, me pareceu simples, posibilitando apenas a troca de imagens na camada 1;

na camada 2 eu tentaria carregar um outro swf com botoes para voltar ao Menu Works, botao para carregar texto, etc...com as imagens trocando como no site citado.

Virei a madruga e nada resolvi! :-/

me aventuro a fazer sites simples (alexandrevogler.com, cristinapape.com) mas esta cliente, tendo referencia estes sites sofisticados, esta me perturbando!

Abs,

Anderson

Thiago de Oliveira Cruz· 23 de fev.

O meu código tem botão por ter...

O que você quer q tem nesse site ai é simples...

É um código que pega um XML que tem fotos e faz um setInterval enquanto o usuário está inativo e muda a foto sem fade... sem nada

É um código simples de transição de imagem... não testei teu código... mas é isso que você procura... transição de imagem simples com XML

Tente baixar meu arquivo e remover os botões... e pode mudar para XML em vez de LoadVars vai funcionar do mesmo jeito.

Abraços