Componente Efecto de imagen

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

Con el componente Efecto de imagen puede aplicar los siguientes efectos visuales basados en JavaScript a una imagen (y, en algunos casos, a un par de imágenes): Antes y después, Respiración, Desvelación y Ola.

Image Effect component - Google Web Designer

Para utilizar el componente Efecto de imagen, haga lo siguiente:

1. Abra el panel Componentes y, a continuación, la carpeta Gráficos y efectos.

2. Haga doble clic en el componente Efecto de imagen  o arrástrelo a la escena.

3. Haga doble clic en el componente en la escena o haga clic en el botón Configuración... , situado en el panel Propiedades. Se abrirá el cuadro de diálogo Efecto de imagen.

4. Arrastre una imagen a la escena del cuadro de diálogo o seleccione una haciendo clic en Elegir imágenes.

5. Elija el tipo de efecto de imagen que quiera en el menú desplegable del panel Propiedades.

6. Algunos tipos de efectos utilizan dos imágenes. Puede seleccionar la imagen adicional en la biblioteca o buscar un archivo de imagen en su sistema de archivos e importarlo.

7. Personalice el efecto ajustando sus propiedades (como se explica a continuación).

Propiedades

Además de las propiedades de todo el componente, puede configurar propiedades de efectos concretos.

Propiedades del componente Efecto de imagen

Propiedad	Descripción
Nombre	Define el nombre del componente Efecto de imagen.
Escala	Determina cómo se muestran imágenes de diferentes tamaños dentro del componente. Más información Modificar tamaño de la imagen para ajustar Recortar imagen para rellenar Ninguno Estirar imagen para rellenar
Definir el límite de la animación	Si se selecciona, deja de reproducirse automáticamente la animación una vez transcurrido el tiempo especificado en segundos.

Propiedades de cada tipo de efecto

Puede acceder a las propiedades específicas de cada tipo de efecto en el cuadro de diálogo Efecto de imagen. Para abrir el cuadro de diálogo, haga doble clic en el componente Efecto de imagen en la escena o haga clic en el botón Configuración... en el panel Propiedades y, a continuación, seleccione el tipo de efecto para ver las propiedades correspondientes.

Ninguno

No se aplica ningún efecto a la imagen.

Antes y después

El efecto Antes y después aplica una transición de barrido entre dos imágenes que, una vez completada, cambia de sentido y después se repite.

  

Propiedad	Descripción
Imágenes
Base	Imagen que se muestra encima o a la izquierda del divisor. Utilice el botón Intercambiar imágenes  para cambiar la imagen base y la imagen subyacente.
Visible	Imagen que se muestra debajo o a la derecha del divisor. Utilice el botón Intercambiar imágenes  para cambiar la imagen subyacente y la imagen base.
Divisor
Ángulo	Ángulo de la línea que divide las dos imágenes, entre 0 y 180 grados. El valor predeterminado es 90 (una línea vertical).
Esfumado	Desenfoque de los bordes de las imágenes a lo largo del divisor. Con el valor 1 la transición es nítida, mientras que con valores más altos los bordes se difuminan.
Interacción	Cuando la casilla Seguimiento del ratón está marcada, el divisor sigue el cursor del ratón.
Animación
Reproducción automática	Cuando la casilla Reproducción automática está marcada, la animación se inicia cuando se carga el componente.
Estado inicial
Posición	Posición inicial del divisor cuando comienza a reproducirse la animación.
Retraso	Cantidad de tiempo que transcurre antes de que la animación comience a reproducirse automáticamente. Se expresa en segundos.

Respiración

El efecto Respiración expande y contrae la imagen elásticamente.

   

Propiedad	Descripción
Imágenes
Base	Imagen a la que se aplicará el efecto.
Respiración
Velocidad	Velocidad de la animación. Con el valor 0 no reproduce ninguna animación, mientras que con valores más altos la animación se reproduce más deprisa.
Efecto horizontal
Expansión	Magnitud de la expansión horizontal de la imagen.
Contracción	Magnitud de la contracción horizontal de la imagen.
Efecto vertical
Expansión	Magnitud de la expansión vertical de la imagen.
Contracción	Magnitud de la contracción vertical de la imagen.
Duración de la contención
Expansión	Cantidad de tiempo durante el cual la imagen permanece completamente expandida. Se expresa en segundos.
Contracción	Cantidad de tiempo durante el cual la imagen permanece completamente contraída. Se expresa en segundos.
Curvas
Horizontal	Número de curvas creadas por la distorsión horizontal.
Vertical	Número de curvas creadas por la distorsión vertical.

Desvelación

El efecto Desvelación muestra la parte correspondiente de una segunda imagen dentro de un área de enfoque elíptica.

  

Propiedad	Descripción
Imágenes
Base	Imagen que se muestra fuera del área de enfoque. Utilice el botón Intercambiar imágenes  para cambiar la imagen base y la imagen subyacente.
Visible	Imagen que se muestra en el área de enfoque. Utilice el botón Intercambiar imágenes  para cambiar la imagen subyacente y la imagen base.
Enfoque
Radio	Radio del área de enfoque a lo largo del eje X y el eje Y. Utilice el botón Bloquear las proporciones del radio  para que la relación de aspecto no cambie al modificar un radio.
Esfumado	Desenfoque de los bordes del área de enfoque. Con el valor 0 se aplican bordes nítidos al área de enfoque, mientras que con valores más altos los bordes se difuminan.
Efecto	Cuando la casilla Permanecer visible está marcada, la imagen subyacente permanece visible después de que se mueva el área de enfoque.
Animación
Reproducción automática	Patrón de movimiento del área de enfoque. Desplazamiento aleatorio: (opción predeterminada) el área de enfoque se desplaza sobre la imagen de forma aleatoria y cambia de sentido para permanecer encima de ella. Desplazamiento aleatorio envolvente: el área de enfoque se desplaza sobre la imagen de forma aleatoria y aparece en el lado opuesto de esta cuando llega al borde. Círculo: el área de enfoque se mueve formando un círculo. Ninguna
Velocidad	Velocidad del área de enfoque. Con el valor 0 no se reproduce ninguna animación, mientras que con valores más altos la animación se reproduce más deprisa.
Interacción	Cuando la casilla Seguimiento del ratón está marcada, el área de enfoque sigue el cursor del ratón.

Ola

Anima porciones de la imagen en un patrón de ola.

   

Propiedad	Descripción
Imágenes
Base	Imagen a la que se aplicará el efecto.
Ola
Tipo	Forma de ola utilizada en el efecto. Estándar: la animación hace que la imagen forme pequeñas olas. Efecto de lente: la animación contrae y expande la imagen siguiendo un patrón de olas simétricas.
Orientación	Dirección de la animación de la ola. Horizontal Vertical
Velocidad	Velocidad de la animación de la ola. Con el valor 0 no se reproduce ninguna animación, mientras que con valores más altos la animación se reproduce más deprisa.
Magnitud	Fuerza de las olas. Con el valor 0 no hay ningún efecto, mientras que con valores más altos las olas son más intensas.
Longitud	Distancia entre los picos de las olas. Cuanto más corta sea la longitud, más olas habrá en el efecto.
Invertir	Cuando la casilla Invertir está marcada, las olas se mueven de izquierda a derecha (en la orientación horizontal) o de abajo hacia arriba (en la orientación vertical).
Recortar	Cuando la casilla Recortar está marcada, la imagen se vuelve a dibujar en cada fotograma de la animación, lo que evita un efecto de rastro.
Avanzado
Zona de ola	Parte de la imagen afectada por el efecto de ola.
Intensidad total	Parte de la imagen en la que el efecto de ola es de magnitud completa. La magnitud del efecto disminuye en otras partes del área de la ola.

Eventos y acciones

Eventos que envía el componente Efecto de imagen

Con los siguientes eventos del componente Efecto de imagen puede activar otras acciones:

Evento	Descripción
Reproducción automática finalizada	Se envía cuando la animación de reproducción automática alcanza el límite de tiempo de la animación.

Acciones que lleva a cabo el componente Efecto de imagen y cada uno de los efectos

Las siguientes acciones del componente Efecto de imagen se pueden activar para responder a otros eventos:

• Reproducir
• Pausar

Cuando seleccione una de estas acciones en el cuadro de diálogo Evento, defina el componente Efecto de imagen o el efecto específico como receptor.

Consulte cómo configurar eventos.

Vista previa

Cuando trabaje en el cuadro de diálogo Efecto de imagen, en la escena podrá ver cómo se muestra el componente mientras está animado. Si cambia alguna propiedad, la animación vuelve a reproducirse desde el principio.

También puede previsualizar el documento en el navegador que quiera. Para ello, haga clic en la opción Guardar, en la parte inferior del cuadro de diálogo, y después en el botón Vista previa.