Passando do flash para o html5

Em novembro de 2011, a Adobe anunciou que interromperia o desenvolvimento do Flash Player para dispositivos móveis após o lançamento do Flash Player 11.1 para dispositivos Android e do BlackBerry Playbook, optando por se concentrar nas ferramentas para a criação de aplicativos HTML5 para dispositivos móveis. Embora a Adobe tenha reiterado o suporte do Flash Player para navegadores de computadores pessoais, muitos pensam que é apenas uma questão de tempo até que a Adobe também encerre o suporte à versão para PC. Isso é uma má notícia para as empresas que investem pesadamente em aplicativos Flash, bem como para os desenvolvedores que investem tempo na aquisição das habilidades de programação necessárias para criar aplicativos Flash.

Vamos examinar algumas das diferenças entre o Flash e o HTML5 e fornecer algumas dicas e ferramentas para ajudar a facilitar a transição entre essas duas plataformas.

Noções básicas da plataforma Flash

O Flash é frequentemente usado como um termo genérico para se referir a uma plataforma proprietária da Adobe que na verdade consiste nos seguintes componentes:

• Flash: uma ferramenta usada principalmente para projetar e criar animações
• Flex: o ambiente de desenvolvimento usado para criar aplicativos, incluindo um kit de desenvolvimento de software (SDK)
• MXML: linguagem de marcação usada em projetos Flash
• ActionScript: uma linguagem de script

Para executar um aplicativo Flash em um navegador da Web, é necessário fazer o download do plug-in Flash Player. Como alternativa, um aplicativo Flash pode ser compilado para ser executado no ambiente de tempo de execução do Adobe AIR. Novamente, o Adobe AIR deve estar instalado no computador do usuário para que um aplicativo AIR seja executado.

O Flash usa os seguintes formatos de arquivo principais:

• .fla: arquivo de projeto Flash
• .flv: arquivo de vídeo em Flash
• .swf: arquivo de aplicativo Flash / Flex compilado que pode conter arquivos .flv

Noções básicas da plataforma HTML5

HTML5 é uma plataforma padrão aberta que consiste no seguinte:

• HTML5: linguagem de marcação usada para criar páginas da Web
• Cascading Style Sheets 3 (CSS3): linguagem da folha de estilos usada para especificar a formatação dos objetos em uma página da Web HTML5
• API (Application Programming Interfaces): APIs para oferecer suporte a recursos como mensagens de arrastar e soltar e entre documentos
• JavaScript: linguagem de script usada com HTML5 para ativar a animação

Uma das vantagens do HTML5 é que ele roda nos navegadores da Web nativamente e não requer um plug-in. No entanto, para executar corretamente, um navegador deve oferecer suporte aos recursos HTML5 e CSS3 de uma página da Web HTML5. Os principais navegadores têm níveis diferentes de suporte para HTML5 e CSS3, e a implementação não está completa. O JavaScript é quase universalmente suportado pelos navegadores; no entanto, os usuários têm a opção de "desativar" o JavaScript; nesse caso, os scripts do cliente criados com JavaScript não são executados.

Os formatos de arquivo HTML5 incluem o seguinte:

• .htm / .html: arquivo de página da Web em HTML5
• .css: arquivo de folha de estilo CSS3

A partir de 2011, a especificação atual do HTML5 não especifica os formatos de arquivo de vídeo suportados, deixando a critério de navegadores individuais escolher os formatos a serem suportados. Os formatos suportados atuais incluem o seguinte:

• .mp4: arquivo de vídeo MPEG 4 com codec de vídeo H.264 e codec de áudio AAC
• .webm: arquivo de vídeo WebM com codec de vídeo VP8 e codec de áudio Vorbis
• .ogg: arquivo de vídeo Ogg com codec de vídeo Theora e codec de áudio Vorbis

Convertendo projetos em Flash para HTML5

A conversão manual de um projeto Flash complexo em HTML5 é um processo trabalhoso e demorado, devido a diferenças de plataforma. O desenvolvedor deve converter animações criadas com Flash e ActionScript em HTML5 e JavaScript. Felizmente, existem algumas ferramentas que ajudam a automatizar a conversão do Flash para HTML5.

A Adobe lançou o Wallaby, uma ferramenta experimental que pode ser baixada gratuitamente no site da Adobe Labs. O Wallaby usa um arquivo de projeto do Flash (.fla) como entrada e exporta HTML5 e suporta arquivos CSS e JavaScript. No entanto, as notas de versão do Wallaby contêm uma lista bastante longa de recursos que não são convertidos - os mais importantes são o ActionScript, filmes e som. O Wallaby é uma ferramenta limitada projetada principalmente para converter conteúdo gráfico animado em HTML5, para que possa ser integrado às páginas da Web usando uma ferramenta de design de página da Web.

O Google Labs lançou o Swiffy, uma ferramenta gratuita baseada na Web que converte um arquivo de aplicativo Flash compilado (.swf) em HTML5. A saída pode ser incorporada a uma página da Web, mas não é fácil para um desenvolvedor editar. Como o Wallaby, o Swiffy não converte todos os recursos do Flash. O Swiffy suporta a conversão do ActionScript, mas apenas a versão 2.0 (o ActionScript está atualmente na versão 3.0). A saída Swiffy é executada apenas em navegadores que suportam Scalable Vector Graphics (SVG).

Edge, uma nova ferramenta de desenvolvimento para HTML5

À medida que o HTML5 se torna a plataforma preferida, novas ferramentas estão surgindo para fornecer ambientes de design e desenvolvimento que integram HTML5, CSS3 e JavaScript.

Em agosto de 2011, a Adobe lançou uma versão de visualização da ferramenta de desenvolvimento Edge. O Edge permite que um designer crie animações HTML5 e adicione animações a projetos HTML5 existentes. Os designers de Flash reconhecerão alguns elementos familiares na interface do usuário do Edge, incluindo o estágio, a janela de propriedades e a linha do tempo da animação. O Edge, no entanto, gera arquivos CSS e JavaScript, e seu conteúdo de animação é armazenado em uma estrutura de dados JavaScript Object Notation (JSON).

No momento da redação deste artigo, o Edge antecipava seu quarto lançamento de pré-visualização. Novos recursos estão sendo adicionados a cada versão.

Convertendo o YouTube em HTML5

Um sinal da mudança para o HTML5 é que o YouTube agora oferece a opção de usar um player de vídeo HTML5 para visualizar vídeos.

Antes de oferecer a opção HTML5, todos os vídeos do YouTube eram entregues por meio de um player de vídeo em Flash. Os usuários podem fazer upload de arquivos de vídeo em quase qualquer formato, e o YouTube converterá cada vídeo no formato Flash (.flv) necessário.

O YouTube agora também está codificando vídeos com o codec de vídeo H.264 e o formato WebM para entrega em HTML5. Para visualizar vídeos no formato HTML5, você deve ter um navegador que suporte a tag de vídeo HTML5 e um formato de vídeo usado pelo YouTube.

O Legado do Flash

Como observado anteriormente, a Adobe continua desenvolvendo a versão para PC do Flash Player - por enquanto. Mesmo que a Adobe pare de oferecer suporte ao Flash Player no futuro, os aplicativos Flash herdados continuarão sendo suportados na Web - provavelmente por anos. Portanto, o Flash não vai desaparecer completamente tão cedo. As ferramentas estão disponíveis para converter aplicativos Flash em aplicativos HTML5, mas, atualmente, essas ferramentas não suportam a conversão de todos os recursos Flash. À medida que o padrão HTML5 se torna dominante, é provável que as ferramentas de conversão de arquivos Flash se tornem mais sofisticadas e novas ferramentas sejam criadas para desenvolver conteúdo com a plataforma HTML5.