Expressions basées sur l'IA dans After Effects

1. Intro: Bonjour, je suis Valérie, et bienvenue sur AI for Motion. Si vous vous sentez intimidé par les expressions et que vous souhaitez tirer parti de l'IA pour vous aider dans votre flux de travail d'animation, celui-ci est fait pour vous En cinq leçons, je vais vous montrer comment utiliser des outils d'intelligence artificielle tels HAGPT pour générer des expressions qui automatisent vos animations, créent des configurations intelligentes et vous font économiser des heures de travail manuel Nous aborderons tout, de la création de carrouselels aux effets de survol, rebondir les panneaux d'interface utilisateur ou encore l'automatisation des clics avec le curseur sans écrire une La bonne nouvelle, c'est que vous n' avez pas besoin d'être un expert en After Effects. Tu connais les bases, tu es prêt. À la fin de ce cours, vous disposerez d'une configuration réutilisable que vous pourrez appliquer à vos propres projets. Et surtout, vous aurez une toute nouvelle façon de concevoir l'animation grâce à l'IA. Donc, si vous êtes prêt à animer plus intelligemment et plus rapidement, passons à la première leçon. Je t'y verrai. 2. Créer une animation de carrousel intelligent: Voilà, et bienvenue à la première leçon du cours. J'espère que vous avez déjà téléchargé le dossier du cours. Je l'ai appelé expressions pour SAS parce que les animations que nous allons créer dans ce cours sont principalement utilisées dans vidéos explicatives de SAS. C'est bon. Commençons donc par vérifier le contenu de ce dossier. Rien de trop compliqué. Dans le dossier hat GPT, vous trouverez des fichiers PDF des conversations que j'ai eues avec Chat GPT pendant ce cours Cela signifie qu'à l'intérieur de ces PDF, vous verrez mes conversations exactes avec le chat, mais enregistrées sous forme de fichiers PDF Je les ai ajoutés parce que pour chacun de nous, le chat peut donner des réponses légèrement différentes. Et si l'IA vous propose quelque chose de complètement hors sujet dans votre chat, vous pouvez toujours revenir à ces fichiers PDF et copier les expressions exactes que j'ai utilisées. Mais ne t'inquiète pas. Je suis sûr que quelle que soit l' IA que vous utilisez, nous obtiendrons tous des résultats très similaires car en fin de compte, nous générons des lignes de code très simples. Très bien, passons à la suivante. Il existe un dossier Assets qui contient toutes les images que nous utiliserons dans ce cours, comme les photos d'animaux et les logos des icônes du logiciel. Vous verrez également un dossier AE contenant les fichiers du projet After Effects. L'un des fichiers inclut l'animation finale nous allons travailler dans ce cours, et l'autre est la version sans animation, laquelle nous allons travailler dans ce cours, et l'autre est la version sans animation, que nous allons commencer dès maintenant. Ouvrons donc celui-ci et commençons la leçon. Avant de poursuivre, assurons-nous que nous utilisons tous la même disposition d'espace de travail afin que tout reste synchronisé. Pour ce faire, accédez à Windows, puis à Workspace et choisissez par défaut. Si votre mise en page est toujours différente de la mienne, c'est probablement parce que certains panneaux ont été déplacés. Pour résoudre ce problème, nous pouvons réinitialiser l'espace de travail ensemble. Maintenant, nous devrions tous voir la même chose. Maintenant, à ce stade, ne faites rien, regardez et écoutez. Nous mettrons la main dessus très bientôt. Permettez-moi d'abord de vous présenter le panneau de projet afin que vous puissiez comprendre ce qu'il contient. Dans le dossier Assets, nous avons les images d'animaux et les icônes du logiciel. Il existe également un dossier contenant les solides que j'ai utilisés comme arrière-plan pour chaque leçon. Chaque dossier de leçon contient la composition principale de cette leçon et un sous-dossier contenant les précompositions associées J'ai déjà préparé les scènes avec lesquelles nous allons nous entraîner dans ce cours. Dans chaque leçon, nous allons pratiquer quelque chose de différent. Ne t'inquiète pas. J'expliquerai également comment j'ai configuré chaque scène avant de commencer l'animation. Pour l'instant, nous pouvons fermer toutes les précompositions et concentrer sur la première leçon , au cours de laquelle nous allons créer une animation de carrousel super cool avec de nombreuses micro-animations telles que l'opacité, l'échelle et même des animations d' ombres, mais sans créer d' images-clés pour ces microanimations mais sans créer d' images-clés pour ces images-clés Nous allons tout faire à l'aide d'expressions. Mais ne t'inquiète pas. Vous n'avez pas du tout besoin de connaître les expressions pour que cela fonctionne. Nous allons utiliser l'IA pour générer les expressions dont nous avons besoin. Avant de passer à l'animation, permettez-moi de vous expliquer rapidement comment j'ai mis en place cette scène, car vous pouvez en apprendre beaucoup. Comme vous pouvez le voir, j'ai quelques pré-compositions ici, chacune avec une photo d'animal Vous vous demandez peut-être pourquoi les avez-vous précomposés ? Pourquoi ne pas simplement utiliser le calque photo tel quel ? Permettez-moi donc d'entrer dans cette précomposition et d'expliquer pourquoi je l'ai fait. Tout d'abord, c'est parce que toutes les photos sont de tailles différentes et j'ai besoin qu'elles soient de la même taille. De plus, je voulais créer un look aux bords arrondis. J'ai créé un carré arrondi à l'aide d'une couche de forme, puis j'ai utilisé la fonction track Matty pour utiliser cette forme comme alpha pour l'image Cette forme est désormais utilisée comme masque pour l'image. C'est mieux que d'appliquer un masque normal directement sur le calque de l'image, car cela me permet positionner librement l' image comme je le souhaite. Plus important encore, cela me permet d' échanger facilement des photos ultérieurement si un client demande des modifications. Il me suffit de sélectionner l' image que je souhaite remplacer, puis de maintenir la touche Alt ou Option sur Mac et de faire glisser la nouvelle image dessus. Ensuite, je peux ajuster la nouvelle photo pour l' adapter à la mise en page. Comme vous pouvez le constater, les coins arrondis restent les mêmes, et je suis prêt à continuer à travailler. Très bien, je vais appuyer sur Ctrl Z pour annuler mes modifications. Oh, et d'ailleurs, lorsque je travaille sur des projets qui incluent de nombreuses photos, j'utilise des dimensions précomp de taille moyenne Une taille telle que 1080 x 1080 fonctionne généralement bien. Cela dit, j'espère que vous voyez l'avantage de le configurer de cette façon et que nous pouvons maintenant commencer à travailler ensemble. Préparez-vous à faire de la magie. Commençons donc à créer l'animation de carrousel avancée Comme je l'ai mentionné plus tôt, nous allons utiliser l' IA pour nous y aider. Dans notre cas, nous utiliserons la version gratuite de hat GPT. Si vous n'avez pas encore de compte , créez-en un. Mais honnêtement, maintenant, la plupart des gens en ont déjà un. J'utilise la version payante, mais ici vous me verrez utiliser la version gratuite appelée GPT four oh Cela fonctionne également de la même manière avec les anciennes versions. Cependant, au moment où vous regarderez ce cours, cette version n'existera peut-être plus. Quoi qu'il en soit, commençons à construire. abord, je souhaite partager trois conseils importants qui rendront ce processus beaucoup plus efficace pour vous. Premièrement, lorsque vous demandez de l' aide pour After Effects, commencez toujours par montrer à GPT une capture d'écran de votre pré-composition De cette façon, il peut voir l'ensemble de la configuration, ce qui facilite la compréhension de votre demande . Deuxièmement, lorsque vous rédigez votre premier message ou tâche, terminez-le toujours par une question du type : Comprenez-vous ce que je veux dire ? Cela aide GPT à réfléchir plus attentivement à votre idée et vous l'explique souvent encore mieux que vous ne l'avez décrite Troisièmement, si les choses ne se passent pas comme prévu et que GPT ne vous donne pas ce que vous voulez, ne continuez pas à essayer dans le même chat, fermez-le et démarrez-en un nouveau Cela réinitialise sa mémoire. Si vous continuez à poser des questions dans le même fil de discussion après plusieurs tentatives infructueuses, votre message d'origine restera bloqué, ce qui risque même de ne pas être exact. Il vaut donc mieux repartir à zéro. C'est bon. Dans cet esprit, commençons à créer l'animation karoel Selon notre premier conseil, nous allons commencer par prendre une capture d'écran de notre scène pour la partager avec GPT Dans mon cas, je vais rechercher l'outil Snipping. Voici les raccourcis pour PC et MAC. Les utilisateurs de PC décalent Windows S. Les utilisateurs de Mac utilisent Command Shift quatre. Vous n'avez pas besoin de capturer l'intégralité de l'interface, uniquement les panneaux importants. Dans notre cas, ce qui compte le plus, c'est le panneau de prévisualisation, afin que GPT puisse voir la mise en page et le panneau des couches, afin qu'il puisse lire les noms des couches Nous voulons que GPT puisse voir notre scène. Assurez-vous donc que la capture d'écran inclut le panneau d'aperçu et le panneau des couches, afin qu'elle puisse également voir les noms des couches. Copions maintenant la capture d'écran et collons-la dans Chat GPT. Ensuite, nous expliquerons ce que nous voulons qu'il fasse. Je vais l'écrire en anglais simple avec quelques fautes de grammaire juste pour vous montrer qu'un anglais parfait n'est pas nécessaire pour obtenir de bons résultats. C'est là que notre deuxième règle est utile. Alors essayons-le. Je recommande de toujours commencer par mentionner le logiciel que vous utilisez. Décrivez ensuite brièvement le contenu de votre scène. Notre objectif est de confier à GPT une tâche de base sans trop entrer dans les détails au début Par exemple, une valeur spécifique telle que 20 % n'est pas très importante à ce stade. Toutes les valeurs peuvent être affinées ultérieurement, alors ne vous inquiétez pas pour l'exactitude. Concentrez-vous simplement sur la description de l'idée d'animation telle que vous l'imaginez. Comme je le fais ici, je vous dis que je veux que l'opacité des précompositions non centrées soit plus faible pour que la précomposition centrée ressorte davantage Et maintenant, une fois que vous aurez tout décrit, n'oubliez pas notre deuxième règle. Si vous n'êtes pas sûr d'avoir clairement expliqué votre idée, terminez votre message en demandant : Comprenez-vous ce que je veux dire ? Maintenant, sachez que la réponse donnée GPT sera un peu différente pour chacun de nous Et c'est très bien. Le plus important est de vérifier qu'il comprend bien votre vision dans la première partie de sa réponse. Si quelque chose ne va pas, vous pouvez le corriger avant d' aller de l'avant. Par exemple, j'ai remarqué que GPT suggérait de redimensionner la précomposition centrée de 20 %, ce qui, dans son esprit, signifie passer d'une échelle de 100 Mais dans mon cas, mon échelle de précomposition par défaut n'est pas de 100, donc je ne veux pas l'étendre à Je vais dire à GPT que d'une manière simple, mon échelle par défaut est de 40 Ensuite, je reviens à mon projet, vérifie ce qui semble bon, et je constate que 60 fonctionne bien. Je reviens donc au chat et je lui dis 60. Avant de continuer, je vais également examiner les autres suggestions de GPT Dans ce cas, je vois qu'il propose deux styles de mouvement différents. Je veux que l'animation soit fluide, donc je le mentionnerai également dans le chat. Une fois cela fait, exécutons la tâche. Maintenant, nous avons quelques réponses générées avec quelques explications simples, vous n'êtes pas obligé de toutes les lire, mais si vous voulez commencer à apprendre comment fonctionnent les expressions, c'est une bonne idée de les lire. bien, c'est que même si vous ne comprenez pas les expressions, GPT donne généralement des explications claires dans le code d'expression sans rien casser Cela nous indique également à quelle propriété nous devons appliquer l'expression, et c'est ce qui est important pour nous. N'oubliez pas qu'avant de poursuivre, si vous avez des questions, continuez à lire le reste de la réponse de GPT La plupart du temps, vous y trouverez l'explication dont vous avez besoin. D'accord. Passons maintenant à la première expression d'échelle et copions le code. Ouvrez maintenant votre projet et appuyez sur S pour afficher la propriété d'échelle. Pour ouvrir la saisie de l'expression, maintenez la touche Alt ou Option enfoncée sur Mac, puis cliquez sur le chronomètre Scale Appuyez maintenant sur Ctrl ou Commande V pour coller l'expression. Pour terminer l'action, cliquez n'importe où en dehors du panneau d'expression. Et voilà. La première précomposition est désormais portée à 60. Ouvrons la grille d'action et plaçons la précomposition au centre pour voir si elle fonctionne Ça a l'air bien. Faisons de même pour la propriété d' opacité Vérifions-le. Génial. Ça a l'air vraiment sympa. Si vous rencontrez des erreurs ou si quelque chose ne fonctionne pas, ne vous inquiétez pas. Vous pouvez simplement copier les expressions que j'ai utilisées. Ils sont répertoriés dans le dossier de discussion GPT. Dans les prochaines leçons, je vais vous montrer comment corriger les erreurs d'expression. Mais pour l'instant, suivez simplement le processus et familiarisez-vous avec le processus. Très bien, sélectionnons maintenant toutes les précompositions et déplaçons-les, sorte que celle que nous examinons actuellement soit placée au centre Je suis super. Maintenant, pour appliquer ces deux expressions au reste des couches, ouvrez d' abord la propriété d'opacité, cliquez dessus avec le bouton droit de la souris et choisissez Copier l'expression uniquement Sélectionnez ensuite le reste des précompositions et appuyez sur Ctrl ou Commande V pour le coller Faisons de même pour la propriété scale. Génial. Et maintenant, nous devons contrôler la position de toutes les couches à la fois. Pour ce faire, créons une nouvelle couche nulle et associons toutes les précompositions à celle-ci. Veillez à ne pas confondre le titre Mat Piwip avec le lien parent et Pick Ce sont deux choses différentes. Génial. Maintenant, nous pouvons déplacer la couche nulle vers la gauche ou vers la droite, et nous obtiendrons cet effet de carrousel fluide Imaginez le nombre d'images clés nécessaires le créer manuellement en animant et en chronométrant chaque précomposition Et c'est là le véritable pouvoir de savoir comment utiliser l' IA pour nous aider à accomplir des tâches réelles dans le cadre de nos projets, même si vous ne connaissez pas du tout les expressions. Cela fait, nous n'avons fait qu' effleurer les possibilités offertes par l' IA et les expressions Passons maintenant au niveau suivant. Supposons que je souhaite modifier les valeurs de mise à l'échelle et d'opacité des expressions Pour ce faire, je dois ouvrir chaque expression, trouver les bons paramètres et les ajuster manuellement pour chaque couche. Comme vous pouvez l'imaginer, cela prend beaucoup de temps. Voyons maintenant comment l'IA peut aider à automatiser ce processus. Lorsque vous souhaitez contrôler les paramètres d'une expression de manière dynamique, la configuration est légèrement différente. Vous venez d'apprendre à effectuer une configuration simple. Nous allons maintenant en créer un plus avancé. Pour commencer, sélectionnons nos précompositions et deux fois sur E pour faire apparaître les expressions Nous allons maintenant supprimer toutes les expressions. Pour ce faire, maintenez la touche Alt ou Option enfoncée sur Mac, puis cliquez sur le chronomètre des propriétés Faisons-le pour toutes les précompositions. Et n'oubliez pas de supprimer également l'expression de la pré-composition centrée Génial. Revenons maintenant à Chat GPT et demandons-lui de créer une nouvelle configuration d'expression pour nous Je vais écrire la demande d'une manière très simple, et je peux même inclure certains termes d' expression comme ceux que nous avons vus plus tôt. GPT comprend donc quels paramètres nous voulons contrôler. Je vais donc simplement copier ces phrases à partir de l'expression que GPT a donnée plus tôt, afin qu'il comprenne exactement quels paramètres je veux contrôler Ensuite, j'ajouterai également les paramètres d'opacité. Je dis simplement à GPT que je veux pouvoir contrôler ces deux propriétés Voyons ce que cela suggère. Allons-y. Sans même savoir que c'était possible, j'ai simplement demandé à GPT si c'était possible, et il m'a donné le processus complet étape par étape Il m'a donné les expressions et m' a également suggéré les numéros à utiliser dans le contrôleur. Il se peut que nous ne comprenions pas complètement ce que tout signifie, mais ce n'est pas grave. Il suffit de suivre les étapes et de voir ce que nous obtenons. abord, je vais créer une nouvelle couche nulle comme indiqué par GPT, et maintenant je vais m'assurer d'étiqueter les couches exactement comme suggéré, afin que nous ne rencontrions aucune erreur par la suite Génial. Voyons maintenant quelles sont les prochaines étapes. Nous continuerons à suivre les directives de GPT et créerons quatre commandes de curseur différentes Vous pouvez les trouver dans le panneau des effets soit en cliquant avec le bouton droit sur le calque nul et en accédant aux contrôles d'expression, soit en saisissant le nom de l'effet dans la barre de recherche des effets. Génial. Ajoutons maintenant cet effet à la couche nulle. Utilisez Control ou Command D pour le dupliquer trois fois, sorte que vous obtenez quatre curseurs au total Enfin, renommez chaque curseur avec les noms exacts que GPT Copiez simplement les noms du chat et collez-les dans le champ du nom de l'effet. Faisons-le pour les quatre curseurs. Génial. Avant d'aller plus loin, c'est le moment idéal pour enregistrer une copie de sauvegarde de votre projet, au cas où After Effects se bloquerait. Enregistrons-le dans un nouveau fichier. Vous pouvez appeler cela un peu comme de l'entraînement. Il est toujours judicieux de conserver une version du projet avant le début de l' animation, en particulier dans les scènes les plus complexes, afin ne pas perdre la mise en page que vous avez préparée si vous devez recommencer à zéro. C'est bon. Revenons maintenant au chat et copions l'expression d' échelle. Nous allons le tester sur la pré-composition centrée. Dans notre cas, c'est la sixième photo. OK, donc maintenant nous ne voyons pas du tout la pré-composition, mais c'est bon. Nous n'avons pas d'erreur d'expression, il s'agit donc probablement simplement d'un problème de paramètre dans le contrôleur. Comme vous pouvez le constater, toutes les valeurs du contrôleur sont actuellement mises à zéro. C'est probablement le problème. Si vous constatez des erreurs d'expression, voici mon conseil. Supprimez le nom du contrôleur et saisissez-le à nouveau manuellement au lieu de le copier-coller depuis le chat Pour une raison ou une autre, After Effects ne reconnaît parfois pas le texte collé provenant d'autres programmes Même si le nom semble le même, cela ne fonctionnera pas. Et c'est ce qui cause ces étranges erreurs d'expression. Il suffit donc de retaper les noms manuellement et le problème devrait disparaître. Quoi qu'il en soit, continuons à suivre les étapes GPT. Revenons au chat et copions l' expression d'opacité À présent, collez-le sur la propriété d'opacité. Revenez ensuite au chat et vérifiez ce qu'il dit de faire ensuite. Et voilà. Troisième étape, il suggère d'ajuster les valeurs de contrôle. Alors faisons-le rapidement. C'est bon. Maintenant, testons-le en déplaçant notre couche nulle d'un côté à l'autre et voyons ce qui se passe. Incroyable. Cela fonctionne parfaitement. Je peux maintenant ajuster les contrôleurs pour la configuration du carrousel et avoir un aperçu de l'apparence des choses simplement en déplaçant la couche nulle L'avantage de cette configuration est que vous pouvez toujours revenir et modifier les valeurs quand vous le souhaitez De plus, une fois la leçon terminée, vous pouvez enregistrer ce projet avec cette configuration intéressante pour l'utiliser comme modèle pour vos futurs projets. La seule chose que vous devez faire est remplacer les photos par celles qui sont pertinentes pour votre projet et d'ajuster le contrôleur si vous souhaitez lui donner un aspect un peu différent. Pour l'instant, copions les expressions que nous avons ajoutées à cette précomposition et collons-les sur le reste des couches Pour afficher les deux propriétés, appuyez d' abord sur T pour afficher l'opacité, puis maintenez la touche Shift enfoncée et appuyez sur S pour afficher également la propriété d' échelle Maintenant, nous allons copier uniquement les expressions et les coller dans les autres couches. C'est bon. Nous pouvons maintenant tester le contrôleur et voir si tout fonctionne. Comme vous pouvez le constater, la couche Fox ne réagit pas au contrôleur d' échelle Nous avons donc probablement oublié de coller l' expression d'échelle sur celui-ci. Ce n'est pas grave. Copiez simplement l'expression d'échelle de l'une des autres précompositions et collez-la sur la couche Fox. Génial. Maintenant, je voudrais mentionner quelque chose de vraiment important lorsque vous travaillez avec des précompositions Si vous décidez de réduire vos précompositions pour conserver la meilleure qualité d'image possible, sachez que cela peut modifier l'apparence de votre scène Comme vous pouvez le voir ici, l' opacité semble différente maintenant. Mais dans notre cas, c' est super facile à corriger. Ajustez simplement le contrôleur d'opacité dans notre configuration, et il mettra automatiquement à jour toutes les couches Génial. Maintenant, allons encore plus loin et rendons le design encore plus beau en ajoutant un simple effet d'ombre en forme de goutte. Ajustons les paramètres de l'ombre et changeons également la couleur de l'ombre pour qu'elle se fond bien avec l'arrière-plan Voici un bon conseil. Lorsque vous ajoutez une ombre projetée, commencez par échantillonner la couleur d'arrière-plan de votre scène, puis affinez les valeurs chromatiques. C'est ainsi que vous obtenez des ombres plus naturelles. L'ombre est superbe, mais je veux qu'elle apparaisse uniquement sur la précomposition centrée J'essaie de créer un look subtil et surélevé. Mais comme vous pouvez l'imaginer, animer et chronométrer manuellement l'ombre projetée pour chaque couche prendrait une éternité. C'est là qu'intervient à nouveau notre ami IA. Pour aider GPT à mieux comprendre le contexte, je vais prendre une capture d'écran de ma scène Il est important que le GPT détecte l'effet d'ombre dans les couches de la chronologie Prenez donc une capture d'écran et collez-la dans le chat. Essayons maintenant d'expliquer ce que nous essayons de réaliser. Encore une fois, en utilisant un langage très simple. GPT suggère maintenant quelques étapes. Mais comme j' ai déjà une manette qui gère l'ensemble de la configuration, je me demande si je peux ajouter cette automatisation Drop Shadow à la même manette. Demandons-le donc. Génial. Il dit que nous le pouvons. Suivons les étapes et voyons ce qui se passe. Je vais maintenant copier le nom et retourner à mon projet pour suivre les étapes. Nous devons donc d'abord créer un autre curseur comme il l'a suggéré, et nous pouvons coller le nom que nous avons copié il y a une seconde OK. Mettons-le également à 100, comme nous l'avons vu dans la suggestion. Revenons au GPT. Voyons ce qui va suivre. OK, je ne comprends pas vraiment tout. Il y a beaucoup d' explications en cours. Passons simplement à autre chose et copions les expressions. Le plus important pour moi est de vérifier où l'IA dit de coller l'expression. Dans ce cas, il est indiqué de l'appliquer à la propriété d'opacité de l'effet d'ombre Alors faisons-le maintenant. Maintenant, je peux contrôler l' ombre projetée d'ici. Je vais le régler sur 100 pour le moment et vérifier s'il disparaît automatiquement lorsque je déplace la couche nulle sur les côtés. C'est génial. Cela fonctionne parfaitement. Je vais maintenant ajuster la couleur de l'ombre pour qu'elle corresponde mieux à mon design. fois cela fait, copions cet effet d'ombre tombante et collez-le sur le reste des précompositions Déplaçons le zéro et voyons si tout fonctionne. Sympa. L'ombre n' apparaît que lorsque la précomposition est au centre Je suis content de la façon dont l' automatisation s'est révélée efficace. Comme une ombre portée est maintenant appliquée à toutes les précompositions, modifions également légèrement l'opacité, car l' ombre portée a légèrement changé son apparence appliquée à toutes les précompositions, modifions également légèrement l'opacité, car l' ombre portée a légèrement changé son apparence. C'est bon. Maintenant, nous pouvons animer la scène comme bon nous semble. Dans mon cas, je vais simplement créer un simple mouvement latéral pour le carrousel Au début de l'animation, je vais commencer par montrer l'éléphant. Au bout de 3 secondes, je mettrai le tigre au centre. Enfin, 3 secondes plus tard, je vais déplacer le léopard vers le centre Je viens de me rendre compte que je n'ai peut-être pas placé l'éléphant et le tigre parfaitement au centre Je vais donc passer à la première image-clé et ajuster la valeur de position nulle Je ferai de même pour le tigre. Génial. Maintenant, comme nous le faisons habituellement, améliorons le mouvement en ajustant la vélocité des images-clés Mais cette fois, au lieu de maintenir l'option Alter enfoncée et de double-cliquer sur une image-clé, j'utiliserai un raccourci que j'ai découvert il n'y a pas si longtemps pour ouvrir rapidement le panneau de vélocité des images-clés Après avoir sélectionné vos images-clés, appuyez simplement Control Shift K ou Command Shift K sur Mac, et le tour est joué Maintenant, changeons la vélocité à environ 75 % pour environ 75 % pour les images-clés entrantes et sortantes. Donnons-en un aperçu. Génial. Ça a l'air super. Passons maintenant à Second 9 et copiez-collez la première image-clé pour obtenir une belle animation en boucle Appuyez dessus pour raccourcir la zone de travail et accédez à l' éditeur Speedgraph pour vérifier si la vélocité est constante sur l'ensemble de l'animation D'accord, tout semble bon. Et avec cela, nous terminons la première leçon. chose la plus importante que je veux que vous retiriez de cette leçon est qu' il vaut parfois la peine de passer quelques minutes supplémentaires à créer une configuration automatique avant de passer à l'animation. Cela peut vous faire gagner beaucoup de temps par la suite, car lorsque le client reviendra et demandera des modifications, vous pourrez ajuster les choses très rapidement au lieu de devoir gérer des tonnes d'images-clés et de tout refaire manuellement Je recommande de poursuivre cette leçon en ajoutant un effet de flou cool à la configuration Vous pouvez demander à Chat GPT de rendre floues toutes les précompositions non centrées , de ne mettre l'accent que sur la précomposition centrée et de voir ce Les possibilités sont infinies, et j'espère que vous comprenez maintenant à quel point il est facile de créer de telles choses à l'aide de l'IA. Je n'ai jamais utilisé d' expressions complexes dans mes propres projets, mais je suis maintenant convaincu que je peux créer presque toutes les automatisations dont j'ai besoin sans réellement apprendre les expressions ou le codage. Bien, maintenant ouvrons la deuxième leçon et fermons celle-ci Et avant de commencer à regarder la leçon suivante, n'oubliez pas de faire une pause de dix minutes pour vous rafraîchir avant de continuer. On se voit dans le prochain. 3. Animation de rebondissement d'UI: Bonjour, et bon retour. Dans cette leçon, nous allons créer un mouvement rebondissant pour le panneau d' interface utilisateur que vous voyez ici Mais avant de passer à l'animation, permettez-moi de vous montrer rapidement comment j'ai configuré la scène. J'ai donc une précomposition principale de mon avatar, et si nous ouvrons les précompositions pour cette leçon, vous verrez qu'il y en a une pour l' image de l'avatar et une pour le image de l'avatar et une Dans la précomposition de l' image d'Avatar, je voudrais vous donner un petit conseil Lorsque vous travaillez sur de telles scènes, évitez de trop grandes dimensions de votre précomposition Il est préférable de travailler avec de petites dimensions car nous n'avons pas besoin de voir cette photo de près. De plus, comme dans la leçon précédente, j'utilise la fonction Track Mat pour masquer l'image avec un cercle que j'ai créé à l'aide de l'outil Ellipse Explorons maintenant la composition principale de l'avatar. Voici le reste des couches, y compris le bouton précomposé, y compris le bouton précomposé, qui n'est qu'un simple rectangle arrondi avec un trait et un calque de texte Très bien, je vais fermer ces précompositions et passer à l' Dans cette scène, je veux créer une animation d'introduction pour le panneau de l'interface utilisateur, mais je veux la rendre plus intéressante Je veux ajouter un mouvement secondaire et le faire bouger de manière rebondissante Encore une fois, je ne sais pas vraiment quelles expressions utiliser, mais je sais à quoi je veux que l'intro ressemble Dans mon cas, je veux que le panneau entre dans la scène par le bas. Créons donc cette animation de base très rapidement. Commençons par ouvrir la propriété position. Nous pouvons zoomer sur la chronologie pour voir les codes temporels plus clairement. Comme je veux que la précomposition se termine à sa position actuelle, je vais passer, disons, à la seconde et y créer une image-clé Ensuite, je vais passer au début de la chronologie et déplacer la précomposition hors du cadre Nous avons donc maintenant une animation très simple. Avant d'ajouter de simples E aux images-clés, faisons une capture d'écran rapide de la scène et demandons hat GPT de nous aider à faire rebondir cette animation Assurez-vous que la propriété position est ouverte afin que GPT puisse voir les images-clés que nous avons créées. C'est bon. Passons maintenant à Chat GPT. Et au lieu de continuer le chat de la première leçon, commençons une nouvelle conversation en cliquant sur la nouvelle icône du chat. Génial. Nous pouvons maintenant coller la capture d'écran et commencer à discuter. Tout d'abord, commencez toujours par indiquer GPT le logiciel que vous utilisez Décrivez ensuite ce que vous essayez de créer. Et avant de poursuivre, j' ai une question pour vous. Comment devons-nous terminer notre message avant que le GPT ne nous aide ? C'est exact. Nous devons nous demander si vous comprenez ce que je veux dire ? C'est l'étape la plus importante. Nous voulons que GPT nous décrive notre vision avant de proposer une solution Ce n'est qu'alors que nous pourrons être sûrs que c'est sur la bonne voie ? GPT a donc déjà préparé l'expression et expliqué comment l'appliquer Il nous a également donné quelques conseils au cas où nous voudrions ajuster les paramètres de rebond. Voici ce qu'il pense que nous voulons réaliser. Comme vous pouvez le constater, il l' a très bien compris, et il a même mentionné un nouveau terme plus précis pour désigner ce que nous essayons de créer. Il sait que nous voulons créer une animation de dépassement et de rebond. Il a déjà préparé l'expression et expliqué comment l'appliquer. Il a également suggéré ce qu'il fallait faire au cas où nous voudrions ajuster certains paramètres du mouvement de dépassement Bien, copions l' expression et appliquons-la à notre animation de position pour voir ce qui se passe. Je suis génial. Nous avons déjà un bel effet gonflable. Mais à mon avis, l' animation semble un peu lente. Passons à la dernière image-clé un peu plus tôt dans la chronologie. Placez-le autour du cadre 20. Maintenant, faites un zoom arrière sur l'aperçu et vérifiez si l'expression GPT vous a donnée déclenche également un dépassement sur la première Si c'est le cas, ne vous inquiétez pas. Retournez simplement au chat et demandez à GPT de faire en sorte que l'effet overshoot bounce ne s'applique qu'à la Bien, revenons à la leçon. Maintenant, simplifions-nous les images-clés et voyons ce que nous avons Comme vous pouvez le constater, l' effet de rebond est à peine visible maintenant, et cela s'explique par le fait que la vélocité des images-clés a changé après l' Dans ce cas, nous pouvons suivre suggestion de GPT et ajuster la quantité de rebond dans l'expression Même si vous ne connaissez rien aux expressions, GPT les écrit généralement avec de courtes notes à l'intérieur Ainsi, vous saurez quelles valeurs ont le plus d'influence sur le mouvement. ne nous reste plus qu'à essayer différentes valeurs jusqu'à ce que nous trouvions quelque chose qui nous plaît. Tout d'abord, je vais modifier la valeur du rebond par petites étapes. Ensuite, je vais essayer un plus grand saut pour voir ce que cela me donne. Je vous montre cela parce que je veux que vous vous sentiez libres de changer valeurs et de jouer avec les paramètres lorsque vous vous entraînez seul. Rien de grave ne peut vraiment arriver. Dans le pire des cas, il vous suffit d'appuyer sur Annuler ou de demander à nouveau de l'aide à GPT Bien, maintenant que nous avons trouvé une valeur de rebond qui fonctionne, je voudrais corriger une pause qui se produit dans l'animation Il est important que vous compreniez pourquoi cette pause existe. C'est vraiment simple. Lorsque nous assouplissons facilement les images-clés, leur vélocité change. Et comme vous pouvez le voir ici dans l'éditeur de graphes, la vitesse de cette image-clé finale est actuellement nulle Pour résoudre ce problème, nous pouvons reconvertir l'image-clé finale en linéaire en maintenant la touche Ctrl ou Commande enfoncée sur Mac et en cliquant dessus une fois Maintenant, la vitesse est d'environ 13 54 pixels par seconde. Avant, il était bloqué à zéro. Maintenant, nous avons de nouveau du mouvement. Alors maintenant, l'animation se poursuivra en douceur avec l'effet de rebond. Mais comme vous pouvez le constater, c'est un peu trop pour le moment, et c'est parce que nous l'avons initialement ajusté en fonction de l' image-clé allégée Mais maintenant, nous avons une image-clé linéaire normale. Nous allons donc à nouveau affiner les paramètres de rebond pour qu'ils correspondent à la nouvelle vitesse Je vous montre ce processus parce que je veux que vous l' exploriez et que vous le mettiez en pratique en cas de besoin. N'ayez pas peur de tester des choses. C'est le meilleur moyen d'apprendre rapidement. Maintenant, faisons en sorte que l' animation démarre plus lentement en tirant la poignée de la première image clé vers la droite. À mon avis, cela a déjà l'air génial et nous sommes prêts à passer à autre chose. Bien entendu, vous pouvez toujours modifier les valeurs pour obtenir un aspect légèrement différent si vous le souhaitez. Mais maintenant, je veux rendre cette animation encore plus dynamique en ajoutant une simple animation de rotation avec la position. J'essaierai également d'ajouter un mouvement rebondissant amusant à la rotation, si c'est possible Commençons donc par créer l'animation de rotation. Sélectionnez la couche, appuyez sur R, puis passez à l'image 20. Créez une image-clé ici. Il s' agira de la position de rotation finale. Revenez ensuite au début de la chronologie et faites pivoter la précomposition Faisons-le pivoter à 25 degrés et ajustons la position à ce moment-là afin que panneau de l'interface utilisateur soit masqué hors de l'écran. accord, ça a l'air sympa, mais je voudrais revenir à Chat GPT et essayer de créer une animation plus intéressante Disons-lui simplement ce que nous avons fait et ce que nous voulons réaliser. Je veux que la rotation soit un peu tordue. Et comme je ne suis pas sûr de m' expliquer clairement, je vais demander à GPT. Tu comprends ce que je veux dire ? Maintenant, je peux voir quelques explications, et GPT utilise des termes tels que gigue ou mouvement de tremblement Alors peut-être que je vais lui demander de faire trembler un peu la couche, puis Voyons s'il comprend la tâche. Après avoir lu l'explication, je ne suis toujours pas sûr que ce soit ce que je voulais dire. Donc, dans ce cas, je vais simplement l' essayer et corriger le GPT si nécessaire. C'est l' aspect utile de l'exploration de l' IA et des effets secondaires. Je veux vraiment que vous suiviez ces mêmes étapes et que vous n'ayez pas peur lorsque vous essayez des choses par vous-même. Bon, maintenant je vois que le mouvement est un peu agité, mais il ne ressemble toujours pas à ce que j'imaginais Avant de retourner au chat, je vais essayer d'ajuster certaines valeurs de l'expression pour voir si cela peut vous aider. Après quelques tests, je n'obtiens toujours pas le mouvement exact que je souhaite, alors annulons l'expression, et revenons au chat pour mieux l'expliquer. Je vais commencer par dire que ce n'est pas exactement ce que je voulais dire, puis décrire mon idée d'une manière encore plus simple. Comme toujours, je terminerai en demandant : Comprenez-vous ce que je veux dire ? Cette fois, dit GPT, je comprends parfaitement. Voyons donc si c'est vrai. Génial. C'est exactement ce que je recherchais. Maintenant, je peux jouer avec les valeurs et modifier les choses jusqu'à ce que tout soit parfait Jouons donc avec ces trois valeurs la section des paramètres de l'expression. C'est bon. Je trouve que ça a l'air sympa. Ensuite, je vais ajuster les images-clés et voir comment elles interagissent avec l'expression de rotation Ça a l'air super maintenant. Je vais également ajuster la vélocité pour mieux correspondre au mouvement de position. Encore une fois, il était très important pour moi de vous montrer ce processus de va-et-vient avec GPT Parfois, nous n'obtenons pas ce que nous voulons tout de suite, mais si vous expliquez les choses clairement, GPT finira par l'obtenir D'accord. Maintenant que nous avons créé l'introduction du panneau d'interface utilisateur, passons à la précomposition et créons micro-animations sympas Dans ce cas, je souhaite ajouter une animation à échelle variable à des couches telles que l'image de l' avatar, l'étoile et le bouton Pour les autres couches, nous pouvons réutiliser l'animation de position rebondissante que nous avons créée précédemment pour la précomposition principale Revenons donc au chat GPT et demandons-lui créer une animation rebond ou pop up scale Nous pouvons également mentionner que nous voulons qu'elle soit similaire à l' animation de position contextuelle que nous avons utilisée précédemment Nous avons donc ici toutes les explications et suggestions pour l'animation à l'échelle contextuelle. Revenons au projet et créons l'animation à l'échelle pour l'image d'Avatar afin d' y ajouter GPTSepression Comme avant, comme je veux que l'échelle finale soit celle qu'elle est à la fin de l'animation, je vais passer à l'image 20 et créer une image-clé avec la valeur actuelle Ensuite, au début de la chronologie, je mettrai l'échelle à zéro. Vous pouvez également isoler cette couche afin que nous puissions nous concentrer uniquement sur elle. Maintenant que les images-clés sont en place, essayons d'utiliser l' expression que GPT nous a donnée Génial. Cela fonctionne parfaitement. Je vais maintenant ajuster l'assouplissement afin qu'il corresponde à l'animation de position que nous avons créée pour le panneau principal de l'interface utilisateur. Ensuite, je vais jouer avec les paramètres d'expression pour voir ce qui convient le mieux à cette couche spécifique. Bien, appliquons la même expression au prochain élément que nous voulons faire apparaître. Faisons-le pour la précomposition des boutons. Créez d'abord l'animation à l'échelle, puis appliquez l'expression. Il suffit de sélectionner le calque et de coller l'expression. Voyons à quoi ça ressemble. Maintenant, ajustez la vélocité et ajustez l'effet de rebond jusqu'à ce que le résultat soit parfaitement adapté à cette couche Génial. Ça a l'air super. Faisons de même pour l'étoile et le grand chiffre. Maintenant, pour appliquer l'expression, sélectionnez les deux couches et appuyez sur Ctrl V. Voyons à quoi elle ressemble. Comme la couche numérique est assez petite, je préfère rendre le rebond un peu plus visible pour qu'il apparaisse bien Ça a l'air super aussi. Maintenant, créons une animation contextuelle pour l'icône que j'ai ici. Ce fichier est très volumineux, mais je l' ai réduit à une très petite valeur Voyons donc si l' expression fonctionne toujours dessus. Parfois, le GPT peut créer une expression basée sur la valeur d'échelle réelle de la couche, ce qui peut ne pas fonctionner correctement pour toutes les couches, en particulier si elles sont toutes mises à l'échelle différemment. Si cela vous arrive, retournez simplement au GPT et demandez-lui créer l'expression en utilisant des pourcentages, comme nous le faisons actuellement Si vous rencontrez des problèmes, expliquez simplement que vous travaillez avec des couches dont les valeurs d'échelle sont différentes et que vous souhaitez une animation contextuelle universelle qui fonctionne quelle que soit l'échelle des couches. C'est bon. Maintenant que nous avons terminé les animations contextuelles à l'échelle, créons une introduction de position simple pour les couches de texte Tout d'abord, passez à l'image 20 et créez une image-clé pour leur position actuelle Revenez ensuite au début de la chronologie et déplacez les couches de texte vers le bas et hors du cadre. Maintenant, copiez la même expression de position rebondie que celle que nous avons utilisée pour le panneau principal de l'interface utilisateur et collez-la sur les couches de texte Enfin, ajustez l'assouplissement et voyez à quoi il ressemble. Cela semble excellent, mais nous avons un petit problème. Vous pouvez voir les couches de texte entrer dans la scène en dehors des limites de la forme bleue principale. J'ai une question pour toi. Que devons-nous faire pour résoudre ce problème ? Nous devons faire en sorte que les couches de texte utilisent l'alpha mat de cette forme. Il suffit ensuite de réactiver la visibilité de la couche de forme. Maintenant, tout semble parfait. Le texte n'est visible que dans la couche de forme. La dernière chose à faire est chronométrer les micro-animations que nous avons créées dans la pré-composition de l' avatar pour qu' elles correspondent à l'animation de la composition principale Commençons l'animation d' introduction pour les couches de cette composition à partir de l'image 15. À ce stade, vous pouvez l' organiser comme bon vous semble. Dans mon cas, je veux que les couches de texte entrent d'abord dans la scène Je vais donc commencer par le nom. Ensuite, après deux cadres, la ligne de texte suivante. Ensuite, je ferai apparaître la photo de l'avatar suivie de l'icône. Enfin, je vais terminer avec l'étoile, le chiffre et le bouton. Maintenant, examinons l'animation et voyons à quoi tout cela ressemble dans la composition principale. Je pense que l'animation intérieure devrait commencer un peu plus tôt. Je vais essayer de le déplacer vers le cadre 5. Oui, ça a l'air bien mieux. C'est ainsi que nous avons terminé cette leçon. J'espère que cela vous a donné un peu plus de confiance pour commencer à automatiser vos propres animations J'espère également que cette leçon vous a aidé à comprendre qu'il est parfois préférable de ne pas créer un seul contrôleur pour toutes les couches, comme nous l'avons fait dans la première leçon. Dans ce cas, il était plus judicieux de contrôler chaque couche séparément et d' ajuster les valeurs une par une. Cela dit, nous sommes maintenant prêts à passer à la leçon suivante où nous allons créer un effet de survol très intéressant pour les icônes Ça va être génial, alors on se voit là-bas. 4. Configuration avancée de l'animation hover: Reviens. Dans cette leçon, je veux vous apprendre à créer une configuration avancée d' animation avec survol Mais avant de commencer, laissez-moi vous expliquer pourquoi je précompose mes icônes au lieu d'utiliser les couches d'origine La raison principale est que chaque icône a une taille différente. Si je les animais tels quels, la scène serait beaucoup plus difficile à contrôler. Lorsque vous travaillez sur de telles scènes, je suggère de faire de même. Il sera également très facile d' échanger des icônes à l'avenir si vous en avez besoin. En ce qui concerne la taille avant la composition, je suggère de travailler avec de petites dimensions, environ 300 pixels largeur et en hauteur devraient suffire. utilisez des dimensions plus grandes que si vous savez que les icônes apparaîtront de près dans votre œil. Quoi qu'il en soit, comme vous pouvez le voir, la taille de cette couche d'icônes est très grande et je l'ai réduite à 14 Même chose pour l'icône Illustrator. Ils sont arrivés dans la même taille d'origine. Mais l'icône Photoshop avait une taille originale différente, alors je l'ai redimensionnée à 46 Et pour l'icône Figma, j'ai utilisé une échelle de 33. Mon objectif était de les faire apparaître tous de la même taille visuellement, c'est pourquoi je les précompose et j' utilise les mêmes dimensions pour toutes les précompositions Très bien, alors j'espère que tu as compris l'idée. Commençons maintenant à créer la configuration du survol. Imaginons que nous ne sachions pas quoi faire en premier. Nous allons donc demander à Chat GPT de nous aider. C'est dans cet esprit que j' ai une question pour vous. Qu'est-ce qui nous aidera à expliquer clairement la situation à Chat GPT ? Nous devons prendre une capture d'écran de notre scène. Alors faisons-le très rapidement. Assurez-vous que votre capture d'écran inclut le panneau d'aperçu et le panneau des calques. Voici un petit conseil en prime. Pour améliorer la clarté de votre message au format GPT, vous pouvez dessiner un croquis rapide ou une flèche sur votre capture d'écran Dans ce cas, je dessine une flèche entre le curseur et l' icône. C'est bon. Alors maintenant, copions cette capture d'écran et revenons au chat GPT Créons une nouvelle conversation et collons la capture d'écran dedans. Et comme toujours, commençons par indiquer le logiciel que nous utilisons. Essayons ensuite d'expliquer l'animation que nous essayons de créer. Ne vous inquiétez pas de faire des fautes de grammaire. Essayez simplement d'être aussi précis que possible. Cette fois, je vais déjà dire à GPT que je souhaite contrôler les différents paramètres de l'effet de survol, car je souhaiterai peut-être les modifier Je mentionnerai les paramètres que je connais déjà, et je demanderai également à GPT s'il me manque d'autres paramètres qui pourraient améliorer la configuration Et comme toujours, finissons en demandant si vous comprenez ce que je veux dire ? Nous avons donc ici toutes les étapes dont nous avons besoin, et je peux voir que GPT a ajouté un paramètre vraiment intéressant auquel je n'avais même pas pensé, qui est de pouvoir contrôler la taille par défaut des icônes Génial. Continuons donc et voyons ce que nous avons d'autre. J'ai remarqué à la troisième étape que GPT explique comment rendre le mouvement plus fluide Cela m'a donné l'idée de demander si nous pouvions ajouter ce paramètre au contrôleur afin de pouvoir l'ajuster sans avoir à ouvrir le manuel des expressions. Et c'est ici. GPT nous a également donné l'expression de ce paramètre Alors maintenant, suivons les étapes depuis le début. Revenons d'abord à notre projet et créons une couche de contrôleur à l'aide d'un objet nul. Assurez-vous de nommer cette couche exactement comme GPT l'a suggéré, car si les noms ne correspondent pas, l'expression ne fonctionnera pas C'est bon. Ensuite, créons les trois curseurs et étiquetons-les exactement comme il l'a recommandé Nous allons maintenant ajuster les valeurs par défaut pour chaque contrôleur, comme GPT nous l'a demandé Et avant d'appliquer les expressions, ajoutons également le contrôleur final pour mouvement fluide et définissons la valeur par défaut comme suggéré. Copions maintenant l'expression d' échelle mise à jour créée par GPT et collons-la sur la propriété d'échelle de la première icône Permettez-moi de redimensionner un peu ce panneau. Si vous ne parvenez pas à ouvrir le champ d'expression, ne vous inquiétez pas. Il suffit d'annuler l' expression en cours et de cliquer à nouveau sur le chronomètre en maintenant la touche Alt enfoncée . C'est bon. Après avoir collé l' expression, une erreur s'affiche Je clique donc sur l'expression pour afficher le message d'erreur, puis j'utilise le raccourci pour ouvrir l'outil de capture d'écran et en prendre un instantané Assurez-vous que votre capture d'écran inclut le message d'erreur complet. C'est vraiment important. Maintenant, collez cette capture d'écran dans le chat GPT et laissez-le régler le problème Ici, nous pouvons voir l'explication. On dirait que le problème vient d'un nom que j'ai utilisé. J'ai peut-être mal saisi quelque chose, mais même si vous ne voyez pas d'erreur, je vous suggère tout de même de supprimer le nom et de le saisir à nouveau manuellement Comme je l'ai expliqué dans la première leçon, copier des noms depuis l'extérieur provoque parfois des bogues étranges. Et nous y voilà. L'erreur a disparu et l'expression fonctionne parfaitement. Génial. Nous pouvons maintenant commencer à jouer avec les paramètres pour voir comment ils affectent le mouvement et l' aspect général de la scène. Maintenant, avant d'appliquer cette expression à toutes les autres précompositions, essayons d'améliorer l'effet de survol en faisant légèrement bouger l'icône vers le haut lorsque le curseur Revenons au GPT et disons que nous voulons que l' icône ou la précomposition se déplace facilement vers le haut lorsque vous le Génial GPT suggère d'ajouter un autre contrôleur afin que nous puissions ajuster ce paramètre quand nous le voulons. Faisons-le très rapidement. Maintenant, appliquez l'expression à la propriété position, comme GPT nous l'indique Allons y jeter un œil. Essayez de modifier la valeur sur le nouveau curseur pour voir ce qui vous convient le mieux Une fois que nous sommes satisfaits de son apparence, nous pouvons copier les expressions de cette couche et les coller dans le reste des précompositions d'icônes Tout a l'air super, et c'est le meilleur. Nous contrôlons maintenant toutes les icônes à partir d'une seule manette. Vous pouvez modifier toutes les valeurs des paramètres à tout moment. C'est cool, non ? Vous pouvez même inverser l'effet. Ainsi, au lieu que les icônes s' agrandissent au survol, elles rétrécissent. Maintenant, nous pouvons même inverser l'effet, faire en sorte que les icônes rétrécissent lorsqu'on les survole au lieu de les agrandir. C'est bon. Je vais tout remettre à la normale. Commençons maintenant à animer la couche de curseur. À ce stade, comme toujours, vous pouvez créer n'importe quel type d'animation. Vous n'êtes pas obligé de copier exactement ce que je fais. Mon objectif principal dans ce cours est de vous aider à apprendre à créer des configurations d'expression à l'aide de l'IA, non de vous concentrer sur la conception d'animations détaillées J'espère que vous commencez à réaliser à quel point il est facile de générer des systèmes d'expression complexes qui prenaient auparavant beaucoup de temps à apprendre et à créer manuellement grâce à l'IA. je OK, trouve que mon animation est plutôt bonne, et c'est ainsi que nous avons terminé cette leçon Vous pouvez continuer, ouvrir la leçon suivante et fermer celle-ci. Dans la leçon suivante, nous allons apprendre comment créer un effet de survol intéressant pour les boutons plutôt que pour les icônes Nous parlerons également de ce qu' il faut faire dans les situations où IA refuse de nous donner le résultat que nous voulons, quels que soient nos efforts. Ça va être génial, alors je t'y verrai. Mais avant de passer à la suivante, je recommande de faire une pause de dix minutes. 5. Automatisation du changement de couleur par survolement: Bonjour, et bon retour. Dans cette leçon, nous allons créer un effet de changement de couleur intéressant au survol, et nous verrons également ce qu'il faut faire lorsque nous rencontrons des problèmes gênants avec le chapeau GPT Comme toujours, permettez-moi de vous montrer rapidement comment j'ai construit cette scène simple. Ce que j'ai ici, ce ne sont que quelques précompositions représentant des boutons. À l'intérieur de chaque précomposition, il y a une couche de texte et un rectangle arrondi Il est important de savoir que toutes les méthodes que nous utilisons dans ce cours fonctionnent aussi bien avec les couches ordinaires. Vous n'êtes pas obligé d'utiliser des précompositions si vous ne le souhaitez pas. D'accord. Commençons maintenant à créer l'expression. Je veux que les boutons changent de couleur lorsque je les survole avec le curseur Tout d'abord, prenons une capture d'écran rapide de la scène et des couches. Maintenant, copions la capture d'écran, passons au chat GPT, démarrons une nouvelle conversation et collons-la dedans Ensuite, nous allons décrire notre idée de manière très simple. Comme nous ne savons pas comment changer de couleur, nous demanderons simplement à GPT quels effets nous devons utiliser et comment le faire Et comme toujours, nous finirons en demandant : Comprenez-vous ce que je veux dire ? C'est bon. Nous avons donc ici le processus complet, et nous pouvons également voir les effets suggérés par le GPT Je pense que l'effet de teinte est meilleur dans ce cas, puisqu'il provient de la famille d'effets de correction des couleurs . Puis j'ai remarqué que GPT avait créé une expression pour l'effet de remplissage. Mais pour l'instant, ignorons cela et revenons au projet pour comprendre ce que fait réellement l'effet de teinte, puisque c'est celui que je veux utiliser. Recherchez l'effet dans le panneau des effets et des préréglages et ajoutez-le à l'une des précompositions des boutons Changeons maintenant les couleurs à l'intérieur de l'effet de teinte pour obtenir l'apparence souhaitée lorsque le bouton est survolé. Une fois que c'est fait, vérifiez le montant de la propriété de teinte. Cela permet de contrôler l'intensité avec laquelle les nouvelles couleurs sont appliquées. Mais supposons que nous n'ayons pas remarqué GPT avait créé l'expression pour l'effet de remplissage, et que nous l'ayons quand même copiée et collée dans la propriété amount to tint Comme vous l'avez probablement deviné, nous recevrons un message d'erreur Maintenant, disons que je ne comprends pas l'erreur, mais je veux quand même la corriger. Tout d'abord, nous pouvons annuler l'expression. Dans de telles situations, la meilleure chose à faire est de prendre une capture d'écran de votre configuration actuelle et de vous assurer que GPT peut clairement voir l' effet que vous utilisez Collez ensuite la capture d'écran dans le chat et dites à GPT que j'utilise l'effet de teinte Pouvez-vous me dire où exactement je dois coller l'expression ? Et tout de suite, le GPT nous permet de franchir de nouvelles étapes dans une expression fonctionnelle Copions-le et testons-le dans le projet. Sympa. Cela fonctionne. Mais honnêtement, je n'aime pas le fait que l'effet ne se déclenche que lorsque le curseur est au centre du bouton. Et je ne suis pas fan de l'étrange mélange de tons moyens qui se produit lorsque le curseur se rapproche du Disons que je ne comprends pas pourquoi cela se produit. Je veux juste que le changement de couleur se produise instantanément lorsque le curseur touche le bouton. Dans ce cas, retournez simplement au GPT, dites-lui que vous n'aimez pas le comportement actuel et décrivez ce que vous voulez à la place comme si vous parliez à un assistant R Après avoir expliqué, GPT créera une nouvelle expression pour nous. Copions-le et collez-le dans le panneau d'expression. Génial. Ça a l'air bien mieux maintenant. Essayons de réduire la précomposition pour vérifier si quelque chose se casse ou doit être ajusté dans l'expression Tout semble toujours aussi beau, donc nous sommes prêts à passer à autre chose. Nous avons maintenant appliqué des expressions aux effets et aux propriétés de base des couches. Mais allons encore plus loin et essayons d' utiliser des expressions sur les styles de couche. Par exemple, cliquez avec le bouton droit sur la précomposition, accédez à Styles de couche et ajoutez un effet de trait Ouvrez les paramètres du trait, réglez la taille sur dix et changez la couleur en blanc. Maintenant, je veux que ce trait apparaisse uniquement lorsque le bouton est survolé. De cette façon, nous créerons un effet de survol plus unique et plus dynamique Prenez une capture d'écran de cette configuration mise à jour et revenez à Chat GPT Dans le chat, décrivez brièvement la situation et expliquez ce que vous voulez qu'il se passe. Et voilà. Le GPT nous indique d'appliquer l'expression à la propriété d'opacité de l'effet de trait Faisons-le et voyons ce qui se passe. Génial. Ça a l'air vraiment cool. Nous pouvons maintenant copier ce style de couche depuis la première précomposition et le coller sur le reste des précompositions de boutons Après avoir rapidement confirmé que cela fonctionne, faisons de même pour l'effet de teinte. Copiez-le et collez-le dans les autres. Ça a l'air génial. Tout fonctionne parfaitement. Maintenant, créons une animation rapide pour que le curseur puisse s' entraîner un peu. Comme d'habitude, vous pouvez l' animer comme bon vous semble. Mais n'y consacrez pas trop de temps. Nous voulons aller de l'avant et continuer à explorer ce que l'IA peut nous aider à développer. Par exemple, je veux que le curseur lui-même change de couleur lorsqu'il passe au-dessus d'un bouton. Pourquoi ? Parce que dans certaines scènes comme celle-ci, le contraste entre la couleur du survol et le curseur n'est pas assez fort Le curseur le devient, mais finissons d'abord l'animation, puis nous essaierons d'utiliser l' IA pour nous aider à générer l'idée et la solution pour rendre le curseur plus visible au survol C'est bon. Donc, une fois que nous sommes satisfaits de l'animation, commençons à travailler sur l'automatisation du changement de couleur du curseur . Prenons une capture d'écran montrant le curseur survolant le bouton et envoyons-la à GPT afin qu'il puisse comprendre visuellement notre problème Une fois collé, nous expliquerons ce que nous voulons faire et comment nous espérons résoudre le problème O. GPT suggère d'utiliser l'effet de remplissage sur le curseur, puis utiliser l'expression sur la propriété de couleur de cet effet Alors suivons les étapes. abord, nous devons ajouter l'effet de remplissage sur l'une des précompositions des boutons Ensuite, changeons de couleur. Disons au jaune. Nous pouvons également réduire un peu la forme du curseur, définir la taille à 65. Et maintenant, collons l'expression que GPT nous a donnée dans la propriété qu'il a suggérée Je constate que le curseur ne change pas du tout de couleur, même si nous essayons de le changer manuellement. Mais rien ne se passe. La couleur ne change pas. Nous avons collé l'expression dans la bonne propriété, alors disons maintenant à GPT ce qui s' Nous demanderons s' il est préférable de contrôler l'opacité de l' effet à la place Cela a fonctionné lorsque nous avons utilisé l'opacité pour le style de couche de traits plus tôt Très bien, copions donc la nouvelle expression de GPT et revenons au projet Annulez l'expression sur la propriété de couleur et appliquez-la à la place à l' opacité de l'effet de remplissage Pourtant, rien ne se passe. Maintenant, le curseur est invisible pour une raison quelconque, même si nous n'avons aucune erreur d'expression. Continuons d'essayer. Prenez une capture d'écran de la situation et parlez-en à GPT. Nous avons appliqué l'expression, mais maintenant nous ne voyons plus du tout le curseur. Un GPT répond par une explication plus longue et une nouvelle version de l'expression Essayons-le. Copiez l'expression, et passons rapidement en revue le reste de l'explication pour voir si nous pourrions avoir besoin de quelque chose d'important. Disons que nous ne comprenons pas vraiment ce qu'il dit. Revenons donc au projet et collons la nouvelle expression. OK, je ne vois toujours pas le curseur. Changer les valeurs ne sert à rien. Honnêtement, après avoir essayé plus de deux fois, je commence à penser que cette approche ne fonctionnera peut-être tout simplement pas. Quand je regarde l'animation, rien ne se passe. Il est donc clair qu'il y a quelque chose qui ne va pas ici. Nous pouvons annuler l' expression, et de plus, dans de telles situations, je préfère simplement essayer une approche complètement différente. Supprimons donc l'effet de remplissage du curseur et essayons-le plutôt avec l'effet de teinte, car cela fonctionnait mieux auparavant. Ajoutons donc l' effet de teinte au curseur, puis changeons la couleur en jaune Maintenant, prenons une nouvelle capture d'écran et revenons au chat, et GPT saura que l'effet de remplissage ne fonctionnait pas, et maintenant nous voulons essayer la teinte Laisse-le faire son truc. Copiez ensuite la nouvelle expression. Cela peut être un peu complexe et essayez-le dans le projet. Ça ne marche toujours pas. Aucune erreur, mais la couleur ne change pas. Essayons encore une fois et montrons-lui la situation actuelle. Prenez une nouvelle capture d'écran et assurez-vous d' inclure l'expression dans l'image. Après avoir collé la capture d'écran, faites-lui savoir que cette expression ne fonctionne pas En attendant, pendant qu'il génère la réponse, revenons au projet et annulons l'expression. Nous pouvons également essayer de changer la deuxième couleur de l'effet de teinte en jaune. Peut-être que ça va aider. C'est bon. La nouvelle expression est prête. Je vais rapidement parcourir ses explications et suggestions pour voir s'il existe un indice important pour cette configuration. Je n'ai rien trouvé de critique, alors copions simplement la nouvelle expression et voyons ce qui se passe. Ça ne marche toujours pas. Maintenant, avant de commencer une nouvelle conversation avec le chat, je voudrais essayer une dernière chose. Revenons au chat et répétons-lui que cela ne fonctionne pas. Mais cette fois, je vais également lui donner quelques informations techniques et lui faire savoir que l'opacité reste nulle tout le temps Parfois, l'ajout d'un petit détail technique de ce type aide GPT à mieux comprendre ce qui ne va pas. Copions donc simplement la nouvelle expression et voyons ce qui se passe. Génial. Cette fois-ci, cela fonctionne parfaitement. Je voulais vous montrer l'ensemble de ce processus afin que vous compreniez que vous devez parfois changer d'approche, essayer un effet différent ou ajouter quelques détails techniques pour que l' IA puisse mieux vous aider. N'oubliez pas cela lorsque vous traitez avec des configurations délicates comme celle-ci. Regardons l'animation que nous venons de créer. Génial. Ça a l'air sympa. Maintenant, avant de conclure, je voudrais vous donner un petit conseil. Plus tôt, nous avons ajouté un effet de trait à toutes les précompositions de boutons Supposons maintenant que vous souhaitiez modifier la couleur du trait, mais que vous ne vouliez pas le faire manuellement sur chacun d'entre eux, surtout si vous devez changer à nouveau la couleur ultérieurement. Voici un truc. Recherchez la propriété de couleur à l'aide de la barre de recherche du panneau de chronologie. Nous pouvons maintenant voir la propriété de couleur du trait pour toutes les précompositions Utilisez ensuite le fouet de la propriété elle-même, et non le fouet parental de la couche, pour lier toutes les propriétés de couleur du trait à la première Procédez ainsi pour chacune des précompositions de boutons. Vous pouvez désormais contrôler la couleur du trait tous les boutons à partir d'un seul endroit. Cela fonctionne pour toutes les propriétés d' effet. Vous pouvez utiliser cette astuce si vous ne voulez pas ou n' avez pas besoin de configurer des contrôleurs complexes comme nous l'avons fait dans la première leçon. Une autre méthode intelligente pour contrôler les propriétés d'un effet à partir d'une couche consiste à le copier à l'aide des liens de propriétés. Ainsi, une fois que vous l'avez collé sur le reste des couches de la scène, vous pouvez contrôler toutes les propriétés de cet effet à partir d'une seule couche, et vous n'avez pas besoin de créer les propriétés une par une. C'est ainsi que nous avons terminé cette leçon. Fermons toutes les couches et regardons l'animation. Notez que même si la scène ne comporte pas beaucoup de couches ou d' effets, les temps de rendu de l'aperçu sont très lents. Cela se produit parce que nous avons des expressions complexes à l'intérieur des couches. Vous dire cela parce que je veux que vous sachiez que l'utilisation d' trop grand nombre d'expressions dans votre projet peut vraiment le ralentir. Bien, l'animation est superbe, et nous pouvons passer à la leçon suivante Ouvrons-le donc et fermons l'actuel. Dans la prochaine section, nous allons apprendre à créer une automatisation des clics avec le curseur très utile . Ça va être une super idée. Alors, on se voit là-bas. 6. Automatiser les clics du curseur avec les marqueurs: Reviens. Dans cette leçon, nous allons apprendre à créer une automatisation très utile des clics sur le curseur , qui vise à faire réagir les couches à l' animation des clics du curseur. Pour commencer, créons d'abord animation du curseur cliqué. Ce que je veux dire par là, c'est que je veux activer le clic du curseur sans créer d'images-clés pour chaque clic Chaque fois que vous avez besoin d'une animation de clic pour un curseur, il est préférable de placer le curseur dans une précomposition séparée Commençons donc par créer le curseur. Et cette fois, rendons-le beau. Sélectionnez l'outil ellipse et réglez le remplissage pour utiliser un dégradé radial Nous traiterons des couleurs dans une seconde, alors ne vous inquiétez pas si elles ne ressemblent pas exactement aux miennes. Ensuite, désactivez le trait. Conseil rapide. Pour changer rapidement de style de remplissage, il vous suffit de passer le curseur sur la zone de remplissage, de maintenir la touche Alt ou Option enfoncée sur Mac, puis de cliquer Cela fera défiler les types de remplissage. Il en va de même pour le Stroke Box. Maintenant, maintenez la touche Shift enfoncée et tracez un petit cercle dans la scène. Réglons la taille sur 100 pour que nous soyons tous sur la même longueur d'onde. Ensuite, alignez-le au centre et commencez à modifier le dégradé. D'après mes précédents tests de dégradés, j'ai enregistré un tas de couleurs. Je vais les faire glisser pour les supprimer. Maintenant, choisissez une belle couleur pour le premier arrêt du dégradé. Assurez-vous que l'opacité est réglée sur 100. Procédez de même pour la deuxième couleur. Je vais choisir un rose foncé, et encore une fois, m'assurer que l'opacité est de 100 Si vous souhaitez ajouter d' autres paliers de couleur, il suffit de cliquer le long de la ligne. Vous pouvez ensuite choisir n'importe quelle couleur pour le nouveau point. Si vous changez d' avis, faites glisser le de couleur hors de la ligne pour le supprimer. Maintenant, pour ajuster l'apparence du dégradé, passez à l'outil de sélection pour afficher les poignées du dégradé. Zoomez et modifiez-les pour obtenir le look que vous souhaitez. Si vous cliquez accidentellement ailleurs et que les poignées disparaissent, il vous suffit de sélectionner à nouveau la couche en forme d' ellipse ou ouvrir la propriété de remplissage en dégradé depuis l'intérieur de la Si cela ne fonctionne toujours pas , vous pouvez ajuster les valeurs du point de départ ou de fin manuellement. Cela fera réapparaître les poignées dans le visualiseur. C'est bon. Maintenant, ajoutons un petit surlignage à la sphère pour la rendre encore plus belle. Cliquez avec le bouton droit sur le calque de forme, accédez à Styles de calque et choisissez Inner Shadow. Ouvrez les paramètres de l'effet, changez la couleur en quelque chose de brillant. Ensuite, passez le mode de fusion à l'écran afin qu'il se fond dans la couleur de base Maintenant, vous verrez le surlignage, modifiez les valeurs pour obtenir un aspect doux et éclatant Une fois que vous serez satisfait du design du curseur, nous passerons à la création de l'animation de clic proprement dite. Comme je l'ai mentionné plus tôt, pour automatiser les clics ultérieurement, nous devons précomposer le curseur Appelez le nouveau curseur de précomposition, assurez-vous que les deux cases sont cochées et cliquez sur OK Entrez maintenant dans la précomposition du curseur. Ici, vous pouvez créer l'animation de clic de votre choix. Nous allons commencer par quelque chose de simple, puis ajouter une micro-animation pour améliorer l'effet. Créons donc d'abord une animation à échelle simple. Nous allons le faire dix images. Je vais commencer à une échelle de 100 %, puis le réduire à 70 % et le ramener à 100. Maintenant, je vais facilement assouplir les images-clés et ajuster le mouvement dans l'éditeur de graphiques pour le rendre plus naturel Ça a l'air bien. Mais je pense que nous pouvons faire en sorte que le clic soit encore plus fort. Revenons donc en arrière et réduisons l' image-clé du milieu à 60 au lieu de 70 Oui, c'est beaucoup mieux maintenant. Maintenant, ajoutons une petite micro-animation pour rendre le clic encore plus cool. Un peu comme un effet d'entraînement. Je vais donc sélectionner à nouveau l'outil Ellipse, mais cette fois, je vais désactiver le remplissage et activer le trait Je vais le colorer en blanc et régler la largeur du trait à quatre pour le moment. Je vais maintenant créer un cercle légèrement plus grand. Faisons-le 400, et je vais l'aligner au centre. Pour l'animation, je vais aller à la fin de l'animation par clic et définir une image-clé pour l'échelle Ensuite, je vais revenir au début et mettre l'échelle à zéro. Maintenant, je vais également animer la largeur du trait. À la fin de l'animation, je la mettrai à zéro. Et au début, fixons-le à 20. Essayons 60. Hmm. Essayons plutôt 40. Je vais facilement atténuer les images-clés et ajuster la vélocité, afin que le système démarre rapidement et s'atténue. Maintenant, je vais déplacer cette forme d'ondulation derrière la sphère principale. Donnons-en un aperçu. À mon avis, c'est trop rapide, je vais donc sélectionner toutes les images clés. Et tout en maintenant la touche Alt ou Option enfoncée sur Mac, je vais faire glisser l'une des dernières images clés vers image 15 pour l'étirer. Rejouons-le encore une fois. Oui, ça a l'air super. Maintenant que l'animation clics est terminée, nettoyons les choses. Nous ne voulons pas d'une précomposition géante sans raison. Redimensionnons donc la précomposition pour l'adapter à l'animation. Réglez la largeur et la hauteur sur 500 pixels. Génial Revenons à la composition principale et voyons comment activer cette animation de clic sans dupliquer les images-clés chaque fois que nous voulons que le Demandons donc à notre nouvel ami Chachi PT de nous aider à automatiser le clic abord, prenez une capture d'écran où nous pouvons clairement voir le panneau de prévisualisation et le panneau des couches. Maintenant, lancez une nouvelle conversation, collez la capture d'écran et expliquez la situation. Il est important de dire à GPT que nous avons déjà une animation de clic prête dans la pré-composition du curseur Comme cette tâche est assez simple et que je l'ai clairement expliquée, je ne demanderai pas : « Comprenez-vous ? Je vais juste demander comment faire. Maintenant, je vois que GPT m'a donné deux options qui impliquent toutes deux la fonction de reprogrammation du temps. Je comprends donc que quelle que soit la méthode que je choisis, je devrai activer le remappage temporel sur la composition de mon curseur J'ai décidé de suivre la deuxième suggestion de GPT, qui utilise une expression qui active l'animation à l' aide de marqueurs Voyons si cela fonctionne. Activez d'abord le remappage temporel sur la couche du curseur. Rien ne se passe encore. C'est très bien Revenons au chat et copions l'expression que GPT nous a donnée pour la propriété time remap Revenez maintenant au projet. Cliquez tout en maintenant la touche Alt sur le chronomètre à côté Time Remap et collez l'expression Rien ne se passe encore. C'est très bien Maintenant, testons-le. Passez au second et ajoutez un marqueur à la couche de curseur. Vérifiez le raccourci pour ajouter un marqueur sur votre appareil en cas de doute. Boom, ça marche parfaitement. Maintenant, avancez d'une seconde et ajoutez un autre marqueur. Sympa. Prévisualisons-le à nouveau. Génial Supprimons maintenant les marqueurs de test et créons une simple animation de survol pour le curseur lorsqu'il se déplace sur chaque icône Pour le moment, le mouvement du curseur est linéaire, il ne s'arrête donc pas lorsqu'il atteint les icônes. Au lieu de créer manuellement des images-clés de pause, simplifions-nous simplement toutes les images-clés de position Cela ralentira la vitesse jusqu' à zéro avant et après chacune d'elles, ce qui donnera un effet de pause. Si vous souhaitez affiner l'assouplissement, vous pouvez le faire manuellement dans l'éditeur de graphes ou simplement utiliser le raccourci Control Shift K ou Command Shift K sur Mac pour ouvrir le panneau de vélocité des images-clés et ajuster l'influence Nous avons maintenant un beau mouvement fluide avec des pauses entre les icônes. Allons-y et ajoutons des marqueurs à chaque point où le curseur s'arrête. De cette façon, l' animation de clic se déclenchera exactement où nous le voulons simplement en utilisant ces marqueurs. Prévisualisons le tout. C'est cool, non ? Nous déclenchons l'animation du clic simplement en plaçant des marqueurs. Il n'est pas nécessaire de copier les images-clés ou les couches ondulées manuellement. Imaginez le temps que cela prendrait si nous devions dupliquer toutes les images-clés et les couches à chaque clic Maintenant, allons encore plus loin dans cette automatisation et faisons en sorte que les icônes réagissent à l'animation du clic sans les animer manuellement. Je vais passer au point où le curseur passe au-dessus de l' une des icônes et prendre une capture d'écran de la scène, en m' assurant qu'elle inclut les marqueurs et les images-clés que nous Ensuite, je vais coller cette capture d'écran dans le chat GPT et expliquer ce que je veux faire Cette fois, comme je ne suis pas sûr à 100 % clairement expliqué, je vais demander à GPT Tu comprends ce que je veux dire ? J'adore poser cette question, car GPT répond souvent en utilisant les bons termes professionnels pour ce que j'essaie de construire afin que je puisse apprendre à mieux communiquer ces idées. Très bien, GPT a compris et m'a indiqué les étapes. Depuis que j'ai ajouté la capture d'écran, il sait déjà ce qu'il y a dans ma scène. Il ne me reste plus qu'à suivre la dernière étape. Cette étape consiste à appliquer l'expression à la propriété d'échelle des précompositions d'icônes Essayons-le sur une icône et voyons ce qui se passe. Parfait. Cela fonctionne très bien. Mais je ne suis pas fan de la raideur de l' animation à l'échelle. Revenons donc au chat et demandons si cela peut être plus fluide. Comme vous pouvez le constater, GPT avait déjà anticipé cela et m'a demandé si je voulais que le mouvement soit plus fluide Je vais donc répondre oui et attendre la mise à jour de l'expression Nous allons tester la nouvelle version. Génial Ça a l'air bien mieux. Maintenant que nous sommes satisfaits des résultats, nous pouvons appliquer cette expression aux autres icônes. Mais avant cela, j'ai une petite question pour vous. Quelle est la bonne méthode pour copier une expression dans After Effects ? Nous devons utiliser uniquement une expression de copie, pas seulement une copie normale. Ça a l'air génial. C'est ainsi que nous avons terminé cette leçon. J'espère que vous avez appris beaucoup de techniques nouvelles et surtout utiles au cours de cette session. Merci d'avoir regardé, je vous verrai dans le prochain. 7. Outro: Bonjour, c'est encore moi. Je voulais simplement vous remercier de m'avoir rejoint dans ce cours et vous féliciter de l'avoir terminé. J'espère que vous découvrirez de nombreuses nouvelles façons d' utiliser l'IA pour accélérer votre flux de travail d'animation, et que vous vous sentez désormais plus à l' aise avec les expressions. Si vous appréciez le cours, je vous serais reconnaissant de laisser un bref commentaire. Cela m'aide beaucoup. Merci encore de votre attention et je vous verrai dans le prochain.