Componente Espiral

El componente Espiral le permite generar creatividades en un formato de visualización inmersivo con un modelo 3D interactivo. Cuando al desplazarse por una página aparece un anuncio, comienza la animación 3D. Es decir, la reproducción está asociada al desplazamiento. Los usuarios pueden interactuar directamente con el modelo y ampliar el anuncio a pantalla completa para ver más contenido.

Este componente está diseñado para usarse solo con creatividades de Espiral de Display & Video 360 y no es compatible con Microsoft Edge.

Para añadir el componente Espiral a su proyecto, siga estos pasos:

1. Abra el panel Componentes y, a continuación, la carpeta Gráficos y efectos.
2. Arrastre el componente Espiral a la escena.
3. Haga doble clic en el componente para abrir el cuadro de diálogo de edición de Espiral.
4. Seleccione la capa de modelo 3D en el panel Capas.
5. En el campo URL del panel Propiedades, busque el archivo GLB del recurso 3D que quiera usar. También puede ajustar otras propiedades (consulte la información que se muestra a continuación).
6. Para añadir capas, arrastre imágenes de su sistema de archivos a la escena o al panel Capas (solo en Windows o Mac), o bien haga clic en el botón Importar recursos situado en la parte inferior del panel Biblioteca. Solo puede añadir imágenes como capas en el componente Espiral.
7. Coloque cada capa donde quiera que se muestre al principio y al final de la animación mediante las pestañas Inicio y Fin. Puede arrastrar la capa donde quiera, o bien utilizar los campos de posición Inicio y Fin en el panel Propiedades.
8. Defina otras opciones de configuración según sea necesario (consulte la información que se muestra a continuación).
9. Cuando le guste el resultado del componente, haga clic en Guardar; puede previsualizarlo mientras está trabajando en él. Volverá a la interfaz normal de Google Web Designer.

Opciones de configuración

Para configurar el componente, haga doble clic en él en la escena. Si lo prefiere, selecciónelo en el panel Propiedades y haga clic en Configuración .

Añadir un estado medio

Si quiere tener un mejor control de la animación del componente Espiral, puede añadir un estado medio y cambiar las propiedades de la capa en ese punto.

1. Coloque el cursor a la derecha de la pestaña Inicio y haga clic en el botón . Se muestra la pestaña Medio.
2. De forma predeterminada, el estado medio se produce en un punto intermedio entre el inicio y el fin de la animación. Puede ajustar los tiempos de la animación.
3. Cambie a la pestaña Medio para definir las propiedades de la capa en este punto.

Para eliminar el estado medio, coloque el cursor sobre la parte derecha de la pestaña Medio y haga clic en el símbolo X.

Cambiar los tiempos de la animación

La duración de la animación del componente Espiral se determinan según la distancia hasta la que se ha desplazado hacia dentro o fuera de la página. De forma predeterminada, la animación comienza cuando el borde superior del componente empieza a aparecer en la página (0 %) y termina cuando el borde inferior desaparece de la parte superior de la página (100 %). Si ha añadido un estado medio, también puede ajustar en qué momento de la animación se produce. Hay dos formas de ajustar los tiempos de la animación:

• En el panel Tiempo de la animación, arrastre las casillas de inicio, mitad y fin, o bien el control deslizante, hasta el porcentaje que quiera.
• Introduzca los porcentajes inicial, medio y final en los campos del panel Momentos de la animación.

Hacer que el fondo del modelo 3D sea transparente

1. Seleccione el modelo 3D.
2. En el panel Propiedades, marque la casilla Fondo del modelo 3D transparente.

Añadir un indicador del gesto

1. Seleccione el modelo 3D.
2. En el panel Propiedades, haga clic en el menú desplegable Icono y elija una imagen de la biblioteca. Si lo prefiere, haga clic en Examinar para seleccionar una imagen en su sistema de archivos.
3. Si lo desea, en el campo Texto puede introducir texto para que se muestre con el icono.

El indicador del gesto aparece sobre el modelo 3D para pedir al usuario que interactúe con él.

Girar el modelo 3D

1. Seleccione el modelo 3D.
2. En el panel Propiedades, defina la Guiñada para el inicio, el medio y el fin de la animación.

La guiñada es la rotación del modelo alrededor de un eje vertical.

Añadir capas de imágenes

Hay dos maneras de añadir una capa:

• Arrastre un archivo de su sistema de archivos a la escena o al panel Capas (solo Mac o Windows).
• En la parte inferior del panel Biblioteca, haga clic en el botón Importar recursos .

Las capas nuevas del componente Espiral deben ser imágenes. Solo se permite una única capa de modelo 3D, que se incluye de forma predeterminada.

Mover capas

1. Seleccione la capa que quiera mover.
2. Seleccione la pestaña Inicio, Medio o Fin.
3. Coloque la capa. Para ello, siga uno de estos métodos:
   • Arrastre la capa hasta la nueva posición.
   • En el panel Propiedades, defina las propiedades de posición Inicio, Medio o Fin. Solo puede editar las propiedades que coinciden con la pestaña actual. Utilice los botones Copiar posición inicial, Copiar posición media o Copiar posición final para copiar la otra posición.

Cambie a la pestaña Inicio, Medio o Fin para ajustar la otra posición de la capa.

Intercambiar imágenes

1. Haga clic con el botón derecho en la imagen de la escena que quiera sustituir y seleccione Cambiar imagen en el menú emergente.
2. Seleccione una imagen de la biblioteca o haga clic en el botón Importar archivos  para seleccionar un archivo de imagen del ordenador.

La nueva imagen sustituye a la original. Si había modificado el tamaño de la imagen sustituida, la nueva tendrá las mismas dimensiones. En caso contrario, se usarán las dimensiones originales de la imagen nueva.

Reordenar capas

En el panel Capas, arrastre una capa a su nueva posición en la lista.

El orden de las capas determina cuáles se muestran delante. Las capas que se encuentran más arriba en la lista se muestran por encima de las que se encuentran más abajo.

Eliminar capas de imágenes

1. Seleccione la capa que quiera eliminar.
2. En la parte inferior del panel Capas, haga clic en el botón Eliminar .

La capa de modelo 3D es necesaria para el componente Espiral y no se puede eliminar.

Cambiar el tamaño de las capas

1. Seleccione la capa cuyo tamaño quiera modificar.
2. Cambie el tamaño de la capa. Para ello, siga uno de los estos métodos:
   • En el panel Propiedades, defina la anchura y la altura de la capa. Haga clic en el botón Limitar relación de aspecto  para elegir si la relación de aspecto entre la anchura y la altura se mantiene invariable.
   • Arrastre uno de los puntos de dirección que hay en las esquinas y los bordes de la capa de la escena.

La capa se ajusta al tamaño especificado mientras dure la animación.

Cambiar la opacidad de las capas

1. Seleccione la capa que quiera cambiar.
2. En el panel Propiedades, defina la opacidad inicial o la final con un valor comprendido entre el 0 (transparente) y el 1 (opaca).

La capa de modelo 3D siempre es opaca al final de la animación.

Cambiar el easing de animación de la capa

1. Seleccione la capa que quiera cambiar.
2. En el panel Propiedades, debajo de Propiedades avanzadas, seleccione un tipo de easing en el menú desplegable Easing.

El easing no se puede personalizar.

Ocultar y mostrar capas

En el panel Capas, haga clic en la casilla que se encuentra junto a la miniatura de la capa (debajo del botón Ocultar todas las capas ).

Puede hacer clic en el botón Ocultar todas las capas  para ocultar o mostrar todas las capas.

Al ocultar una capa, puede trabajar mejor en otra y evitar que la capa oculta se muestre en la vista previa de configuración, pero no tiene ningún efecto en la vista previa del navegador ni en la creatividad publicada.

Mostrar y ocultar el estado inactivo

1. Seleccione una capa de imagen.
2. En el panel Propiedades, debajo de Propiedades avanzadas, haga clic en la casilla Mostrar elemento inactivo.

El elemento inactivo es una versión translúcida de la capa en las posiciones que no está editando, por lo que podrá comparar visualmente las posiciones inicial, media y final. Los elementos inactivos sirven solo de referencia y no se mostrarán en las vistas previas ni en el archivo publicado.

Propiedades

Propiedades del componente Espiral

Propiedad	Descripción
Nombre	Nombre del componente Espiral.
Factor de desplazamiento	Un número entre 0 y 1 que representa cuánto se desplaza la vista. Solo se utiliza cuando se muestra el componente en la escena de Google Web Designer. La opción predeterminada es 0,5.

Puede ver y editar las propiedades de la capa cuando esté en el cuadro de diálogo de edición de Espiral y haya seleccionado una capa.

Propiedades de la capa de modelo 3D

Nota: En componentes Espiral creados con versiones de Google Web Designer anteriores a la versión 11.0.0 la capa de modelo 3D tiene algunas propiedades distintas.

Propiedad	Descripción
Nombre	Nombre del componente Modelo 3D.
URL	Archivo GLB de origen del recurso 3D. Utilice Khronos glTF Validator para comprobar que el archivo GLB sea válido. Solo en el caso de componentes de Espiral antiguos La URL o el ID del recurso 3D. Solo se admiten los recursos alojados en Poly que tengan activada la función de compartir mediante enlace. El archivo del recurso debe tener un tamaño de 2 MB o inferior, ya que es posible que los elementos más grandes no se carguen en Google Web Designer. Consulte la guía de recursos 3D para ver más requisitos. Las URL deben empezar por https://poly.google.com/view/. El ID se encuentra al final de la URL de la página de visualización de Poly; p. ej., https://poly.google.com/view/0CkCZrXqCWW. Ejemplos: https://poly.google.com/view/0CkCZrXqCWW 0CkCZrXqCWW Actualizar recursos : puede actualizar el recurso 3D haciendo clic en este botón en el campo URL. Si no ve ningún cambio, es posible que el recurso aún esté procesándose. En ese caso, debería esperar un minuto y volver a intentarlo.
Modelo 3D con fondo transparente	(Solo en el caso de los componentes de Espiral antiguos) Marque esta casilla si quiere que el fondo del componente Modelo 3D sea transparente.
Indicador del gesto
Icono	Imagen que se mostrará sobre el modelo 3D para pedir al usuario que interactúe con él. El indicador del gesto se mueve ligeramente para captar la atención del usuario hasta que se alcanza el límite de animación, y desaparece cuando el usuario empieza a interactuar con el modelo.
Texto	Texto que se mostrará debajo del icono del indicador del gesto. Solo está disponible si se ha designado un icono para el indicador del gesto.
Definir el límite de la animación	Marque esta casilla y defina una duración en segundos para limitar el tiempo que dura la animación del indicador gestual.
Posición y tamaño
Inicio	Distancia de la capa desde los bordes izquierdo y superior del componente Espiral al inicio de la animación. Se puede editar cuando la pestaña Inicio está seleccionada.
Medio	Distancia de la capa desde los bordes izquierdo y superior del componente Espiral en el estado medio de la animación. Se puede editar cuando la pestaña Medio está seleccionada.
Fin	Distancia de la capa desde los bordes izquierdo y superior del componente Espiral al final de la animación. Se puede editar cuando la pestaña Fin está seleccionada.
Tamaño	La anchura y la altura de la capa. Afecta a la capa durante todo el transcurso de la animación.
Rotación
Guiñada	La rotación inicial, media y final del modelo alrededor de un eje vertical, expresada en grados.
Estilo
Opacidad	Opacidad inicial, media y final de la capa, indicada mediante un número comprendido entre el 0 (transparente) y el 1 (opaca).
Propiedades avanzadas
Easing	El tipo de easing de la animación de la capa. El easing no se puede personalizar.

Propiedades de la capa de imagen

Propiedad	Descripción
Fuente	La fuente del archivo de imagen. No se puede editar.
URL de salida	URL de salida cuando el usuario hace clic en la imagen.
Posición y tamaño
Inicio	Distancia de la capa desde los bordes izquierdo y superior del componente al inicio de la animación. Se puede editar cuando la pestaña Inicio está seleccionada.
Medio	Distancia de la capa desde los bordes izquierdo y superior del componente en el estado medio de la animación. Se puede editar cuando la pestaña Medio está seleccionada.
Fin	Distancia de la capa desde los bordes izquierdo y superior del componente al final de la animación. Se puede editar cuando la pestaña Fin está seleccionada.
Tamaño	La anchura y la altura de la capa. Afecta a la capa durante todo el transcurso de la animación.
Estilo
Opacidad	Opacidad inicial, media y final de la capa, indicada mediante un número comprendido entre el 0 (transparente) y el 1 (opaca).
Propiedades avanzadas
Easing	El tipo de easing de la animación de la capa. El easing no se puede personalizar.
Mostrar estado inactivo	Cuando se habilita, se muestra una versión translúcida de la capa en la posición inactiva (la posición que no está editando).

Eventos y acciones

Eventos

El panel Eventos se puede utilizar para activar otras acciones en el anuncio. El componente Espiral envía el siguiente evento:

Evento	Descripción
Se ha cargado Espiral	Se envía cuando se cargan todos los recursos incluidos en el componente.

Para seleccionar este evento en el cuadro de diálogo Evento, defina el componente Espiral como objetivo.

También puede definir eventos y acciones del modelo 3D incluido en el componente Espiral.

Vista previa

Durante la configuración

Puede obtener una vista previa del componente Espiral mientras trabaja en él:

1. Para entrar en el modo de edición del componente, haga doble clic en el componente dentro de la escena.
2. Haga clic en la pestaña Vista previa situada en la parte superior.
3. Desplácese hacia arriba y hacia abajo para ver cómo se comportan las capas visibles en una muestra de diseño para dispositivo móvil. Las capas ocultas no se mostrarán.
4. No puede editar el componente mientras está en la vista previa. Haga clic en la pestaña Inicio, Medio o Fin, realice los cambios necesarios y, a continuación, vuelva a hacer clic en la pestaña Vista previa para ver las modificaciones.

En el navegador

Para obtener una vista previa del componente en el navegador, salga del modo de edición del componente y, en Google Web Designer, haga clic en el botón Vista previa. La página de vista previa simula cómo se muestra el anuncio en una página web con contenido suficiente para que pueda desplazarse hacia arriba y abajo.

Puede seleccionar una de las siguientes opciones de modo de vista previa:

• Dispositivo: seleccione un dispositivo móvil o la opción Personalizado.
• Girar dispositivo: cambie la orientación del dispositivo entre horizontal y vertical.
• Tamaño del viewport: si asigna Personalizado al dispositivo, puede definir un nuevo tamaño modificando este campo o arrastrando los controles diseñados para modificar el tamaño que se encuentran en la vista previa.

Los anuncios de Espiral siempre utilizan el modo de vista previa Paralaje en el navegador.