Neste tutorial explicarei, passo-a-passo, da forma mais didática possível (desculpem aqueles com conhecimento avançado em AS) como utilizar o Lightbox no Flash. Deixo registrado aqui crédito ao Lucas Ferreira que disponibilizou o código inicial, ao qual fiz algumas adaptações.

Veja aqui o exemplo que nós criaremos neste tutorial e baixe aqui os arquivos que serão utilizados.

1º Passo: Criando o arquivo Flash

Abra o arquivo lightbox.fla localizado dentro da pasta fla.
Veja que no palco, temos nada mais que 6 Movie Clips com os thumbs das fotos, todos devidamente instanciados.
Como já mencionei no início, este é um tutorial didático, logo, os rebuscamentos e animações deixo por conta de vocês, ok?
Cliquem no primeiro frame da camada actions e abram o painel de ações.
No início do código, declarei dois Arrays: fotos_array e legendas_array. No primeiro, iremos colocar o caminho para todas as fotos que queremos ver no Lightbox e, no segundo, suas respectivas legendas. Caso não queira utilizar legendas, basta declarar como um Array vazio.

var legendas_array:Array = [];

Mais abaixo no código, temos os eventos de onRelease dos MovieClips que, ao serem clicados, invocam a função lightbox passando como parâmetro o índice da foto a ser aberta.

Bom, agora a parte mais importante do código. A função lightbox.

function lightbox(fotoSelecionada:Number):Void{

	function formata(item_str){ //formata a string e encoda em padrão HTML
		return "'" + escape(item_str) + "'";
	}

	if(flash.external.ExternalInterface && flash.external.ExternalInterface.available){ //verifica se exite esta API que permite a comunicação do ActionScript com o JavaScript

		flash.external.ExternalInterface.call("Lightbox.start", fotos_array, legendas_array, fotoSelecionada); //chama a função start do JavaScript

	}else{ //caso a API não esteja disponível, os strings são formatados para o encode padrão HTML e a função javaScript é chamada pelo método tradicional

		for(var i=0; i<fotos_array.length; i++) fotos_array[i] = formata(fotos_array[i]);
		for(var i=0; i<legendas_array.length; i++) legendas_array[i] = formata(legendas_array[i]);

		getURL("javascript:Lightbox.start([" + fotos_array.join(",") + "],[" + legendas_array.join(",") + "]);void(0);");

	}
}

Comecemos pelo primeiro if/else, onde verificamos se a API ExternalInterface está disponível, pois através dela faremos a comunicação do nosso código AS com o JavaScript. Caso a combinação do seu Sistema Operacional + Navegador aceite a API, fazemos uma chamada direta através do método call à função start do arquivo JavaScript lightbox.flash.js. Fiz uma adaptação neste arquivo de forma a passar também o índice da foto selecionada como parâmetro para que a foto respectiva seja aberta pelo Lightbox.
Caso seu navegador não tenha suporte à API ExternalInterface, temos que encodar os itens dos Arrays para o padrão HTML através da função scape. Esta função transforma os caracteres especiais para o padrão HTML, em hexadecimal (Ex: flavio@3k3.com.br seria transformado para flavio%403k3%2Ecom%2Ebr). Feito isso, usamos a função getURL normalmente para chamar a função JavaScript.

Pronto, podemos publicar este arquivo Flash.
Vá em File>Publish Settings e mande publicar o swf e o html.

2º Passo: Instalando o Lightbox

Na verdade, nenhuma instalação será necessária, basta copiar as pastas css, js e images no diretório como os arquivos swf e html que acabamos de publicar.
Não entrarei em detalhes sobre o funcionamento dos JavaScripts neste tutorial, afinal o foco é ActionScript. Aqueles que quiserem fuçar o mesmo, fiquem à vontade.

3º Passo: Preparando o HTML

Este passo é muito importante e é onde a maioria das pessoas acabam se perdendo, não conseguindo finalizar corretamente o processo.
Abra o arquivo html que geramos no primeiro passo em um editor.
Dentro do escopo da tag head certifique-se de inserir os códigos abaixo. Atente para os scripts assinalados em amarelo.



Em alguns navegadores, o swf estava sendo escondido pelo Lightbox, o que não dava um efeito visual legal de transparência.
Para evitar isso mude o Window Mode (wmode) para opaque. Veja abaixo:



Tudo pronto!

Agora, basta publicar os arquivos e ver o resultado! =)


Tags: , ,

5 respostas

  1. Luan says:

    Olá!

    Como faço para funcionar no IE?

    Desde já agradeço.

  2. admin says:

    Olá Luan,
    O problema está em mais uma atualização “brilhante” do IE7.
    Ele não aceita o “return false”.
    Vou trabalhar em uma forma de contornar isso e depois posto uma atualização.
    Abs!

  3. Ricardo says:

    Olá Flávio, tudo bem?

    Meu caro, também tive o mesmo problema do Luan… e gostaria de saber se você conseguiu resolver?

    Aguardo a resposta.

    Abraço e obrigado!

  4. Victor says:

    Po, é ligthbox é muito bacana, mas não roda no IE =/

    tem como mandar pro meu e-mail uma solução?

    Abraços!

  5. admin says:

    Olá Victor,
    Realmente nas novas versões do IE esse lightbox não funciona, graças às “brilhantes” atualizações do mesmo.
    Infelizmente estou sem tempo de parar e re-avaliar o código.
    Peço desculpas a você e a todos que vem me solicitando essa correção.
    Em breve pretendo organizar melhor meu tempo e começar a manter o blog novamente.
    Abraços,
    Flávio Mikami
    http://www.flaviomikami.com

Faça um comentário

OBS: Comentários moderados pelo admnistrador do blog.