Imágenes, vídeos e iconos

Una pantalla de flow con un elemento de imagen

El Flow & Paywall Builder incluye tres tipos de elementos multimedia en la categoría Media: Image, Video e Icon.

Tip

Para que una imagen o vídeo cubra toda la pantalla, incluyendo las áreas detrás del notch y el indicador de inicio, colócalo como fijo con todos los desplazamientos en 0 y selecciona Ignore safe area. Consulta Diseño y posicionamiento.

Imagen

Sube un archivo .JPG, .PNG o .WEBP de hasta 20 MB.

Los GIF y WEBP animados no son compatibles. Para añadir movimiento, usa un elemento Video.

Tip

Para colocar tu contenido sobre una imagen a pantalla completa, crea una imagen hero a partir de un fondo de pantalla y una hoja deslizante.

Tamaño de la imagen

Una imagen tiene sus propias proporciones, y el contenedor que le asignas puede no coincidir con ellas. Establece primero el ancho y luego decide el alto:

  • Alto automático. La imagen mantiene su forma: el alto se calcula a partir del ancho que establezcas. El Content mode se desactiva porque no hay nada que recortar.
  • Alto fijo o de relleno. El contenedor adquiere sus propias proporciones y el Content mode resuelve el desajuste:
    • Fit. Escala la imagen completa dentro del contenedor y deja espacio vacío.
    • Fill. Recorta lo que sobresale. Valor predeterminado.

Para mantener una imagen sin recortar en cualquier ancho de pantalla, usa el ancho Fill con la altura Auto. Con una altura fija, el recorte en la parte superior e inferior varía de un tamaño de pantalla a otro.

Vídeo

Sube un archivo .MP4 o .WEBM de hasta 50 MB y no más de 30 segundos. La resolución mínima del vídeo es de 640x640 píxeles.

  • Aspect — controla cómo el vídeo rellena su contenedor cuando estableces su altura. Consulta Tamaño del vídeo.
  • Loop — reproduce el vídeo en bucle continuo. Activado por defecto.
  • Use custom media ID — consulta ID de medio personalizado más abajo.

Los vídeos no se reproducen en la vista previa del editor: el lienzo muestra un fotograma estático. En el dispositivo durante la ejecución, el vídeo se reproduce sin sonido por defecto. Con Loop activado, se repite indefinidamente.

Tamaño del vídeo

Un vídeo tiene sus propias proporciones, y el contenedor que le asignes puede no coincidir con ellas. La altura determina lo que ocurre:

  • Hug height. La altura sigue las proporciones propias del vídeo.
  • Fixed o Fill height. La propiedad Aspect resuelve el desajuste:
    • Fit. Escala el vídeo completo dentro del contenedor y deja espacio vacío.
    • Fill. Recorta lo que se desborde. Valor por defecto.

Cuando Adapty no puede leer las proporciones de un vídeo al subirlo, muestra una advertencia: “Could not determine video dimensions. Set a fixed height to ensure the video displays correctly.” Dale al vídeo una altura fija, o asegúrate de que el contenedor que lo aloja tenga una. De lo contrario, su altura puede colapsar a 0.

Desencadenar una acción cuando el vídeo termina

El elemento Video admite un trigger On playback finished que se activa cuando el vídeo llega al final. Configúralo en el panel Interactions para navegar a otra pantalla, mostrar un CTA o ejecutar cualquier otra acción.

Icono

Selector de iconos con la biblioteca Tabler Icons

Elige entre la biblioteca integrada Tabler Icons, con miles de iconos en dos estilos visuales:

  • Stroke — solo contorno.
  • Filled — relleno sólido.

Busca en el selector por palabra clave para encontrar un icono. Configura el color del icono en el selector Color — elige un estilo de color guardado o establece un color personalizado.

Localizar archivos multimedia

Los elementos de imagen y vídeo pueden tener un archivo distinto por cada configuración regional:

  1. Si el panel Localizations está abierto, ciérralo para mostrar el panel de propiedades.
  2. En la barra de herramientas inferior, establece Locale en la configuración regional de destino.
  3. Selecciona el elemento y, en el panel de propiedades, sube el archivo localizado.
  4. Cuando hayas terminado, vuelve a establecer Locale en la configuración regional predeterminada. Mientras haya otra configuración regional activa, el texto que edites en el panel de propiedades modificará la traducción de esa configuración regional.

En una configuración regional sin archivo propio, el elemento muestra el archivo de la configuración regional predeterminada. También puedes subir un archivo para cada configuración regional en el panel Localizations.

Limitaciones

No es posible localizar los siguientes elementos:

  • Iconos
  • El Fill de una pantalla o un contenedor — esto incluye los fondos de pantalla y la imagen o vídeo de fondo propio de un contenedor, configurados desde la sección Fill. Para variar una imagen o vídeo según el idioma, agrégala como elemento independiente de tipo Image o Video; estos sí admiten un archivo específico por idioma, tal como se describe en Localizar contenido multimedia.
  • IDs de contenido multimedia personalizados

ID de medio personalizado

Important

También puedes establecer un ID de medio personalizado para un fondo de imagen o vídeo.

Etiqueta un elemento de imagen o vídeo con un ID de medio personalizado para intercambiarlo en tiempo de ejecución desde el código de tu app. Úsalo para elementos visuales personalizados — por ejemplo, para mostrar el avatar elegido por el usuario.

El medio que subas en el Flow & Paywall Builder actúa como respaldo. Si tu código no proporciona ningún medio para ese ID en tiempo de ejecución, se muestra el respaldo.

Un ID de medio personalizado solo puede sustituir un archivo por otro del mismo tipo: una imagen por una imagen, un vídeo por un vídeo. Si los tipos no coinciden, se muestra el respaldo.

Para habilitar un ID de medio personalizado en un elemento de imagen o vídeo:

  1. Selecciona la casilla Use custom media ID bajo el área de carga.
  2. Introduce un ID de medio.
  3. Sube una imagen o vídeo de respaldo.

En el código de tu app, obtén el medio por su ID. Consulta Personalizar assets para ver la API del SDK.

Tip

Para que la primera pantalla de un flow se renderice al instante, etiqueta sus imágenes y vídeos pesados con IDs de media personalizados y pide a tus desarrolladores que incluyan esos archivos en el bundle de la app. Consulta Mostrar media de la primera pantalla desde el bundle de la app.