Crear un archivo en Google Web Designer que contenga una animación sencilla de fondo, su página principal debe tener tres botones que te lleve cada uno a una página diferente. Utilizaremos una etiqueta como mínimo que nos lleve de un lugar a otro en el cronograma.
Sigue paso a paso el ejercicio con el siguiente video:
Creación del archivo:
-
Abrir GWD
-
Archivo nuevo
-
Dejamos las opciones predeterminadas: banner, 300 x 250. Y cambiamos al tipo de animación por avanzada. Nombramos el archivo: Ejercicio 1.
Diseño:
Con la herramienta de texto podemos hacer un recuadro que nos sirva como fondo.
Sobre él hacemos los recuadros que servirán como botones escribiendo textos para identificar: Inicio, Contacto, Servicios, etc. Simulando una página web.
Para crear los botones, en la barra derecha damos clic en componentes para que se desplieguen las opciones, seleccionamos área de presionar y arrastramos hasta el recuadro que será nuestro primer botón. Ajustamos el tamaño (en la barra de opciones de herramientas, activamos transformación).
Para crear una página, hacemos clic en el menú desplegable de páginas:
Creamos 3 páginas más, cada una será el destino de cada uno de los botones. En total tendremos 4 páginas, la principal, la de Inicio, Contacto, Servicios. En cada una se encontrarán los tres botones, por lo que debemos crear 12 botones (3, 3, 3, 3). Para poder distinguir las páginas, se recomienda que tengan un elemento diferenciador, ya sea un recuadro de otro color, un texto o imagen distinta.
Creamos una animación sencilla en la línea de tiempo, en la página principal.
(4 fotogramas). Ésta se repetirá en loop.
Funcionalidad:
En esta parte vamos a“programar las acciones de los elementos que colocamos.
-
Accionar los botones con eventos: Por página, vamos seleccionando las áreas de presionar de cada botón. En la barra derecha en el panel Eventos añadimos uno nuevo.
Hacemos clic en en el + y nos aparece la siguiente ventana: conforme vamos seleccionando avanzan las opciones:
Seleccionamos el primer área de presionar que se nombra automáticamente como: gwd_taparea_1.
En Evento: seleccionamos Tap Área→ Touch/Click:
La acción es en Anuncios Google→Ir a página
Y escogemos la página a la que nos llevará:
Repetimos este proceso con cada botón de cada página.
*Cabe mencionar que a cada Área de presionar se le asigna un nombre, gwd_taparea_1, gwd_taparea_2, gwd_taparea_3, etc. Debemos asegurarnos de seleccionar el área correcta para asignarle la página adecuada.
-
Loop de nuestra animación de la página principal: Añadimos una etiqueta al principio de nuestra línea de tiempo, colocamos el cursor al inicio y con botón derecho, en la layer de eventos, añadimos nueva etiqueta, la nombramos y damos enter.
Y al final de la animación añadimos un evento con clic derecho en la layer de eventos. En Acción, seleccionamos Línea de tiempo→ gotoAndPlay y seleccionamos la etiqueta que creamos.
Hacemos clic en Vista Previa y probamos que todo funcione correctamente.