Galeria de Imagens 2 ActionScript 3

• Tweet
• Sharebar

• Tweet

Olá Comunidade do MXStudio, nesse meu primeiro tutorial de 2009 irei mostrar a vocês como criar uma Galeria de Imagens com miniaturas usando XML e ActionScript 3.

Um tempo atrás fiz a mesma galeria só que usava ActionScript 2, e já recebi diversos E-mails pedindo um tutorial do mesmo tipo usando o ActionScript 3. Quem estiver interesse em fazer o tutorial usando ActionScript 2, segue o link do tutorial.

http://www.mxstudio.com.br/flash/galeria_de_imagens_com_xml_2/

Os pré-requisitos para esse tutorial são:

• Flash CS3 ou Flash CS4 usando ActionScript 3
• Conhecimento com interação do Flash com XML

Criando o XML

Vamos começar pelo arquivo XML. O arquivo XML irá conter o nome das imagens que vão ser usadas como miniatura e da imagem grande, além da legenda que será exibida. Tanto o arquivo XML quanto as imagens precisam estar no mesmo diretório do arquivo FLA do Flash. Salvem o arquivo XML com o nome de imagens.xml.

    
        imagem.jpg
	imagemp.jpg
        Moto Ayrton Senna
    
    
        imagem1.jpg
	imagemp1.jpg
        Mclaren do Senna
    
    
        imagem2.jpg
	imagemp2.jpg
        Capacete Senna
    
    
        imagem3.jpg
	imagemp3.jpg
        Ferrari Shumacher
    
    
        imagem4.jpg
	imagemp4.jpg
        Loro
    
    
        imagem5.jpg
	imagemp5.jpg
        Trator do Sítio
    
    
        imagem6.jpg
	imagemp6.jpg
        Carroça antiga
    

Criando a Galeria

Vamos para o Flash montar nosso layout. Criem um arquivo em ActionScript 3 e o tamanho do palco de 550×550. Recomendo que criem as seguintes camadas para deixar o layout mais organizado.

Na camada ScrollBar, usaremos o ScrollBar criado por um de nossos colunistas de Flash, o Hugo Ferreira da Silva. Basta seguir o tutorial que ele fez, mudando o layout do ScrollBar para ficar na horizontal. Segue o link do tutorial:

ScrollBar para MovieClips e TextFields

Além da mudança do layout, vamos modificar o ActionScript, pois o tutorial foi feito ActionScript 2, e com essas ações não irá funcionar. Por isso, utilizem as seguintes ações:

/* Importamos a Classe Tween */
import fl.transitions.Tween;
import fl.transitions.easing.*;
/* Variável para o intervalo */
var intervalo:Number = new Number();
/* Variáveis booleanas para saber quando o Scroll está indo para direita ou esquerda */
var esquerda:Boolean;
var direita:Boolean;
/* Variável que recebe o tamanho da mascara para o Scroll */
var mascara:Number;
/* Variável que armazena o alvo a ser movido */
var alvo = parent[alvo];
/* Variável que armazena a posição inicial do alvo */
var sy:Number = alvo.x;
/* Variável que armazena o width do track do ScrollBar */
var track_width:Number;
/* Mínimo valor em que o MovieClip track pode se movimentar no eixo X */
var minx:Number = Math.round(track.x);
/* Máximo valor em que o MovieClip track pode se movimentar no eixo X */
var maxx:Number = Math.round(track.x+track.width-pan.width);
/* Adicionamos um eventListener para o MovieClip pan */
/* Usaremos o evento de mouse MOUSE_DOWN chamando a função panPress */
/* Esse evento é equivalente ao onPress no ActionScript 2 */
pan.addEventListener(MouseEvent.MOUSE_DOWN, panPress);
/* Adicionamos um eventListener para o MovieClip track */
/* Usaremos o evento de mouse MOUSE_DOWN chamando a função trackPress */
/* Esse evento é equivalente ao onPress no ActionScript 2 */
track.addEventListener(MouseEvent.MOUSE_DOWN, trackPress);
/* Adicionamos um eventListener para o MovieClip bt_esq */
/* Usaremos o evento de mouse MOUSE_DOWN chamando a função btEsqPress */
/* Esse evento é equivalente ao onPress no ActionScript 2 */
bt_esq.addEventListener(MouseEvent.MOUSE_DOWN, btEsqPress);
/* Adicionamos um eventListener para o MovieClip bt_esq */
/* Usaremos o evento de mouse MOUSE_UP chamando a função btEsqRelease */
/* Esse evento é equivalente ao onRelease no ActionScript 2 */
bt_esq.addEventListener(MouseEvent.MOUSE_UP, btEsqRelease);
/* Adicionamos um eventListener para o MovieClip bt_dir */
/* Usaremos o evento de mouse MOUSE_DOWN chamando a função btDirPress */
/* Esse evento é equivalente ao onPress no ActionScript 2 */
bt_dir.addEventListener(MouseEvent.MOUSE_DOWN, btDirPress);
/* Adicionamos um eventListener para o MovieClip bt_dir */
/* Usaremos o evento de mouse MOUSE_UP chamando a função btDirRelease */
/* Esse evento é equivalente ao onRelease no ActionScript 2 */
bt_dir.addEventListener(MouseEvent.MOUSE_UP, btDirRelease);
/* Função panPress disparada pelo eventListener do MovieClip pan */
function panPress(event:MouseEvent) {
	/* Definimos um limite para movimentar o MovieClip pan */
	var limite:Rectangle = new Rectangle(minx, pan.y, maxx-minx, pan.y);
	/* Inicia o drag dentro do limite */
	pan.startDrag(false, limite);
	/* Adicionamos um listener ao palco (stage) para disparar a função panRelease */
	/* Usa esse listener no palco, pois o ActionScript 3 não possui o evento onReleaseOutside */
	/* E por isso precisa adicionar um evento MOUSE_UP ao palco */
	/* Pois somente assim tem como verificar se aconteceu um onReleaseOutside */
	/* E mesmo que o usuário mantenha o mouse sobre o MovieClip será disparada essa função */
	stage.addEventListener(MouseEvent.MOUSE_UP, panRelease);
}
/* Função panRelease disparada pelo eventListener do stage */
function panRelease(event:MouseEvent) {
	/* Verifica se o alvo não é o MovieClip pan */
	if (event.target.name != pan) {
		/* Remove o eventListener do stage */
		stage.removeEventListener(MouseEvent.MOUSE_UP, panRelease);
	}
	/* Para o drag do MovieClip pan */
	pan.stopDrag();
}
/* Função trackPress disparada pelo eventListener do MovieClip track */
function trackPress(event:MouseEvent) {
	/* Move o MovieClip pan */
	pan.x = mouseX-pan.width/2;
	/* Se o MovieClip pan passar do valor máximo volta para o máximo */
	if (pan.x >= maxx) {
		/* Mantém o MovieClip pan na posição máxima */
		pan.x = maxx;
	}
	/* Se o MovieClip pan passar do valor mínimo */
	if (pan.x <= minx) {
		/* Mantém o MovieClip pan na posição mínima */
		pan.x = minx;
	}
}
/* Função btEsqPress disparada pelo eventListener do MovieClip bt_esq */
function btEsqPress(event:MouseEvent) {
	/* Diz que o MovieClip está se movendo para a esquerda */
	esquerda = true;
	/* Diz que o MovieClip não está se movendo para direita */
	direita = false;
}
/* Função btEsqRelease disparada pelo eventListener do MovieClip bt_esq */
function btEsqRelease(event:MouseEvent) {
	/* Diz que não há movimento do MovieClip */
	esquerda = false;
	direita = false;
}
/* Função btDirPress disparada pelo eventListener do MovieClip bt_dir */
function btDirPress(event:MouseEvent) {
	/* Diz que o MovieClip não está se movendo para esquerda */
	esquerda = false;
	/* Diz que o MovieClip está se movendo para a direita */
	direita = true;
}
/* Função btDirRelease disparada pelo eventListener do MovieClip bt_dir */
function btDirRelease(event:MouseEvent) {
	/* Diz que não há movimento do MovieClip */
	esquerda = false;
	direita = false;
}
/* Usaremos o setInterval para realizar o movimento do nosso alvo */
/* A cada 100 milesegundos chama a função mover */
intervalo = setInterval(mover, 100);
/* Função chamada pelo setInterval para realizar o movimento do alvo */
function mover() {
	/* Se o movimento é no sentido esquerdo */
	if (esquerda) {
		/* Verifica se não chegou a posição mínima */
		if (pan.x-1 > minx) {
			/* Movimenta o MovieClip pan */
			pan.x -= 10;
		} else {
			/* Mantém ele na posição mínima */
			pan.x = minx;
		}
	}
	/* Se o movimento é no sentido direito */
	if (direita) {
		/* Verifica se não chegou a posição máxima */
		if (pan.x+1 < (maxx-minx)) {
			/* Movimenta o MovieClip pan */
			pan.x += 10;
		} else {
			/* Mantém ele na posição máxima */
			pan.x = maxx;
		}
	}
	/* Calcula o movimento para mover o MovieClip alvo */
	var s:Number = ((pan.x-minx)/(maxx-minx))*100;
	var p:Number = (alvo.width-mascara)/100;
	/* Realiza o movimento do alvo */
	var teste:Tween = new Tween(alvo, "x", Back.easeOut, alvo.x, sy-(p*s), 1, true);
}

Precisamos dizer algumas coisas ao ScrollBar criado, quem ele deve mover, o tamanho da barra e o tamanho da mascara. Deixaremos igual a essa imagem:

Reparem uma coisa. Criei o scrollBar com largura de 450, então devo deixar o campo Altura da Mascara com o tamanho do ScrollBar. O campo Alvo preenchemos com o MovieClip que queremos que faça o scroll, e Altura da Barra, pode até deixar em branco que não vai influenciar em nada para nós.

Com o ScrollBar criado, vamos criar um MovieClip em branco, esse MovieClip será usado para receber os MovieClips que vão ser importados da biblioteca. Para criar um MovieClip em branco, basta ir no menu Insert, New Symbol. Coloquem esse MovieClip na camada Recebe e dêem instancia de recebe.

Desenhem no palco usando a ferramente Rectangle Tool um retangulo do tamanho que preferirem, esse retangulo vai ser a máscara para os MovieClips com as imagens em miniatura. Transformem esse retangulo em MovieClip (selecionem ele e apertem F8) e dêem instancia de mascara. Coloquem esse MovieClip na camada Máscara.

Por fim, desenhem um quadrado do tamanho que desejarem, esse quadrado vai ser a borda que vai ser formada em volta da imagem grande carregada. Transforme essa borda em um MovieClip (selecionem ele e apertem F8). Uma coisa super importante, esse MovieClip precisa ter o ponto de registro no meio, pois só assim ele irá crescer do centro para fora. A imagem abaixo mostra:

Dêem instancia de borda a esse MovieClip e o posicionem na camada Conteudo. Ainda nessa camada, iremos criar um campo de texto dinamico com instancia de porcento, esse campo é que vai mostrar a porcentagem carregada da imagem maior. Desenhem uma barrinha e a transformem em MovieClip, dêem instancia de preloader. Essa barrinha irá mostrar o quanto a imagem foi carregada. E para terminar o layout, criem mais um MovieClip em branco e dêem instancia de holder. O meu layout ficou assim:

Para terminar, precisamos criar mais um MovieClip, esse MovieClip será importado da biblioteca e irá carregar a imagem em miniatura. Só que antes de criarmos esse MovieClip, vamos criar um arquivo .as. Esse arquivo as irá ter as ações necessárias para criar um preloader para as imagens em miniaturas. Para criar esse arquivo AS, basta ir em File, New e selecionar a opção ActionScript File. Colem as seguintes ações nesse arquivo:

package {
	/* Importa as Classes usadas */
	import flash.display.MovieClip;
	import flash.events.ProgressEvent;
	import flash.display.Loader;
	import flash.events.Event;
	import flash.net.URLRequest;
	/* Criamos nossa Classe */
	public class preloaderPequeno extends MovieClip {
		/* Criamos uma instancia da Classe Loader */
		var loader:Loader = new Loader;
		/* Função publica que será iniciada a cada item importado da biblioteca */
		public function preloaderPequeno() {
			/* Desabilitamos evento de Mouse para o Loader */
			loader.mouseEnabled = false;
			/* Inserimos o Loader dentro do MovieClip alvo */
			this.alvo.addChild(loader);
		}
		/* Função publica para carregar a imagem pequena */
		public function carrega(arquivo:String):void {
			/* Carregamos o arquivo a partir da URL enviada */
			loader.load(new URLRequest(arquivo));
			/* Adicionamos um eventListener a instancia da Classe Loader */
			/* Esse listener irá disparar a função progressoEvento */
			/* Até que terminar de carregar a imagem pequena */
			loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progressoEvento);
			/* Adicionamos um eventListener a instancia da Classe Loader */
			/* Esse listener irá disparara a função completo quando terminar de carregar a imagem */
			loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completo);
		}
		/* Função disparada pelo eventListener para indicar o progresso do carregamento da imagem */
		private function progressoEvento(event:ProgressEvent):void {
			/* Variável para saber quanto foi carregado */
			var carregado:Number = event.bytesLoaded;
			/* Variável para saber qual o tamanho da imagem */
			var total:Number = event.bytesTotal;
			/* Escalonamos no eixo Y o MovieClip barra */
			this.barra.scaleY = carregado/total;
		}
		/* Função disparada pelo eventListener ao terminar de carregar a imagem pequena */
		private function completo(event:Event):void {
			/* Esconde o MovieClip barra */
			this.barra.visible = false;
		}
	}
}

Salvem esse arquivo com o nome de preloaderPequeno.as e deixem ele no mesmo local de seu arquivo FLA.

Com a Classe criada, vamos a criação do MovieClip. Vão no menu Insert e selecionem Insert New Symbol. Na janela que aparecer, façam como mostra a imagem:

Vou explicar o porque disso. No campo Class, nós definimos um nome de Classe a ser usado para esse MovieClip. No ActionScript 2 nós identificamos um símbolo na biblioteca pelo campo Identifier, já no ActionScript 3 cada símbolo possui uma Classe. Além dessa Classe, podemos definir um Base Class, ou Classe de base. Essa Classe de base é uma Classe que será usada como base para nosso arquivo, onde podemos definir eventos, manipular valores, etc. Por padrão, a Classe base de um MovieClip é a Classe MovieClip do Flash, mas nós usaremos a nossa Classe criada acima.

Clicando em Ok, vamos criar nosso MovieClip. Mais uma vez para deixar mais organizado, criei três camadas dentro desse MovieClip, alvo, barra e fundo. Na camada alvo criem um MovieClip em branco e dêem instancia de alvo. Na camada barra, criem um quadrado do tamanho que desejar, tranformem em MovieClip e o instancie de barra, essa barra irá servir de preloader para a imagem pequena. E por fim na camada fundo, desenhem um quadrado do tamanho que desejar para ser a borda que vai ser exibida ao redor da imagem pequena. O meu MovieClip ficou assim:

O tamanho do fundo e da barra é livre. Eu desenhei o fundo um pouco maior que o tamanho das imagens em miniaturas, e o MovieClip barra possui o tamanho exato das imagem em miniatura.

Com nossos objetos criados e instanciados corretamente, vamos ao ActionScript da galeria. Voltem ao palco principal, no primeiro frame da camada Actions, insiram as seguintes ações:

/* Importamos a Classe Tween */
import fl.transitions.Tween;
import fl.transitions.easing.*;
/* Mascaramos o MovieClip recebe */
recebe.mask = mascara;
/* Importamos os eventos da Classe Tween */
import fl.transitions.TweenEvent;
/* Variável para saber qual a foto atual */
var atual:Number = new Number();
/* Variável para saber qual o número de itens do XML */
var total:Number = undefined;
/* Variável booleana para saber se terminou de carregar a imagem */
var carregado:Boolean = false;
/* Criamos uma instancia para a Classe Loader */
var loader:Loader = new Loader();
/* Criamos uma instancia para a Classe XML */
var dadosXML:XML = new XML();
/* Criamos uma instancia para a Classe URLLoader */
var xmlLoader:URLLoader = new URLLoader();
/* Adicionamos um eventListener para a instancia da Classe URLLoader */
/* Esse listener será disparado quando carregar o arquivo XML */
/* O listener irá chamar a função monta */
xmlLoader.addEventListener(Event.COMPLETE, monta);
/* Carrega o arquivo XML */
xmlLoader.load(new URLRequest("imagens.xml"));
/* Função disparada quando terminar de carregar o XML */
function monta(event:Event) {
	/* Armazena o XML */
	dadosXML = new XML(event.target.data);
	/* Armazena o total de nós foto do XML */
	total = dadosXML.foto.length();
	/* Chama a função montaPequeno */
	montaPequeno();
	/* Chama a função carregaImagem */
	/* Passa como parametro o primeiro no do XML */
	carregaImagem(0);
	/* Modifica a variável atual para 0 */
	atual = 0;
}
/* Função montaPequeno que irá criar e colocar no palco as miniaturas */
function montaPequeno() {
	/* Para cada item do XML */
	for (var i = 0; i
Exemplo galeria funcionando
Considerações Finais
Hoje vimos como criar uma galeria de imagens com XML usando ActionScript 3. Mais uma vez peguei um tutorial que desenvolvi em ActionScript 2 e passei para ActionScript 3, e posso dizer a vocês que se aprende e muito fazendo essa migração, pois nem sempre a migração é feita de maneira fácil, temos que buscar alguma solução, tentar criar algo melhor, etc. Fica a dica, peguem seus aplicativos de ActionScript 2 e tentem passar para o ActionScript 3, vocês vão ver que se aprende bastante com isso.
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 19, 2009. Arquivado em Flash.
					Você pode seguir as respostas a esse artigo pelo RSS 2.0.
										Você pode deixar respostas para esse artigo