Com a introdução do HTML5 e das suas potencialidades e funcionalidades, o Flash pode ter deixado de ser a solução para todas as animações em websites de todo o mundo. Jonathan Deutsch e Ryan Nielsen juntaram-se e abraçaram um projecto, depois de terem saído dos quadros da Apple, criando o Tumult Hype. Hype é uma aplicação super intuitiva e construída a pensar no utilizador, fornecendo todas as ferramentas necessárias para a criação de animações HTML5 rapidamente e sem dificuldade. Hype, que está à venda por $29,99 na App Store, utiliza o WebKit para fazer a renderização de páginas e como referimos anteriormente foi criado a pensar no utilizador, tornando os processos simples de executar. Depois desta introdução resta dizer, Esqueça o Flash, bem-vindo às animações HTML5!

Jonathan Deutsch afirma que “é bastante claro que HTML5 é o futuro da web” pois vai “não só correr num computador como também em smartphones modernos e tablets como o iPad, o problema é que não existem aplicações de qualidade para criar conteúdo animado HTML como há para Flash”. No entanto Hype chegou e trouxe uma ferramenta de qualidade para os designers trabalharem e criarem animações HTML com brio e rapidez.

1. ANIMAÇÕES

Hype é uma ferramenta de animação que irá dar vida aos seus conteúdos. Clique em “Record” e Hype irá registar todos os seus movimentos, criando automaticamente keyframes, conforme necessário. Ou, se você preferir ter mais controle, adicionar manualmente , remover e re-organizar os keyframes para retocar o seu conteúdo.

2. TIMELINES

As Timelines pode ser adicionadas, removidas e dar play através de triggers quando você quiser . Este recurso permite adicionar interactividade - passar o mouse sobre um objeto poderia desencadear um cronograma que anima outros objetos na cena.

3. ACÇÕES

Envolva os seus visitantes accionando animações personalizadas, transições de cena, ou funções de JavaScript em resposta a acções dos usuários, como cliques do mouse, teclas, ou outros eventos.

4. SCENES

As scenes são semelhantes aos slides nos softwares de apresentação como o Powerpoint , e são uma ótima maneira de simplificar o fluxo de animação ou de conteúdo separado. Hype permite fazer as scenes que forem necessárias, e uma variedade de ações permitem alternar entre as cenas usando transições suaves.

5. SINTA O PODER DE HTML5

Hype tem suporte para vários navegadores, mostrando claramente o esforço para proporcionar a fidelidade de 100% em todos os navegadores. Por exemplo, se as transições de alto desempenho CSS3 não são suportadas, ele vai cair de volta para animações baseadas em Javascript. Quando não há fallbacks, Hype alerta sobre incompatibilidades do browser no Inspetor e no momento da exportação, assim você nunca terá surpresas desagradáveis.Hype dá ouput de verdadeiras obras de arte através de HTML5, CSS3 e Javascript. Tem suporte para técnicas avançadas como sombras em caixas, reflexos e transformações 3D.

6. ACESSÍVEL EM DISPOSITIVOS MÓVEIS

O seu conteúdo animado estará acessível a partir de dispositivos móveis, ao contrário de Flash que como sabemos de antemão, não é suportado em todos os equipamentos móveis como os smartphones e tablets. Assim ao contrário de outras ferramentas, Hype cria conteúdo para todas as plataformas, desde os mais recentes navegadores dektop até aos mais recentes smartphones e tablets.

7. INTEGRAÇÃO FACILITADA

Ao exportar Hype cria um diretório totalmente auto-suficiente que mantém todos os recursos e JavaScript para o seu conteúdo. Envie a partir daquele directório para o servidor web, cole três linhas de HTML em sua página web e você está pronto para apresentar o seu conteúdo animado em HTML5!

8. EDIÇÃO HTML

Hype fornece um conjunto rico de ferramentas para facilitar, mas às vezes você precisa de efectuar alterações manualmente. Então Hype conta com um editor HTML, em que através de apenas alguns cliques todas as suas alterações são renderizadas em tempo real, dando-lhe uma visualização ao vivo da sua edição.

9. INTEGRAÇÃO DROPBOX

Com Hype você poderá enviar o seu conteúdo directamente para a sua Dropbox, podendo desta forma partilhar os seus trabalhar com co-workers ou com clientes, para irem acompanhando o decorrer do processo. Com esta funcionalidade, torna-se bastante claro que Hype é uma aplicação muito versátil e com um potencial enorme, fornecendo aos designers tudo o que necessitam para criar animações estrondosas em HTML5 e ainda poder exportar os seus trabalhos facilmente para a web, não só através da integração como través da Dropbox!

Abraço e até já!

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. André
    12 de dezembro de 2011

    Eu já mexo com esse programa para criar anúncios para iPad, porém gostaria de saber como faço para criar interações com o mouse? (ex: efeito arrastar um objeto, ou pintar….)

    Abs



  2. Jose
    12 de dezembro de 2011

    Desculpe a minha pergunta.
    Mas este programa faz nexer as imagens não com html.
    Html nunca fez isso. Então porque e que se chama animações com html 5 se o html 5 não há comandos para girar ou a imagem ou pola a movintar.
    Aguardo resposta. Cumprimentos.



  3. André
    12 de dezembro de 2011

    Isso, ele faz tudo com JS….
    Porém gostaria de conhecer alguém que mexa com ele ah um bom tempo, para eu tirar umas dúvidas….



  4. Jose
    12 de dezembro de 2011

    Entao porque dizem que e no html se e no java script?
    nao compreendo



  5. Rick
    12 de dezembro de 2011

    Viva o HTML5 hehe

    Excelente post Diogo!



  6. André
    13 de dezembro de 2011

    Mas alguém ai manja de controlar objeto….efeito Drag…algo assim…nesse software?
    Pois legal no site do sofware ensina várias coisas..mas não achei esses efeitos para entreter o usuário…

    abs



  7. José Correia
    14 de dezembro de 2011

    Tenho um site feito por mim em php e um blog no wordpress mas nestes ultimos tempos quando vou ao meu site e ao admin do wordpress não deixa entrar e diz:
    Cabálo de tróia bloqueado
    Objecto: http://sistemabusca.hostei.com
    Infecção: js:redirector-MS [Trj]
    e a mesma coisa acontece no admin do meu blog em wordpress. Acha que foi alguem que hackeou o site? O que eu devo fazer? Porque será?



  8. André
    15 de dezembro de 2011

    Amigos, gostaria de saber como eu posso fazer efeito com Máscara…(como no Flash)
    Terei que fazer um anúncio desse estilo.
    http://extranet.fnazca.com.br/honda/civic/111215/arroba.html

    Na verdade é de boa, mas tera que ter uma mascara para a palavra ir sumindo conforme passar o carro…

    Alguém manja?
    abs



  9. Anderson dos Santos
    20 de dezembro de 2011

    Mac somente =/?



  10. Sugel
    31 de dezembro de 2011

    adobe flash player é um complemento que lhe permite visualizar videos como o do youtube por exemplo,sem ele voce não consegue assistir videos na Web,abraço.



  11. Guilherme
    17 de maio de 2012

    Pra quem usa windows da uma olhada no Adobe Edge =)



  12. pet
    7 de outubro de 2015

    muitas oessoas inteligentíssimas no mundo da web explicam muita coisa…

    mas não explicam de maneira vip, as coisas que perguntamos.

    gostaria da seguinte resposta.
    os templates flex são muito interativos futuristas.

    então como posso ter um template html5 css 3 tão arrojado como se estivesse abrindo um flex dinamico ?.. por favor me responda.



  13. pet
    7 de outubro de 2015

    vcs são mito bom prá explicar. parabéns !
    ,muitas oessoas inteligentíssimas no mundo da web explicam muita coisa…

    mas não explicam de maneira vip, as coisas que perguntamos.

    gostaria da seguinte resposta.
    os templates flex são muito interativos futuristas.

    então como posso ter um template html5 css 3 tão arrojado como se estivesse abrindo um template flex dinamico ?.. por favor me responda.


RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz