Tema 3 Animatron Democratización del HTML5: diseño web para todos los públicos Proyecto OpenCourseWare-UNIA (ocw.unia.es)

Autora

Encarni Hinojosa

ÍNDICE

Introducción

Objetivos

Contenidos

3.1

Cómo crear una animación sencilla.

Exportar la animación como código HTML5.

Incorporar la animación en una web o blog.

3.2

Elaborar una animación algo más compleja.

Exportar la animación en formato vídeo.

3.3

Realizar un gif sencillo.

Cómo compartir nuestro gif en redes sociales.

Ideas clave

Otras referencias

Tareas

INTRODUCCIÓN

Animatron es una herramienta que se originó debido al empeño de un padre por enseñar a su hija a hacer sus propias animaciones. Dmitry Skavish creó así una startup que hoy es uno de los servicios más interesantes para iniciarse en el mundo de la animación.

Esta herramienta online y gratuita ofrece recursos gráficos propios y una interfaz muy amena e intuitiva que permite elaborar animaciones por parte de cualquier usuario no iniciado (incluso niños).

La animación es una de las tendencias con más éxito del diseño web actual y uno de los métodos de transmisión de información que promete reinar en un futuro a corto plazo. En las redes sociales es el gif el que ha llegado para quedarse. Tanto Facebook como Twitter han apostado por un formato animado pero con un 'peso' mínimo, ideal para su consumo masivo en los dispositivos móviles.

Animatron es una herramienta para crear animaciones sencillas, pero con otros programas, como el sensacional After Effects de Adobe, se pueden hacer maravillas audiovisuales, donde el 'motion graphic' se ha convertido en un nuevo género del arte.

OBJETIVOS

Los objetivos de este tema se centrarán en los conocimientos que deberá adquirir el alumno para poder usar la herramienta Animatron:

Crear una animación sencilla y exportarla como código HTML5.

Elaborar una animación algo más compleja y exportarla en formato vídeo.

Realizar un gif sencillo y compartirlo en redes sociales.

CONTENIDOS | 3.1

1. Cómo crear una animación sencilla.

Pulsamos en CREAR ANIMACIÓN.

Entramos en la interfaz de Animatron. Lo fundamental es:

Pulsamos en la preferencias/opciones del proyecto.

Ponemos un nombre al proyecto. Podemos cambiar aquí el tamaño, seleccionar si queremos que se reproduzca en Bucle, añadir una Descripción e, incluso, unas Etiquetas. Pulsamos en Mercado.

Pulsamos en Fondos.

Seleccionamos el fondo que queremos y lo arrastramos al lienzo.

Para volver al menú del Mercado, pulsamos en Back.

Pulsamos en Formas.

Se nos presentan diferentes categorías. Seleccionaremos Nature.

Seleccionamos la forma y la arrastramos al lienzo.

Pulsamos en el objeto para poder editarlo.

Pulsamos en uno de los puntos de las esquinas del área del objeto. Para modificar el tamaño respetando las proporciones del objeto, dejaremos pulsada la tecla de mayúsculas del teclado y arrastraremos el cursor pulsando en una de estas esquinas.

Movemos el objeto hasta fuera del lienzo. Pulsamos en el cuadro de color de Rellenar.

Cambiamos el color y pulsamos en Back para volver al Mercado.

Pulsamos en Conjuntos animados.

Buscamos Hipster Couple y pulsamos.

Si dejamos el cursor encima de cada dibujo, veremos una previsualización de la animación. Buscamos el hipster con bicicleta y lo arrastramos al lienzo.

Pulsamos en el objeto para editarlo.

Reducimos su tamaño respetando proporciones (tecla de mayúsculas) y lo movemos fuera del lienzo, en la parte izquierda del mismo.

Vamos a empezar a usar la línea de tiempo.
Pulsamos en la cabecera de la barra de tiempo.

Cuando quieras animar objetos o trabajar con la línea de tiempo es muy importante que estés en el Modo Animación.

En la línea de tiempo, los puntos con forma de rombo o diamante son los fotogramas clave de la animación.

Movemos la cabecera hasta el segundo 2.

Seleccionamos el sol y lo movemos al lienzo mientras tenemos pulsada la tecla de mayúsculas del teclado (así moveremos el objeto en línea recta).

Vamos a hacer que el sol se mueva dando vueltas. Para ello, mientras estamos situados en el segundo 2, ponemos 360º en Rotación.

Movemos la cabecera de la línea de tiempo al segundo 5 y, en Rotación, ponemos 720º.

Seleccionamos el fotograma clave de la capa hipster on a bike y lo arrastramos hasta el segundo 2.

Movemos la cabecera de la línea de tiempo al segundo 5.

Movemos al hipster con bicicleta (con la tecla de mayúsculas pulsada para que sea en línea recta) hasta la parte derecha de fuera del lienzo.

Seleccionamos la herramienta de Texto. Pulsamos dos veces en el lienzo y escribimos.

Pulsamos en la caja de color de Rellenar.

Seleccionamos el color y pulsamos en Back.

Pulsamos en la alineación horizontal centrada.

Movemos el fotograma clave del texto hasta el segundo 3 y, en las opciones de edición del objeto, modificaremos la opacidad.

Ponemos que la opacidad sea del 0%.

Movemos la cabecera de la línea de tiempo hasta el segundo 5 y modificamos la opacidad del objeto texto al 100%.

2. Exportar la animación como código HTML5.

Cuando ya tengamos nuestra animación terminada y, antes de exportarla, podemos ver una previsualización en el propio lienzo, usando los controles de vídeo, que se encuentran en la parte inferior del mismo.

Pulsaremos en Descargar y, después, en Código HTML5.

La herramienta nos ofrece tres opciones: Genérico (que es la que escogeremos), AdWords (para poder relacionar nuestra animación con una cuenta AdWords de Google -anuncios-) y DoubleClick (para que, al hacer doble click sobre la animación, se abra un enlace).
Podemos también escoger en qué parte de la animación se basará para hacer la miniatura de la misma, cambiar el tamaño, seleccionar que se muestren o no los controles de vídeo, seleccionar que se reproduzca o no en bucle o seleccionar que se reproduzca o no automáticamente al abrir la página. Por ahora, no cambiaremos nada y pulsamos en Continuar.

La herramienta nos avisa de que estamos con una cuenta 'free' y que tendremos bloqueadas algunas opciones. Pulsamos en Continuar sin restricciones.

Nos avisa que, al tener una cuenta 'free', se añadirá a nuestra animación una marca de agua de la herramienta y una animación final de Animatron. Pulsamos en Conseguir enlace.

Pulsamos en Descargar.

Y elegimos Guardar el archivo .zip que nos ofrece Animatron.

3. Incorporar la animación a una web.

Cuando descomprimamos el archivo .zip, tendremos una carpeta con los archivos de recurso que usa la animación, como los audios (.mp3), archivos de optimización de la animación (.ogg), player.js (código javascript que crea el reproductor de vídeo) y el archivo html que es el vídeo en sí en HTML5 (project.html). Todo este directorio al completo deberemos subir a nuestro servidor o ftp y, en nuestra web, 'llamar' a project.html para visualizar la animación.

Si abrimos project.html en el navegador de internet...

Las animaciones más habituales son las siguientes:

Movimiento: se consigue poniendo el objeto en una posición del lienzo en el primer fotograma clave y, en el segundo, situando el objeto en otra posición del lienzo.

Vuelta: en cada fotograma clave, el objeto tendrá que tener una rotación diferente. Si la diferencia entre ambas rotaciones es de 360º, el objeto dará una vuelta completa. Si vamos sumando de 360º a 360º, el objeto dará varias vueltas completas.

Aparecer y desaparecer: si queremos que el objeto aparezca en la escena, deberemos ponerle opacidad 0% en el primer fotograma clave y 100% en el segundo. Viceversa si queremos que el objeto desaparezca.

Movimiento sobre trazado: si queremos que el objeto se mueva siguiendo un trazado determinado, primero tendremos que dibujar el trazado y, después, seleccionar que el objeto se mueva con el trazado.

Zoom: se consigue modificando la escala del objeto entre los dos fotogramas clave.

CONTENIDOS | 3.2

1. Elaborar una animación algo más compleja.

Movemos la cabecera de la línea de tiempo hasta el segundo 8 y seleccionamos la capa de texto.

Cambiamos la opacidad a 0%.

Seleccionamos la capa de sun y, estando en el segudo 8, cambiamos la rotación a 1080º.

Duplicamos la escena y pulsamos en la copia de la escena principal.

Seleccionamos la capa de texto y, con la mayúscula pulsada, pulsamos en la capa de hipster on a bike para seleccionar las dos capas a la vez. Borramos las capas (tecla de borrar).

Pulsamos con el botón derecho en el penúltimo fotograma clave de la capa sun y pulsamos en Eliminar fotograma clave.

Y hacemos lo mismo con los anteriores.

Pulsamos en la capa sun y, con la tecla de mayúsculas pulsada, en la capa Classic y pulsamos en el botón Fusionar capas.

Pulsamos en el botón para desbloquear la capa fusionada.

Movemos la cabecera de la línea de tiempo hasta el segundo 1 y, en la escala del objeto de la capa fusionada, ponemos 200%.

Pulsamos en el botón para reducir el zoom del lienzo.

Movemos el objeto un poco hacia arriba y a la izquierda.

Vamos al Mercado y pulsamos en Conjuntos animados.

Buscamos el conjunto Americans indians.

Pulsamos en el perro que anda y lo arrastramos al lienzo.

Pulsamos en el objeto para editarlo.

Lo modificamos para que sea más grande (recuerda que debes pulsar y arrastrar en una de las esquinas del cuadro de selección mientras pulsas la tecla de mayúsculas, para que te respete las proporciones de la imagen). Mueve el perro para que se quede fuera del lienzo, en la parte izquierda, y con las patas en el suelo. Después, mueve el fotograma clave del perro hasta el segundo 1.

Movemos la cabecera de la línea de tiempo hasta el segundo 2.

Movemos el perro (con la tecla de mayúsculas pulsada) hasta el centro del lienzo.

Arrastramos el perro sentado al lienzo.

Modificamos su tamaño respetando proporciones hasta que tenga la misma proporción que el perro que anda.

Movemos el fotograma clave del perro sentado hasta el segundo 2.1.

Estando en el segundo 2.1, seleccionamos la capa del perro que anda y modificamos su opacidad para ponerla en 0%.

Volvemos hacia atrás.

Seleccionamos Efectos de sonido.

Después, pulsamos en Creatures.

Y buscamos y arrastramos al lienzo el audio Small dog barking.

Movemos el audio en la línea de tiempo para que comience en el segundo 0,5.

Pulsamos en la primera escena. Después, en Pistas de audio.

Buscamos la categoría Inspirational.

Seleccionamos el audio Swingings Hammock y lo arrastramos al lienzo.

Comprobamos que el audio comienza desde el inicio de la línea de tiempo. Si pulsamos en el nombre de nuestro proyecto, en la esquina superior izquierda, veremos una previsualización de nuestro vídeo.

2. Exportar la animación en formato vídeo.

Volvemos a la interfaz de edición y pulsamos en Descargar y, después, en Vídeo.

Dejamos el Preajuste en Definición estándar 16:9. Continuar.

Pulsamos en Continuar sin restricciones.

Después, pulsamos en Renderizar.

Esperaremos...

Cuando la renderización esté lista, pulsamos en Descargar.

Seleccionamos en Guardar archivo. La herramienta nos ofrece un archivo de vídeo .mp4, que es el formato ideal para internet.

Cambiamos el nombre para que no tenga caracteres extraños.

Y ya podremos ver el vídeo en cualquier programa de reproducción de vídeo o bien subir el archivo a servicios de vídeo en internet como Youtube o Vimeo.

CONTENIDOS | 3.3

1. Realizar un gif sencillo.

Esta vez, vamos a crear una nueva animación.

Pulsamos en Fondos.

Escogemos el fondo con el que hemos estado trabajando y lo arrastramos al lienzo.

Pulsamos en las opciones/preferencias del proyecto.

Le ponemos un nombre y, en el Tamaño, ponemos que sea de 400 píxeles de ancho y 400 píxeles de alto.

Reducimos el zoom del lienzo. En el caso de que la capa de Classic tenga el candado, se lo quitamos, y aumentamos la imagen hasta que llene completamente el lienzo. Volvemos atrás.

Buscamos de nuevo el hipster con bicicleta y lo arrastramos al lienzo.

Movemos la cabecera de la línea de tiempo hasta el segundo 2 y movemos el hipster horizontalmente con la tecla de mayúsculas pulsada.

Buscamos el perro que anda y lo arrastramos.

Movemos la cabecera de la línea de tiempo hasta el segundo 4 y lo movemos igual.

Creamos un nuevo texto (recuerda que debes pulsar en la T y, después, hacer doble click en el lienzo).

Editamos el texto: tamaño 50, alineación horizontal y color verde.

Situamos el texto en el sitio correcto fuera del lienzo.

Movemos la cabecera de la línea de tiempo hasta el segundo 6 y movemos el texto hasta el centro del lienzo.

Movemos la cabecera de la línea de tiempo hasta el segundo 8. Esta vez, no queremos mover el texto, pero sí queremos crear un fotograma clave en ese segundo. Para hacerlo dejando el texto en el mismo sitio, podemos hacer click con el botón derecho del ratón en el segundo 8 y en la capa del texto en la línea del tiempo y, después, pulsar en Insertar fotograma clave. Pero es más fácil si pulsamos una vez en la tecla de la flecha derecha, por ejemplo, y, después, pulsamos una vez en la tecla de la flecha izquierda.

Movemos la cabecera de la línea de tiempo hasta el segundo 10 y movemos el texto horizontalmente hasta situarlo fuera del lienzo, en la parte derecha.

Pulsamos Descargar y GIF.

Pulsamos en Crear bucle y, después, en Continuar.

Pulsamos en Continuar.

Y pulsamos en Renderizar.

Cuando termine el proceso, pulsamos en Descargar.

Guardamos el archivo en nuestro ordenador.

El archivo tendrá como extensión .gif.

Si arrastramos el archivo al navegador de internet, lo veremos.

2. Cómo compartir nuestro gif en redes sociales.

En Twitter, en el editor de tuits pulsaremos en el icono de incorporar foto o vídeo. El botón de GIF es sólo para compartir gifs que ofrece Twitter, no para compartir los nuestros.

Seleccionamos el gif que hemos guardado en el ordenador.

¡Y a Twittear!

En Facebook es algo más complicado. Desde Animatron, pulsamos en Compartir y, después, en GIF.

Y Continuar.

Pulsamos en Enlazar cuenta Facebook.

Y seguimos los pasos para enlazar nuestra cuenta de Facebook con Animatron. Una vez realizada esta configuración, podremos compartir nuestros vídeos y gifs de Animatron en Facebook.

Otra opción interesante es crearnos una cuenta en un servicio de gifs, como Giphy, y subir gifs a nuestro perfil, desde donde podremos compartirlos fácilmente en Facebook, Twitter y otras redes sociales.

IDEAS CLAVE

— Animatron es un programa gratuito y online que permite realizar animaciones en formato HTML5, vídeo o gif con una interfaz fácil de usar.

— Para trabajar con animaciones en Animatron, es importante encontrarse en el modo Animación.

— Los fotogramas clave están representados por pequeños rombos o diamantes que se sitúan en la línea de tiempo. Éstos indican el inicio y final de una animación.

— Las animaciones más habituales son las de movimiento (posición de un objeto), aparecer o desaparecer (opacidad) y zoom (escala).

ENLACES DIRECTOS:

Animatron

Giphy

SOPORTE:

Videotutoriales

Ayuda

Foro

ALGUNOS EJEMPLOS:

Galería de Animatron

Visualiza la guía de primeros pasos de Animatron.

Visualiza el vídeo Videotutorial de Animatron.

Practica con la herramienta. Puedes seguir, paso por paso, las indicaciones de este documento o del videotutorial o, si lo prefieres, probar libremente Animatron.