Lightbox + Flash: A missão II
December 2nd, 2008
Experimentos, Flash, JavaScript, WebDev 
Lucas Ferreira
Olá,
Devido a grande quantidade comentários em um post sobre este mesmo assunto, resolvi dar uma revisada na técnica.
Fato que eu prefiro e utilizo em meus projetos o Shadowbox por ser muito mais completo, extensível, adaptável e ainda por cima funciona com jQuery. Se alguém quiser saber como operar Flash + Shadowbox confira aqui.
Porém neste post iremos trabalhar novamente com Lightbox, dado a quantidade de dúvidas e também por ser mais popular.
Abordarei inicialmente e como sempre com ActionScript 2.0 porém farei também em outro post como utilizar a solução em AS 3.0.
A idéia é a mesma, baixa-se o script do Lightbox, descompacte-o na pasta de seu projeto e depois é só ligar o flash ao mesmo.
O objetivo final é termos uma ação semelhante a este exemplo que disponibilizarei no final do artigo. Não abordarei, assim como no outro post, como instalar o Lightbox em sua página HTML, dado que isto está na página do script.
Mãos a obra
Um dos problemas mais relatados em comentários no artigo/post anterior é a questão de que as últimas versões do Lightbox estarem com uma ação embutida na sua execução que esconde os SWFs da página, o que para muitos esteticamente não é interessante.
É aí que entra o foco principal desta nova postagem. Eu fiz um hack em JavaScript para o Lightbox afim de evitar essa ação de esconder os SWFs o máximo possível e também facilitar a chamada de ação junto ao flash. Este script pode ser baixado aqui e deverá ser carregado junto com o seu HTML. Desde que o SWF tenha fundo(wmode) transparent ou opaque, e com excessão de versões mais antigas do FlashPlayer em ambiente linux, no restante dos sistemas operacionais e navegadores não terá problema algum com SWFs.
Além deste pequeno hack, criei uma função para auxiliar a chamada do Lightbox pelo Flash, confiram:
-
//lightBox function for call JavaScript...
-
function Lightbox(src, title)
-
{
-
if(typeof src == "string") src = [src];
-
if(typeof title == "string") title = [title];
-
if(typeof title == "undefined") title = [];
-
-
function addSlashes(str) { return "'" + escape(str) + "'"; }
-
-
if(flash.external.ExternalInterface && flash.external.ExternalInterface.available)
-
{
-
flash.external.ExternalInterface.call("Lightbox.start", src, title);
-
}
-
else
-
{
-
for(var i=0; i<src.length; i++) src[i] = addSlashes(src[i]);
-
for(var i=0; i<title.length; i++) title[i] = addSlashes(title[i]);
-
-
getURL("javascript:Lightbox.start([" + src.join(",") + "],[" + title.join(",") + "]);void(0);");
-
}
-
}
Com essa função podemos chamar a execução com maior facilidade, também implementei a possibilidade abrir um grupo de fotos por vez, aproveitando dos recursos de galeria do Lightbox. Coloquei a possibilidade de colocar uma legenda/title por foto. Ficou bem mais completo que a nossa primeira tentativa.
Copie a função acima e coloque dentro de seu arquivo .fla e depois basta colocar uma chamada para função Lightbox em seu objeto para que a mágica aconteça. Exemplo:
-
bt1.onRelease = function()
-
{
-
Lightbox(['images/image-1.jpg', 'images/thumb-1.jpg'], ['Legend Test', 'çóh?']);
-
};
No código acima, estamos setando uma ação de clique/release a um botão chamado bt1. Ao clicar, será aberto um grupo de imagens(array de valores no primeiro argumento), com suas respectivas legendas(array de valores do segundo argumento).
Finalizando
Então é isso pessoal, creio que agora ficou redondinho. Se alguém achar algum bug ou quiser testar melhor no Internet Explorer(só dei uma testada assim por cima :P) fiquem a vontade.
Para baixar um exemplo completo de utilização junto com todos os scripts clique aqui.
Abraços!
51 Comments
Comments RSS
TrackBack Identifier URI
Leave a comment
