Le composant Séquence d'images

Le composant Séquence d’Images permet de créer des animations fluides ou des visualisations interactives en faisant défiler une série d’images. 

C’est une solution idéale pour présenter des produits en 360°, illustrer des processus ou simuler des effets d’animation sans avoir besoin d’utiliser une vidéo.

Cas d'usage

Mise en place du composant

Dans  Composants, insérez un composant Séquence d'images. Dans les propriétés, cliquez sur le bouton  Sélectionner à côté de Source.

À l'intérieur du composant, vous pouvez choisir comme source un GIF, une vidéo ou une séquence d'images. Pour créer une séquence à partir de plusieurs images, sélectionnez ces images depuis votre ordinateur et importez-les simultanément dans PandaSuite Studio : l'ordre se fait en fonction de votre ordre de sélection. 

Pour éditer votre séquence, double-cliquez dessus pour entrer dans le mode édition. Utilisez les contrôles du lecteur en haut à gauche pour lancer et arrêter la lecture. 

Caractéristiques du composant

Propriétés

La Séquence offre plusieurs propriétés pour personnaliser son apparence et son comportement :

• Qualité : Optimisée ou Meilleure, ces options agissent sur la qualité des images et donc le poids de votre séquence.
• Lecture automatique : par défaut, votre séquence se lance automatiquement. Vous pouvez désactiver la lecture automatique et créer une action pour déclencher manuellement l'animation.
• Durée : la durée de votre séqeunce, c'est-à-dire la durée entre l'affichage de la 1ère et de la dernière image. 
• En boucle : Permet de redémarrer la séquence automatiquement après la dernière image.
• Répétition : le nombre de répétitions de votre animation. Sélectionnez -1 pour une répétition infinie.
• Défaut : choisissez une frame par défaut (celle qui s'affiche automatiquement à l'affichage de votre écran). Vous devez avoir créé des marqueurs au préalable. 

Événements déclencheurs

Vous pouvez utiliser votre Séquence pour déclencher une action. Sélectionnez votre composant et cliquez sur Actions. 

Choisissez parmi les déclencheurs suivants : 

• Commence lecture
• Mise en pause 
• Arrêt lecture
• Fin lecture 

Actions interactives

Vous pouvez également ajouter une action sur votre Séquencee. Choisissez un déclencheur et l'action  Agir sur un composant. Sélectionnez l'une des actions suivantes : 

• Lecture / Pause
• Lecture 
• Mettre en pause
• Arrêter 
• Avancer 
• Reculer
• Changer de frame
• Aller à la frame suivante
• Aller à la frame précédente

Interactions avancées 

Marqueurs

Vous avez la possibilité d'ajouter des marqueurs sur votre Séquence d'images, c'est-à-dire de marquer des frames (images) spécifiques de votre séquence auxquelles vous pouvez associer des actions (déclenchement d'une action, lecture, pause). 

Pour créer un marqueur, lancez la lecture de votre séquence et arrêtez sur la frame de votre choix. Cliquez sur le bouton +. Vous pouvez éditer la frame, renommer le marqueur, supprimer le marqueur ou le définir comme marqueur par défaut. 

Synchronisation

La synchronisation du composant Séquence d'images avec d’autres composants, tels que le Minuteur ou l’Audio, est également possible. Les paramètres de synchronisation disponibles incluent :

• Frames
• Marqueurs

Ces paramètres sont accessibles depuis la fenêtre Propriétés du composant Synchronisation

Bonnes pratiques et astuces

Via After Effects, il est possible d'exporter votre animation sous la forme d'une séquence d'images. Attention au poids de ce type d'animation ! Nous vous recommandons plutôt d'utiliser l' export en JSON via Bodymovin pour optimiser le poids de vos animations. 

Exemples 

• Créer un 360° Product Viewer
• Contrôler une séquence d'images avec le doigt