FlashLightBox é um Componente que permite que o efeito LightBox presente em algumas páginas HTML possa ser usado em arquivo do Flash usando apenas ActionScript. Esse Componente foi feito para usuários que possuam páginas feita inteiramente no Flash (e ocupando 100% do browser) e para usuários que possuam algum conteúdo do Flash (swf) no site. Se seu site não for 100% feito no Flash, será necessário usar o arquivo JavaScript que faz o efeito original, o Componente só fará a ponte do Flash para esse JavaScript. Os arquivos JavaScript necessários estão no arquivo zip disponibilizado aqui.

Requisitos necessários

Esse Componente foi feito usando o ActionScript 3 e ActionScript 2. Para quem quiser usar a versão em ActionScript 2, os requisitos necessários são:

• Mínimo FlashPlayer 8
• Funciona no Flash 8, Flash CS3 3 Flash CS4

Quem quer usar a versão em ActionScript 3, os requisitos são:

• Mínimo FlashPlayer 9
• Funciona no Flash CS3 e Flash CS4

Versão atual do Componente

O Componente atualmente está na versão 1.0.3, você será avisado quando uma nova versão estiver disponibilizada quando testar seu arquivo no Flash.

Download Componente

O Componente pode ser baixado em duas versões:

• ActionScript 2
• ActionScript 3

Como usar

Parte 1 – Instalação Componente versão ActionScript 3

Após fazer o download do Componente na versão AS3, copiem o arquivo FlashLightBoxAS3.swc para o diretório onde estão instalados os Componentes do Flash. Para usuários do Flash CS3 o caminho é:

•  (Windows) C:/Arquivos de Programas/Adobe/Adobe Flash CS3/linguagem/Configuration/Components
•  (Mac OS X) Macintosh HD/Applications/Adobe Flash CS3/Configuration/Components

Onde linguagem é a linguagem na qual o Flash foi instalado. Para usuários do Flash CS4 o caminho é:

•  (Windows) C:/Arquivos de Programas/Adobe/Adobe Flash CS4/Common /Configuration/Components
•  (Mac OS X) Macintosh HD/Applications/Adobe Flash CS4/Configuration/Components

Parte 2 – Instalação Componente versão ActionScript 2

Após fazer o download do Componente na versão AS2, copiem o arquivo FlashLightBoxAS2.swc para o diretório onde foi instalado o Flash. Quem for usar essa versão no Flash CS3 ou Flash CS4 o caminho a ser movido o Componente é o mesmo mostrado acima. Quem usa o Flash 8, o caminho é:

• (Windows) C:/Program Files/Macromedia/Flash 8/linguagem/Configuration/Components
• (Mac OS X) Macintosh HD/Applications/Macromedia Flash 8/Configuration/Components

Onde linguagem é a linguagem na qual o Flash foi instalado.

Parte 3 – Configurando o Componente

Abram o Flash e criem um novo arquivo. Abram o painel Components (Ctrl+F7) e joguem para o palco o Componente FlashLightBox. Selecionem o Componente e abram o painel Parameters ou Component Inspector, algumas opções do Componente poderão ser alteradas:

Atenção: A personalização do Componente só será válida caso use as funções reservadas a um site feito inteiramente no Flash, caso seu site não seja totalmente em Flash e tiver que usar o JavaScript, a personalização terá que ser feita através do arquivo CSS do LightBox.

Parte 4 – Funções do Componente

Como já sabem, o Componente foi feito para quem possui um site feito inteiramente em Flash (e ocupando 100% do browser) e para quem possui algum conteúdo do Flash (swf) na página.

Site feito inteiramente no Flash ocupando 100% do Browser:

• carrega(arquivo:String, legenda:String) – função responsável por carregar uma imagem e exibir sua legenda. Recomendada para usuários que possuem um site feito inteiramente no Flash.
• carregaMultiplos(arquivos:Array, legendas:Array, num:Number) – função responsável por carregar várias imagens (uma de cada vez) habilitando opção de carregar próxima imagem ou carregar anterior. Função recomendada para usuários que possuam um site feito inteiramente no Flash.

Algum conteúdo swf no site:

• carregaHTML(arquivo:String, legenda:String) – função responsável por carregar uma imagem e exibir sua legenda. Recomendada para os usuários que não tem um site feito inteiramente no Flash. Será necessário usar JavaScript para o efeito.
• multiploHTML(arquivo:Array, legenda:Array) – função responsável por carregar várias imagens (uma de cada vez) habilitando opção de carregar próxima imagem ou carregar anterior. Função recomendada para usuários que não possuam um site feito inteiramente no Flash. Será necessário usar JavaScript para o efeito.

Parte 5 – Usando o Componente

Após ter jogado o Componente no palco e customizado ele através do painel Parameters ou Component Inspector, é necessário instanciar esse Componente. Selecione o Componente e abra o painel Properties e no campo Instance Name de o nome que desejar, para esse exemplo usarei o nome flb. Criem um botão e dêem nome de instancia de bt. Quem for usar o Componente em um site feito inteiramente no Flash e estiver usando o ActionScript 3, insiram essas ações:

bt.addEventListener(MouseEvent.CLICK, btPress);
function btPress(event:MouseEvent):void {
   flb.carrega("sua imagem.jpg", "seu texto");
}

Para quem for usar ActionScript 2, as ações são essas:

bt.onPress = function() {
   flb.carrega("sua imagem.jpg", "seu texto");
};

Para quem deseja carregar múltiplas imagens e usar ActionScript 3, utilizem as seguintes Ações:

var fotos:Array = ["imagem1.jpg", "imagem2.jpg", "imagem3.jpg"];
var textos:Array = ["texto1", "texto2", "texto3"];
bt.addEventListener(MouseEvent.CLICK, btPress);
function btPress(event:MouseEvent):void {
   flb.carregaMultiplos(fotos, textos, 1);
}

Para quem for usar o ActionScript 2, as ações são essas:

var fotos:Array = ["imagem1.jpg", "imagem2.jpg", "imagem3.jpg"];
var textos:Array = ["texto1", "texto2", "texto3"];
bt.onPress = function() {
   flb.carregaMultiplos(fotos, textos, 1);
};

Para quem não tem um site inteiramente feito com o Flash e usar o ActionScript 3, insiram as seguintes ações:

bt.addEventListener(MouseEvent.CLICK, btPress);
function btPress(event:MouseEvent):void {
   flb.carregaHTML("sua imagem.jpg", "seu texto");
}

Quem for usar o ActionScript 2, as ações são essas:

bt.onPress = function() {
   flb.carregaHTML("sua imagem.jpg", "seu texto");
};

Para carregar múltiplas imagens usando ActionScript 3 usem as seguintes ações:

bt.addEventListener(MouseEvent.CLICK, btPress);
function btPress(event:MouseEvent):void {
   flb.multiploHTML("sua imagem.jpg", "seu texto");
}

Quem for usar o ActionScript 2, as ações são essas:

bt.onPress = function() {
   flb.multiploHTML("sua imagem.jpg", "seu texto");
};

Além das ações, quem não tem um site feito inteiramente no Flash, é necessário baixar o JavaScript do LigthBox criado por Lokesh Dhakar e um JavaScript que facilita a interação do Flash com o JavaScript criado pelo Lucas Ferreira.

Chamando o Componente através do ActionScript

Também é possível criar e personalizar o Componente usando apenas ActionScript. Para fazer isso, você precisam ter o Componente na biblioteca do seu arquivo, se ele não estiver na biblioteca não irá funcionar. Quem for usar ActionScript 3 as ações são essas:

var flb:FlashLightBox = new FlashLightBox();
addChild(flb);
flb.alphaFundo = 60;
flb.corFundo = 0xFF0000;
flb.corBorda = 0xFF00FF;
flb.corPreloader = 0xFF0000;
flb.tamanhoLegenda = 10;
flb.corLegenda = 0x000000;
flb.okResize = true;
flb.corSetas = 0xFFFFFF;
flb.liberaDownload = true;
flb.mudaIdioma = "Inglês";
bt.addEventListener(MouseEvent.CLICK, btPress);
function btPress(event:MouseEvent):void {
   flb.carrega("sua imagem.jpg", "seu texto");
}

Quem estiver usando ActionScript 2 as ações são essas:

var flb:FlashLightBox = new FlashLightBox();
flb.alphaFundo = 60;
flb.corFundo = 0xFF0000;
flb.corBorda = 0xFF00FF;
flb.corPreloader = 0xFF0000;
flb.tamanhoLegenda = 10;
flb.corLegenda = 0x000000;
flb.okResize = true;
flb.corSetas = 0xFFFFFF;
flb.liberaDownload = true;
flb.mudaIdioma = "Inglês";
bt.onPress = function() {
   flb.carrega("sua imagem.jpg", "seu texto");
};

Exemplos

Imagens individuais 

Somente Flash

Componente e JavaScript

Imagens múltiplas

Somente Flash

Componente e JavaScript

Vídeos tutoriais

Em breve, alguns vídeos tutoriais mostrando como usar o Componente.

Suporte

Caso tenham algum problema, entrem em contato através de meu site ou através do Blog.

Doações

Caso queiram, agradeceria muito a doação de qualquer valor. A doação pode ser feita através do PagSeguro. A doação não é obrigatória para o uso do Componente. Obrigado