Images, vidéos et icônes
Le Flow Builder propose trois types d’éléments médias dans la catégorie Media : Image, Video et Icon.
Pour qu’une image ou une vidéo couvre tout l’écran — y compris les zones derrière l’encoche et l’indicateur d’accueil — positionnez-la en fixe avec tous les décalages à 0 et sélectionnez Ignore safe area. Voir Mise en page et positionnement.
Image
Importez un fichier .JPG, .PNG ou .WEBP de 20 Mo maximum.
Les GIFs et WEBP animés ne sont pas pris en charge. Pour ajouter du mouvement, utilisez plutôt un élément Video.
- Aspect — contrôle comment l’image s’adapte à son conteneur :
- Fit — redimensionne l’image pour qu’elle tienne dans le conteneur sans recadrage.
- Fill — étire l’image pour remplir le conteneur.
- Cover — redimensionne l’image pour couvrir le conteneur, en recadrant si nécessaire. Par défaut.
- Use custom media ID — voir Custom media ID ci-dessous.
Vidéo
Importez un fichier .MP4 ou .WEBM de 50 Mo maximum et d’une durée maximale de 30 secondes. La résolution minimale est de 640x640 pixels.
- Aspect — Fit, Fill ou Cover. Fill par défaut.
- Loop — rejouer la vidéo en boucle. Activé par défaut.
- Use custom media ID — voir Custom media ID ci-dessous.
Les vidéos ne sont pas lues dans l’aperçu de l’éditeur — le canevas affiche une image fixe. Sur l’appareil au moment de l’exécution, la vidéo est lue sans son par défaut. Avec Loop activé, elle se répète indéfiniment.
Déclencher une action à la fin de la vidéo
Article principal : Actions
L’élément Vidéo prend en charge un déclencheur On playback finished qui s’active lorsque la vidéo arrive à sa fin. Configurez-le dans le panneau Interactions pour naviguer vers un autre écran, afficher un CTA ou exécuter toute autre action.
Icône
Choisissez parmi la bibliothèque Tabler Icons intégrée, qui propose des milliers d’icônes en deux styles visuels :
- Stroke — contour uniquement.
- Filled — remplissage plein.
Recherchez une icône dans le sélecteur par mot-clé. Définissez la couleur de l’icône dans le sélecteur Color — choisissez un style de couleur enregistré ou définissez une couleur personnalisée.
Localiser les médias
Article principal : Ajouter une locale
Les éléments Image et Vidéo peuvent contenir un fichier différent par locale. Activez la locale cible, sélectionnez l’élément, puis téléchargez le fichier localisé dans le panneau des propriétés. Les locales sans fichier propre affichent le fichier de la locale par défaut.
Limitations
Vous ne pouvez pas localiser les éléments suivants :
- Les icônes
- Les arrière-plans d’écran
- Les identifiants de médias personnalisés
ID média personnalisé
Vous pouvez également définir un ID média personnalisé pour une image et une vidéo en arrière-plan.
Associez un ID média personnalisé à un élément image ou vidéo pour le remplacer au moment de l’exécution depuis le code de votre application. Utilisez cette fonctionnalité pour des visuels personnalisés — par exemple, pour afficher l’avatar choisi par l’utilisateur.
Le média que vous importez dans le Flow Builder sert de secours. Si votre code ne fournit pas de média pour cet ID au moment de l’exécution, c’est le média de secours qui s’affiche.
Pour activer un ID média personnalisé sur un élément Image ou Vidéo :
- Cochez la case Use custom media ID sous la zone de téléchargement.
- Saisissez un identifiant de média.
- Téléchargez une image ou vidéo de secours.
Dans le code de votre application, récupérez le média par son identifiant — consultez Personnaliser les assets pour l’API SDK.