Galeria de Imagens 2 ActionScript 3

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.

<?xml version="1.0" encoding="utf-8"?><imagens> <foto> <imagemG>imagem.jpg</imagemG>

<imagemP>imagemp.jpg</imagemP> <texto>Moto Ayrton Senna</texto> </foto> <foto> <imagemG>imagem1.jpg</imagemG>

<imagemP>imagemp1.jpg</imagemP> <texto>Mclaren do Senna</texto> </foto> <foto> <imagemG>imagem2.jpg</imagemG>

<imagemP>imagemp2.jpg</imagemP> <texto>Capacete Senna</texto> </foto> <foto> <imagemG>imagem3.jpg</imagemG>

<imagemP>imagemp3.jpg</imagemP> <texto>Ferrari Shumacher</texto> </foto> <foto> <imagemG>imagem4.jpg</imagemG>

<imagemP>imagemp4.jpg</imagemP> <texto>Loro</texto> </foto> <foto> <imagemG>imagem5.jpg</imagemG>

<imagemP>imagemp5.jpg</imagemP> <texto>Trator do Sítio</texto> </foto> <foto> <imagemG>imagem6.jpg</imagemG>

<imagemP>imagemp6.jpg</imagemP> <texto>Carroça antiga</texto>

</foto></imagens>

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("imagens2.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<total; i++) {

/* Importamos o MovieClip pequeno da biblioteca */var mc:MovieClip = new pequeno();/* Desabilitamos evento de mouse para o MovieClip alvo */mc.alvo.mouseEnabled = false;/* Desabilitamos evento de mouse para o MovieClip barra */mc.barra.mouseEnabled = false;/* Habilita a maozinha de link para nosso MovieClip */mc.buttonMode = true;/* Adiciona um eventListener para o MovieClip *//* Usaremos o evento CLICK da Classe MouseEvent *//* O listener irá chamar a função mcPress quando clicarmos no

MovieClip */mc.addEventListener(MouseEvent.CLICK, mcPress);

/* Chama a função carrega passando o endereço da imagem a ser carregada */

mc.carrega(dadosXML.foto.imagemP[i]);/* Adicionamos nosso MovieClip ao MovieClip recebe */recebe.addChild(mc);/* Posicionamos o MovieClip na posição correta */mc.x = i*mc.width+i*10;/* Armazena o índice do MovieClip */mc.imagem = i;

}/* Verificamos se o ScrollBar é menor que o MovieClip recebe */if (recebe.width<=scrollBar.width) {

/* Se for menor esconde o scrollBar */scrollBar.visible = false;

} else {/* Se for maior mostramos o scrollBar */scrollBar.visible = true;

}}/* Ao clicar na imagem pequena */function mcPress(event:MouseEvent) {

/* Se a variável carregado for igual a true */if (carregado == true) {

/* Carregamos a Imagem selecionada */carregaImagem(event.target.imagem);/* Atualiza o valor da variável atual */atual = event.target.imagem;/* Carregado igual a falso */carregado = false;/* Apagamos o texto */texto.text = "";

}}/* Função para carregar a Imagem grande */function carregaImagem(arquivo) {

/* Deixamos o MovieClip preloader com scaleX igual a zero */preloader.scaleX = 0;/* Mostramos o MovieClip preloader */preloader.visible = true;/* Modifica o alpha do MovieClip holder */holder.alpha = 0;/* Descarrega qualquer conteúdo da instancia da Classe Loader */loader.unload();/* Adiciona um eventListener para a instancia da Classe Loader *//* Esse listener irá disparar quando terminar de carregar a imagem *//* Quando carregar, chama a função loadInit */loader.contentLoaderInfo.addEventListener(Event.INIT, loadInit);/* Adiciona um eventListener para a instancia da Classe Loader *//* Esse listener será disparado enquanto estiver carregando a imagem *//* Enquanto carrega chama a função loadProgress */loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,

loadProgress);/* Carrega a imagem grande */loader.load(new URLRequest(dadosXML.foto.imagemG[arquivo]));/* Adiciona o Loader ao MovieClip holder */holder.addChild(loader);

}/* Função que será disparada enquanto estiver carregando a imagem grande */function loadProgress(event:ProgressEvent) {

/* Variável para saber quanto carregou da imagem */var carregado:Number = event.bytesLoaded;/* Variável para saber qual o tamanho da imagem */var tamanho:Number = event.bytesTotal;/* Escalona o MovieClip preloader no eixo X */

preloader.scaleX = carregado/tamanho;/* Exibe a porcentagem carregada */porcento.text = Math.round(carregado/tamanho*100)+"%";

}/* Função que será disparada quando terminar de carregar a imagem grande */function loadInit(event:Event) {

/* Iremos aumentar o MovieClip borda para o mesmo tamanho do MovieClip holder */

/* Somaremos +16 pixels para criar 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 no eixo x e y de acordo com a posição do

MovieClip borda */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 mascara de acordo com a posição do MovieClip borda

*/var twma:Tween = new Tween(mascara, "y", Back.easeOut, mascara.y,

(borda.y+holder.height/2)+16, 1, true);/* Movemos o MovieClip recebe de acordo com a posição do MovieClip borda

*/var twr:Tween = new Tween(recebe, "y", Back.easeOut, recebe.y,

(borda.y+holder.height/2)+16, 1, true);/* Movemos o ScrollBar de acordo com a posição do MovieClip borda e do

MovieClip recebe */var twsP:Tween = new Tween(scrollBar, "y", Back.easeOut, scrollBar.y,

(borda.y+holder.height/2)+recebe.height+22, 1, true);/* Movemos o campo de texto de acordo com a posição do MovieClip borda e

do MovieClip recebe */var twtxt:Tween = new Tween(texto, "y", Back.easeOut, texto.y,

(borda.y+holder.height/2)+recebe.height+47, 1, true);/* Adiciona a legenda ao campo de texto dinamico */texto.text = dadosXML.foto.texto[atual];/* Adicionamos um eventListener a instancia da Classe Tween *//* Esse listener será disparado quando terminar de animar o MovieClip

holder no eixo X *//* Quando for disparado irá chamar a função twhxFinished */twhx.addEventListener(TweenEvent.MOTION_FINISH, twhxFinished);

}/* Função que será chamada quando terminar de animar o MovieClip holder */function twhxFinished(event:TweenEvent):void {

/* Esconde o MovieClip preloader */preloader.visible = false;/* Apaga o texto do campo de texto dinamico */porcento.text = "";/* Anima o MovieClip holder */var twha:Tween = new Tween(holder, "alpha", Regular.easeOut, 0, 1, 1,

true);/* Adicionamos um eventListener a instancia da Classe Tween *//* Esse listener será disparado quando terminar de animar o alpha do

MovieClip holder *//* Quando for disparado irá chamar a função twhaFinished */twha.addEventListener(TweenEvent.MOTION_FINISH, twhaFinished);

}/* Função que será chamada quando terminar de animar o alpha do MovieClip holder */function twhaFinished(event:TweenEvent):void {

/* Muda a variável carregado para true */carregado = true;

}

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.