Lightbox + Flash: A missão II

December 2nd, 2008 tagsExperimentos, Flash, JavaScript, WebDev userLucas Ferreira comments51 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!

iMasters Intercon 2008 - Eu vou!

October 23rd, 2008 tagsExperimentos, Internet, O cotidiano do dia-a-dia, WebDev userLucas Ferreira comments3 comments

iMasters Intercon

É isso ai, estou embarcando amanhã a tarde(sexta-feira) rumo ao iMasters Intercon. Espero que seja um ótimo evento, como sempre me fora relatado das edições anteriores.

Vou encontrar muita gente que sempre quis conhecer, grandes amigos virtuais e me divertir bastante =D

Se algum leitor deste blog(oi?!?) estiver indo para lá também e quiser me encontrar é só acompanhar no meu Twitter que provavelmente me localizara lá dentro.

Vejo vocês lá ;)

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... ;)

Um stream da minha vida

March 17th, 2008 tagsO cotidiano do dia-a-dia userLucas Ferreira comments1 comment

Pois é também resolvi experimentar o Tumblr como lifestream:

http://lucasferreira.tumblr.com/

Neste pequeno mix serão depositados as minhas ultimas novidades de Twitter, del.icio.us, este blog e os updates do site da Burn web.studio.

Nos vemos lá... ou não =)

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

February 11th, 2008 tagsUncategorized userLucas Ferreira comments40 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... ;)

Feeds RSS da Burn

September 20th, 2007 tagsUncategorized userLucas Ferreira commentsno comments

Seguindo a linha "não deixe este blog morrer", ja falei pra vocês que o portfolio da Burn web.studio agora possui Feeds RSS? Não? Então não deixe de acompanhar =D

http://feeds.feedburner.com/burnweb

Abracetas... ;)

Meus feeds Favoritos (meme)

September 13th, 2007 tagsInternet, O cotidiano do dia-a-dia userLucas Ferreira comments1 comment

Uepa!

Pois então, recebi esse meme dos grandes Bruno Dulcetti e Leonardo Faria, me senti até na obrigação de ressuscitar isto daqui =P

Pois vamos a lista dos Feeds, que não pode faltar no meu Google Reader:

  • Ajaxian: No lado nerd, javascript & ajax me alimentam =D
  • leonardofaria.net: O cara é meu testador oficial de paradas no mac/safari =D e tem um blog super bem atualizado, sempre ligado nas tendências internéticas ;)
  • Bruno Dulcetti: Desenvolvimento web de qualitá é com ele mesmo, várias dicas de CSS e xHTML, apesar do home andar meio atarefado no trampo, sempre que pode contribui na fita ;) A e claro, ele é um exímio dançadô (acho que é Zuqui Zouk o nome daquilo :P)
  • Simples Idéias por Nando Vieira: O cara também é top em desenvolvimento web, sempre da umas dicas legais de RoR, PHP e Linux, evidentemente vale a pena assinar o seu feed ;)
  • Igor Costa: O grande Igor Costa, além de nerd e gordinho, é um ótimo ativista da causa Flex(?!?!), seu blog é top no assunto, e ta sempre ajudando a comunidade Brazuca ;)
  • JUDÃO: Nerd que é nerd lê o grande Judas, horas pois, seriados, quadrinhos, filmes e a claro a cobertura diária desse nosso mundo-pop-louco =D
  • vida mais ou menos: Cara, o Daniell Rezende é indescritível, é o melhor blogueiro de besteiras/policial/romance/ficção de todos os tempos

Passando a Bola:

Passando a bola, eu iria passar para o Bruno Dulcetti, mas ele foi mais rápido :P, continuando a lista, passo ao Igor Costa, Nando Vieira(Já deve ter recebido de deus e todo mundo), Borbs(JUDÃO) e também ao Daniell(E por que não?).

É isso aí, meme executado. =D

Abracetas ;)

[update]
Já viram a Vergonha Nacional? É o SEO a favor do Povo!
[/update]

previous page