Imágenes, vídeos e iconos
El Flow & Paywall Builder incluye tres tipos de elementos multimedia en la categoría Media: Image, Video e Icon.
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.
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.
- Content mode — controla cómo la imagen rellena su contenedor cuando defines su altura. Consulta Tamaño de imagen.
- Use custom media ID — consulta ID de medio personalizado más abajo.
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
Artículo principal: Acciones
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
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
Artículo principal: Añadir una configuración regional
Los elementos de imagen y vídeo pueden tener un archivo distinto por cada configuración regional:
- Si el panel Localizations está abierto, ciérralo para mostrar el panel de propiedades.
- En la barra de herramientas inferior, establece Locale en la configuración regional de destino.
- Selecciona el elemento y, en el panel de propiedades, sube el archivo localizado.
- 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
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:
- Selecciona la casilla Use custom media ID bajo el área de carga.
- Introduce un ID de medio.
- 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.
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.