December 2nd, 2008
Experimentos, Flash, JavaScript, WebDev
Lucas Ferreira
51 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:
ACTIONSCRIPT:
-
//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:
ACTIONSCRIPT:
-
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!
October 23rd, 2008
Experimentos, Internet, O cotidiano do dia-a-dia, WebDev
Lucas Ferreira
3 comments

É 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á 
August 14th, 2008
AJAX, Internet, JavaScript, Tutoriais, jQuery
Lucas Ferreira
no 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
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.. 
June 1st, 2008
Experimentos, Internet, O cotidiano do dia-a-dia, PHP, WebDev
Lucas Ferreira
no 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... 
March 17th, 2008
O cotidiano do dia-a-dia
Lucas Ferreira
1 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 =)
February 11th, 2008
Uncategorized
Lucas Ferreira
40 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":
PHP:
-
<?php
-
-
function getSEDEX($cepOrigem = "88818-520", $cepDestino = "88818-400", $peso = 0.5)
-
{
-
$urlCorreios = "http://www.correios.com.br/encomendas/precos/calculo.cfm?resposta=xml&servico=40010&cepOrigem=%s&cepDestino=%s&peso=%s";
-
-
$urlCorreios =
sprintf($urlCorreios,
$cepOrigem,
$cepDestino,
$peso);
-
-
//carregando url dos correios...
-
//caso o seu servidor não permita o uso da função file para url's externas
-
//recomenda-se a utilização de CURL - http://www.php.net/manual/en/ref.curl.php
-
$carrega =
file($urlCorreios) or
die("Problemas em obter os dados dos correios");
-
-
//tratando string xml obtida. Removendo espaços e linhas para facilitar...
-
-
-
if(strlen($conteudo) <
1) return false;
-
-
//informações de origem tratadas com RegExp...
-
preg_match_all("/<uf_origem>(.+)<\/uf_origem>/",
$conteudo,
$uf_origem);
-
preg_match_all("/<local_origem>(.+)<\/local_origem>/",
$conteudo,
$local_origem);
-
preg_match_all("/<cep_origem>(.+)<\/cep_origem>/",
$conteudo,
$cep_origem);
-
-
//informações de destino tratadas com RegExp...
-
preg_match_all("/<uf_destino>(.+)<\/uf_destino>/",
$conteudo,
$uf_destino);
-
preg_match_all("/<local_destino>(.+)<\/local_destino>/",
$conteudo,
$local_destino);
-
preg_match_all("/<cep_destino>(.+)<\/cep_destino>/",
$conteudo,
$cep_destino);
-
-
//informações sobre a encomenda tratadas com RegExp...
-
-
preg_match_all("/<preco_postal>(.+)<\/preco_postal>/",
$conteudo,
$preco_postal);
-
-
//objeto contendo as informações sobre o frete...
-
-
"uf_origem" => $uf_origem[1][0],
-
"local_origem" => $local_origem[1][0],
-
"cep_origem" => $cep_origem[1][0],
-
"uf_destino" => $uf_destino[1][0],
-
"local_destino" => $local_destino[1][0],
-
"cep_destino" => $cep_destino[1][0],
-
-
"valor" =>
floatval($preco_postal[1][0])
-
);
-
-
return $sedex;
-
}
-
-
//informações processadas. Cep de Origem, Cep destino, Peso...
-
$sedex = getSEDEX("88818-520", "88818-400", 0.750);
-
-
//enfim exibimos o valor de nossa encomenda...
-
echo "R$ " .
number_format($sedex["valor"],
2,
",",
",");
//valor do sedex, já formatado em reais...
-
-
?>
Uma vez com a função getSEDEX executada, obtemos todos os dados tratado no retorno da mesma.
Fácil não?
Abracetas...
September 20th, 2007
Uncategorized
Lucas Ferreira
no 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... 
September 13th, 2007
Internet, O cotidiano do dia-a-dia
Lucas Ferreira
1 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]