Criando Animações em HTML5 no melhor estilo Flash


Na parte 1 desse post, que pode ser lida aqui,  fizemos uma breve introdução sobre a mudança que está havendo na forma de produzir conteúdo rico para internet e apresentamos duas ferramentas que se propõe a converter conteúdo produzido em Adobe Flash para HTML5: o Google Swiffy e o Adobe Wallaby.




O Google swiffy ainda está em beta
Adobe Wallaby ainda está em  preview no Adobe Labs


Nesse post vamos apresentar sem muitos detalhes 6 ferramentas visuais de criação de conteúdo rico em HTML5 e CSS3. O objetivo é listar e apontar algumas peculiaridades inerentes a cada ferramenta.

Nesse tipo de ferramenta o fluxo é composto por duas etapas produção e exportação. Na fase de produção você pode deve desempenhar pelo menos umas das seguintes atividades: diagramação dos artefatos componentes do conteúdo, animação desses mesmos artefatos e organização do conteúdo em cenas. Na fase de exportação você deve configurar as opções de saída e executar a exportação recebendo seu conteúdo rico e animado em HTML5.


Plataformas: Windows e Mac
Licensa ~= $199
30 dias para avaliar.

Sencha Animator


Já trabalho com o Sencha Animator a algum tempo e de todas as ferramentas apresentadas aqui é a única em que posso colocar a minha mão no fogo. As seqüências são organizadas em cenas e animação é trabalhada no estilo linha do tempo. A descrição te lembrou de outra ferramenta? É isso mesmo! Se você está acostumado com Adobe Flash vai se sentir a vontade com a interface. Entretanto não existem as funcionalidades avançadas como os filtros e a capacidade de crição de desenhos vetoriais complexos nativa como no Flash.

No Sencha Animator basicamente você só trabalha com 5 elementos: retângulos, elipses, imagem, vídeo e texto. Na timeline você define o estado inicial e final dos objetos que podem ser agrupados em camadas. Você pode ainda definir ações para as iterações dos usuários com os objetos no palco sem conhecimento de programação. Seria como dizer: botão de informação quando tocado, vai para a cena 2. Mas se precisar definir um código javascript personalizada para as ações também pode. A exportação gera uma página index.html e uma pasta chamada "assets" contendo todas as imagens e vídeos utilizados. Com um pouco de habilidade o usuário avançado consegue separar somente a animação e aplicá-la dentro de qualquer parte de uma outra página como se fosse um verdadeiro swf.

Para começar a experimentar você pode descarregar o instalador no site da Sencha clicando no link da imagem acima. Lá você encontra o instalador disponível para Windows e Mac. Após a instalação antes de começar a usar é preciso se registrar no forum do Sencha para obter uma licença. Essa licença lhe permitirá avaliar a ferramenta por 30 dias e após esse período, se você gostar e precisar,  poderá comprá-la por 199 dólares.



Plataformas: Somente Mac
Licensa: $19,99

Purple Animator


Se você achou o valor do Sencha Animator muito caro e resolveu buscar alternativas uma hora você vai se deparar com o Purple Animator. Disponível somente para Mac pela App Store. Devido a inexistência de uma versão de avaliação e levando em consideração o baixo investimento quando comparado aos seus rivais, você pode se sentir fortemente impelido a dar um tiro no escuro adquirindo essa ferramenta. Eu fiz isso e agora posso trazer a luz sobre essa ferramenta misteriosa para que você não precisa dar esse tiro no escuro!

Assim como o Sencha Animator, se você está vindo do Flash vai se sentir em casa com a interface e também vai se sentir falta de recursos avançados. Timeline, cenas e animações baseadas em transição são conceitos presentes nessa ferramenta.

Pontos positivos

  • Preço
  • Capacidade de importar objetos diretamente de arquivos PSD
  • Capacidade de manipular a qualidade das imagens colcadas no palco na própria ferramenta. 
  • Capacidade de configurar transições suaves entre as cenas.
  • Recentemente eles adicionaram uma extensão que dá saída em widgets para integração com o iBooks Author. 
  • Também exporta no formato Safari Webarchive que é mais compacto.
  • O software possui também uma App de iPad, Purple Moon, e um webserver interno que integrado a App permite que o conteúdo seja pré-visualizado nesse dispositivo sem necessidade de conexão de cabos.
  • Exibe informações de progresso durante o pré-carregamento.

Pontos negativos

  • Disponível somente para OSX.
  • Não possui versão trial.
  • Poucas ações para iteração com objetos no palco, a única ação que existe é alternar para alguma cena. 
  • Necessidade de um iframe caso exista a necessidade de embarcar o resultado como parte de uma página.
Plataformas: Somente Mac
Licensa: $49.99

Tumult Hype

Hype da Tumult surge numa faixa de preço intermediária $49.99. Entretanto os mais aventureiros (como eu) tiveram a oportunidade de licenciar por $ 19.90 quando ele estava em sua fase embrionária. Hoje a ferramenta em sua versão 1.5 é uma das mais completas dentre as experimentadas. O investimento certamente vale a pena.

Mais uma vez o método de trabalho é bem semelhante ao do Flash fazendo com que os usuários familiarizados com esse produto fiquem bem a vontade. Como recurso de destaque no Hype é possível adicionar diversas timelines a uma mesma cena. Essa funcionalidade permite simular ações independentes como nos MovieClips do Flash.

Já tive a o oportunidade de embarcar conteúdo produzido pelo Hype no IPad e o resultado foi muito bom (atualizado em 22/08/2012) . Nunca tinha realizado um projeto de apresentação para iPad de ponta a ponta com essa ferramenta, era sempre uma ou duas página da apresentação que acabavam utilizando essa ferramenta. Agora em agosto resolvi fazer um projeto inteiro, utilizando a versão: 1.5.1 (108) mais atual da ferramenta e o resultado foi bem frustrante. Apesar de tudo parecer correr bem no Safari para desktop, quando fizemos os testes no iPad as animações/transições mais complexas não ficaram fluidas como era de se esperar e o navegador do iPad fechou inesperadamente depois de um curto período de tempo navegando entra as páginas. Tivemos que refazer todo o trabalho no Sencha Animator. Lição aprendida: teste no iPad a cada passo que der!


Pontos positivos

  • Multiplas timelines em cada cena (capacidade de simular MovieClip )
  • Facilidade para embarcar em em outras páginas web.
  • Compátivel com IE 6 (inacreditável!)
  • Existe uma versão trial para que você possa testar antes de comprar.

Pontos negativos

  • Disponível somente para OSX.
  • (Adicinado em 22/08/2012) As animações não ficam suaves no Mobile Safari que acaba travando e as vezes fechando inesperadamente. 



Serei breve na descrição das próximas ferramentas pois nunca tive a oportunidade de experimentá-las.

Plataformas: Windows e Mac
Licensa:  $149

Motioncomposer

Essa ferramenta também a capaz de entregar conteúdo animado e interativo em HTML5, possui a peculiaridade de também exportar o resultado em swf caso assim você deseje. É isso mesmo que você entendeu! Nessa ferramenta você obtém com resultado as duas tecnologias em embate HTML5 e Flash.

Outra curiosidade é que o estilo de operação e a interface dessa ferramenta lembra mais o PowerPoint do que o Flash. Bom para quem tem intimidade com a ferramenta de criação de apresentações da Microsoft.



Pontos positivos

  • Multiplataforma  (Windows e Mac)
  • Tem saída tanto em HTML5 quanto em SWF
  • Ideal para que está acostumado com o Power Point

Pontos negativos

  • Por fugir um pouco ao esquema de timeline não é intuitivo para quem está vindo do Adobe Flash  
  • Preço. É a segunda mais cara em nossa lista. 



Plataformas: Windows e Mac
Licensa: Grátis para testar 

Adobe Edge Preview

O fato da própria Adobe estar investindo em ferramentas semelhante ao Flash mas com saída em HTML5 evidencia a força que o HTML5 vem ganhando nos últimos anos. O Edge está no labs (é o beta da Adobe) como uma versão grátis para testes. Pode-se deduzir, por ser Adobe, que quando virar produto possuirá uma integração bem grande com os seus outros produtos. Também da pra chutar que será a ferramenta mais cara já apresentada nesta página.








E como brinde mais uma ferramenta que eu descobri por esses dias

Radi

Ainda está em beta mas perece possuir grande potencial. É a única dentre as ferramentas aqui que é possível criar e animar gráficos vetoriais. Trabalha com esquema de timeline entretanto passa longe de ser intuitivo, pois possui muito mais recursos do que as outras ferramentas apresentadas aqui. Trabalha exclusivamente com o elemento canvas gerando o código javascript para as animações. O resultado me pareceu bem pesado até mesmo para o navegador do meu desktop. Mas acho que vale a pena continuar acompanhando para ver no que da no futuro.



Conclusão

Essas são algumas das opções de ferramentas visuais para produção de conteúdo HTML5  animado e interativo existentes no mercado. Cada uma está em um nível de amadurecimento diferente entretanto todas elas entregam o que prometem. Se você é usuário Mac está bem servido, se for usuário de windows também não ficou na mão. Espero que essa lista te ajude a encontrar a ferramenta que se melhor a sua necessidade.

Estou pretendendo em um próximo post criar uma lista comentando as ferramentas on-line para produção de conteúdo HTML5. Vocês conhecem alguma?

Comentários

  1. Para quem se garante em criar sem auxílio visual somente codificando em javascript, conheci hoje o http://snapsvg.io/

    ResponderExcluir
  2. Pesquei mais uma: https://www.google.com/webdesigner/

    ResponderExcluir
  3. Atualizando
    Morreram: Motioncomposer e Sencha Animate
    Consolidou: Adobe Edge Preview (virou Adobe Edge Animate)
    Nasceu: Saola Animate: https://alternativeto.net/software/saola-animate/

    ResponderExcluir
  4. Meu novo favorito: https://www.hippani.com/

    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?

BlueStacks - Agora é mais fácil rodar Android no seu PC ou Mac