Galeria de imagens com AS3: FullGallery

November 18th, 2009

Hi Geral, depois de muito tempo e muitas mudanças na vida estou de volta escrevendo um novo post sobre alguma coisa que eu já deveria ter feito a muito tempo ehehe: uma galeria de imagens decente. Estive pesquisando algumas coisas sobre estrutura de navegação e formas de deixar o codigo As3 mais fácil de trabalhar, fiz bastante mudanças nas minhas classes e uma das primeira que tem esse mesmo conceito é a FullGallery: uma galeria de imagens estilo lightbox feita em Actionscript 3 que permite arquivos carregados externamente ou o próprio arquivo enviarem uma lista de imagens e chamar uma determinada foto usando a estrutura.

Primeira coisa que devemos fazer é baixar o pacote de classes novesfora via Google Code. Coloque a pasta novesfora junto do seu projeto ou na sua pasta de classes, a segunda opção é sempre a melhor. O resultado final será esse: http://blog.des84.com/projects/FullGallery/

Segundo passo é criar um arquivo FLA e setar o seu document class, no exemplo irei usar o nome da classe de ‘DocumentClass()’, ai precisamos definir primeiro o alinhamento da aplicação, se irá ser alinhado ao centro – default do Flash – ou se irá alinhar toda a aplicação à esquerda, vamos colocar alinhado à esquerda.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

package
{
	import flash.display.MovieClip;
	import flash.display.StageAlign;
	import flash.display.StageQuality;
	import flash.display.StageScaleMode;
 
	public class DocumentClass extends MovieClip
	{		
		public function DocumentClass():void
		{
			// Configurando e setando stage infos
 
			stage.align = StageAlign.TOP_LEFT;
			stage.quality = StageQuality.BEST;
			stage.scaleMode = StageScaleMode.NO_SCALE;
		}
	}
}

Depois disso precisamos usar a classe StageLocation do pacote novesfora para falar para a aplicação, inclusive para a FullGallery – que usa essa classe na sua construção – quem é o Stage, a largura e também a altura do palco.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

package
{
	import flash.display.MovieClip;
	import flash.display.StageAlign;
	import flash.display.StageQuality;
	import flash.display.StageScaleMode;
 
	import novesfora.utils.StageLocation;
 
	public class DocumentClass extends MovieClip
	{
		public var Box									:MovieClip; // Movieclip no palco
 
		public function DocumentClass():void
		{
			// Configurando e setando stage infos
 
			stage.align = StageAlign.TOP_LEFT;
			stage.quality = StageQuality.BEST;
			stage.scaleMode = StageScaleMode.NO_SCALE;
 
			StageLocation.setStage = stage;
			StageLocation.setStageWidthFix = 900;
			StageLocation.setStageHeightFix = 500;
		}
	}
}

Agora é criar o objeto FullGallery e adicionar os, necessários, botões de fechar a galeria, anterior, próxima imagem e o movieclip de carregamento. Todos esses movieclips devem ser setados como string, essa que deve ser o mesmo nome da classe desses movieclips na biblioteca.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

package
{
	import flash.display.MovieClip;
	import flash.display.StageAlign;
	import flash.display.StageQuality;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.MouseEvent;
 
	import novesfora.photos.FullGallery;
	import novesfora.utils.StageLocation;
 
	public class DocumentClass extends MovieClip
	{
		public var Box									:MovieClip;
 
		private var $Gallery							:FullGallery;
		private var $NewImages							:Array;
 
		public function DocumentClass():void
		{
			// Configurando e setando stage infos
 
			stage.align = StageAlign.TOP_LEFT;
			stage.quality = StageQuality.BEST;
			stage.scaleMode = StageScaleMode.NO_SCALE;
 
			StageLocation.setStage = stage;
			StageLocation.setStageWidthFix = 900;
			StageLocation.setStageHeightFix = 500;
 
			// Criando a lista de imagens a serem mostradas
 
			$NewImages = new Array("imagens/001g.jpg","imagens/002g.jpg","imagens/003g.jpg");
 
			// Criando o objeto da Galeria e configurando
 
			$Gallery = new FullGallery("LEFT"); // Alinhamento LEFT, default = CENTER
			$Gallery.addImages = $NewImages; // Adicionando imagens a serem mostradas
			$Gallery.addClose = "Closer"; // Adicionando botao para fechar - necessario
			$Gallery.addLoader = "loaderImage"; // Adicionando loader das imagens
			$Gallery.addNext = "nextImage"; // Botao de proxima imagem
			$Gallery.addPrev = "prevImage"; // Botao de anterior
			addChild($Gallery);
		}
	}
}

Até esse momento o que fizemos foi configurar a galeria, falar quem são os botões que serão usados, o alinhamento do palco e adicionamos a galeria no projeto, não chamamos em nenhum momento uma fotografia, ou seja, se compilar o projeto nesse estágio verá que nada acontecerá. Agora irá depender mais de você que da galeria, você irá receber os thumbnails via XML, AMFPHP ou qualquer outra forma que quiser, montar sua grid e esse thumbnail quando for clicado irá executar uma função da FullGallery dizendo qual é a imagem, dentro do Array de imagens já enviado, que precisa ser aberta. Funciona da seguinte forma, ver as funções ShowFirstImage(), ShowSecondImage() e ShowThirdImage():

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

package
{
	import flash.display.MovieClip;
	import flash.display.StageAlign;
	import flash.display.StageQuality;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.MouseEvent;
 
	import novesfora.photos.FullGallery;
	import novesfora.utils.StageLocation;
 
	public class DocumentClass extends MovieClip
	{
		public var Box									:MovieClip;
 
		private var $Gallery							:FullGallery;
		private var $NewImages							:Array;
 
		public function DocumentClass():void
		{
			// Configurando e setando stage infos
 
			stage.align = StageAlign.TOP_LEFT;
			stage.quality = StageQuality.BEST;
			stage.scaleMode = StageScaleMode.NO_SCALE;
 
			StageLocation.setStage = stage;
			StageLocation.setStageWidthFix = 900;
			StageLocation.setStageHeightFix = 500;
 
			// Criando a lista de imagens a serem mostradas
 
			$NewImages = new Array("imagens/001g.jpg","imagens/002g.jpg","imagens/003g.jpg");
 
			// Criando o objeto da Galeria e configurando
 
			$Gallery = new FullGallery("LEFT"); // Alinhamento LEFT, default = CENTER
			$Gallery.addImages = $NewImages; // Adicionando imagens a serem mostradas
			$Gallery.addClose = "Closer"; // Adicionando botao para fechar - necessario
			$Gallery.addLoader = "loaderImage"; // Adicionando loader das imagens
			$Gallery.addNext = "nextImage"; // Botao de proxima imagem
			$Gallery.addPrev = "prevImage"; // Botao de anterior
			addChild($Gallery);
 
			// Mouse Events - Fazendo o *** menu funcionar
 
			( Box.Box01 as MovieClip ).buttonMode = true;
			( Box.Box02 as MovieClip ).buttonMode = true;
			( Box.Box03 as MovieClip ).buttonMode = true;
 
			( Box.Box01 as MovieClip ).addEventListener(MouseEvent.CLICK, ShowFirstImage);
			( Box.Box02 as MovieClip ).addEventListener(MouseEvent.CLICK, ShowSecondImage);
			( Box.Box03 as MovieClip ).addEventListener(MouseEvent.CLICK, ShowThirdImage);
 
			stage.addEventListener(Event.RESIZE, ResizeBox);
			stage.dispatchEvent(new Event(Event.RESIZE));
		}
 
		private function ShowFirstImage(e:MouseEvent):void
		{
			$Gallery.initGallery(); // Valor default = 0. Primeira imagem do Array
		}
 
		private function ShowSecondImage(e:MouseEvent):void
		{
			$Gallery.initGallery(1); // Chama por 1, segunda imagem do Array
		}
 
		private function ShowThirdImage(e:MouseEvent):void
		{
			$Gallery.initGallery(2); // Chama por 2, terceira imagem do Array
		}
 
		private function ResizeBox(e:Event):void
		{
			Box.x = ( stage.stageWidth - Box.width ) / 2;
			Box.y = ( stage.stageHeight - Box.height ) / 2;
		}
	}
}

Usando o $Gallery.initGallery(); iremos chamar a class FullGallery e inicializar a galeria enviando o ID da imagem que corresponde ao numero da posição do Array de imagens, bem simples. Como já foi dito, o resultado final será esse: http://blog.des84.com/projects/FullGallery/. Se preferir pode baixar os arquivos diretamente pelo link abaixo, o projeto requer o uso das classes Tweenlite e do pacote novesfora via Google Code.

Download: FullGallery Source Code (208)

Escrito por: Pablo Davi e Gravado em: ActionScript 3, Flash 8 Comments »

Read too:

8 Responses to “Galeria de imagens com AS3: FullGallery”

  1. cristiano Says:
    December 25th, 2009 at 06:24

    oi, muito legal esta galeria
    sou novo em as3
    porem encontrei uns problemas nesta galeria e nao esta funcionando..
    estou com tem 4 problemas:
    1 o resize ao compilar da erro;
    2 o move_mouse: ao compilar da erro ao mexer o mouse;
    3 ao clicar em fechar quandu esta em tela cheia a imagem .. voce nao pode clicar denovo no thumbs para abrir a imagem dinovo..
    4 a imagem quandu esta na ultima nao faiz um loop pra primeira e o mesmo ocorre quando esta na primeira nao pode ir para a ultima

    tb faltou mensionar que presisa do pacote;
    “import com.anttikupila.utils.JPGSizeExtractor;”
    mencionado no LoadFile

    estes erros eu encontrei baixando o source code e seus pacotes

    porfavor queria pedir para me ajudar ou arrumar isto.. pois esta galeria é uma das melhores encontradas na net xD abraço

  2. Pablo Davi Says:
    December 25th, 2009 at 21:12

    Olá Cristiano, valeu pelo feedback e por favor dê uma olhada na forma que esta aplicando a classe porque fiz um teste aqui, como mostra no tutorial do post, e não deu erro nenhum. Fiz o upload agora para o Google Code de uma versão nova da galeria, que não tive muito tempo ainda para aperfeiçoar, já que trabalho em cima dela somente quando aparece um job na agência que precisa usar algo do tipo ou próximo daquilo, mas essa nova versão tem possibilidade de adicionar legendas as fotos, slideshow com play e pause e algumas correções de bugs. A funcionalidade de passar da ultima para a primeira fotografia quando terminar o array ainda não foi colocada até porque foi uma necessidade deixar que quando chegasse ao fim não acontecesse nada, quando ela foi criada, mas adorei a dica e irei implementar o quanto antes, aproveitar minha folga de fim de ano.

    Você pode baixar via SVN no Google Code [/asdatalibs] ou pode visualizar a mudança direto da classe em: http://code.google.com/p/asdatalibs/source/browse/trunk/novesfora/photos/FullGallery.as

    Grande abraço e obrigado novamente pelo feedback, qualquer coisa Twitter me @pablodavi

  3. Marcelo Says:
    December 30th, 2009 at 14:43

    Seria interessante se postasses algo de sua própria autoria

  4. Pablo Davi Says:
    December 30th, 2009 at 15:47

    Obrigado pelo comentario @Marcelo mas que fique claro que os exemplos que posto aqui sempre sao de minha autoria, todos codigos que eu faço e por isso tenho propriedade em poder alterar e corrigir erros que possivelmente hajam nos codigos.

    Se precisar de alguma ajuda so perguntar, vai ser um prazer colaborar. Grande abraço.

  5. Francisco Says:
    January 26th, 2010 at 17:23

    Parabéns ai Pablo, excelente essa galeria.
    Sou novato no flash e em classes pior ainda, ao tentar fazer a galeria funcionar no meu PC, não consegue fazer a configuração da classe Tweenlite, não manjo mto de inglês então copiei tudo que estava lá no site e coloquei dentro da pasta com.greensock.Tweenlite, só que deu esse erro: 5007: An ActionScript file must have at least one externally visible definition.
    O mais estranho é que o erro é na primeira linha, só que a primeira linha é um comentario.

    Pode dar uma ajuda por favor.
    Obrigado desde de já.

  6. Francisco Says:
    January 27th, 2010 at 10:10

    Ola Pablo, consegui resolver o problema e fazer funcionar aqui.

    Realmente como o Cristiano falou esta faltando mencionar a class JPGSizeExtractor, ela pode ser baixada no endereço: http://www.anttikupila.com/flash/jpgsizeextractor-multi-image-example/

    Depois que coloquei essa class na pasta a galeria funcionou normalmente.
    De qualquer forma excelente tutorial.

    Abs a todos.

  7. Pablo Davi Says:
    January 27th, 2010 at 10:22

    Que bom que conseguiu Francisco, hoje eu estou trabalhando com uma versão a cima dessa galeria, com legendas e slideshow e breve eu vou dar uma limpada nesse codigo e publico a versão nova para avaliação.

    Grande abraço,
    At.

  8. Francisco Says:
    January 27th, 2010 at 16:55

    Olá Pablo, novamente eu por aqui, olha só cara agora ta dando um erro pra mim e já tentei ajustar li forum, procurei no google mas sem sucesso o erro é esse:

    TypeError: Error #1009: Não é possível acessar uma propriedade ou um método de uma referência de objeto nula.
    at novesfora.photos::FullGallery/LoadFullImage()
    at novesfora.photos::FullGallery/initGallery()
    at DocumentClass/ShowFirstImage()

    Pode me ajudar?
    Abs

Leave a Reply