Convertendo Flash para HTML5

Foi em abril de 2010 que Steve Jobs publicou esta carta explicando os motivos pelos quais iPhones, iPads e iPods não suportavam, nem suportariam, conteúdo Flash no Mobile Safari e que apostava na combinação de três tecnologias abertas: HTML5, CSS e Javascript como forma de substituição. Mais de um ano se passou e Apple se manteve firme nessa decisão.

flash x html5

É fato que, conteúdo produzido em Flash e embarcado no Adobe Flash Player povoa massivamente  as páginas de internet que visitamos todos os dias através de nossos modernos navegadores em nossos poderoso computadores de mesa. O Flash ainda é a ferramenta mais empregada na produção de material publicitário multimídia, jogos e vídeos para web. Talvez você queira dar uma olhada nas estatísticas de penetração do Adobe Flash Player: http://goo.gl/yzqqy.
Entretanto, é crescente a doutrina de uma arquitetura denominada "mobile first" que prega que as novas soluções deveriam ser desenhadas primeiro para dispositivos móveis e depois para desktop. O argumento é que o desenho de uma solução para um dispositivo mais limitado faz com que os arquitetos tenham que focar no que realmente importa. Você pode ler mais sobre isso neste artigo de Luke Wroblewski: www.lukew.com/ff/entry.asp?1117 .
Dentro desse contexto acredito que nós, desenvolvedores, designers, que no passado fomos muito felizes na produção de conteúdo em Flash e com Flash, encontraremos cada vez mais desafios que não mais poderão ser solucionados com esta ferramenta. É por esse motivo que gostaria de compartilhar com vocês seis ferramentas que existem hoje no mercado e que podem nos ajudar na empreitada produzir conteúdo rico, interativo e animado utilizando somente as 3 tecnologias propostas por Steve Jobs em sua famosa carta.

Vou dividir as ferramentas em dois grupos fáceis de entender: as de criação e as  de conversão de conteúdo. Vamos começar pelos conversores de conteúdo pois são apenas dois.

Ferramentas de conversão de Flash para HTML5

Google Swiffy e Adobe Wallaby são duas ferramentas do tipo "coloca o burro de um lado e sai salsicha do outro", ou seja, o fluxo de trabalho nessas ferramentas se inicia no próprio Adobe Flash e a saída do flash é processada nelas gerando o HTML5. A vantagem é que nesse tipo de ferramenta não existe a necesidade de aprender outra ferramenta.
Entretanto nenhum dos conversores citados aqui possuem garantia de continuidade (labs e beta)
google swiffy logo

Google Swiffy

Esta ferramenta do Google é online e é beta. Para utiliza-la deve ser realizado o upload do arquivo flash compilado, .swf, então ela lhe devolve como download a página HTML5 como resultado. Existe também a opção de fazer o baixar de uma extensão para instalação no Flash (IDE) que permite que o processo todo seja realizado sem a necessidade de acessar a página no navegador. A extensão entretanto não dispensa a necessidade de conexão com a internet.
O swiffy possui uma série de limitações, que você pode ler no FAQ,  mas cumpre o trabalho convertendo até mesmo ações simples codificadas em ActionScript 2.0 em resposta ao click em um MovieClip por exemplo.
O código HTML5 gerado é compacto e de difícil leitura. Mesmo assim nota-se o intenso uso de SVG na composição das animações. Por incrível que pareça no Swiffy um único arquivo html é gerado contendo todo o necessário: tags, css, javascript e imagens. Mas você deve estar se perguntando: - Como assim imagens dentro do html? É que eles usam data uri scheme.
Tive a oportunidade de converter algumas animações que eu precisava embarcar em um iPad, entretanto o resultado não foi bom. As animações e ações ficaram muito pesadas, apresentando lentidão e muitas vezes encerrando o Mobile Safari por falta de memória.

Wallaby


wallaby logo
O Wallaby é um conversor desenvolvido pela própria ADOBE. Ele faz um trabalho semelhante ao realizado pelo Swiffy, só que de maneira um pouco diferente.
Para testar o Wallaby primeiramente você deve descarregá-lo gratuitamente nesse link. Aí você encontrará o instalador disponível tanto para Windows quanto para Mac. Não há mistérios na instalação, apenas faça como se fosse instalar qualquer outro programa no seu SO.
Diferentemente do Google Swiffy a entrada do Wallby não é o Flash compilado (swf) mas sim arquivo fonte do flash (.fla). Além disso a saída HTML5 é dividida em vários artefatos, sendo o código bem mais legível e editável do que o gerado pelo swiffy. Outra importante diferença é que não há necessidade de estar conectado a internet para realizar a conversão.
Nos testes que realizei para escolher entre o Google Swiffy e o Wallaby pude observar que os gradientes gerados pelo Wallaby tinham qualidade bem inferior.
Infelizmente o Wallaby faz parte do Adobe Labs então não nenhuma garantia de continuidade para essa ferramenta de potencial enorme.

Como este post apesar de superficial já está muito extenso deixarei para um próximo post a próxima categoria. Então estaremos listando 5 ferramentas que são capazes de criar conteúdo rico e animado em HTML5 numa pegada muito semelhante a do FLASH. Aguarde: "Do Flash para o HTML5 - Parte 2 - 6 Ferramentas visuais de criação (IDEs)" em breve aqui no blog.

Comentários

  1. Se o seu alvo for somente Firefox, o que eu acho difícil você pode também dar uma olhada nesse projeto http://mozilla.github.io/shumway/

    ResponderExcluir

Postar um comentário

Obrigado pelo seu comentário!

Postagens mais visitadas deste blog

Curtir publicações automaticamente no Facebook. Por que isso não é uma boa idéia?