WebAnimator Plus: Animaciones HTML5 sofisticadas simplificadas
No hace mucho tiempo, Flash era un elemento establecido de la web. ¿Necesitabas algo relacionado con la animación? Estabas más o menos condenado a usarlo. Por supuesto, Flash era el mandamás, el macho alfa, y no existían alternativas. Pero eso fue sólo la mitad de su éxito. La segunda mitad fue su facilidad de uso. Los videos Flash se crearon utilizando una interfaz gráfica fácilmente comprensible. Incluso los anunciantes pudieron usarlo 😉 Entonces comenzó la marcha triunfal de HTML5 y CSS3 y cambió todo, incluso la forma en que se anima la web. La herramienta WebAnimator Plus trae de vuelta esa sensación de Flash mientras produce resultados perfectamente compatibles con HTML5 y CSS3.
La superficie de WebAnimator es una reminiscencia de Flash
¿Recuerdas Flash y solías usarlo? WebAnimator Plus le resultará perfectamente familiar. La superficie es más o menos la misma, incluso las funciones se nombran de forma idéntica. Las áreas centrales son el escenario y la línea de tiempo. ¿Suena en tu oído? Los elementos gráficos se colocan en todo el escenario y luego se animan utilizando la línea de tiempo y su arquitectura de fotogramas clave. Como podríamos hacer en Flash, se pueden crear múltiples escenas y diseñarlas por separado, así como animarlas.
WebAnimator Plus parece familiar para los usuarios de Flash
Además de la posibilidad de crear y animar formas geográficas simples, las imágenes de mapa de bits también se pueden colocar en el escenario y procesar desde allí. Estos mapas de bits están limitados a jpeg, png y gif por ahora. Los vectores no son compatibles en absoluto. SVG sería genial como formato relacionado con HTML5. Probablemente esto sea compatible con una de las próximas versiones. Por ahora tendrás que arreglártelas sin…
Te habrás imaginado que los textos también son compatibles, y tenías razón. Además de todas las fuentes del sistema, WebAnimator Plus le brinda acceso al directorio de fuentes de Google con sus cientos de fuentes web. Estos se pueden incrustar sin jugar con el CSS. Una vista previa le permite juzgar qué fuente en qué tamaño es la mejor opción para su proyecto.
Los archivos multimedia, como audio y video, se pueden agregar a cualquier proyecto. WebAnimator Plus se preocupa por todos los diferentes formatos de archivo para asegurarse de que la mayoría de los navegadores modernos sean compatibles. Sin embargo, la herramienta no realiza una conversión automática, pero le permite ingresar diferentes formatos para un mismo contenido multimedia. Los videos pueden tener controles visibles si así lo desea.
. 
HTML5: simplemente agregue videos en WebAnimator Plus
Creación y posicionamiento de elementos
Cada elemento colocado en el escenario puede diseñarse y manejarse individualmente. Dependiendo del tipo de elemento, hay diferentes propiedades disponibles. Estos incluyen, entre otros, colores de relleno, márgenes, opacidad, rotación y más. Las populares sombras paralelas también están disponibles. Desafortunadamente, estos siempre se mostrarán como rectángulos sin importar la forma de los elementos.
Hay una especie de solución para eso. WebAnimator Plus puede crear reflejos en el escenario de cualquier elemento. Esto es simple. Usted define el desplazamiento y la profundidad y listo. Los reflejos son una propuesta de venta única de la herramienta. Con solo HTML5 y CSS3, esto no sería posible.
Agregar reflexión como efecto especial a cualquier elemento.
Todas las alteraciones se muestran inmediatamente en el escenario. Además de eso, hay una función de vista previa dedicada para su navegador de elección.
Creación de animaciones
El enfoque central de WebAnimator Plus es, como su nombre ya sugiere, la creación de animaciones. Esta funcionalidad también resultará familiar para los usuarios de Flash. Cada elemento en el escenario se refleja como tal en la línea de tiempo principal, en caso de que desee animarlo. Por defecto, se piensa que el movimiento de elementos se realiza hacia la izquierda o hacia arriba. Puede crear más opciones fácilmente.
La línea de tiempo en WebAnimator Plus permite animaciones muy básicas y muy avanzadas
Estas características adicionales pueden ser escalar y rotar elementos, alterar colores o efectos de sombra. Hay docenas de opciones disponibles. Cambiar un elemento requiere dos fotogramas clave. Uno define el aspecto del elemento al comienzo de la animación; el segundo define su estado final. Después de crear estos dos, cambie los elementos individualmente. Esto se puede hacer arrastrando y soltando o usando el cuadro de diálogo de propiedades.
La función Timing permite definir el tipo de animación. Si estás familiarizado con CSS3, estos tampoco te sorprenderán. Todas las funciones disponibles para «transiciones» y «animaciones» están disponibles, por ejemplo, «lineal», «entrada gradual» y «salida gradual». Es posible definir su función de temporización por curva bézier.
WebAnimator Plus le permite probar las animaciones directamente desde el software. No necesita llamar a un navegador varias veces para lograrlo.
Animaciones en vivo
Otra especialidad de WebAnimator Plus es el uso de animaciones en vivo. Estas son plantillas de animación predefinidas que aplicas a cualquier elemento con solo un clic. Las animaciones en vivo incluyen animaciones circulares, elementos que vuelan de izquierda a derecha o que se desplazan desde la parte superior. Es posible combinar animaciones en vivo y tus propias animaciones desde la línea de tiempo. Por ejemplo, podría agregar un efecto de pluma a su animación que la detendría suavemente al final.
Agregue efectos con un solo clic, con animaciones en vivo
Además existen animaciones en vivo para textos. Estire las letras como si fueran una banda elástica o júntelas como si fueran un acordeón o haga que se vean como un corazón bombeando. Estas animaciones en vivo se ven extraordinariamente sofisticadas sin ninguna exageración.
Adición de eventos a elementos
¿Qué sucede si desea algo más que ejecutar una o más animaciones? ¿Qué pasa si necesitas algo de interacción? Los eventos de WebAnimator lo tienen cubierto. Estos permiten reaccionar a la entrada del usuario por clic o desplazamiento. Las acciones invocadas de esa manera incluyen la llamada de un sitio web, el inicio de una escena diferente o el salto a otra animación con línea de tiempo.
Los eventos traen interacción a la mesa
Si necesita el más alto nivel de individualidad, cree sus propios eventos usando JavaScript. Sin embargo, esto no será necesario para la mayoría de los casos de uso, ya que WebAnimator Plus cubre la mayoría de los propósitos imaginables.
Descarga de animaciones como exportación HTML5
WebAnimator Plus almacena proyectos en su formato propietario. Una vez terminado tendrás que hacer una exportación HTML5 manual. Al hacerlo, la herramienta crea el HTML, CSS y JavaScript necesarios. El archivo HTML parece un poco desordenado. Su único propósito es incrustar el CSS y JavaScript. Todas las animaciones se sirven a través de JavaScript. Sin embargo, se utilizan animaciones CSS3. La exportación también contendrá jQuery y Modernizr automáticamente. Se necesitan ambas bibliotecas para que los resultados funcionen correctamente.
Las animaciones son compatibles con todos los navegadores modernos. Internet Explorer es compatible desde la versión 10. Los navegadores no compatibles pueden recibir una imagen en lugar de la animación.
Integración de animaciones en WebSite X5 Professional 11
Si es usuario del creador de páginas de inicio WebSite X5 Professional 11, incrustar animaciones es perfectamente fácil ya que estas dos herramientas cooperan a la perfección. WebSite X5 Professional 11 es uno de estos creadores de páginas visuales que trabaja con un enfoque basado en objetos. El contenido de cualquier página está formado por objetos que pueden ser imágenes, textos y más. Las animaciones realizadas con WebAnimator también se sirven como objeto.
Integre fácilmente animaciones en WebSite X5 Professional 11
Lo que hace Sitio web X5 Profesional 11 y WebAnimator Plus los compañeros perfectos. No solo necesita que no juegue con el código fuente. WebSite X5 incluso se preocupa por importar las adiciones necesarias, como jQuery. De esa forma, integrar una animación se vuelve tan fácil como integrar una imagen.
Conclusión
WebAnimator Plus es una solución completa para todo tipo de animaciones. Es lo suficientemente grande como para crear proyectos web completos con él, al igual que lo permitía Flash. La principal diferencia es que WebAnimator PLUs no se basa en un formato propietario sino en estándares abiertos como HTML5, CSS3 y JavaScript. De esa manera, sus resultados se ejecutan en clientes móviles sin modificaciones ni complementos.
WebAnimator Plus necesita un sistema Windows, cuesta 89,99 euros y está disponible para una prueba de manejo de dos semanas. La documentación es elaborada, un foro ofrece soporte e intercambio con otros usuarios. La interfaz del software se puede ejecutar en inglés, alemán e italiano.
#WebAnimator #Animaciones #HTML5 #sofisticadas #simplificadas
