Bonjour à tous ! Je suis Howard Pinsky, spécialiste senior d’Adobe XD chez Adobe. Aujourd’hui, nous allons ajouter des animations Lottie et vidéo à vos prototypes pour leur donner une toute nouvelle dimension. C’est parti.
Nous avons ici dans Adobe XD une plateforme de jeu que j’ai conçue. Pour donner encore plus de vie à cette expérience, nous allons y ajouter des animations vidéo et Lottie. Sur l’écran d’accueil, j’ai actuellement une belle grande image en haut, mais l’impression d’ensemble est statique. L’ajout de vidéos dans un projet XD est très similaire à l’ajout de photos. Vous pouvez les faire glisser directement sur la zone de travail ou dans une forme vierge à masquer. Une fois les vidéos ajoutées et sélectionnées, des options de lecture vidéo s’affichent dans l’inspecteur Propriétés. Ici, vous pouvez non seulement contrôler le moment de lecture de la vidéo (qui est, dans ce cas, automatique au démarrage de la prévisualisation), mais aussi cliquer sur l’icône à gauche pour afficher un menu HUD qui comporte davantage de commandes, permettant notamment de définir une miniature personnalisée, de faire défiler et de prévisualiser la vidéo, d’activer ou de désactiver l’audio, de rogner la vidéo (ce que nous allons faire dans un instant) ou de la lire en boucle.
Maintenant que nous avons ajouté une vidéo et choisi quand elle sera lue, nous pouvons lancer l’aperçu pour la voir en action. Ce simple ajout donne à notre prototype une toute nouvelle vie. Avant d’aborder l’ajout d’animations Lottie, passons à l’un des autres états du composant présenté ici. Voici une autre vidéo qui est lue automatiquement. Mais comme vous pouvez le constater dans l’aperçu, l’avion met quelques secondes à entrer dans le plan. Lorsque nous avons parcouru le menu HUD il y a quelques instants, j’ai mentionné la possibilité de rogner vos vidéos. Ce mode vous permet de définir les points de début et de fin en faisant glisser les poignées. Dans notre exemple, je veux que la lecture démarre juste avant le début de l’action. Une fois tous les paramètres définis, leur sélection permet d’appliquer les modifications. Notez que le rognage n’est absolument pas destructif : vous pouvez toujours revenir au menu HUD pour ajuster ou annuler vos modifications.
En revenant à l’état par défaut, je lance de nouveau l’aperçu. Maintenant, lorsque je clique pour accéder au deuxième état, la vidéo est automatiquement lue à partir du nouveau point de départ. J’ai également associé une troisième vidéo. Et si je reviens à la première, j’obtiens une vue développée qui dévoile davantage d’informations. Vous remarquerez aussi que les vidéos présentes entre les états de l’Animation automatique sont lues en continu sans interruption.
Très bien, voyons maintenant la fonction Lottie. Sur l’écran Communauté, j’ai configuré un composant qui s’affiche lorsqu’on le survole. À l’intérieur de ce composant, j’ai ajouté une zone supplémentaire que j’aimerais utiliser pour un sélecteur d’émoticônes animées. Nous allons modifier le composant principal pour pouvoir ajouter le contenu. Je vais dans le groupe empilé où je duplique rapidement le calque existant plusieurs fois, puis accède au Finder où j’ai d’adorables animations Lottie de plusieurs émoticônes créées par Anna Movin sur ui8.net. Comme pour les vidéos, vous pouvez faire glisser les fichiers Lottie directement sur un calque Lottie existant ou directement sur la zone de travail, ou encore les masquer dans des formes afin d’en définir la taille. Une fois les calques sélectionnés, la lecture peut être définie à droite. Nous voulons lire automatiquement tous ces éléments. Il convient de souligner ici que, contrairement aux vidéos, l’icône à gauche sert uniquement à contrôler la lecture en boucle, ce dont nous avons besoin pour ces interactions. Parfait.
Lorsque nous revenons à l’état par défaut de ce composant, nous pouvons maintenant prévisualiser l’écran Communauté. Survolez le message, puis survolez l’émoticône pour révéler nos animations Lottie et les voir en action.
Avant que je vous montre le prototype complet, examinons rapidement le déclencheur Fin de lecture, qui peut vraiment vous aider à automatiser certaines interactions vidéo et Lottie. Tout à l’heure, je vous ai donné un aperçu de l’état développé du composant présenté. Dans cette section, j’ai un bouton qui mène à un état de téléchargement. Ici, j’ai inclus une animation Lottie qui démarre immédiatement après la transition. Vous vous demandez peut-être ce qui se passe une fois l’animation terminée.
En revenant en mode Prototype, vous verrez qu’un déclencheur Temps est actuellement associé. Nous pouvons cependant ajouter une seconde interaction en cliquant sur le bouton + bleu. Cela nous permet maintenant de choisir le déclencheur Fin de lecture dans l’inspecteur Propriétés, qui indiquera à Adobe XD d’effectuer la transition une fois la vidéo ou l’animation Lottie terminée. Pour cette interaction, une transition simple menant à l’état de lecture devrait suffire. Ce déclencheur fonctionne également sur plusieurs plans de travail. Dans l’état de chargement du même composant, j’ai ajouté une autre animation Lottie. En plus du déclencheur Temps, il y a un déclencheur Fin de lecture menant à l’écran Jeu. Bien sûr, rien de tout cela n’a de sens sans voir l’ensemble en action. Donc, je reviens à l’état par défaut, je lance l’aperçu, je développe cette vue, puis je lance l’interaction Télécharger. Grâce au déclencheur Fin de lecture, le composant passe automatiquement à l’état de lecture, et je peux maintenant cliquer pour lancer l’animation de chargement. Une fois cette opération terminée, la transition de plan de travail a lieu.
Ces quelques exemples ne donnent qu’un aperçu très superficiel des possibilités offertes par les animations vidéo et Lottie. J’aborderai de nombreux cas d’utilisation supplémentaires dans de prochains tutoriels. Mais avant de terminer, voici un aperçu de l’expérience complète. Amusez-vous bien !