Lightbox + Flash: A missão II

December 2nd, 2008 tagsExperimentos, Flash, JavaScript, WebDev userLucas Ferreira comments64 comments

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:

PLAIN TEXT
ACTIONSCRIPT:
  1. //lightBox function for call JavaScript...
  2. function Lightbox(src, title)
  3. {
  4. if(typeof src == "string") src = [src];
  5. if(typeof title == "string") title = [title];
  6. if(typeof title == "undefined") title = [];
  7.  
  8. function addSlashes(str) { return "'" + escape(str) + "'"; }
  9.  
  10. if(flash.external.ExternalInterface && flash.external.ExternalInterface.available)
  11. {
  12. flash.external.ExternalInterface.call("Lightbox.start", src, title);
  13. }
  14. else
  15. {
  16. for(var i=0; i<src.length; i++) src[i] = addSlashes(src[i]);
  17. for(var i=0; i<title.length; i++) title[i] = addSlashes(title[i]);
  18.  
  19. getURL("javascript:Lightbox.start([" + src.join(",") + "],[" + title.join(",") + "]);void(0);");
  20. }
  21. }

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:

PLAIN TEXT
ACTIONSCRIPT:
  1. bt1.onRelease = function()
  2. {
  3. Lightbox(['images/image-1.jpg', 'images/thumb-1.jpg'], ['Legend Test', 'çóh?']);
  4. };

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!

jQuery - Belas introduções

August 14th, 2008 tagsAJAX, Internet, JavaScript, Tutoriais, jQuery userLucas Ferreira commentsno comments

Bom,

Quero ver se tiro um tempinho para falar sobre a super biblioteca de funções JavaScript chamada jQuery, que muda/facilita a vida de qualquer desenvolvedor web, chega até a ser um caso de depedencia :P

Pois bem, vo indicar aos leitores dois belos tutoriais para iniciantes, overview geral mesmo:

Usando jQuery na prática do Nando Vieira

e este Guia completo sobre jQuery para iniciantes que vi no site Pinceladas da Web

Abracetas.. ;)

Boleto BESC - Projeto BoletoPHP

June 1st, 2008 tagsExperimentos, Internet, O cotidiano do dia-a-dia, PHP, WebDev userLucas Ferreira commentsno comments

Olá =D

Vou abrir este pequeno parênteses aqui para avisar sobre a minha contribuição no Projeto BoletoPHP.

Ajudei o projeto desenvolvendo o boleto do banco BESC, confiram lá.

E veeeva o open source!

Abracetas... ;)

Correios, SEDEX e o tão famigerado Cálculo de Frete

February 11th, 2008 tagsUncategorized userLucas Ferreira comments42 comments

Opa?

Nesta vida de desenvolvedor web alguns desafio tendem a surgir em nosso caminho, um deles sem dúvida será este que abordarei aqui, de forma rápida de direta, o Cálculo de Frete dos Correios. Com base em cep de origem, cep de destino e o peso da encomenda, obteremos o valor do SEDEX. Recurso muito utilizado em lojas virtuais e sistemas com delivery na web =)

Algo que muitas pessoas não sabem, é que os Correios disponibilizam um serviço de consulta web, com resposta em XML(as possibilidades iniciam aí :P), de forma simples, acessado via URL, sem webservices, ai vai um exemplo deste acesso:

http://www.correios.com.br/encomendas/precos/calculo.cfm?resposta=xml&servico=40010& cepOrigem=17012-350&cepDestino=01102-000&peso=0.31

Percebam que ao acessarmos o endereço acima, obtemos um XML simples, com todos os dados necessários para a consulta. Tudo que devemos fazer é completar a URL acima com nossos dados, da seguinte forma:

servico=40010 é sedex, outros serviços tem que procurar no site dos correios
cepOrigem=17012-350 -> CEP de Origem (do teu cliente no caso)
cepDestino=88818-400 -> de quem vai receber
peso=0.62 -> peso da encomenda

Uma vez com nossa requisição devidamente configurada, basta tratarmos o XML da forma mais interessante para seu projeto. Javascript, Flash, PHP, Java, Ruby on Rails e por aí vai =P

Neste caso, criaremos uma função de exemplo em PHP para tratarmos esta resposta, e obtermos os dados de forma fácil e direta. Aí vai ela "mastigadinha":

PLAIN TEXT
PHP:
  1. <?php
  2.    
  3.     function getSEDEX($cepOrigem = "88818-520", $cepDestino = "88818-400", $peso = 0.5)
  4.     {
  5.         $urlCorreios = "http://www.correios.com.br/encomendas/precos/calculo.cfm?resposta=xml&servico=40010&cepOrigem=%s&cepDestino=%s&peso=%s";
  6.        
  7.         $urlCorreios = sprintf($urlCorreios, $cepOrigem, $cepDestino, $peso);
  8.        
  9.         //carregando url dos correios...
  10.         //caso o seu servidor não permita o uso da função file para url's externas
  11.         //recomenda-se a utilização de CURL - http://www.php.net/manual/en/ref.curl.php
  12.         $carrega = file($urlCorreios) or die("Problemas em obter os dados dos correios");
  13.        
  14.         //tratando string xml obtida. Removendo espaços e linhas para facilitar...
  15.         $conteudo = trim(str_replace(array("\n", chr(13)), "", implode($carrega, "")));
  16.        
  17.         if(strlen($conteudo) <1) return false;
  18.        
  19.         //informações de origem tratadas com RegExp...
  20.         preg_match_all("/<uf_origem>(.+)<\/uf_origem>/", $conteudo, $uf_origem);
  21.         preg_match_all("/<local_origem>(.+)<\/local_origem>/", $conteudo, $local_origem);
  22.         preg_match_all("/<cep_origem>(.+)<\/cep_origem>/", $conteudo, $cep_origem);
  23.        
  24.         //informações de destino tratadas com RegExp...
  25.         preg_match_all("/<uf_destino>(.+)<\/uf_destino>/", $conteudo, $uf_destino);
  26.         preg_match_all("/<local_destino>(.+)<\/local_destino>/", $conteudo, $local_destino);
  27.         preg_match_all("/<cep_destino>(.+)<\/cep_destino>/", $conteudo, $cep_destino);
  28.        
  29.         //informações sobre a encomenda tratadas com RegExp...
  30.         preg_match_all("/<peso>(.+)<\/peso>/", $conteudo, $peso);
  31.         preg_match_all("/<preco_postal>(.+)<\/preco_postal>/", $conteudo, $preco_postal);   
  32.        
  33.         //objeto contendo as informações sobre o frete...
  34.         $sedex = array(
  35.             "uf_origem" => $uf_origem[1][0],
  36.             "local_origem" => $local_origem[1][0],
  37.             "cep_origem" => $cep_origem[1][0],
  38.             "uf_destino" => $uf_destino[1][0],
  39.             "local_destino" => $local_destino[1][0],
  40.             "cep_destino" => $cep_destino[1][0],
  41.             "peso" => floatval($peso[1][0]),
  42.             "valor" => floatval($preco_postal[1][0])
  43.         );
  44.        
  45.         return $sedex;
  46.     }
  47.    
  48.     //informações processadas. Cep de Origem, Cep destino, Peso...
  49.     $sedex = getSEDEX("88818-520", "88818-400", 0.750);
  50.    
  51.     //enfim exibimos o valor de nossa encomenda...
  52.     echo "R$ " . number_format($sedex["valor"], 2, ",", ","); //valor do sedex, já formatado em reais...
  53.  
  54. ?>

Uma vez com a função getSEDEX executada, obtemos todos os dados tratado no retorno da mesma.

Fácil não?

Abracetas... ;)

Twitter de c* é rola!

August 27th, 2007 tagsUncategorized userLucas Ferreira comments2 comments

Opa,

Blog morto é pros fracos ;)

Também criei um, mais ainda não descobrir muito bem pra que que server, mais o lance no talk é massa =D

http://twitter.com/lucasferreira

;)

Lightbox + Flash

March 29th, 2007 tagsExperimentos, Flash, JavaScript, O cotidiano do dia-a-dia, Tutoriais, WebDev userLucas Ferreira comments63 comments

UPDATE: Atenção povo, fiz um novo artigo sobre este mesmo assunto, desta vez melhorado, cliquem aqui para acompanhar.

Opa?

Acho que a maioria dos desenvolvedores web já conhecem o Lightbox. É um efeitinho super supimpa (tirando o peso) de ampliar imagens, baseado em Javascript e CSS.

Pois bem, devido ao fato de ser JS e CSS, muita gente fica na mão se deseja utilizar o recurso no Flash, contando que estejam sem tempo ou sem conhecimento, para desenvolver tal efeito 100% Flash. Aí que entra a integração que apresentarei aqui ;)

Lightbox + Flash

Para utilizar o LightBox acionado a partir do flash, primeiro você deve fazer o de praxe como apresentado neste link(carregar os arquivos .js e .css, as imagens e etc), deixar tudo certinho como se fosse usar o LightBox normalmente, isso tudo você acerta no HTML que receberá o SWF(Flash) com a ação em questão.

Depois coloque a seguinte função JavaScript(entre as tags SCRIPT) no mesmo HTML:

PLAIN TEXT
JavaScript:
  1. function showFoto(src)
  2. {
  3. //criando um link falso, para o LightBox captar as informações
  4. var a_false = document.createElement("A");
  5. a_false.rel = "lightbox";
  6. a_false.href = src;
  7. //chamando a função do lightbox responsável pelo início das ações
  8. myLightbox.start(a_false);
  9. //anulando o link
  10. a_false = null;
  11. }

E no Flash, em nosso botão, chamamos na ação onRelease, o seguinte AS:

PLAIN TEXT
ACTIONSCRIPT:
  1. getURL("javascript:showFoto('MINHAFOTOAQUI.jpg');", "_self");

Agora, é só publicar, botar o SWF no html preparado e só alegria =D

Obs.: Para o efeito ficar completo, é necessário o SWF estar com fundo transparent(wmode=transparent) ou opaco(wmode=opaque), para que o lightbox não fique por trás do SWF.

[update]

Na ultima versão do LightBox, colocaram uma função para esconder os SWFs da página na hora do efeito, logo quem notar que seu SWF sumiu do fundo ao aciona-lo, já sabe o porque :S

Neste link http://www.huddletogether.com/projects/lightbox2/#download tem o changelog da versão, com as mudanças que teve.

Abracetas... ;)

Flash Tag Object - Update

March 9th, 2007 tagsUncategorized userLucas Ferreira comments2 comments

Dae meu povo =D

Firme?

Venho por meio deste, comunicar que fiz uma atualização na flashtag, reforcei ainda mais a correção daquele bug do IE 7 no método automatic, melhorei algumas coisinhas no code, e por fim adicionei um método interessante getObject, responsável por pegar o objeto DOM do SWF, direto na instancia do FlashTag. Vejam um exemplo aqui.

Para baixar a ultima versão da flashtag clique aqui.

Abraços!

Feeds no FeedBurner

November 15th, 2006 tagsUncategorized userLucas Ferreira comments1 comment

Opa!

Aí galerinha do mal que acompanha meu blog, negócio é o seguinte, me rendi ao feedburner também:

http://feeds.feedburner.com/lucasferreira

Pois então, favor atualizar o endereço do rss de vcs ;)

Abraços!

previous page