Comment animer des alertes multistream dans SleepyChat

Deux façons d’animer

Animation rapide

Utilisez l’onglet Animation pour obtenir rapidement un mouvement fluide et soigné. C’est la manière la plus simple d’ajouter un fondu, une apparition, un zoom, un rebond ou un autre effet d’entrée ou de sortie.

Animation de la ligne de temps.

Utilisez la ligne de temps lorsque vous souhaitez plus de contrôle sur l'exactitude du moment où les éléments se déplacent, la durée pendant laquelle ils restent affichés ou la manière dont plusieurs modifications doivent se produire au fil du temps.

Si vous êtes nouveau dans l’éditeur, commencez par une animation rapide. Passer à la ligne de temps lorsque vous souhaitez un contrôle plus précis.

Étape 1 : Sélectionnez l'élément que vous souhaitez animer

L'animation s'applique par défaut à l'élément sélectionné, pas à l'ensemble du widget. Cliquez sur le texte, l'image, la forme ou l'élément que vous souhaitez déplacer. Si le clic sur le canvas est difficile, sélectionnez-le dans le panneau des couches.

Étape 2 : Ouvrez l'onglet Animer et choisissez un mouvement

L'onglet Animations vous propose des options de mouvement prêtes à l'emploi. Choisissez le style souhaité, consultez une prévisualisation et décidez s'il doit s'appliquer quand l'élément entre, sort ou les deux.

Un fondu, une apparition ou un zoom constitue un bon point de départ. Ces effets sont faciles à lire pendant un live et fonctionnent généralement mieux qu’une animation trop chargée.

Quelques définitions : In, Out et Combo ?

• Entrée : l’animation jouée lors de la première apparition de l’élément.
• Sortie : l’animation jouée lorsque l’élément disparaît.
• Combo : une paire coordonnée qui combine un style d’entrée et un style de sortie.

Si vous n’êtes pas sûr de ce que choisir, commencez par une animation d’entrée seulement. C’est la manière la plus simple de faire ressentir une alerte comme polie, sans compliquer le timing.

Étape 3 : Ouvrez la ligne du temps pour plus de contrôle

La ligne de temps permet de contrôler l'heure d'apparition des éléments. Si votre alerte nécessite plus qu'une entrée ou une sortie rapide, ouvrez la ligne de temps et utilisez-la pour décider quand commence le mouvement, combien de temps il dure et comment il s'aligne avec le reste du widget.

Positionner des sons dans la timeline

Les sons se placent sur la ligne du temps comme les clips visuels. Déplacez un clip son avant s’il doit jouer dès le début de l’alerte, ou déplacez-le plus tard s’il doit apparaître après que le texte ou l’image ait déjà été affiché.

C'est utile pour des effets comme un bruit d'entrée, un son de collision lors du dépôt d'un badge, ou un effet de fin qui joue après que l'image principale ait pris place. Si le timing semble incorrect, il est généralement inutile de tout reconstruire. Il suffit de déplacer le clip vers l'avant ou l'arrière jusqu'à ce qu'il soit aligné.

Les clips audio classiques peuvent également être rognés dans la timeline. Vous pouvez ainsi n’utiliser que la partie souhaitée plutôt que le fichier entier.

Comment fonctionne la synthèse vocale sur la ligne du temps

La synthèse vocale apparaît également sous forme de clip dans la timeline. Placez-le plus tôt ou plus tard selon le moment où la voix doit commencer, puis synchronisez facilement les paroles avec le texte, les images ou les autres sons de l’alerte.

La principale différence est qu’un clip de synthèse vocale ne se rogne ni ne se découpe manuellement. SleepyChat mesure la durée de l’aperçu audio synthétisé et ajuste automatiquement la longueur du clip.

En pratique, la durée se met à jour lorsque le résultat vocal change, par exemple lorsque vous modifiez le message, changez de voix ou ajustez le débit. Vous choisissez principalement quand le clip commence, et SleepyChat détermine combien de temps il doit durer.

Qu’est-ce qu’une image clé ?

Une image clé est simplement un état enregistré à un instant précis. Elle indique à SleepyChat la valeur d’une propriété à cet instant, puis l’éditeur crée le mouvement entre les états enregistrés.

Par exemple, enregistrez un état où le texte est petit, puis un autre où il est plus grand. SleepyChat crée alors automatiquement la transition d’agrandissement entre ces deux états.

Comment ajouter une image clé

Déplacez le curseur dans la ligne de temps au moment souhaité. Puis allez dans la section des propriétés que vous souhaitez animer et insérez un point-clé. Une fois le point-clé placé, modifiez la valeur souhaitée à ce moment-là.

Par exemple, placez la tête de lecture au début de l’alerte et enregistrez une image clé où l’élément est plus bas et transparent. Déplacez ensuite la tête de lecture plus loin et modifiez ce même élément pour qu’il soit plus haut et entièrement visible. SleepyChat interpolera automatiquement le mouvement entre ces deux états enregistrés.

Le point essentiel est le suivant : déplacez d’abord la tête de lecture, puis enregistrez ou modifiez l’image clé de la section concernée.

Quels paramètres peuvent être contrôlés par des clés d'animation ?

Toute section compatible avec les images clés peut enregistrer ses valeurs au fil du temps. Vous pouvez ainsi animer les propriétés qui ont le plus d’impact visuel :

• Position : déplacez les éléments vers la gauche, la droite, le haut ou le bas.
• Rotation : faites pivoter le texte, les images ou les formes pendant la lecture de l’alerte.
• Échelle et taille : agrandissez, réduisez ou étirez un élément.
• Opacité : faites apparaître ou disparaître progressivement un élément.
• Filtres et déformation : faites évoluer le flou, la luminosité, l’inclinaison et des effets similaires au fil du temps.
• Propriétés audio : lorsqu’elles sont disponibles, faites évoluer des paramètres comme le volume afin que le son ou la synthèse vocale apparaisse et disparaisse plus progressivement.

Les contrôles dépendent du type d’élément sélectionné, mais le processus reste le même : choisissez un instant, enregistrez l’image clé de la section, puis modifiez les valeurs souhaitées.

Utiliser les images clés dans les panneaux Inspector et Effets

Imaginiez chaque section avec animation par clé comme une petite voie d'animation. Si vous travaillez dans la transformation, vous animez des éléments comme la position, la taille ou la rotation. Si vous travaillez dans les filtres ou la distorsion, vous animez l'apparence de l'élément.

Une approche courante consiste à les combiner. Par exemple :

• Utilisez des images clés de transformation pour faire glisser le texte vers le haut.
• Utilisez les clés d'opacité pour le faire apparaître en même temps.
• Utilisez les clés de filtre pour l'affiner ou le déformer à l'arrivée.

Vous pouvez ainsi créer des animations plus riches sans outil d’animation distinct. Chaque section contrôle ses propres propriétés, et toutes peuvent fonctionner ensemble sur la même timeline.

Étape 4 : Déplacer, copier et réutiliser des images clés

Une fois les images clés créées, déplacez-les sur la timeline pour modifier le moment où une action se produit. Une image clé placée plus tôt avance l’action ; placée plus tard, elle la retarde.

Vous pouvez aussi copier des images clés pour réutiliser la même synchronisation ou la même variation ailleurs dans le clip. C’est pratique pour assortir le rythme d’entrée et de sortie ou faire bouger plusieurs éléments de façon similaire sans recréer chaque animation.

Procédez par petites étapes. Ajoutez une ou deux images clés, placez-les, prévisualisez le résultat, puis affinez-le. C’est bien plus simple que de chercher à créer l’animation parfaite en une seule fois.

Utiliser la timeline pour synchroniser tous les éléments

Tout l’intérêt vient de la combinaison de ces éléments. Vous pouvez d’abord faire glisser un texte à l’écran, jouer un son un instant plus tard, puis lancer un clip de synthèse vocale après avoir laissé au spectateur le temps de voir l’alerte à l’écran.

Imaginé la ligne du temps comme un lieu où vous mettez en scène l'ensemble du moment. Les clips visuels, les sons et l'audio parlé n'ont pas besoin de commencer en même temps. En les décalant, les alertes paraissent souvent plus claires et plus faciles à suivre.

Qu'est-ce que l'interpolation en pratique ?

L’interpolation est le mouvement créé entre les images clés. Enregistrez les valeurs de début et de fin, et SleepyChat génère le mouvement intermédiaire.

Vous n’avez donc pas besoin de créer une image clé pour chaque étape. Si la position, la rotation, l’opacité ou une autre propriété change entre deux points enregistrés, l’éditeur anime automatiquement la transition.

Étape 5 : Prévisualiser l'animation

Utilisez les commandes de lecture de l’éditeur pour observer le mouvement avant d’enregistrer. Cela vous permet de repérer les problèmes de synchronisation, les chevauchements ou les déplacements trop rapides pour être lisibles.

Si l’animation vous convient dans l’éditeur, testez le Widget complet dans l’Overlay pour l’observer dans une mise en page plus réaliste.

Étape 6 : Envoyer un événement de test

Un événement de test est la simulation la plus proche d’un envoi réel avant la diffusion. Il permet de visualiser l’animation dans l’Overlay et de vérifier que tout le Widget s’insère bien dans le contexte, pas seulement dans l’éditeur.

Ceci est particulièrement important lorsque vous avez du texte, du son et plusieurs éléments en mouvement qui se produisent ensemble.

Habitudes d'animation utiles

• Commencez simplement. Une animation épurée est généralement plus lisible pendant un live qu’un effet trop chargé.
• Prévisualisez régulièrement. De rapides vérifications font gagner du temps et évitent l’accumulation d’erreurs de synchronisation.
• Protégez la lisibilité. Si le texte est difficile à lire pendant le mouvement, ralentissez ou simplifiez l'effet.
• N’animez que ce qui compte. La position, la rotation, la taille et l’opacité améliorent généralement davantage la lisibilité que l’ajout simultané de tous les effets.

Retour à la configuration

Si vous souhaitez mieux comprendre comment les Widgets et les Overlays fonctionnent ensemble, revenez au guide de configuration. Il présente tout le processus, de la création d’un Widget à son placement dans un Overlay et à son ajout dans OBS.