Galeria de Imagens ActionScript 3

• Tweet
• Sharebar

• Tweet

Olá Comunidade. Nesse meu primeiro tutorial voltado aos usuários do Flash CS3 e do ActionScript 3, irei mostrar criar uma Galeria de Imagens com XML. Essa galeria possui o mesmo efeito usado em um tutorial que fiz um tempo atrás usando ActionScript 2. Esse tutorial é para mostrar e ensinar algumas coisas sobre o ActionScript 3. Aos que nunca fizeram o tutorial, eis o link:

Galeria de Imagens com XML ActionScript 2

Pré-requisitos para esse tutorial

• Flash CS3 usando ActionScript 3
• Conhecimento básico de ActionScript 2 ou 3

Outro requisito para esse tutorial é ler uma matéria que eu fiz sobre as mudanças do ActionScript 3. Nesse artigo vocês encontrarão as principais mudanças e vão ajudar e muito no entendimento desse tutorial:

Algumas diferenças e novidades no ActionScript 3

Criando o XML

Vamos ao XML que conterá nossas Imagens e seus títulos. Salve o arquivo com o nome de imagens.xml.

   
      imagem.jpg
      Moto Ayrton Senna
   
   
      imagem1.jpg
      Mclaren do Senna
   
   
      imagem2.jpg
      Capacete Senna
   
   
      imagem3.jpg
      Ferrari Shumacher
   
   
      imagem4.jpg
      Loro
   
   
      imagem5.jpg
      Trator do Sítio
   
   
      imagem6.jpg
      Carroça antiga
   

Criando nossa Galeria

Vamos criar nossa galeria. Você poderá fazer da maneira que desejar. Comecei com um palco com dimenções de 550×420. Os nome em Vermelho são os nomes de instância de cada objeto.

holder: MovieClip em branco
borda: MovieClip com um retângulo desenhado dentro dele
preloader: MovieClip com uma barra desenhado dentro dele
porcento: campo de texto dinamico
ant: MovieClip para servir como botão
prox: MovieClip para servir como botão
texto: campo de texto dinamico

Os objetos podem posicionados em qualquer camada de seu arquivo, só tomem cuidado para posicionar o MovieClip holder acima do MovieClip borda. Uma coisa muito importante. Quando criar o MovieClip borda, ele tem que ter seu ponto de registro no meio. Como na Imagem:

Com nossos MovieClips criados e instanciados vamos ao ActionScript. Coloquem isso no frame dos os objetos criados anteriormente:

/* Importamos a Classe Tween */
import fl.transitions.Tween;
import fl.transitions.easing.*;
/* Importamos a Classe responsável pelos eventos da Classe Tween */
import fl.transitions.TweenEvent;
/* Criamos uma variável para armazenar o total de fotos no XML */
var total:Number = undefined;
/* Criamos uma instancia para a Classe XML */
var dadosXML:XML = new XML();
/* Criamos uma instancia para a Classe Loader */
/* Essa Classe vai carregar nossas imagens */
var loader:Loader = new Loader();
/* Criamos uma variável para saber qua a foto atual */
var fotoAtual:Number = 0;
/* Criamos ima instancia para a Classe URLoader */
/* Essa Classe vai carregar nosso arquivo XML */
var carregaXML:URLLoader = new URLLoader();
/* Adiciono um EventListener para a instancia da Classe URLLoader */
/* O evento será chamado quando a terminar de carregar o arquivo XML */
/* Quando terminar de carregar, chama a função monta */
carregaXML.addEventListener(Event.COMPLETE, monta);
/* Carregegamos o arquivo XML */
carregaXML.load(new URLRequest("imagens.xml"));
/* Função chamada ao carregar o arquivo XML */
function monta(event:Event) {
	/* Armazenamos nosso arquivo XML */
	dadosXML = new XML(event.target.data);
	/* Armazenamos o total de fotos no XML */
	total = dadosXML.foto.length();
	/* Chama a função mostraImagem chamando a primeira imagem */
	mostraImagem(0);
}
/* Função responsável por carregar as imagens do XML */
function mostraImagem(atual:Number):void {
	/* Descarrega qualquer imagem já carregada */
	loader.unload();
	/* Adiciono um EventListener para a instancia da Classe Loader */
	/* Esse listener será acionado sempre que a imagem estiver sendo carregada */
	/* Quando o listener for acionado, chamará a função loadProgress */
	loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadProgress);
	/* Adiciono um EventListener para a instancia da Classe Loader */
	/* Esse listener será acionado assim que a imagem terminar de ser carregada */
	/* Quando o listener for acionado, chamará a função loadComplete */
	loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);
	/* Carregamos a imagem */
	loader.load(new URLRequest(dadosXML.foto.imagem[atual]));
	/* Carregamos a imagem dentro do MovieClip holder */
	holder.addChild(loader);
	/* Deixamos o MovieClip holder com alpha igual a 0 */
	holder.alpha = 0;
	/* Usamos o removeEventListener para desativar o evento CLICK da Classe MouseEvent */
	/* Removemos o evento CLICK dos MovieClips prox e ant */
	prox.removeEventListener(MouseEvent.CLICK, proxPress);
	ant.removeEventListener(MouseEvent.CLICK, antPress);
	/* Desativamos os botões ant e prox */
	prox.enabled = false;
	ant.enabled = false;
}
/* Função responsável por exibir o progresso do carregamento da imagem */
function loadProgress(Event:ProgressEvent) {
	/* Criamos uma variável para saber quando carregou */
	var carregado:Number = Event.bytesLoaded;
	/* Criamos uma variável para saber o tamanho da imagem */
	var tamanho:Number = Event.bytesTotal;
	/* Modifica o tamanho do MovieClip preloader conforme a imagem estiver sendo carregada */
	preloader.scaleX = carregado/tamanho;
	/* Exibe a porcentagem carregada */
	porcento.text = Math.round(carregado/tamanho*100)+"%";
}
/* Função responsável por exibir a imagem carregada */
function loadComplete(event:Event) {
	/* Mostramos o texto da imagem */
	texto.text = dadosXML.foto.texto[fotoAtual];
	/* Aumentamos o MovieClip borda para o mesmo tamanho do MovieClip holder */
	/* Acrescentamos 16px para poder fazer uma borda */
	var tww:Tween = new Tween(borda, "width", Back.easeOut, borda.width, holder.width+16, 1, true);
	var twh:Tween = new Tween(borda, "height", Back.easeOut, borda.height, holder.height+16, 1, true);
	/* Movemos o MovieClip holder */
	var twhx:Tween = new Tween(holder, "x", Back.easeOut, holder.x, borda.x-holder.width/2, 1, true);
	var twhy:Tween = new Tween(holder, "y", Back.easeOut, holder.y, borda.y-holder.height/2, 1, true);
	/* Movemos o MovieClip ant */
	var twant:Tween = new Tween(ant, "y", Back.easeOut, ant.y, (borda.y+holder.height/2)+8, 1, true);
	/* Movemos o MovieClip prox */
	var twpro:Tween = new Tween(prox, "y", Back.easeOut, prox.y, (borda.y+holder.height/2)+8, 1, true);
	/* Movemos o campo de texto dinamico */
	var twtxt:Tween = new Tween(texto, "y", Back.easeOut, texto.y, (borda.y+holder.height/2)+8+ant.height, 1, true);
	/* Adicionamos um EventListener para uma das instancias da Classe Tween criadas */
	/* Esse listener será disparado assim que o MovieClip holder terminar de se mover */
	/* Quando o listener for acionado, chamará a função termina */
	twhx.addEventListener(TweenEvent.MOTION_FINISH, termina);
}
/* Função chamada quando o MovieClip holder terminar de ser movido */
function termina(Event:TweenEvent) {
	/* Escondemos o MovieClip preloader */
	preloader.scaleX = 0;
	/* Apagamos o texto do campo porcento */
	porcento.text = "";
	/* Damos um efeito em alpha ao MovieClip holder */
	var twha:Tween = new Tween(holder, "alpha", Regular.easeOut, 0, 1, 1, true);
	/* Adicionamos um EventListener para a instancia da Classe Tween */
	/* Esse listener será disparado assim que o MovieClip holder tiver um alpha de 100% */
	/* Quando o listener for acionado, chamará a função alphaTerminou */
	twha.addEventListener(TweenEvent.MOTION_FINISH, alphaTerminou);
}
/* Função chamada quando o MovieClip holder tiver um alpha de 100% */
function alphaTerminou(Event:TweenEvent) {
	/* Adicionamos os EventListener novamente */
	prox.addEventListener(MouseEvent.CLICK, proxPress);
	ant.addEventListener(MouseEvent.CLICK, antPress);
	/* Habilitamos os MovieClips prox e ant */
	prox.enabled = true;
	ant.enabled = true;
}
/* Adicionamos um EventListener para os MovieClips prox e ant */
/* Esse listener será disparado assim que o Mouse for clicado sobre eles */
/* Quando o listener for acionado, chamará a função mudaImagem */
prox.addEventListener(MouseEvent.CLICK, proxPress);
ant.addEventListener(MouseEvent.CLICK, antPress);
/* Usando a propriedade buttonMode fazemos com que os MovieClips */
/* Passem a ter a mãozinha do Mouse */
prox.buttonMode = true;
ant.buttonMode = true;
/* Função que carrega uma outra imagem */
function proxPress(event:MouseEvent):void {
	/* Verifica se a foto atual é menor que o total de imagens */
	if (fotoAtual < (total-1)) {
		/* Incrementamos a variável fotoAtual */
		fotoAtual++;
		/* Chama a função mostraImagem */
		mostraImagem(fotoAtual);
	}
}
function antPress(event:MouseEvent):void {
	/* Verifica se a foto atual é maior que 0 */
	if (fotoAtual > 0) {
		/* Decrementa a variável fotoAtual */
		fotoAtual--;
		/* Chama a função mostraImagem */
		mostraImagem(fotoAtual);
	}
}

Aqui um Exemplo da Galeria funcionando.

Considerações Finais

O objetivo desse tutorial é fazer uma comparação da mesma galeria feita em ActionScript 2 dessa vez usando o ActionScript 3, ver quais funções mudaram, novas regras, etc. Não entrei em muitos detalhes sobre algumas funções pois esse não era o ojetivo principal, entrarei com mais detalhes em futuros tutoriais usando o ActionScript 3.

Uma dica aos que querem começar a aprender ActionScript 3, pegue seus projetos, tutoriais e aplicações feitas em ActionScript 2 tentem converter para o ActionScript 3. Apesar das novidades, não é tão complicado aprender se já tiver uma base no ActionScript 2, vocês irão se surpreender.

Gostaria de aproveitar a oportunidade e convidar todos os leitores a visitarem meu Portfolio Online, lá você poderão encontrar todos os meus trabalhos e tutoriais desenvolvidos: http://www.natanalves.com

Um abraço a todos e até a próxima.

Autor: Natan D. Alves – Moderador do Fórum de Flash & ActionSctipt MXSTUDIO

Qualquer dúvida envie um e-mail para natanalves@mxstudio.com.br ou acesse nosso fórum

Escrito por Natan D. Alves on janeiro 12, 2008. Arquivado em Flash. Você pode seguir as respostas a esse artigo pelo RSS 2.0. Você pode deixar respostas para esse artigo