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! =)

Todos devem conhecer um velho ditado: “Casa de ferreiro, espeto de pau.” Pois bem, esse era um velho problema que eu vinha enfrentando. Depois de inúmeros sites feitos para clientes, amigos e parceiros, várias pessoas vieram cobrar o meu site. A reação de todos era “Não acredito que você não tem um site!”. Venho aproveitar este espaço para pedir desculpas aos mesmos, pois ainda não tenho um site! rsrs

Mas estou aqui lançando este blog! =)

Não quer dizer que não irei lançar o site, mas encontrei no blog uma forma melhor de divulgar meu trabalho, dar dicas e tirar dúvidas da comunidade de desenvolvedores.

Bom, meu forte sempre foi o Flash, ferramenta que utilizo a mais de 9 anos. Durante esse tempo trabalhei com Java e aprendi ColdFusion e PHP, mas não tem jeito, o meu negócio mesmo é trabalhar com algo envolvendo mais camada de apresentação e envolvendo aplicações ricas (RIA | Rich Internet Application). Por isso continuei focando mais o lado do Flash. Especializei-me em Flash Communication Server (atualmente Flash Media Server), Apollo (atualmente Adobe AIR) e Flash Lite. Flex é algo que venho utilizando e acredito ser o futuro de RIA juntamente com o AIR.

Atualmente sou Diretor de Tecnologia da Ad Infinitum Soluções, onde desenvolvemos uma plataforma completa de Comunicação, Colaboração e Educação via web, o Adsum. Em breve lançarei posts falando mais sobre o mesmo.

Acredito que poucos me conhecem, fiquei sempre “escondido”. Mas agora espero poder ajudar um número maior de pessoas e poder colaborar com o crescimento do Brasil no desenvolvimento de aplicações ricas para Internet.