Crear un banner HTML 5 con Google Web Designer

Adobe Flash vs HTML5

Tras el anuncio en junio del 2015 de que Chrome va a pausar las animaciones en Flash que considere que no son parte importante del sitio web que estemos visitando, HTML 5 se convierte en el nuevo futuro rey de las animaciones y del Rich Media.

Los diseñadores de animaciones y/o banners publicitarios que han venido utilizando Adobe Flash se ven en la necesidad de cambiar de tecnología para seguir haciendo su trabajo. Pero no va a ser tan horrible como parece. En Internet ya hay un buen puñado de software que nos ayudará a crear un banner HTML 5. Una de esas herramientas es Google Web Designer.

Qué es Google Web Designer

Google Web Designer es una herramienta gratuíta que permite diseñar y crear animaciones y banners en HTML 5. La interfaz es bastante intuitiva si estás acostumbrado a trabajar con software de diseño gráfico.  Tiene el típico menú de herramientas a la izquierda, el menú de opciones en la barra superior, una línea de tiempo en la parte inferior y paneles de control a la derecha para propiedades, color, eventos, etc.

Una de las funcionalidades más interesantes es que lo que creas a golpe de ratón en la “vista de diseño”, tiene una traducción instantánea a código que puedes ver y editar desde la “vista de código”. Por si te gusta ver cómo funcionan las tripas de tu animación.

Cómo crear un banner HTML 5 con Google Web Designer

Para crear una animación o banner HTML 5 en Google Web Designer sigue estos pasos:

1. Descárgate Google Web Designer.

Descárgate Google Web Designer y ejecuta el archivo para instalarlo en tu ordenador.

2. Crea un archivo nuevo

Al abrir el programa nos pregunta qué tipo de archivo crear: nuevo o basado en plantillas. Seleccionamos la opción que os interese. Si eliges crear un nuevo archivo deberás elegir el tamaño que tendrá y la ubicación donde se guardará. También si quieres que sea un banner HTML 5 preparado para DoubleClick, Admob, Adwords o para un entorno que no sea de Google. En el tipo de animación seleccionaremos “avanzado”.

2. Añade las imágenes que vayas a usar

Una buena práctica es tener todas las imágenes que vayas a usar preparadas y añadirla a la biblioteca de recursos, que es un panel que tenemos en la parte derecha de la ventana.

Para añadir archivos a la biblioteca de recursos podemos arrastrar los archivos directamente sobre ella o seleccionarlos con el icono de añadir elemento que aparece en la parte inferior izquierda del panel. También, cualquier imagen que arrastremos desde una carpeta al lienzo (ventana principal de diseño) se añadirá automáticamente a la biblioteca.

En mi caso añado algunas imágenes de Waka: logotipo, un fondo, etc.

3. Crea tu banner HTML 5

Añades una imagen al lienzo desde la biblioteca o directamente desde su ubicación en tu pc. Será el fondo de la animación. Lo puedes colocar en la posición que quieras del lienzo mediante el panel de propiedades situado a la derecha, ajustando los valores izquierda y arriba de la sección “Posición y tamaño”. En ese mismo panel también puedes controlar el ancho y alto de tu imagen. También es importante el campo ID, en donde podemos cambiar el nombre del objeto a uno más descriptivo.

Después nosotros hemos añadido otra imagen fuera del marco para crear una animación con ella. Queremos que se desplace desde la ubicación actual hasta la que nosotros le indiquemos usando la línea de tiempo de la parte inferior.

En la línea de tiempo los elementos que añadimos al escenario se colocan automáticamente separados por capas. Con el botón derecho del ratón podemos insertar fotogramas clave en la décima de segundo que queramos para cada uno de los elementos. Mediante estos fotogramas clave iremos controlando la animación.

Al insertar un nuevo fotograma clave nos aparecerá medio rombo donde hemos hecho clic para señalarlo. Si es el primer fotograma que insertamos se añadirá automáticamente otro en el segundo 00.00.00. Una línea gris entre ambos fotogramas nos indica que existe una transición.

Para controlarla deberemos seleccionar el fotograma en donde queramos efectuar un cambio (se deberá poner en un tono azul) y modificaremos la propiedad que nos interese (la ubicación, el color, el tamaño, etc) del objeto que estemos seleccionando. El programa se encargará automáticamente de realizar la animación. Por ejemplo: para la imagen que hemos insertado fuera del escenario principal, insertamos un fotograma clave en el segundo 00.01.00 y le indicamos una nueva posición dentro del escenario. Hacemos clic sobre el botón de vista previa, que esta sobre la línea de tiempo, y podremos ver como nuestra imagen tarda 1 segundo en ir desde la ubicación fuera del escenario hasta la ubicación dentro de él. De esta manera ya tendríamos nuestra primera animación. De esta manera podríamos proceder con cualquier elemento: imágenes, textos, etc.

4. Añade un enlace a la animación

Para añadir un enlace a la animación deberemos usar el panel componentes y el panel eventos (en el margen derecho). Arrastramos desde el panel componentes el componente “Área para tocar” y modificamos su ubicación y tamaño (e ID si queremos) desde el panel de propiedades. Queremos que se ajuste al tamaño del marco.

Desde el panel eventos podemos añadirle alguna acción a cualquier elemento de nuestro banner HTML 5. Para hacer que el área para tocar que acabamos de añadir nos lleve a un enlace al hacer clic con el ratón deberemos añadir un nuevo evento haciendo clic en el símbolo + que está en la parte inferior izquierda del panel eventos. Se nos abrirá una nueva ventana que nos obligará a ir configurando las siguientes propiedades:

Objetivo

Sobre qué objeto se podrá activar el evento, en nuestro caso lo haremos sobre el área para tocar, seguramente con ID “gwd-taparea_1”.

Evento

Qué tipo de evento activará la siguiente acción. Seleccionamos “click” de la lista de eventos de ratón.

Acción

Qué acción se realizará con el evento que hemos seleccionado. Marcamos “Anuncio de Google > Salir”.

Receptor

Seleccionamos sobre qué objeto se efectúa la acción. En este caso, como marcamos que queremos salir sólo nos muestra una opción: gwd-ad. Si hubiéramos elegido una acción que cambiara el CSS, por ejemplo, aquí podríamos elegir sobre qué elemento de los que están sobre el escenario se iba a efectuar este cambio.

Configuración

Este panel cambia según la acción a realizar. En este caso deberemos añadir un nombre o ID que serviría para diferenciar este evento y deberemos añadir la URL (con su http://) a la que queremos que vaya el usuario cuando haga clic sobre nuestra área.

5. Exporta el resultado

Ahora que ya tenemos un pequeño banner HTML5 animado sólo nos queda publicarlo. Para ello, hacemos clic sobre el botón “Publicar” que se encuentra sobre la línea de tiempo y elegimos la opción “Publicar localmente”. Se nos abrirá una ventana para configurar la publicación asignando un nombre a la carpeta, una ubicación en donde guardar el banner.

Esta última acción nos publicará los archivos necesarios para publicar el banner. Tras esto sólo nos quedará insertarlo en donde queramos mediante un iframe, por ejemplo. Mira cómo nos ha quedado el nuestro.