Componente Galería de transiciones

Este componente no se puede utilizar con los anuncios AMP HTML, los anuncios de vídeo ni los anuncios de imagen.

El componente Galería de transiciones le permite mostrar imágenes de forma sucesiva e incluir animaciones entre las imágenes de la transición.

Elegir la galería adecuada

Google Web Designer tiene cuatro componentes de galería distintos:

• Galería 360°: muestra imágenes de los diferentes lados de un objeto, lo que le permite deslizar el dedo hacia delante y hacia atrás para girar el objeto. Esta galería no muestra grupos ni elementos de navegación.
• Galería deslizable: tiene un aspecto sencillo y claro. Permite deslizar el dedo por las imágenes o los grupos en sentido vertical u horizontal.
• Galería en carrusel: es similar a la deslizable, pero muestra las imágenes adyacentes en tres dimensiones, como si estuvieran en un expositor giratorio.
• Galería de transiciones: ofrece una serie de efectos de animación al pasar de una imagen a la siguiente.

Para utilizar la Galería de transiciones, haga lo siguiente:

1. Abra el panel Componentes y, luego, la carpeta Galerías.

2. Haga doble clic en el componente Galería de transiciones o arrástrelo a la escena.

3. Haga doble clic en el componente o haga clic en el botón Configuración... , situado en el panel Propiedades. Se abrirá el cuadro de diálogo Galería de transiciones.

4. En el panel Biblioteca de la izquierda se muestran imágenes que puede incluir en la galería. Para añadirlas, haga clic en el botón Importar recursos , situado en la parte inferior del panel, o arrástrelas desde otra ventana.

5. Arrastre las imágenes que quiera de la galería al panel Fotogramas, en la parte inferior del cuadro de diálogo, o a la escena. Para añadir varias imágenes de la biblioteca, puede seleccionarlas todas, hacer clic con el botón derecho en la selección y elegir Añadir.

6. En el panel Transición, seleccione el tipo de transición.

7. Personalice la duración de la transición, el easing y otras propiedades que se describen más abajo.

Para cambiar el orden de las imágenes de la galería, haga lo siguiente:

1. Abra el cuadro de diálogo Galería de transiciones haciendo doble clic en el componente de la escena o haciendo clic en la opción Configuración... , situada en el panel Propiedades.
2. En el panel Fotogramas de la parte inferior, arrastre una imagen a la posición que quiera.

Para retirar imágenes de la galería, haga lo siguiente:

1. Abra el cuadro de diálogo Galería de transiciones haciendo doble clic en el componente de la escena o haciendo clic en la opción Configuración... , situada en el panel Propiedades.
2. En el panel Fotogramas de la parte inferior, seleccione una o varias imágenes.
3. Pulse la tecla Supr o haga clic con el botón derecho en la selección y elija Eliminar en el menú emergente.

Para cambiar imágenes de la galería:

1. Abra el cuadro de diálogo Galería de transiciones haciendo doble clic en el componente de la escena o haciendo clic en la opción Configuración... , situada en el panel Propiedades.
2. En el panel Fotogramas, haga clic con el botón derecho en la imagen y, en el menú emergente que aparece, seleccione Cambiar imagen.

Propiedades

Si quiere acceder a las propiedades de este componente, vaya al cuadro de diálogo Galería de transiciones. Para abrir el cuadro de diálogo, en la escena, haga doble clic en la Galería de transiciones o bien haga clic en la opción Configuración... , situada en el panel Propiedades.

Tipos de transición

Cada tipo de transición tiene distintos conjuntos de propiedades asociados.

Ninguno

No hay efectos de transición visuales entre los fotogramas.

Atenuación

La imagen se atenúa y desaparece, y se muestra la nueva imagen.

Propiedad	Descripción
Duración	Duración de la animación de un fotograma al siguiente, en segundos. El valor predeterminado es 1.
Easing	Easing de la animación de la transición. Linear (valor predeterminado) Ease-in Ease-out Ease-in-out

Empuje

Aparece la nueva imagen y empuja la imagen anterior hasta que desaparece.

Propiedad	Descripción
Estilo	Normal	Dividir
Duración	Duración de la animación de un fotograma al siguiente, en segundos. El valor predeterminado es 1.
Easing	Easing de la animación de la transición. Linear (valor predeterminado) Ease-in Ease-out Ease-in-out
Dirección (disponible si Estilo está definido como Normal)	Dirección del efecto. De izquierda a derecha (valor predeterminado) De derecha a izquierda De arriba abajo De abajo arriba
Orientación (disponible si Estilo está definido como Dividir)	Orientación de la animación. Horizontal Vertical (valor predeterminado)

 

Barrido

La nueva imagen sustituye gradualmente a la imagen anterior por una línea o líneas en movimiento.

Propiedad	Descripción
Estilo	Normal	Puerta	Iris
	Radial	Franja
Duración	Duración de la animación de un fotograma al siguiente, en segundos. El valor predeterminado es 1.
Easing	Easing de la animación de la transición. Linear (valor predeterminado) Ease-in Ease-out Ease-in-out
Dirección (disponible si Estilo está definido como Normal, Franja, Puerta o Radial)	Dirección del efecto. Las opciones disponibles dependen del estilo que se elija: Normal o Franja: De izquierda a derecha (valor predeterminado) De derecha a izquierda De arriba a abajo De abajo a arriba Puerta: Apertura (valor predeterminado) Cierre Radial: En el sentido de las agujas del reloj (valor predeterminado) En el sentido contrario a las agujas del reloj
Ángulo (disponible si Estilo está definido como Normal)	Ángulo de la línea de barrido en grados, entre -89 y 89.
Orientación (disponible si Estilo está definido como Puerta)	Orientación de la animación. Horizontal Vertical (valor predeterminado)
Origen (disponible si Estilo está definido como Iris o Radial)	El origen X e Y del iris o del radio de barrido, como un porcentaje del fotograma de la galería.
Franjas (disponible si Estilo está definido como Franja)	Número de franjas de cada color, entre 1 y 10. El valor predeterminado es 2.
Color (disponible si Estilo está definido como Franja)	Color de cada franja.

 

Porción

La nueva imagen se muestra en porciones o barras que aparecen una tras otra.

Propiedad	Descripción
Duración	Duración de la animación de un fotograma al siguiente, en segundos. El valor predeterminado es 1.
Easing	Easing de la animación de la transición. Linear (valor predeterminado) Ease-in Ease-out Ease-in-out
Dirección	Dirección del efecto. De izquierda a derecha (valor predeterminado) De derecha a izquierda De arriba abajo De abajo arriba
Porciones	Número de porciones, entre 1 y 20. El valor predeterminado es 5.
Mostrar fondo transparente	Marque esta casilla si quiere que aparezca un fondo transparente antes de pasar a la nueva imagen, en lugar de que la imagen nueva se superponga a la anterior.

Persianas

La nueva imagen aparece desde detrás de una persiana.

Propiedad	Descripción
Estilo	Normal	Venecianas
Duración	Duración de la animación de un fotograma al siguiente, en segundos. El valor predeterminado es 1.
Easing	Easing de la animación de la transición. Linear (valor predeterminado) Ease-in Ease-out Ease-in-out
Dirección (disponible si Estilo está definido como Normal)	Dirección del efecto. De izquierda a derecha (valor predeterminado) De derecha a izquierda De arriba abajo De abajo arriba
Orientación (disponible si Estilo está definido como Venecianas)	Orientación de la animación. Horizontal Vertical (valor predeterminado)
Persianas	Número de persianas, entre 1 y 20. El valor predeterminado es 5.
Mostrar fondo transparente (disponible si Estilo está definido como Normal)	Marque esta casilla si quiere que aparezca un fondo transparente antes de pasar a la nueva imagen, en lugar de que la imagen nueva se superponga a la anterior.
Escalonado (disponible si Estilo está definido como Venecianas)	Marque esta casilla si quiere que las persianas cambien una después de otra, en lugar de hacerlo de forma simultánea.

Giro

La imagen antigua empieza a girar y, al mismo tiempo, se amplía. A continuación, se vuelve a reducir y aparece la imagen nueva; todo ello mientras la imagen sigue girando.

Propiedad	Descripción
Duración	Duración de la animación de un fotograma al siguiente, en segundos. El valor predeterminado es 1.
Easing	Easing de la animación de la transición. Linear (valor predeterminado) Ease-in Ease-out Ease-in-out
Dirección	Dirección del efecto. En el sentido de las agujas del reloj (valor predeterminado) En el sentido contrario a las agujas del reloj

Zigzag

La nueva imagen aparece gradualmente en un patrón de cuadrícula serpenteante.

Propiedad	Descripción
Duración	Duración de la animación de un fotograma al siguiente, en segundos. El valor predeterminado es 1.
Easing	Easing de la animación de la transición. Linear (valor predeterminado) Ease-in Ease-out Ease-in-out
Orientación	Orientación de la animación. Horizontal (valor predeterminado) Vertical
Filas	Número de filas, entre 1 y 20. El valor predeterminado es 5.
Columnas	Número de columnas, entre 1 y 20. El valor predeterminado es 5.

Propiedades de la Galería de transiciones

Propiedad	Descripción
Nombre	Nombre del componente Galería de transiciones.
Imágenes	Imágenes que se muestran en la galería. Puede hacer cambios en el panel Fotogramas del cuadro de diálogo Galería de transiciones. Puede estar vinculado con datos dinámicos.
Escalado	Determina cómo se visualizan imágenes de diferentes tamaños dentro del tamaño fijo del fotograma. Más información Cambiar tamaño para ajustar Recortar para rellenar Ninguno Expandir para rellenar
Fotograma de inicio	Permite indicar el fotograma que quiere mostrar al principio; el primer fotograma es 1.
Reproducción automática
Reproducción automática	Si esta opción está marcada, se reproducen los fotogramas de la galería de forma automática. Cuando esta opción está habilitada, en el panel Fotogramas se indica el tiempo total que se tarda en reproducir toda la galería.
Intervalo	Tiempo durante el cual se puede ver cada fotograma, en segundos. Solo estará disponible si está marcada la opción Reproducción automática.
Repetir	Número de veces que se reproducirán los fotogramas de la galería; el 0 indica bucle infinito. Solo estará disponible si está marcada la opción Reproducción automática.
Interacción
Encapsular	Si se marca esta opción, se puede navegar desde el último fotograma al primero.
Gesto	Gesto del usuario que cambia el fotograma en curso de la galería. Ninguno Clic (valor predeterminado) Deslizar (solo está disponible en algunos tipos de transición*) Además del gesto seleccionado, los usuarios pueden utilizar viñetas de navegación si las habilita o cualquier control de navegación personalizado que configure mediante eventos.
Ignorar deslizamientos en la dirección opuesta	Si se marca esta opción, el componente no responde al deslizamiento de gestos en la dirección opuesta al efecto de la animación, por lo que el usuario no puede desplazarse al fotograma anterior. Esta función solo está disponible si la propiedad Gesto está definida como Deslizar y la opción Habilitar transición interactiva no está marcada.
Habilitar transición interactiva	Si se marca esta opción, la animación de transición sigue al ratón del usuario. Esta función solo está disponible si la propiedad Gesto se puede definir como Deslizar.*
Navegación
Incluir	Si se marca esta opción, la galería muestra viñetas de navegación.
Miniaturas	Si se marca esta opción, la galería muestra una miniatura de cada fotograma para la navegación.
Destacar	Permite definir el color de resaltado del fotograma que aparece.
Avanzadas
Direcciones URL de salida	Lista separada por comas de URLs de salida, una por cada fotograma. Puede estar vinculado con datos dinámicos.

 

* Compatibilidad con Deslizar

Los siguientes estilos y tipos de transición son compatibles con la función Deslizar:

• Empuje - Normal
• Porción
• Barrido - Normal
• Barrido - Franja
• Persianas - Normal

Eventos y acciones

Eventos que envía el componente Galería de transiciones

Puede activar otras acciones basadas en los siguientes eventos del componente Galería de transiciones:

Evento	Descripción
Reproducción automática finalizada	Se envía cuando la reproducción automática ha finalizado por cualquier motivo. Si ha finalizado de forma natural al alcanzar el recuento de bucles previsto, event.detail.completed será "true"; de lo contrario, será "false".
Fotograma activado	Se envía cuando se ha comenzado a activar un nuevo fotograma, incluso si todavía no es visible.
Fotograma mostrado	Se envía cuando se muestra un nuevo fotograma.
Pulsación de fotograma	Se envía cuando el usuario toca un fotograma.
Girar al terminar	Se envía cuando la rotación finaliza por cualquier motivo. Si ha finalizado de forma natural, event.detail.completed será "true"; de lo contrario, será "false".
Extremo izquierdo	Se envía cuando se ha llegado al límite izquierdo de la galería.
Extremo derecho	Se envía cuando se ha llegado al límite derecho de la galería.

Para seleccionar uno de estos eventos en el cuadro de diálogo Evento, defina el componente Galería de transiciones como objetivo,

Acciones que realiza el componente Galería de transiciones

Las siguientes acciones del componente Galería de transiciones pueden activarse como respuesta a otros eventos:

Acción	Opciones de configuración
Ir al fotograma	Número de fotograma Animar
Rotar una vez	Empezar a partir del fotograma actual
Iniciar la reproducción automática	Empezar a partir del fotograma actual
Detener	ninguna
Mover hacia adelante	ninguna
Mover hacia atrás	ninguna

Cuando seleccione una de estas acciones en el cuadro de diálogo Evento, defina el componente Galería de transiciones como receptor.

Consulte cómo configurar eventos.

Vista previa

Mientras esté en el modo Diseño del cuadro de diálogo Galería de transiciones, puede hacer clic en el botón Reproducir del panel Fotogramas para ver el aspecto de la transición básica a partir del fotograma seleccionado. Puede modificar las propiedades mientras se reproduce la vista previa y ver cómo se aplican los cambios al instante.

Vaya a la pestaña Vista previa para ver cómo funciona la Galería de transiciones con las propiedades que defina, incluidas las opciones de reproducción automática e interacción.

También puede previsualizar el documento en el navegador que desee. Para ello, haga clic en Guardar en el cuadro de diálogo y, a continuación, en el botón Vista previa.