Imágenes, vídeos e iconos

Una pantalla de flow con un elemento de imagen

El Flow 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, incluidas las zonas detrás de la muesca 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 .GIF de hasta 20 MB.

  • Aspect — controla cómo encaja la imagen en su contenedor:
    • Fit — escala la imagen para que quepa dentro del contenedor sin recortarla.
    • Fill — estira la imagen para rellenar el contenedor.
    • Cover — escala la imagen para cubrir el contenedor, recortándola si es necesario. Valor predeterminado.
  • Use custom media ID — consulta Custom media ID más abajo.

Video

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 — Fit, Fill o Cover. El valor predeterminado es Fill.
  • Loop — reproduce el vídeo en bucle de forma continua. Activado por defecto.
  • Use custom media ID — consulta Custom media ID 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 en tiempo de ejecución, el vídeo se reproduce sin sonido de forma predeterminada. Con Loop activado, se repite indefinidamente.

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

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.

ID de medio personalizado

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

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

El medio que subas en el Flow Builder sirve como respaldo. Si tu código no proporciona ningún medio para ese ID en tiempo de ejecución, 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 los medios por su ID — consulta Personalizar assets para ver la API del SDK.