epelpad

Cómo usar HTML5 Animator para hacer animaciones sin Flash

¿Qué es A5 HTML5 Animator?


Es una aplicación que permite a los usuarios realizar complejas animaciones sin necesidad de usar Flash creada por la empresa alemana Data Becker www.todate.es

Lo interesante de la herramienta es que la interfaz a utilizar es muy parecida a la de Flash, pero al terminar la animación y exportarla, el resultado es un código HTML5 totalmente listo para subir a la web.

Éste resultado puede ser visualizado en cualquier navegador compatible con HTML5, así como en la mayoría de dispositivos móviles, entre los que se incluyen el sistema operativo Android e iOS. Para más información sobre compatibilidad de HTML5 con dispositivos móviles, se recomienda visitar el siguiente enlace.



Características más importantes.


Línea de tiempo con la animación de fotogramas clave. La aplicación de las animaciones colocando manualmente los fotogramas clave en la línea de tiempo o mediante el modo de grabación simple.

Todas las habilidades de HTML5 y CSS3. Reflejos, sombras, bordes, rotación 3D, etc., son fáciles de insertar.

Escenas y soporte multi-línea de tiempo. Las animaciones pueden ser divididas en diferentes escenas y en varias líneas de tiempo paralelas que se ejecutan activándose cuando una determinada acción se lleva a cabo.

Administrador JavaScript. Ofrece la oportunidad de escribir funciones propias. Todos los objetos pueden ser abordados y manipulados con la ayuda de su ID.



Cómo usar HTML5 Animator para hacer animaciones sin Flash



Ventajas


Excelente editor WYSIWYG que garantiza la creación sencilla y un fácil posicionamiento de los objetos (textos, imágenes, videos) de la manera más sencilla arrastrando y soltando el clic del ratón.

Variedad de animaciones integradas listas para usar, así como de efectos que se pueden aplicar a un objeto de su elección.

Para usuarios avanzados se pueden crear y modificar interacciones complejas con el editor integrado de Javascript (con resaltado de sintaxis).


Tutoriales


Trabajando con la línea de tiempo

En este tutorial puedes aprender cómo crear animaciones de manera manual (introduciendo fotogramas clave en la línea de tiempo) y automáticamente, con la ayuda del modo grabación.



link: http://www.youtube.com/watch?v=53xntVxgY8M


Escenas e interacciones

Este vídeo explica cómo dividir animaciones en distintas escenas, cómo trabajar con varias líneas de tiempo e introduce las distintas opciones de interactividad, mediante la creación de eventos.


link: http://www.youtube.com/watch?v=Uoh-HednQng


Animaciones en directo y efectos

El objetivo de este videotutorial es mostrar cómo podemos trabajar con diferentes animaciones y efectos prediseñados. Además, se explica cómo generar animaciones personalizadas con ayuda de los fotogramas clave.


link: http://www.youtube.com/watch?v=-q0IBG1UgOo


Ejemplos


Podemos ver en el siguiente enlace algunos ejemplos de animaciones diseñadas con A5 HTML5 Animator, entre los que podemos encontrar:

Ejemplo de juego en HTML5

Animación tipográfica con efectos de texto

Menú animado

Presentación en diapositivas

Pelota animada

Pueden verse más ejemplos de animaciones aquí.



Probar programa


En la actualidad, A5 HTML5 Animator se encuentra en la prueba Beta, así que cualquier usuario puede descargar el programa gratuitamente previo registro y aportar nuevas ideas o corregir posibles bugs, antes del lanzamiento de la versión oficial.

Para probar el programa de la página oficial, pueden seguir el siguiente enlace.


animaciones




Espero que el programa pueda ser de su interés.

¡Un saludo a todos los que comparten esta afición por el diseño y en particular por HTML5!

11 comentarios - Cómo usar HTML5 Animator para hacer animaciones sin Flash

wifire +1
muy buena información!!!!
abyssum
la interfaz esta muy buena, aunque el programa es algo limitado
nipley -1
es copadisimo alguien tien el programa full...
KINGCOMPANY +2
que bruto no leyo nada
Jackoleo
Gracias por mencionar este programa lo voy a probar ... Gracias por compartir amigo.
TotalWar +1
que paso con el programa alguien sabe??? su sitio esta caido.. será que adobe lo compro? xD
el_num_1
Quizas lo compro facebook... El necesita amigos! D: xDD!
Redbatt
Todos los vídeos están apagados