swfir – SWF Image Replacement
Por: Henrique C. Pereira
Publicado em Wednesday 28 February 2007 às 16:19Categoria: HTML/CSS/JScript, Internet / Web
Alguns caras que trabalham com o Zeldman desenvolveram esta nova técnica que alguns gringos estão falando por ai. Eles a chamaram de swfir (pronuncía-se "suiffer"), ou SWF Image Replacement. O blá blá blá disso ainda está se espalhando enquanto todos pensam se realmente vale a pena usar Flash para contornar algumas limitações naturais do CSS ao se trabalhar com imagens. Eu particularmente não sou fã de Flash e não sei se usaria esta técnica amplamente. De qualquer maneira swfir é uma técnica criativa e interessante.
Ela utiliza CSS, JavaScript e um arquivo swf para aplicar alguns efeitos visuais em qualquer imagen do seu site. O script te fornece alguns parâmetros padrões que te permite rotacionar uma imagen, aplicar bordas arredondadas, dar certa elasticidade etc, sejam em múltiplas imagens ou apenas em uma.
O script e todo o "kit" para aplicar isso é gratuito e pode ser baixado no hotsite que os caras criaram para o swfir. Vale lembrar também que o javascript não é obstrusivo (se desabilitar o javascript do seu browser a imagem fica sem os "efeitos" da técnica) e não é necessário colocar nenhum tag <object> ou qualquer outra coisa relacionada a embedar flash em uma página, tudo é feito pelo javascript.
O que mais me chamou a atenção foi o exemplo da imagem "elástica". Vá até a página de exemplo e aumente o tamanho da fonte pra ver. A imagem acompanha perfeitamente. Agora é só fazer suas próprias experiências…
Comentários dos leitores
Este artigo possui 12 comentários
Vi isso aí no Project.47 esses dias.
Acho interessante sim, integrar o flash onde o CSS não consegue chegar.
Acho que a semântica não sofre em nada com isso (nem nosso código, que tem poucas linhas a mais somente).
Gosto muito de flash – de ver, não tenho paciência de mexer nele hoje – e acho que aliar ele ao código que produzimos (nós que usamos os webstandards) é uma situação parecida com o que aconteceu com o AJAX.
Claro que é só uma pequena fração do AJAX – coloquei pra vocês entenderem a comparação – junção de 2 coisas numa só.
Isso ainda não acabaria com o 'problema' dos sites em flash que não têm código HTML ou se tem, é muito pouco. Mas acho que é um avanço que deve acontecer mais pra frente (um pouco pra frente ou talvez bem pra frente).
Caramba que legal essas técnicas novas..
A criatividade do pessoal que usa JavaScript me impressiona cada vez mais..
Acho péssima essa técnica porque o Flash no Linux é bugado, não tem transparência por exemplo.
Quando vi o anúncio dessa ferramenta, demorei um tempo pra entender o que ele fazia porque mandava crias bordas arredondadas e ele não fazia nada :-)
Também não gosto muito de colocar flash em minhas páginas.
Mas quanto aos efeitos em imagens, tem esse site aqui que dá um show nos efeitos das imagens (elasticidade, rotação..). Muito interessante. Interactive DOM scripting: http://www.dhteumeuleu.com/
Acho que isso nem pode ser considerado uma técnica tão especial. Já recebeu até nome! Usar o flash para mascarar um efeito não é nada de mais.
Mas sabe que isso outro dia me safou de uma boa, mudamos o layout de um portal e as fotos antigas precisavam ser tratadas para o novo visual (todas tinham que receber borda e reflexo), não tive duvida, coloquei o flash para trabalhar. Afinal tinhamos mais de 300 fotos em materias para alterar.
Confira imagem mascarada, ficou bom:
http://www.taiff.com.br/modules.php?op=modload&am…
ah.. o flash no linux não está mais tanto bugado..
a ultima versão está de boa no firefox 2.0.0.2
sobre a transparencia realmente não tinha suporte, hoje em dia eu não sei como está isso pois eu nem percebi mais.. acho que já está aceitando transparencia sim pois eu não reclamei mais sobre isso hehehe
Parece que o pessoal aqui não curte muito o Flash…
Só uma coisa, a imagem não fica em baixo do flash, mas sim dentro, passando parâmetros da imagem pelo metodo get, não procede isso da transparência não rolar no Linux.
nada de novo ou revolucionário…
Não sou, certamente um fã de flash. Não posso negar porém, que é uma ferramenta poderosa, sim.
Mesmo assim, não acho mal tentar alternativas. Que tal do lado do servidor?
Alguém já tentou mexer na foto – como o Flash mexe – usando uma toolkit de imagens do PHP? (ou do JSP, ASP.NET)
Eu nunca tentei, mas fico pensando. Não é possível? E se for, não seria uma solução mais limpa que usando Flash?
Cara, gostei muito do novo layout.. faz tempo q nao acesso. Parabens… abraço..
Muito interessante essa técnica, gostei muito da "eslastic header image", mas primeiro eu vou me aperfeiçoar no javascript, rs, bom gosto muito de mexer no flash, mas só pra me divertir fazendo animações, para introduzir em algum site só se prescisar realmente, afim de melhorar o visual do mesmo, pois o flash é uma ferramenta poderosissima e super dinâmica, mas muitas coisas da pra fazer com CSS, e algumas linguagens de programação como PHP, AJAX e o próprio javascript basta usar imaginação.
parábens pelo blog, aprendo muito aqui!!!