Animation de présentation SaaS : de la conception de l'interface utilisateur au mouvement dans After Effects

1. Introduction: Vous êtes impatient de regarder vidéos explicatives SAS fluides et vous vous demandez comment ils le font ? Bonjour, je m'appelle Valérie, et après avoir créé plusieurs cours couronnés de succès, je suis très heureuse de vous annoncer que mon cours le plus avancé à ce jour est enfin prêt Et cette fois, vous apprendrez à créer une vidéo explicative SAS haut de gamme à partir de zéro Après avoir visionné plus de 200 tutoriels SAS haut de gamme, j'ai relevé le défi de créer le cours le plus complet sur la création vidéos explicatives SAS, qu'il s'agisse de comprendre le script, de créer des storyboards, de préparer la synchronisation de fichiers Figma avec des voix off ou d'animer des démos dynamiques et storyboards, de préparer la synchronisation de fichiers Figma avec des voix off j'ai relevé le défi de créer le cours le plus complet sur la création de vidéos explicatives SAS, qu'il s'agisse de comprendre le script, de créer des storyboards, de préparer la synchronisation de fichiers Figma avec des voix off ou d'animer des démos dynamiques et épurées. Il ne s'agit pas d'effets flashy, mais de véritables techniques et flux de travail utilisés par des professionnels Vous allez créer une 62e vidéo explicative SAS complète qui aura un aspect professionnel, fluide et reflète véritablement les normes du secteur ne s'agit pas d'un cours pour débutants, et il comprend 24 leçons approfondies. Ne t'inquiète pas. Vous serez totalement engagé dès la première seconde. Les explications détaillées, les exemples concrets, les conseils personnalisés, les questions posées en milieu de leçon et, bien sûr, les animations elles-mêmes vous inspireront et vous permettront de rester concentré tout au long de l'expérience. À la fin du cours, vous aurez la confiance nécessaire pour entreprendre n'importe quel projet, et mieux encore, vous repartirez avec un projet final de haute qualité que vous pourrez fièrement montrer en exemple à vos futurs clients Donc, si vous êtes prêt à vos compétences en motion design, inscrivez-vous au cours dès aujourd'hui et commençons à apprendre à créer une vidéo explicative SAS comme un pro 2. Bienvenue du cours et configuration des fichiers de projet: Salut, et bienvenue au cours. Dans cette vidéo, je veux vous expliquer quelques remarques importantes avant de vous lancer dans les leçons. Tout d'abord, n'oubliez pas le dossier principal du cours où vous trouverez toutes les ressources que nous utiliserons dans les leçons. Une autre remarque très importante à mentionner est que de la leçon 2 à la leçon 6, vous n'êtes pas obligé de suivre. Ces leçons visent davantage à expliquer certaines étapes initiales avant l'animation, principalement à préparer tous les fichiers de conception avant la phase d'animation. Dans ces leçons, je vais vous montrer comment transférer les dessins de Figma vers Illustrator et les préparer pour l'animation Donc, si vous décidez de le faire avec moi, veuillez enregistrer vos fichiers Illustrator dans le dossier AI. Lorsque nous commençons à animer le projet, j'insiste fortement pour que vous utilisiez mes fichiers préparés, que vous pouvez trouver dans ce dossier Donc, que vous ayez enregistré vos propres fichiers ou non, dans tous les cas, nous utiliserons tous mes fichiers dans les écrans du dossier AE. Lorsque nous commencerons à animer, veuillez enregistrer votre fichier de projet After Effects dans le dossier AE, que vous trouverez dans le dossier principal du cours que vous avez téléchargé auprès de moi Une fois le projet terminé et le processus de rendu lancé, vous enregistrerez vos fichiers dans le dossier final, que vous trouverez également dans le dossier principal du cours. Et la dernière chose que je veux mentionner, c'est que tous les liens vers les éléments que je mentionnerai pendant le cours se trouvent dans le fichier PDF intitulé inks. Cela étant dit, commençons. 3. Configuration Figma et importation du design: Là-bas. Commençons donc par créer un nouveau compte sur Figma Ou si vous avez déjà un compte, il vous suffit de vous connecter. Si vous n'en avez pas, vous pouvez le créer assez facilement en vous connectant avec votre compte Gmail. Maintenant, vous verrez peut-être des choses différentes de celles que j'ai ici, et c'est parce que j'ai déjà importé quelques projets pour vous montrer quelque chose en une minute. Pour l'instant, cliquez sur le nom du profil et téléchargeons le nom du profil et téléchargeons la version de bureau de Figma Il n'y a pas de différence majeure entre les deux. Je préfère simplement utiliser l' application plutôt que le navigateur. Le processus d'installation est assez simple. Donc, une fois que vous avez terminé, ouvrez l'application, et connectons-nous maintenant au compte en utilisant la version du navigateur. C'est bon. Une fois que nous serons prêts, passons en revue les fonctions de base que vous devez connaître en tant que motion designer travaillant avec Figma Tout d'abord, nous pouvons changer de thème. Nous avons trois options principales. Dans les paramètres, il n'y a rien que nous ayons vraiment besoin de savoir. Passons donc à autre chose. Maintenant, je veux que vous vous rendiez dans la section des modèles et des outils. Vous trouverez ici de nombreux actifs utiles à utiliser dans vos projets. Peut-être que dans votre cas, vous voyez des choses différentes des miennes, mais cela n'a pas d'importance. Ce qui compte, c'est que vous puissiez trouver ici des designs que vous pouvez utiliser dans vos projets After Effects. Plus loin dans le cours, nous découvrirons méthode la plus simple et la plus gratuite pour importer ces designs dans After Effects. Vous pouvez filtrer pour ne voir que les ressources gratuites, et si vous avez besoin de conceptions d'interface utilisateur spécifiques, vous pouvez utiliser la barre de recherche pour trouver ce que vous aimez. Je suis sûr que vous serez surpris de découvrir des designs de très haute qualité ici des designs de très haute qualité qui sont totalement gratuits. Assurez-vous simplement de vérifier dans les descriptions quels modèles peuvent être utilisés des fins de marketing et lesquels sont uniquement destinés à l'apprentissage. C'est bon. Je vais tout ramener à la normale, et passons à autre chose. Si vous cliquez ici, vous verrez les projets d'équipe sur lesquels vous travaillez. Bientôt, nous aborderons cette section en profondeur. Dans les brouillons, vous verrez les fichiers que vous avez importés de l'extérieur Dans tous les projets, vous verrez les projets sur lesquels vous travaillez réellement. Et dans la corbeille, vous verrez tous les fichiers supprimés, d'accord ? Maintenant, si nous revenons aux brouillons, nous pouvons voir que si nous voulons créer un nouveau design, nous pouvons cliquer ici et le faire Mais dans notre cas, nous ne créerons pas de design à partir de zéro, bien sûr. En tant que motion designers, nous recevons généralement un lien Figma vers le design de la part du client, ou nous recevons un fichier Figma du Dans notre cas, j'ai trouvé un design Figma super cool d' une plateforme SAS sur le site Web d' Invoto Elements C'est le nom du designer. Alors criez-lui dessus. Il y a beaucoup de panneaux différents ici. Ce qui en fait un parfait exemple de projet SAS complexe sur lequel nous pouvons nous entraîner. Nous l'utiliserons dans le cours comme si un client nous l'avait envoyé. Revenons maintenant à Figma et importons ce design pour pouvoir l'utiliser Pour ce faire, cliquez d'abord sur l'icône plus à côté de la section des brouillons, puis sélectionnez Importer Cliquez maintenant sur Importer depuis un ordinateur et trouvez le FigmaFle dans notre dossier de ressources que vous avez téléchargé pour moi Enfin, accédez au site Web du CRM, dans le dossier Kit, sélectionnez le FigmaFle et cliquez sur Ouvrir Maintenant, attendez quelques secondes jusqu'à ce que le dessin soit téléchargé dans la section des brouillons Génial. L'importation d'un fichier Figma est donc un moyen d'obtenir le design auprès du client, mais il existe un autre moyen via le lien Figma Si un client partage son design Figma avec vous en utilisant votre e-mail, vous verrez une notification ici dans l'icône en forme de cloche Dans tous les cas, que vous cliquiez sur la notification ou que vous souhaitiez la notification ou que importer le fichier Figma, suffit de cliquer dessus pour l' ouvrir. C'est bon. Examinons maintenant ce design FigMa. Ce design est très complexe, mais il est super organisé. explorant, nous allons maintenant voir actions les plus courantes que vous devez effectuer en tant que motion designer lorsque vous vous préparez à utiliser les designs dans After Effects. La première chose que vous devez faire en tant que motion designer est donc assurer que vous ne travaillez pas sur le projet partageable Cela signifie que vous ne voulez pas interférer avec l'équipe de conception de ce projet. Si vous recevez le design via un lien Figma partageable, vous verrez ici d'autres profils susceptibles représenter l'équipe de conception du client travaillant sur ce Dans ce cas, la première chose que je ferais, j'aie obtenu le fichier en utilisant un lien partageable ou simplement le fichier Figma, serait de dupliquer ce projet De cette façon, je garde l'original intact et je n'interférerai pas avec l'équipe de conception qui l'a créé Pour cela, fermons le projet et dupliquons-le dans la section brouillon. Cliquez avec le bouton droit et sélectionnez Dupliquer. Maintenant, pour m'assurer que c'est le design sur lequel je vais travailler, je vais ajouter mon nom au nom du projet. Et pour que je sois le seul à pouvoir m'occuper de ce projet, je vais le déplacer vers les projets de mon équipe personnelle, que je trouverai dans la section Tous les projets. Nous pouvons maintenant accéder à nos projets et ouvrir le design dupliqué Génial Désormais, vous ne verrez aucun autre profil à côté de votre profil dans le coin supérieur droit. Génial. Commençons donc à explorer ce projet Figma Comme vous le savez peut-être, chaque projet Figma peut avoir un aspect différent d'un autre, comme les projets After Effects, qui ont tous une apparence différente en fonction de leur concepteur. Mon objectif ici est que vous vous familiarisiez avec la mise en page de base de Figma, afin que vous puissiez naviguer dans les projets Figma que vous recevez d'un client Et ce design est un excellent exemple car, comme je l'ai déjà dit, il est très complexe et comprend de nombreux éléments de design à l'intérieur. Donc, tout d'abord, dans chaque projet Figma, il y aura une section de pages et une section de couches En gros, en tant que motion designers, nous devrions intéresser au panneau de gauche de Figma Ne vous laissez pas intimider par le bon côté. Il ne s'agit pas d'un domaine que nous devons toucher ou modifier. La section des couches changera en fonction de la page sélectionnée. Pour l'instant, nous avons sélectionné la page de couverture, et nous voyons donc les couches pour cette page spécifique. Si vous travaillez avec un bon client, vous trouverez généralement toutes les directives de conception dans le fichier Figma Essayez donc de les rechercher d' abord lorsque vous ouvrez le fichier. vous ne les avez pas, n' hésitez pas à demander un PDF ou autre fichier contenant les directives de l'entreprise s'ils en ont un. OK, alors maintenant, comme je l'ai dit plus tôt, la section des couches change. Selon le projet que nous sélectionnons dans la section des pages. Comme vous pouvez le constater, chaque fois que je sélectionne un design de page différent, j'obtiens une structure de couches différente. C'est ainsi que fonctionne le FIGMA. Une autre chose que vous devez savoir est que vous pouvez déplacer la ligne séparant les pages dans les sections des couches. Comme vous pouvez le constater, nous avons beaucoup d'autres pages dans ce fichier SIGMA La plupart du temps, vous trouverez ici toutes les ressources utilisées par l'équipe de conception pour créer ses panneaux de plate-forme SAS et toutes les conceptions d'interface utilisateur de la plate-forme. Donc, si vous ne trouvez pas les designs réels de SasuiPanel, demandez au client sous quelle page ils se trouvent, ou recherchez simplement une page faisant référence au Comme dans cet exemple, nous pouvons le voir si nous cliquons sur la page de conception du site Web. Alors cliquons dessus et ajustons le panneau afin que nous puissions voir toutes les couches de cette page. Vous pouvez déplacer la ligne ou simplement cliquer sur le nom de la page pour réduire cette section. Nous pouvons maintenant voir toutes les conceptions de panneaux d'interface utilisateur de la plate-forme SAS du client. Comme je l'ai déjà dit, il s'agit d'un projet très complexe avec de nombreux panneaux d'interface utilisateur, et vous n' aurez pas toujours ce genre de gros projet. Mais c'est une bonne occasion pour nous de nous entraîner sur ce type de projet, afin que vous puissiez être prêt à utiliser n'importe quel fichier Figma plus tard dans votre parcours C'est un projet bien organisé, et si vous ouvrez les couches d'un panneau, vous verrez ses sous-couches qui créent ce panneau spécifique. C'est ainsi qu'un bon fichier de design Figma doit être structuré. Mais vous devez savoir que, quelle que soit la structure du projet, vous pouvez parfois rencontrer de petits problèmes dans la conception. Permettez-moi de revenir à mon tableau de bord et de vous montrer ce que je veux dire. Pour l'instant, ne faites rien. Il suffit de regarder et d'écouter. Je vais passer aux brouillons et saisir un autre kit d'interface utilisateur que j'ai téléchargé sur Internet Cela pourrait facilement être un design que j'ai reçu d'un client. Ici, la structure du design est donc un peu différente. Dans les pages, il existe une version sombre du design d'une plateforme. Mais surtout, si je zoome sur ce panneau, nous pouvons voir qu'il y a une petite erreur ici. Dans ce cas, il me suffit de double-cliquer sur les couches jusqu'à ce que j'arrive à la bonne, comme nous le faisons dans Illustrator. Ensuite, je peux le déplacer, et maintenant je vois qu'il y a deux objets que je peux supprimer par la suite. Je vais remettre cette forme dans sa position initiale. Génial. Maintenant, je voudrais vous montrer un autre exemple de projet de design Figma Ce que je veux que vous voyiez dans celui-ci, c'est que parfois vous pouvez obtenir un design avec différentes tailles de panneaux, comme vous pouvez le voir ici. Et de plus, il existe des situations où vous aurez un design sombre et un design lumineux l'un à côté de l'autre. Je vous montre tout cela afin que vous soyez familiarisé avec les différentes structures du projet Figma C'est bon. Je vais maintenant revenir à notre design, et mettons-nous au travail ensemble. Tout d'abord, je veux que vous vous habituiez à zoomer et à dézoomer et à parcourir le dessin Maintenez la touche Ctrl ou Commande enfoncée sur Mac, puis faites défiler la molette de la souris pour zoomer et vous déplacer. Comme dans les logiciels Adobe, maintenez la barre d'espace enfoncée et faites glisser l'écran. Comme vous pouvez le constater, nous avons beaucoup de modèles de panneaux ici, et nous n'allons pas tous les utiliser, bien sûr. Nous n'utiliserons que ceux qui sont pertinents pour notre projet. Ce que je veux que vous remarquiez, c'est que même dans ce design très organisé, nous pouvons toujours rencontrer quelques petits problèmes de conception. Faites attention à cette zone où l'on voit la flèche. Ici, ça a l'air bien. Mais si nous passons à une autre conception de panneau, nous pouvons clairement voir que cette couche n'est pas au bon endroit dans la pile de couches. Comme cette erreur se répète dans de nombreux panneaux, nous ne la corrigerons pas ici Nous le corrigerons ultérieurement au cours du processus d'importation dans After Effects. Mais avant cela, nous devons savoir exactement quels panneaux du design nous utiliserons. C'est ce que nous allons faire dans la prochaine leçon. Ça va être une bonne idée. Alors, on se voit là-bas. 4. Lire le scénario et planifier le storyboard: Reviens. Dans cette leçon, je veux que vous ne fassiez rien, que regardiez et que vous appreniez. Maintenant, après avoir ouvert l'infigma de conception, nous devons commencer à comprendre quels panneaux utiliser dans nos projets After Effects Et cela devrait être votre prochaine préoccupation lorsque vous travaillez sur une vidéo SAS complexe. La meilleure ressource pour cela sera toujours le script. Il peut s'agir d'un script que nous recevons d'un client ou d'un script que nous créons nous-mêmes. Dans tous les cas, le script est la source numéro un à étudier ensuite. Dans notre cas, imaginons que nous obtenu le script du client. À ce stade de mon processus de création d'une vidéo SAS, je commence généralement à créer le storyboard Dans la plupart des cas, c'est un peu plus simple à créer qu'un storyboard pour une vidéo explicative classique En effet, dans de nombreuses scènes des vidéos SAS, nous devons montrer des animations de gros titres et l'animation des panneaux d' interface utilisateur du logiciel. À mon avis, c'est plus facile que de proposer des concepts visuels complexes comme ceux dont nous avons souvent besoin pour les vidéos explicatives Tout d'abord, nous allons comprendre la structure principale de presque tous les scripts. Que ce soit pour un SAS ou une vidéo explicative classique. Cela vous aidera dans la création du storyboard. Habituellement, le script comporte quatre parties principales : la présentation du problème, la présentation de l'entreprise, la manière dont l'entreprise résout le problème, l'appel à l'action. Ce sont les parties principales du script, et à partir de là, nous pouvons parfois ajouter des sous-parties supplémentaires entre elles. Par exemple, entre la première et la deuxième partie, nous pouvons ajouter des points supplémentaires qui montrent comment le problème peut ruiner des domaines plus spécifiques la vie du public, généralement trois points. Et entre la troisième et la quatrième partie, nous pouvons ajouter des avantages supplémentaires, généralement trois, sur la manière dont l'entreprise peut améliorer la vie du public. D'accord. Maintenant que nous l'avons trouvé, examinons notre script, et je vais vous montrer comment j'ai créé le storyboard Tout d'abord, vous devez comprendre que pour créer de bons storyboards, vous devez générer des idées visuelles pour le texte du script Et pour cela, vous devez regarder de nombreux exemples et vidéos similaires à celle que vous devez créer. Je vais joindre un lien vers une playlist contenant des vidéos explicatives de Sas sympas pour que vous puissiez commencer quelque part Tout au long du cours, je vais vous montrer comment j'utilise ces vidéos pour générer des idées pour de nombreuses scènes de notre projet. Je dis toujours que la meilleure méthode pour générer des idées est de consulter de nombreuses références en ligne, non seulement lorsque vous travaillez sur des projets, mais aussi pendant votre temps libre. Vous devez comprendre que si vous voulez prendre votre carrière au sérieux, vous devez commencer à penser comme un motion designer. Et lorsque vous regardez de nombreuses vidéos de motion design, vous commencez lentement à mémoriser des scènes et des animations que vous pourrez ensuite utiliser dans vos projets. Ainsi, lorsque vous lirez votre prochain script ou que vous en créerez un pour vous-même, vous pouvez déjà commencer à imaginer quelles scènes s'adapteront visuellement au script Il existe un nombre illimité de manières de présenter un script visuellement, et ce processus peut être modifié par vous ou par votre client. C'est pourquoi la création d'un storyboard est si importante. Cela vous donne, ainsi au client, une idée claire de ce à quoi vous pouvez vous attendre et vous fait gagner beaucoup de temps en évitant des révisions inutiles. Notez que nous changeons parfois légèrement les idées pendant la phase d'animation, mais pas trop radicalement. Donc, si vous pensez que pendant la phase d'animation, vous souhaitez modifier quelque chose qui ne correspond pas parfaitement à votre idée initiale de storyboard, assurez-vous simplement que le changement soit à peine perceptible et qu'il ne soit pas trop compliqué D'accord. Je vais maintenant vous expliquer mon processus de génération d' idées visuelles pour ce script. Pour le texte d'ouverture, présentant le problème principal, je voudrais commencer par une simple animation de texte car j'ai vu que beaucoup d' autres vidéos commençaient comme ça, et c'est tout à fait normal. Pour pimenter un peu la scène , j'ai décidé de jouer avec le mot multiple et souligner sa signification visuelle en lui donnant une impression désorganisée et désordonnée, créant une animation chaotique pour les personnages de ce Terminer avec un objet curseur permet au spectateur de passer à la scène suivante. Ensuite, pour le paragraphe suivant, continuant à présenter le résultat du problème principal, je voudrais montrer un grand nombre de tâches et de messages dans la scène avant que le curseur ne se déplace vers le bas, peut-être dans une mer sombre, où nous avons un formulaire de recherche de type site Web, indiquant que le personnage commence à chercher de l'aide en ligne. Ensuite, après avoir présenté les problèmes, il est temps de mettre en place la plateforme SAS qui permettra d'améliorer la situation. Comme je l'ai vu dans presque toutes les vidéos de référence, c'est le moment de créer une belle animation du logo, suivie du panneau principal de la plateforme SAS. Chaque fois que vous souhaitez présenter un panneau d'interface utilisateur, c'est une bonne idée de consulter le client et de lui demander ce qu'il préfère afficher. Cela s'applique à toutes les scènes où des panneaux d'interface utilisateur sont présentés. Dans ce script, nous avons également un aspect amusant qui dit que c'est si simple que même un chat peut le faire. J'ai donc décidé de présenter un mème représentant un chat amusant dans cette scène À ce stade, nous commençons à présenter les solutions au problème principal. Dans les vidéos SAS, cela est généralement illustré par une démonstration d'un flux de travail de la plateforme. Il peut être présenté selon trois méthodes principales utilisant des graphiques vectoriels, ce que nous utiliserons dans ce cours. Nous pouvons les redimensionner tout en obtenant un résultat optimal, mais nous devons disposer des fichiers de conception originaux. À l'aide d'enregistrements d'écran, cela ne nécessite pas de fichiers de conception originaux, mais enregistre plutôt la plate-forme elle-même. Cela peut vous faire gagner beaucoup de temps, mais la qualité des images est très limitée. À l'aide de graphiques représentatifs, au lieu de montrer le design réel, nous créons quelque chose qui reflète l'idée originale. Cela est particulièrement utile pour les clients qui ne disposent pas encore de version finale de leur interface utilisateur ou qui souhaitent se concentrer uniquement sur une fonctionnalité spécifique de leur plate-forme SAS. Revenons-en au script. À ce stade, après avoir vu une référence intéressante, j'ai décidé qu'avant de passer à un panel spécifique, je voulais tout présenter en même temps dans un look dynamique en trois dimensions. Ensuite, j'ai vérifié avec le client quels écrans il voulait que je montre, et j'ai noté le nom des panneaux moi-même, afin de pouvoir les retrouver facilement dans le design de Figma avant les importer dans After Effects Ensuite, nous avons une question dans le script. J'ai remarqué que ce schéma se répétait, alors j'ai décidé que la question serait présentée dans le même style visuel et animé Et encore une fois, je me suis assuré d'utiliser le panneau d'interface utilisateur approprié. Ensuite, le processus est à peu près le même que pour la scène précédente. Mais cette fois, je voulais présenter le panneau d'interface utilisateur correspondant d'une manière plus intéressante. Après avoir vu un exemple intéressant de référence de conception d'interface utilisateur très similaire, j'ai décidé de le présenter de la même manière que dans la référence. Pour le paragraphe suivant, le processus est le même. Je tiens simplement à mentionner qu'à ce stade, lors de la création du storyboard, je me demande quels panneaux d'interface utilisateur devraient être pertinents Et je sais déjà dans mon esprit que dans cette scène, je peux ajouter des animations Zoom in à des parties spécifiques d'un panneau d'interface utilisateur. Mais si vous pensez que votre client n'a pas entièrement confiance en votre processus, je suggère d'ajouter également ces images supplémentaires au storyboard Ainsi, aucune question ne restera sans réponse quant à l' apparence de la scène Maintenant, en ce concerne le partage de fichiers, vous remarquerez peut-être qu'aucun texte n'accompagne cette scène, et c'est texte n'accompagne cette scène, un autre point important que vous devez savoir comment traiter. Pour décider quand ajouter du texte et quand ne pas le faire, il est préférable de consulter le client. Parfois, ils veulent que certaines phrases affichées et d'autres fois, elles sont moins importantes. Assurez-vous donc d'aligner cette partie sur le client. Demandez-leur simplement quelles phrases du script ils souhaitent voir apparaître dans la vidéo. C'est bon. Passons maintenant à la dernière partie, j'ai décidé de terminer la vidéo avec la même animation textuelle que celle avec laquelle nous avons commencé. C'est parce que le mot « lutte » correspond également aux lettres non organisées, animation que nous avons créée pour le mot multiple Ensuite, nous devons terminer par une scène d'appel à l'action, où dans la plupart des cas, nous présenterons le logo et le site Web de l'entreprise ou tout autre appel à l'action demandé par le client. Par exemple, cela pourrait être Met us in Los Angeles. Cliquez ci-dessous pour vous inscrire sur la liste d'attente, etc. Nous avons donc terminé la leçon, et nous sommes enfin prêts à apprendre comment importer les designs Figma dans After Effects C'est ce que nous ferons dans la prochaine leçon. Ça va être une super idée. On se voit là-bas. 5. Importer des panneaux d'interface utilisateur de Figma vers After Effects: Je suis de retour. Dans cette leçon, nous allons apprendre comment importer les panneaux d'interface utilisateur de Figma vers After Effects Je connais cinq méthodes principales pour faire ce travail. Vous pouvez tous les voir maintenant à l'écran. Nous pouvons soit le faire en utilisant des extensions soit en utilisant les fonctions natives de Figma La différence est qu' en utilisant des extensions, le transfert s'effectue directement de Figma vers After Effects Lorsque vous utilisez les fonctions natives de Figma, nous devons d'abord importer le design dans Illustrator, puis l'intégrer dans After Effects Commençons par la liste des extensions. Je ne vais pas approfondir toutes les méthodes car je ne veux pas que ce cours dure plus de 50 heures. Je vais plutôt joindre des liens vers les meilleurs didacticiels pour chaque extension, soit dans le dossier des ressources, soit sous la vidéo dans la description. Le premier est AEUX. Il s'agit d'une extension gratuite, mais elle pose de nombreux problèmes lors du processus d'importation, notamment en ce qui concerne les couches de texte, les effets et les valeurs de position dans le design. Vient ensuite Convertify. Vous pouvez l'utiliser avec un abonnement mensuel, mais Adobe XD doit également être installé sur votre ordinateur. Ensuite, nous avons Overlord, qui est actuellement la meilleure option, selon de nombreux motion designers Il s'agit d'une extension payante, et c'est le moyen direct le plus rapide d'importer calques Figma dans After Effects sans passer par Illustrator, que nous aborderons dans les méthodes suivantes Sachez simplement que même avec Overlord, certains problèmes doivent encore être corrigés après avoir importé les couches Figma dans After Ce n'est pas parfait à 100 %. Comme la majorité de mes étudiants sont motion designers débutants qui n'ont pas beaucoup d'argent à investir dans des extensions payantes, j'ai décidé dans ce cours d'utiliser la méthode native des fonctions Figma La première option consiste à utiliser la fonction d'exportation. Je sais qu'il y a encore beaucoup à dire sur cette fonction, mais encore une fois, je veux que nous commencions par animation et que nous ne perdions pas trop de temps à explorer FigMA L'objectif de ce cours n' est pas d'apprendre toutes les fonctions de Figma, mais de n'apprendre que les fonctions dont nous avons besoin en tant que motion designers afin de créer une excellente vidéo explicative SAS À la fin de ce cours, je veux que vous soyez suffisamment en confiance pour lire un fichier FigMA d'un client et que, même sans connaître Figma en profondeur, soyez capable de créer une excellente vidéo explicative SAS C'est bon. Parlons maintenant de la méthode finale. Dans ce cours, nous utiliserons cette méthode, qui consiste simplement à copier les couches Figma au format SVG et à les coller Nous pouvons y diviser les couches et organiser le design en fonction de nos besoins dans After Effects. Alors maintenant, je veux que tu attrapes la souris et que tu commences enfin à travailler avec moi. La première chose à faire est ouvrir Adobe Illustrator. Alors faisons-le très rapidement. Maintenant, nous devons créer un nouveau fichier. Alors, cliquons ici. Pour le type de document, j' opte généralement pour les modèles Web, et ici nous pouvons choisir le plus grand qui a des dimensions de résolution Full HD. Ensuite, nous devons trouver un nom pour ce fichier. Et c'est très important car nous voulons nous rappeler de quel panneau d'interface utilisateur il s'agit. Nous pouvons donc commencer le nom par un panneau ou un écran. Ajoutez ensuite un suffixe avec le nom du panneau sur lequel nous travaillons Dans ce cas, selon notre storyboard, le premier panneau à afficher est le tableau de bord Bientôt, nous choisirons lequel en particulier. Pour l'instant, écrivons tableau de bord ici dans le nom. Ensuite, nous pouvons laisser toute la configuration telle quelle et appuyer sur Créer. Et maintenant, avant de passer à autre chose, je veux que nous configurions la même disposition des panneaux. Passons donc à Window, Workspace et définissons-le sur Essentials Classic. Si vous avez déjà déplacé certains panneaux de cette mise en page par le passé, assurez-vous de réinitialiser la mise en page. Maintenant, améliorons-le un peu en faisant glisser l'onglet des couches vers la zone ouverte de droite ici Ce sera beaucoup plus pratique pour nous lorsque nous commencerons à travailler avec toutes les couches en une minute. Génial. Nous sommes donc maintenant prêts à retourner à Figma et à importer notre premier panneau ou écran Dans ce cours, je les appellerai écrans. Comme je l'ai déjà mentionné plus tôt, nous devons choisir l'un des modèles d'écran du tableau de bord. Pour savoir quel écran utiliser, vous pouvez demander au client ce qu'il préfère. Bien entendu, cette décision peut également être prise plus tôt dans le processus lors de la création du storyboard Très bien, disons que nous voulons celui-ci. Comme vous pouvez le voir, lorsque je clique sur le nom de ce dessin, InfigMat s'appelle un cadre C'est comme un plan de travail et un illustrateur. Lorsque je clique dessus, je peux voir qu'il est sélectionné dans l'onglet des couches sur la gauche, sous la section du tableau de bord. Vous pouvez ouvrir les couches et toutes les sous-couches pour voir à quel point cette conception est complexe. Dans notre cas, nous voulons toutes les couches liées à ce cadre. Nous pouvons donc soit sélectionner toutes les couches manuellement, soit simplement cliquer sur le nom du cadre. Cliquez ensuite avec le bouton droit de la souris, accédez à Copy Paste Says et choisissez SVG. SVG est un format vectoriel qui peut être facilement ouvert dans Illustrator car Illustrator est un logiciel vectoriel OK. Revenons maintenant à Illustrator et appuyons simplement sur Ctrl ou Commande sur Mac plus V pour coller le dessin copié. est aussi simple que ça. Une chose que vous devez savoir à propos cette méthode est que si votre dessin Figma comporte des effets tels que le flou, ombre portée ou d'autres superpositions complexes, ils n'apparaîtront pas dans Dans ce cas, vous pouvez soit recréer les effets dans Illustrator, soit, à mon avis, mieux vaut les recréer ultérieurement dans After Notez également que toutes les couches de texte ne sont plus du texte modifiable Ce sont désormais des formes. Tous ces problèmes s'appliquent également à la plupart des extensions payantes. Je l'ai dit, quelle que soit la méthode que vous utilisez, vous devrez toujours ajuster quelques petites choses en cours de route. Peut-être qu'à l'avenir, il y aura de meilleurs moyens. Bien, revenons au design. Dans les cas où le dessin est plus grand ou plus petit que votre canevas Illustrator, je suggère que, pendant que le dessin est groupé, assurez-vous que les proportions limitées sont activées, puis redimensionnez-le manuellement à partir de là De cette façon, votre design sera redimensionné proportionnellement et s'adaptera correctement. Dans notre cas, il s'adapte parfaitement à la toile , nous sommes donc prêts à passer à la séparation des couches. Nous devons donc d'abord libérer le masque de découpage afin de pouvoir dissocier les couches Cliquez ensuite à un endroit extérieur pour désélectionner le dessin et le sélectionner à nouveau, ou cliquez simplement avec le bouton droit de la souris pour le dissocier Notre objectif est de dissocier toutes les couches, afin que nous puissions décider quelles sections doivent rester groupées ou non Ensuite, nous devons séparer toutes les couches non groupées en couches individuelles Pour cela, lorsque le calque principal est sélectionné, ouvrez le menu des calques et sélectionnez Relancer dans la séquence des calques. Nous pouvons maintenant voir toutes les couches de ce design. Ne vous laissez pas intimider par le nombre de couches. Ça ne restera pas comme ça. Ensuite, nous devons tous les déplacer hors de la couche principale. Pour ce faire, sélectionnez la première sous-couche, faites défiler la page vers le bas, maintenez la touche Maj enfoncée et sélectionnez la dernière. Maintenant, faites-les tous glisser hors de la couche principale. Cela nous permettra de préparer le design pour l'animation. Ensuite, nous pouvons supprimer la couche vide ci-dessous. Je sais que c'est une couche vide car il n'y a pas d'icône en forme de flèche à côté sur le côté. Génial. L'étape suivante consiste à préparer les couches pour l'animation. Ce que je veux dire par là, c'est nous assurer que nous groupons les couches qui n'ont pas besoin de rester séparées car nous ne les animerons Et comment savoir ce que nous allons animer ou pas ? C'est pourquoi nous avons créé le storyboard. Par exemple, dans cette scène, il n'est pas nécessaire d'animer les couches Mais si un client nous le demande ou si nous décidons d' animer certaines parties ici, examinons le animer certaines parties ici, examinons le design et commençons à l'organiser tout en planifiant ce que nous pourrions animer ultérieurement si nécessaire OK, à ce stade, je m'assure d'abord de verrouiller la couche d'arrière-plan afin de pouvoir facilement sélectionner les autres couches du dessin. Maintenant, je vais essayer de sélectionner les objets qui, selon moi, devraient être groupés, car je suis sûr que je ne vais pas les animer. Comme vous pouvez le constater, d' autres couches sont également sélectionnées. Ce sont des formes utilisées comme masques de découpage. Sélectionnons-en un. Et ici, nous pouvons voir que c'est sous notre couche d'arrière-plan. Nous pouvons le désactiver, verrouiller ou le supprimer car nous n'en avons pas besoin ici. D'accord. Commençons donc à regrouper les objets. Nous sommes sûrs que nous n'animerons pas, commençant par la zone supérieure, dans ce cas Je sais que dans le storyboard, j'ai une scène de barre de recherche, donc je vais m'assurer de ne pas regrouper les objets qui créent la barre de recherche avec le reste de la zone supérieure Sélectionnons donc tous les objets ici, en veillant à ne pas sélectionner la barre de recherche pour les regrouper. Maintenant, ce groupe se trouve sur une couche, et il a été déplacé vers le haut dans la liste des couches. Éteignons-le pour le moment. Ensuite, nous pouvons regrouper cette zone ici car je sais que je ne l'animerai pas et qu'il ne sera pas nécessaire de modifier cette zone, que ce soit dans le design ou dans l'animation Regroupons-les en utilisant le raccourci Ctrl ou Commande sur Mac plus G. Nous pouvons trouver ce groupe de couches ici Vous pouvez le placer sous le premier groupe de couches si vous le souhaitez. Et désactivons-le pour le moment, afin de pouvoir nous concentrer sur la barre de recherche. Pour la barre de recherche, je prévois d'animer icône de la loupe et de manipuler la recherche de mots plus tard dans l' Je vais donc m'assurer de ne pas les regrouper tous ensemble. Pour vous faciliter la tâche, désactivons la couche de recherche blanche. Je vois qu'il est composé de deux couches, l'une pour le remplissage blanc et l'autre pour le trait gris. Nous traiterons de cela dans une seconde. Pour l'instant, regroupons toutes les formes qui créent l'icône en forme de loupe Comme vous pouvez le constater, ces formes se trouvent sur couches distinctes, ce qui n'est pas nécessaire. Nous pouvons les avoir sur une seule couche. Sélectionnez-les donc et regroupez-les à l'aide du raccourci. Ensuite, vérifions si le mot de recherche se trouve sur une couche. C'est le cas. Cela signifie que nous pouvons le laisser tel quel. Voyons ensuite ce qui se passe avec l' icône du point d'exclamation Toutes les formes se trouvent sur des couches séparées, ce que nous ne voulons pas. Regroupons-les donc tous. Très bien, donc avec ça, nous en avons fini avec la partie supérieure. Passons maintenant à la zone située en dessous. Mais avant cela, nous pouvons maintenant rétablir tous les calques désactivés et les rapprocher les uns des autres dans le panneau des calques. Mais pour être honnête, nous n'avons pas besoin de le faire maintenant. Plus tard, une fois que nous fini de regrouper toutes les couches nécessaires, nous organiserons quand même le panneau des couches, n'est-ce pas ? Revenons maintenant au regroupement couches dans la section UI située sous la barre de recherche. Encore une fois, dans ce cas, nous devons nous demander si nous voulons animer quelque chose ici ou non Peut-être devrons-nous animer la ligne ici ou les chiffres. C'est à peu près la logique qui sous-tend la préparation du design pour l'animation. Et même si vous utilisez extensions payantes et que vous ignorez l'étape Illustrator, vous devrez tout de même ajuster certains calques et précompositions dans After Effects Mais la bonne nouvelle, c'est qu' il est très peu probable que vous receviez un design aussi complexe où vous devrez animer autant de panneaux Nous le faisons dans le cadre du cours parce que je veux que vous répétiez ces actions afin de vous y habituer le plus rapidement possible. Et ne vous inquiétez pas si vous pensez devoir préparer tous les panneaux Figma pour ce cours dans Illustrator Dans le dossier principal du cours, vous trouverez tous les fichiers Illustrator déjà préparés pour l'animation. Je veux juste que tu t' entraînes ça une fois avec moi. Ensuite, vous pouvez utiliser mes fichiers prêts. Bien, revenons à la leçon. Ici, j'ai décidé que je voulais que toutes les couches soient séparées car je pourrais les animer à l'avenir. Mais je veux m'assurer que les objets qui créent l' icône en forme de flèche se trouvent sur une seule couche. Pour cela, verrouillons le cadre blanc afin de sélectionner les formes de flèches et de les regrouper. Faisons de même pour le reste des boîtes. Génial. Une fois cela fait, passons à la partie suivante. Tout d'abord, verrouillons la forme blanche afin de pouvoir sélectionner facilement les objets ici. Maintenant, sélectionnons l' icône du calendrier, et comme vous pouvez le voir, elle est répartie sur de nombreuses couches Il serait donc préférable de la regrouper en une seule couche. Ensuite, vérifions-nous que les boutons de leur texte sont également regroupés un par un. Pour ce mot, nous pouvons le laisser puisqu' il est déjà regroupé en une seule couche. Génial Passons maintenant à cette partie. Comme vous pouvez le constater, toutes ces couches sont regroupées pour le moment, mais je pense que c'est une bonne idée de séparer cette petite boîte car nous pourrions l' animer à l'avenir Alors, relâchons d'abord le masque de découpage de ce groupe, puis cliquons ailleurs pour désélectionner et dissocier Génial. Ensuite, nous pouvons essayer de sélectionner la forme du masque de découpage et de le supprimer À ce stade, nous pouvons zoomer et nous assurer que les couches sont séparées comme nous le souhaitons. Par exemple, je vois que cette boîte est groupée, mais il se peut que je doive animer les chiffres ici, ce qui signifie que j'ai besoin que les objets qu'elle contient soient séparés Cette fois, répartissons les couches groupées ici sans dissocier la pile et voyons ce qui se passe Parfois, nous pouvons commettre ces petites erreurs. Je veux donc que vous sachiez à quoi vous attendre lorsque cela se produira. Alors que la couche contenant ce groupe est sélectionnée, ouvrons le menu et cliquons sur Release to Layers Sequence. Déplaçons maintenant toutes les couches hors de la couche principale. Et comme vous pouvez le constater, il semble que nous n'éliminons que le petit point violet du groupe. Le reste de la pile est toujours groupé. Dans ce cas, comme je n'ai besoin que de séparer la couche numérique, je peux double-cliquer sur cette pile jusqu'à ce que je l'atteigne, puis appuyer sur ControlX pour la couper Ensuite, je vais cliquer sur le petit cadre blanc pour voir où il se trouve dans le panneau des calques, créer un nouveau calque au-dessus de celui-ci et appuyer sur Control Shift V pour le coller au même endroit. C'est bon. Passons à autre chose. Voyons maintenant ce que nous avons ici. Je pense que nous pouvons laisser le graphique tel quel, mais pour les noms des mois ci-dessous, je pense qu'il vaut mieux les regrouper car je ne pense pas que je vais animer cette partie Et groupons également le point rouge avec son texte et faisons de même avec le point bleu. Génial Nous pouvons maintenant passer à la partie suivante. Voyons ce que nous avons ici dans le quartier de Pie. Je vois que nous avons des masques à découper ici. Nous les traiterons dans une seconde. Tout d'abord, sélectionnons la boîte blanche et verrouillons-la. Nous pouvons donc sélectionner plus facilement le reste des objets de cette partie. Commençons maintenant par regrouper les éléments évidents tels que les formes des icônes du calendrier, les boutons et leurs textes. Nous pouvons également zoomer ici et regrouper les points et leur texte, car je ne pense pas que nous allons animer ces parties Sélectionnons les chiffres ici et observons-les dans le panneau des couches pour nous assurer que l'icône en dollars américains et le chiffre sont déjà groupés. Génial. Nous pouvons maintenant passer au Pi. Je vois que le numéro se trouve sur une couche séparée, ce qui est une bonne chose. Mais quand je sélectionne la tarte, je constate qu'elle est groupée et qu'elle a une forme étrange. Cliquez ici avec le bouton droit de la souris pour voir s'il s'agit d'un masque de découpage. Comme on peut le voir, il ne s'agit pas d'un masque à clipser. Sélectionnons-le et essayons de le déplacer. Je vois que ce n'est qu' un rectangle blanc. Nous n'en avons pas besoin dans le fichier, alors supprimons-le. Génial. Passons maintenant à la tarte. Je vois que toutes ses parties se trouvent sur des calques séparés, ce qui est utile si vous envisagez l'animer dans After Effects Mais dans notre cas, je ne le ferai pas. Sélectionnons-les donc tous. Maintenez la touche Maj enfoncée, cliquez sur le chiffre pour le sélectionner et regroupez uniquement les couches Pie. Vous pouvez toujours vérifier en activant et en désactivant le nouveau calque groupé pour confirmer que vous avez regroupé les bons objets. Ça a l'air génial. Maintenant, nous pouvons passer à la partie bouton ici. Tout d'abord, je vais verrouiller la boîte blanche afin pouvoir sélectionner facilement le reste des formes. Regroupons maintenant les formes des icônes du calendrier, les boutons des formes des icônes en forme de loupe Enfin, sélectionnons la partie inférieure pour voir ce qui se passe ici. Je vois que toutes les couches sont déjà regroupées. Dans mon cas, je ne veux animer aucune des couches ici Je vais donc le laisser tel quel. Mais au cas où vous auriez besoin d'animer quelque chose ici, par exemple les boutons, vous devrez gérer cette partie différemment. D'accord. Passons maintenant à la dernière partie, qui est le panneau de gauche. Si vous zoomez sur la zone des icônes, vous pouvez voir que la forme de chaque icône est placée sur une couche séparée, ce qui dans notre cas est totalement inutile. D'après le storyboard et le script, il n'y a aucune partie la vidéo où nous devons animer quelque chose dans ce panneau de gauche, qui est le menu principal de cette plateforme SAS Dans ce cas, sélectionnons l'ensemble de la zone ici, y compris la petite flèche et la boîte grise, puis groupons-les. Génial Maintenant, nous ne l'avons que sur une seule couche. Nous avons maintenant atteint la dernière étape de préparation de ce fichier pour l'animation, qui consiste à supprimer les couches vides restantes que nous avons ici. Vous pouvez clairement identifier une couche vide grâce au fait qu'il n'y a pas de petite flèche à côté de celle-ci pointant vers la couche. Commençons donc par sélectionner tous les calques vides et les supprimer du panneau des calques. Dans certains cas, je maintiens la touche Ctrl ou Commande sur Mac pour sélectionner les couches vides une par une. Dans les situations où une couche vide suit une couche non vide, il est préférable de sélectionner l' ensemble des couches et de désélectionner les couches non vides tout en maintenant la touche Ctrl ou Commande enfoncée . Vous trouverez peut-être cette méthode plus pratique. Malheureusement, je n'ai pas trouvé de raccourci ou de fonction permettant de sélectionner toutes les couches vides en même temps. Donc, si vous essayez d'en trouver un en utilisant l' IA ou en effectuant une recherche en ligne, assurez-vous qu'il fonctionne réellement , puis partagez-le avec le reste d'entre nous. D'accord, il semblerait que nous ayons supprimé toutes les couches vides. Nous pouvons maintenant déverrouiller ceux qui sont verrouillés si nous le voulons. Mais surtout, examinons le cadre général et voyons si des ajustements sont nécessaires. Je vois que nous ne voyons pas le nom du panneau ici, qui est Dashboard. Il se peut qu'il ne soit pas dans le bon ordre dans la pile de couches. Trouvons-le donc et plaçons-le au bon endroit. Génial. Tout semble bon maintenant, et nous sommes prêts à enregistrer le fichier. Si vous souhaitez me suivre et préparer toutes les conceptions tout au long du cours, entrez dans le dossier AI et enregistrez-y votre fichier. Mais juste pour info, vous pouvez ignorer ce processus, et lorsque nous commencerons à animer dans After Effects, vous pourrez utiliser mes fichiers Illustrator déjà préparés, que vous trouverez dans le dossier appelé screens for AE Dans mon cas, je vais agir comme si je le faisais pour la première fois et j' enregistrerai ce fichier ici. Nous devons simplement nous assurer que le nom est correct et que nous l' enregistrons dans le fichier Adobe Illustrator. Ensuite, nous pouvons cliquer sur Enregistrer. Nous pouvons laisser toutes les options telles quelles et appuyer simplement sur OK. Et avec cela, nous avons fini de préparer cette conception d'interface utilisateur. Je vais maintenant préparer le reste des panneaux de l'interface utilisateur pour l'animation. Comme je vous l'ai déjà dit, vous n'êtes pas obligée de le faire avec moi car vous avez déjà les fichiers Illustrator prêts, mais je veux que vous regardiez les leçons, car lors de chaque processus de préparation de chaque panneau, nous pouvons apprendre quelque chose qui pourrait également vous arriver au cours de ce processus. D'accord. Nous allons donc maintenant continuer à préparer les fichiers Figma pour l'animation à l'aide d'Adobe Illustrator Selon notre script, le panneau suivant que nous devons utiliser est l'un des panneaux de la section projet. Supposons qu'après confirmation avec le client, nous sachions que c'est l'écran que nous devons utiliser dans la vidéo. Comme nous l'avons fait avec l'écran précédent, nous pouvons soit sélectionner toutes les couches manuellement soit simplement sélectionner l'ensemble du cadre en cliquant sur son nom. Maintenant, pour le copier dans Illustrator, nous devons cliquer avec le bouton droit de la souris, puis aller sur Copier et coller sous. Et voici une petite question pour toi. Dans quel format devons-nous le copier ? Puisque nous voulons que les objets cette conception soient enregistrés sous forme de fichiers vectoriels, nous devons les copier au format SVG Nous pouvons maintenant revenir à Illustrator. Et si vous suivez la leçon avec moi, nous devons créer un nouveau document. Nous pouvons sélectionner le fichier récemment utilisé et simplement changer son nom pour qu'il corresponde au panneau d'interface utilisateur ou à l'écran sur lequel nous travaillons. J'appellerai ce projet « un écran, deux projets ». Une fois que nous avons le nouveau canevas, nous pouvons maintenant appuyer sur Ctrl ou Commande sur Mac V pour coller le design Figma Bien, la première chose à faire est de libérer le masque de découpage Désélectionnons ensuite le groupe, puis sélectionnons-le à nouveau pour pouvoir cliquer avec le bouton droit de la souris et le dissocier Ensuite, pendant que cette couche principale est sélectionnée, ouvrez le menu et choisissez Relancer vers les couches. Cela permettra de séparer les couches. Enfin, sélectionnons la première couche ce groupe, faisons défiler la page vers le bas, maintenons la touche Maj enfoncée et sélectionnons la dernière afin de pouvoir toutes les déplacer hors de la couche principale. D'accord. Nous voyons maintenant la forme qui a été utilisée comme masque de découpage. Comment savoir si c'est la forme ? Je peux cliquer sur le petit cercle sur le côté droit de cette couche, et la forme sera sélectionnée. Quand je le déplace, je vois qu'il ne s'agit en fait que d'une forme vide. Supprimons-le donc. Nous sommes maintenant prêts à commencer à regrouper le reste des couches en fonction de nos besoins et de After Effects. abord, nous pouvons sélectionner le fond gris principal et le verrouiller afin de sélectionner le reste des couches plus facilement. Commençons par la partie supérieure. Je vais sélectionner cette partie ici, veillant à éviter de sélectionner le panneau de gauche avec les chiffres dans les deux boutons situés dans la zone supérieure, car cela ne fait pas partie de la section d'en-tête. Je vais maintenant appuyer sur Ctrl G pour les regrouper. Génial. Passons maintenant au menu de gauche que nous avons ici. Comme je sais que je ne souhaite pas animer cette partie, je vais sélectionner tous les calques et objets de cette section et les regrouper. Génial Pour plus de commodité, nous pouvons verrouiller les couches groupées afin de pouvoir continuer à sélectionner le reste des objets et des formes plus facilement. Passons maintenant au menu principal de gauche. Nous pouvons sélectionner toutes les formes ici, en veillant à inclure la petite flèche et le rectangle gris situé derrière , et les regrouper toutes. Génial. Passons maintenant à la partie principale de cet écran d'interface utilisateur. Lorsque je ne suis pas sûr de ce qui se passe dans une section, je déplace certaines formes et couches pour comprendre quelles sections sont groupées et lesquelles ne sont que des couches distinctes. Pour commencer, je vais trouver la boîte blanche et la verrouiller afin de pouvoir continuer plus facilement avec cette section. Maintenant, comme vous pouvez le voir, toute la section avec les petites cases et les icônes est regroupée. Commençons donc par traiter des couches. La première chose que je vais faire est cliquer avec le bouton droit de la souris sur cette section et de m' assurer de relâcher tout masque de découpage s'il y en a un Ensuite, je vais cliquer ailleurs, puis cliquer avec le bouton droit sur ce groupe pour le dissocier Ensuite, je vais m'assurer que cette couche est sélectionnée, puis relâcher toutes les couches pour les séparer. Enfin, je vais déplacer toutes les sous-couches séparées hors de la couche principale. Maintenant, je constate que la forme utilisée pour le masque de découpage reste inchangée et que je n'en ai pas besoin dans mon design Je vais donc le sélectionner et le supprimer. Avant de poursuivre, je tiens à souligner, une fois de plus, pourquoi il est si important de constamment examiner différentes références et exemples de vidéos similaires. Comme j'ai déjà étudié de nombreux exemples, lorsque j'ai regardé ce panneau d'interface utilisateur, je me suis immédiatement souvenu d'avoir vu un design très similaire dans l'une des vidéos de référence qui m'a donné l'idée d' animer cette section la même manière que je l'ai vu dans la référence Maintenant, dans Illustrator, lors de la préparation de ce design, je sais que je dois regrouper chacune des petites sections ici en tant que groupe distinct. Ainsi, dans After Effects, il me sera beaucoup plus facile de les animer comme je l' imaginais dans À présent, sélectionnons chaque petite section et regroupons toutes les formes, texte et les couches qui y sont associés dans un seul groupe. Faisons-le pour toutes les petites sections ici. Génial Nous pouvons maintenant passer à la partie inférieure avec les numéros de page. Comme je sais que je ne veux pas animer cette partie de quelque façon que ce soit, je vais sélectionner toutes les formes et couches ici et les regrouper. Génial. Maintenant, je peux passer à la partie supérieure de cette section. Nous pouvons regrouper toutes les formes de cette zone. Nous pouvons également regrouper le texte et les boîtes de boutons pour chaque bouton. Enfin, nous pouvons sélectionner cette longue section ci-dessous et la regrouper. Nous sommes maintenant prêts à commencer à supprimer les couches vides. Si vous le souhaitez, vous pouvez verrouiller les couches non vides afin qu'elles ressortent plus clairement pendant que vous supprimez les couches vides. Ce faisant, j'ai remarqué qu'il y a une couche qui semble ne rien contenir, mais elle n'est a une couche qui semble ne rien contenir, mais elle n' clairement pas vide. Dans ce cas, pour mieux comprendre ce qui se passe ici, je vais isoler cette couche touche Alt enfoncée et en cliquant une fois sur son icône. Cela désactivera toutes les autres couches et ne laissera que celle-ci visible. Très bien, donc je vois que c'est une sorte de ligne qui n'a aucun but dans le design. Si je ne suis pas sûr, je peux réactiver toutes les couches pour vérifier si c'est important pour le design. Mais si je suis certain ne pas en avoir besoin, supprimons-le. Maintenant, nous sommes complètement prêts à commencer à sélectionner les couches vides et à les supprimer cette fois. Utilisons la deuxième méthode avec les couches non vides tout en maintenant le contrôle. Remarque rapide si, après avoir sélectionné toutes les couches pertinentes et cliqué sur Supprimer, vous recevez un message d'avertissement, cela signifie généralement que vous avez accidentellement inclus une couche qui n'est pas vide. Dans ce cas, je suggère de ne pas supprimer encore, revenir sur votre sélection, vérifier soigneusement et désélectionner la couche contenant les éléments de conception Génial Il ne nous reste plus que les couches pertinentes dans le fichier. Nous pouvons tous les déverrouiller et enregistrer le fichier. Encore une fois, assurez-vous que le nom est correct et que vous l'enregistrez en tant que fichier Illustrator. Cliquez ensuite sur Enregistrer. Ceci étant dit, nous terminons cette leçon et nous sommes prêts à passer à la suivante. On se voit là-bas. 6. Préparer le panneau d'interface utilisateur des projets dans Illustrator uil: Je suis de retour Maintenant, continuons à préparer le prochain panneau d'interface utilisateur à partir de notre storyboard Selon la séquence, le suivant est le panneau d'interface utilisateur du projet. Revenons donc au fichier Figma et copions le cadre dont nous avons besoin De retour dans Illustrator, créons un nouveau document. Je vais m'assurer de donner le bon nom à ce nouveau fichier et appuyer sur Créer. Maintenant, collons le dessin. Comme vous le remarquerez peut-être, ce modèle est légèrement plus haut que nos précédents, mais c'est tout à fait normal. Cela n'interfère pas avec notre travail. Le processus sera à peu près le même. Je vais d'abord relâcher le masque de découpage, puis dissocier le dessin Ensuite, je séparerai toutes les couches en couches individuelles. Ensuite, je vais extraire toutes les couches de la couche principale, puis je verrouillerai la couche d'arrière-plan. Et supprimez la forme utilisée pour le masque de découpage. Maintenant, comme vous pouvez le constater, il y a une petite erreur d' organisation des couches, qui apparaît également dans le design original de Figma Pour nous, dans Illustrator, ce n'est pas si grave. Il suffit de sélectionner toutes les couches et formes de cette section, y compris la flèche et le petit carré gris, et de les regrouper. Plus tard, nous placerons ce groupe au bon endroit dans la pile de couches. Pour l'instant, concentrons-nous sur le regroupement des sections suivantes. Une fois cela fait, groupons la zone d'en-tête. Passons ensuite à la section principale de cette conception d'interface utilisateur. abord, je vais sélectionner la case blanche et la verrouiller afin de pouvoir sélectionner facilement les couches et formes que je souhaite regrouper dans cette section. Maintenant, je vais commencer à regrouper toutes les formes et tous les textes pertinents. Ensuite, je vais regrouper tous les boutons ici en un seul groupe, car je n'ai pas besoin de séparer chaque bouton. Je ne pense pas que je vais les animer individuellement dans After Effects Enfin, regroupons également cette zone ici. Et maintenant, parlons de cette partie. Selon notre storyboard, nous devons présenter ici une sorte de flux logiciel de démonstration Je pense que je vais créer une animation pour la case à cocher. C'est-à-dire que je souhaite animer un curseur qui activera cette icône en forme de coche verte Dans ce cas, je vais d'abord supprimer l'une des icônes en forme de coche Ensuite, je vais m'assurer que tous les panneaux de l' interface utilisateur se ressemblent, et je séparerai la coche restante et la case verte dans leurs propres couches afin de pouvoir les animer Je vois que l'icône noire en V et la petite boîte verte sont déjà séparées chacune sur une couche séparée. Donc, la dernière chose que je vais faire est colorer le trait vert ici en gris. Une fois cela fait, je vais commencer à regrouper chaque section ici une par une. Chaque tâche doit se trouver sur sa propre couche. Assurez-vous simplement de ne pas inclure la coche et la case verte dans ces groupes Bien entendu, si vous devez ajouter des photos de personnes ultérieurement, vous ne devez pas tout regrouper. Vous garderiez l'icône de l'avatar sur une couche séparée. Ne t'inquiète pas Nous allons mettre cela en pratique dans les leçons suivantes. Pour l'instant, finissons de regrouper toutes les boîtes de tâches que nous avons ici. Génial. Une fois cela fait, nous sommes prêts à commencer à supprimer les couches vides dans le panneau des couches. Je vais accélérer un peu ce processus pour le moment. C'est bon. Ainsi, une fois que nous avons fini de supprimer toutes les couches vides, nous pouvons déplacer la couche avec le menu de gauche un peu plus haut dans la pile de couches afin voir correctement tous les détails du design. Génial. Maintenant, tout semble parfait. Avec cela, nous pouvons continuer et enregistrer le fichier. Vérifiez que le nom est correct, puis cliquez sur Enregistrer. Génial Revenons maintenant à Figma et préparons le prochain écran d'interface utilisateur Selon notre storyboard, dans cette partie, nous devons également créer une petite animation de démonstration laquelle nous voyons un panneau contextuel apparaître au centre de l'écran Je vais donc aller sur Figma et trouver le cadre dont j'ai besoin pour copier dans Illustrator Disons qu'après avoir confirmé avec le client, nous savons que c'est la page dont nous avons besoin. Comme d'habitude, je vais copier ce cadre au format SVG, puis dans Illustrator, je vais créer un nouveau document et lui donner le nom approprié Maintenant, lorsque je colle le dessin de Figma dans mon nouveau canevas, la première chose que je fais est de libérer le masque de découpage Cela ne me dérange pas d'avoir une grande forme ici. Je pourrai m'en occuper plus tard. Ce qui est plus important pour moi de vous montrer , c'est qu'il est très difficile séparer l'interface utilisateur contextuelle du panneau principal. Même si je dissocie le dessin, il est toujours difficile de sélectionner uniquement les couches contextuelles, car je risque de saisir accidentellement formes inutiles ou des couches situées derrière le Supprimons donc tout pendant un moment, et je vais vous montrer la bonne façon de procéder. Lorsque nous avons une fenêtre contextuelle au-dessus de l'ordinateur central, il est préférable de sélectionner d'abord uniquement l'infigma contextuelle , soit en cliquant directement dessus , soit en la sélectionnant dans le panneau des couches sur la Ensuite, copiez d'abord cette partie dans Illustrator. Une fois que nous l'avons collé dans Illustrator, nous pouvons le mettre de côté pour le moment. Maintenant, de retour dans Figma, masquons la fenêtre contextuelle, puis copions le cadre principal séparément dans Illustrator Dans Illustrator, créez un nouveau calque et collez-y le cadre copié. Veillez à l'aligner au centre de la toile. De cette façon, nous pouvons facilement préparer le panneau principal de l'interface utilisateur , puis nous organiserons la section contextuelle plus tard. Bien, pendant que cette couche principale est sélectionnée, ouvrez le menu et choisissez Relancer vers les couches Enfin, sélectionnons la première couche de ce groupe et sélectionnons la dernière afin de pouvoir toutes les déplacer hors de la couche principale. Bien, comme vous pouvez le voir, il y a un rectangle noir derrière la fenêtre contextuelle Je ne supprimerai pas la forme car dans After Effects, je peux l'animer d'un simple fondu lorsque la fenêtre contextuelle apparaît Pour pouvoir le retrouver plus facilement par la suite, je vais renommer ce calque en shadow Génial Passons maintenant autre chose et ajustons la grande forme que nous avons ici. Génial Verrouillons la couche d'arrière-plan avant de passer à autre chose. Maintenant, comme toujours, la première étape consiste à supprimer la forme utilisée comme masque de découpage Ensuite, nous sommes prêts à commencer à regrouper le reste des couches en fonction de nos besoins et de After Effects. Dans cette partie, je n'ai pas l'intention d'animer les chiffres. Je vais donc simplement sélectionner chaque section et les regrouper. Ensuite, nous pouvons regrouper toutes ces sections en une seule. Passons maintenant à la dernière section de cette conception. Tout d'abord, je vais verrouiller la boîte blanche en arrière-plan. Ensuite, comme nous l'avons fait dans le design précédent, assurons-nous que tous les panneaux de tâches se ressemblent et que l'icône en V et la boîte verte sont séparées sur leurs propres couches au cas où nous aurions besoin de les animer ultérieurement. Génial Maintenant, pour cette zone, nous pouvons tout regrouper. Et pour les trois boutons présentés ici, je vais également les regrouper en un seul groupe car je n'ai pas l'intention de les animer dans After Effects Génial. À présent, sélectionnons chaque section de tâches et groupons-les individuellement afin que chaque tâche se trouve sur sa propre couche distincte. Génial Nous pouvons maintenant commencer à supprimer les couches vides avant de passer au travail sur le panneau contextuel. Une fois cela fait, réactivons la couche d'ombre et verrouillons toutes les couches que nous avons déjà organisées. Nous pouvons maintenant déplacer toutes les formes et couches des panneaux contextuels et couches au centre du canevas et nous assurer qu'elles se trouvent au-dessus de la couche d'ombre. N'oubliez pas que le design de la fenêtre contextuelle n'est pas encore groupé. Donc, si vous essayez de l' aligner directement au centre, cela ne fonctionnera pas. Pour résoudre ce problème, sélectionnez d'abord toutes les formes contextuelles et regroupez-les. Vous pouvez maintenant aligner l'ensemble du groupe au centre du canevas. Une fois que la fenêtre contextuelle est parfaitement alignée, vous pouvez la dissocier à nouveau et commencer à séparer les couches Et si vous voyez un message d'erreur au cours de l'étape, ne vous inquiétez pas. Cela signifie généralement que vous avez sélectionné accidentellement une couche verrouillée. Vérifiez simplement votre sélection et répétez le processus. C'est bon. Nous pouvons donc maintenant commencer à travailler sur ce design. abord, vous pouvez sélectionner quelques couches et les faire glisser légèrement sur les côtés pour comprendre ce que vous avez ici et comment tout est construit Par exemple, je ne veux pas que cette zone de champ soit remplie. Je vais donc ajouter un fond blanc à cette forme car je sais que je l' animerai plus tard dans After Effects Maintenant, sélectionnons le fond blanc de cette fenêtre contextuelle et verrouillons-le afin que nous puissions sélectionner librement le reste des formes et des couches. Nous sommes maintenant prêts à commencer à regrouper les pièces pertinentes. Je vais conserver le texte contenu dans ce champ sur une couche séparée car je prévois de l'animer ultérieurement dans After Effects L'icône de téléchargement, quant à elle, peut être regroupée en une seule unité. Ensuite, pour les petites sections de tâches. Je vais les préparer pour les animations de cases à cocher. Pour ce faire, je vais regrouper l'icône V avec la case verte pour toutes les tâches. Plus tard dans After Effects, j'utiliserai ces couches groupées pour créer l'animation des cases à cocher Pour la barre de progression, je vais la laisser groupée telle quelle, car je n'ai pas l' intention de l'animer. Les numéros ici peuvent également être regroupés. Passons maintenant à la partie supérieure de cette fenêtre contextuelle. Nous allons regrouper la section date, la section avatar, l'icône de sortie, les trois points et le bouton en haut. Le texte ci-dessous est déjà groupé, il n'est donc pas nécessaire de le toucher. Cela signifie que nous avons maintenant fini regrouper toutes les sections pertinentes dans cette fenêtre contextuelle. L'étape suivante consiste à supprimer les couches vides pour tout nettoyer. Cela fait, nous avons terminé de préparer ce panneau. Pour l'instant, allez-y et enregistrez le projet maintenant avant de passer à autre chose. À l'étape suivante, nous traiterons d'un autre design délicat, et celui-ci va être super intéressant, alors restez dans les parages. C'est bon. Maintenant, revenons à Figma et copions le cadre suivant. Nous devons nous préparer à l'animation. Selon notre storyboard, c'est la partie où nous montrons les panneaux d'interface utilisateur des contacts Dans ce cas, nous préparerons le design de manière à pouvoir ajouter ultérieurement de vraies photos d'avatars humains. Donc, si vous suivez, trouvons le bon cadre Figma et copiez-le dans Illustrator Voici la section de contact. Supposons qu'après confirmation avec le client, nous sachions que c'est le cadre que nous devons animer Comme d'habitude, copions-le au format SVG, puis retournons dans Illustrator et créons un nouveau document, veillons à le nommer correctement, puis collons le dessin copié Je vois que ce modèle est légèrement plus haut que les précédents, mais c'est très bien Cela n'interférera pas avec notre flux de travail. Nous allons continuer avec le même processus de séparation des couches. Libérons donc d'abord le masque de découpage , puis dissocions le dessin Maintenant que nous avons décidé que dans cette partie, nous remplacerons les icônes d'Avatar vraies images humaines plus tard dans l'animation, nous garderons cela à l'esprit lors regroupement et de l'organisation de ce panneau d'interface utilisateur. Pour l'instant, il suffit de poursuivre le même processus de séparation des couches. Et pendant que vous le faites, je tiens à vous rappeler quelque chose d'important. Peut-être qu'en ce moment, ce processus semble accablant ou prend trop de temps. Mais n'oubliez pas que vous n'aurez probablement jamais besoin de préparer un si grand nombre de panneaux d'interface utilisateur dans un seul projet. Je le fais exprès pour que vous puissiez vous entraîner avec moi, et plus tard dans la phase d'animation, nous aurons une variété d'exemples de panneaux d' interface utilisateur avec lesquels travailler. Bon, revenons à la leçon. Nous arrivons maintenant à la section intéressante. Verrouillons d'abord la case blanche de cette section. Nous pouvons regrouper cette partie et les deux boutons que nous avons ici sur le côté gauche. Passons maintenant à la section des avatars ci-dessous. J'ai remarqué que toute la section est groupée. La première chose que je vais faire est donc commencer à tout dissocier et à séparer toutes les couches de ce groupe afin que je puisse décider de ce qui doit être regroupé ou non séparer toutes les couches de ce groupe . OK, alors essayons maintenant de regrouper toute cette section. Comme vous pouvez le constater, quelque chose interfère, et c'est la forme qui a été utilisée pour un masque de découpage allons donc la sélectionner et la supprimer du dessin car nous n'en avons pas besoin Maintenant, sélectionnons la section entière et regroupons-la. Passons maintenant à toutes les cases de l'interface utilisateur d'Avatar ci-dessous. Puisque nous voulons ajouter de vraies images à la place des icônes d'avatar, assurons-nous de ne pas sélectionner les formes qui créent l'icône d'avatar ici et de regrouper cette section. Ensuite, nous pouvons désactiver la couche que nous venons de créer afin de pouvoir facilement sélectionner toutes les formes qui créent l' icône Avatar et la regrouper. Nous utiliserons cette forme plus loin dans After Effects comme masque pour les images humaines que nous ajouterons dans cette section. Vous pouvez maintenant placer cette couche au-dessus de la précédente si vous le souhaitez. Mais surtout, répétons ce processus pour le reste des panneaux d' interface utilisateur des avatars que nous avons ici. Nous pouvons d'abord terminer de regrouper toutes les cases principales et les formes relatives à chaque case. Maintenant, au lieu de traiter des icônes d'Avatar, sautons cette partie pour le moment car il sera un peu difficile de trouver les couches que nous devons désactiver pour voir les formes des icônes d'Avatar. Donc, avant de le faire, finissons de regrouper toutes les autres pièces. Et après avoir supprimé les couches vides, nous pouvons facilement trouver les formes d'avatar et les regrouper selon nos besoins. Regroupons maintenant la section des numéros de page en un seul groupe, puis groupons également le bouton sur la gauche. Commençons maintenant à supprimer les couches vides afin de pouvoir naviguer un peu plus facilement dans le panneau des couches. Nous pouvons le faire en utilisant la méthode de sélection inversée. Génial. Nous pouvons maintenant trouver les couches de cases dans le panneau de la couche, et nous pouvons toutes les désactiver afin sélectionner les formes des icônes d'avatar beaucoup plus facilement. Commençons maintenant par les regrouper un par un. Une fois cela fait, plaçons chaque couche d'avatar au-dessus de sa section relative. Enfin, nous pouvons supprimer les couches vides restantes et ensuite enregistrer le fichier sur l'ordinateur. étant dit, nous avons terminé cette leçon, et nous sommes prêts à passer à la suivante où nous traiterons d'un autre cadre figma délicat Ça va être incroyable. Je te verrai dans le prochain. 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. 7. Structurer des panneaux d'interface utilisateur complexes pour l'animation: Je suis de retour. Dans cette leçon, nous allons donc travailler sur une partie où nous voulons montrer une autre animation de démonstration du logiciel. Mais cette fois, l'animation est un peu plus complexe. Selon le storyboard, nous devons travailler sur une scène où nous voyons la section des messages Passons donc d'abord à Figma et trouvons ce cadre ici dans le projet. C'est ici. Dans notre cas, nous devons montrer une animation de la liste de messagerie qui se transforme en chat de messagerie personnel. C'est la section de conversation. À ce stade, essayez de comprendre le flux des panneaux de l'interface utilisateur autant que possible. Examinez les différentes sections à l'intérieur des deux modèles et déterminez quelle sera la meilleure façon d' organiser les couches. Cela vous donnera une idée des couches que vous devez laisser en tant que couches séparées et couches que vous devez regrouper. Avec cette idée en tête, commençons par le premier cadre, qui est la section des messages. Copions-le au format SVG à partir de Figma, puis dans Illustrator, créons un nouveau document Donnons un nom à ce nouveau document. Maintenant, collons le dessin de la figure ici. C'est bon. Alors maintenant, comme d'habitude, retirons toutes les couches du design groupé. Nous pouvons maintenant supprimer la forme utilisée pour le masque de découpage et verrouiller la couche d'arrière-plan gris principale ici afin de pouvoir sélectionner facilement le reste des formes et des couches Nous pouvons déjà supprimer le calque vide et le calque contenant la forme utilisée pour le masque de découpage. Génial. Commençons maintenant par regrouper chaque section de cette conception, en commençant par le menu de gauche. Nous pouvons maintenant regrouper toute cette section ici avec tous les différents onglets, y compris, bien sûr, le cadre blanc situé derrière. M ensuite, groupons les formes et les couches de l'en-tête ici. Et maintenant, commençons par la section principale de cette conception, qui est la liste de messages. Tout d'abord, verrouillons la boîte blanche pour que je puisse sélectionner facilement le reste des objets ici. Maintenant, groupons cette partie, puis groupons le bouton violet ici. Alors maintenant, réfléchissons à nouveau objets qui doivent être regroupés ou non Revenons au design de Figma et essayons de voir ce qui se passe dans le prochain panneau d'interface utilisateur qui doit apparaître dans ce flux de démonstration. D'après ce que j'ai compris, nous devons créer une animation en cliquant sur l'un des contacts, puis un panneau de conversation privé avec cette personne en particulier devrait apparaître accord ? Revenons à Illustrator. Je vais d'abord m' assurer que je n'ai qu'une seule étoile rouge ici. Au cas où je voudrais créer une animation de l'étoile rouge apparaissant pour les autres contacts de la liste. Voyons maintenant ce qui se passe ici avec la boîte située derrière le contact. Je vois que la boîte n'est remplie d'aucune couleur. Et comme je sais déjà que dans After Effects, je vais animer cette boîte en changeant de forme, je pense qu'il vaut mieux remplir toutes les cases en blanc Sélectionnons-les donc un par un et veillons à changer la couleur de remplissage en blanc. Maintenant, nous pouvons facilement les sélectionner tous ensemble et les verrouiller dans le panneau des couches. Nous devons les verrouiller pour pouvoir sélectionner le reste des formes ici. Sans que ces cases n'interfèrent, vous pouvez facilement comprendre quelle couche est sélectionnée en regardant le petit carré sur le côté droit de la couche C'est ainsi que vous savez qu'il s' agit de la couche que vous avez sélectionnée. Nous ne regroupons pas tout ce qui est pertinent pour chaque boîte et chaque contact, car comme nous l'avons déjà vu et compris, nous devons créer une animation de démonstration de cette section. Et dans cette animation, le design de la boîte va changer. Cela signifie que chaque objet appartenant à chaque contact disparaîtra ou changera de position. Par conséquent, la plupart des formes et des couches doivent rester séparées car nous allons les animer dans After Effects. C'est bon. Nous sommes maintenant prêts à regrouper les objets dans chaque section. Et avant de poursuivre, examinons de nouveau le design de Figma afin de savoir si nous avons besoin d' une icône pour qu'elle reste sur des couches séparées D'après ce que je vois ici, je comprends que cette partie avec les trois icônes sur le côté droit doit disparaître lors la transition vers le panneau d'interface utilisateur suivant. Par conséquent, dans Illustrator, nous pouvons réellement regrouper les trois icônes sur une seule couche. Bien entendu, si vous souhaitez créer une animation disparaissant pour chacune des icônes séparément, vous devez laisser chaque icône sur sa propre couche Mais dans notre cas, nous n'avons pas besoin de le faire. Je préfère les faire toutes disparaître d'un seul coup. Une fois cela fait, passons à et réfléchissons à la section suivante du design. Considérons l'icône de l' Avatar ici. Voulons-nous laisser l'icône de l' avatar séparée du point vert ou rouge à côté ? Passons au design de Figma et réfléchissons-y. Je vois ici que la section des avatars ne change pas vraiment, ce qui signifie que je peux regrouper les formes qui créent l'icône de l'avatar et le point à côté en un seul groupe, afin qu'elles soient sur une seule couche. Bien entendu, si vous souhaitez ajouter la photo d'un vrai humain, vous devez séparer l'icône d'avatar du point afin de pouvoir ensuite utiliser l'icône d'avatar comme masque pour l'image que vous ajoutez dans After Effects. Dans notre cas, je ne veux pas ajouter de photos ici, alors regroupons toute cette section. Faisons de même pour le reste des sections d'avatar du design. C'est bon. Je pense donc que nous avons fini de regrouper toutes les couches et tous les objets nécessaires dans le design, et que nous sommes maintenant prêts à commencer à supprimer les couches vides dans le panneau des couches. Je vais accélérer ce processus pour le moment. Non j'ai remarqué qu'au cours du processus, j'ai supprimé l' étoile rouge par erreur. Dans ce cas, je vais copier l'une des étoiles grises, créer une nouvelle couche et coller l'étoile grise ici dans la bonne position. Voici un petit conseil pour aligner l'objet au cas où vous ne souhaiteriez pas créer de nouveau guide. Je place le canevas vers la gauche, là où la deuxième étoile touche la zone grise du panneau de gauche d' Illustrator . C'est ainsi que je sais où placer la première étoile grise. Pour ce qui est de la couleur, je vais la laisser grise, puis créer une animation de changement de couleur en rouge dans After Effects si j'en ai besoin. C'est bon. Et avec cela, nous avons fini de préparer ce design. Je peux maintenant enregistrer ce fichier avant de passer à l'écran suivant. Il nous en reste encore deux, alors restez concentrés. Les deux prochaines seront plus rapides. D'accord. Nous allons maintenant passer au panneau d' interface utilisateur suivant dont nous avons besoin pour préparer l'animation. Revenons à Figma et sélectionnons le cadre approprié, la section de conversation Copions-le tel quel. Revenons maintenant à Illustrator et créons un nouveau document. Donnons à ce document un nom approprié. Nous pouvons également l'appeler messages, car il appartient toujours à la section de messagerie dans laquelle nous allons créer un flux de démonstration du système de messagerie de cette plateforme SAS. Collons maintenant le design que nous avons copié depuis Figma et commençons à travailler dessus Comme toujours, relâchons d'abord le masque de découpage. Ensuite, nous devons dissocier le design. Ensuite, répartissons toutes les couches de ce dessin et déplaçons-les hors de la couche principale. Nous pouvons déjà verrouiller la couche de fond gris et, avant de continuer, supprimer les deux couches situées en dessous. L'un est un calque vide et l'autre est un calque contenant la forme utilisée pour le masque de découpage Commençons maintenant par regrouper les sections, commençant par le menu latéral, qui n'a pas changé par rapport à l'écran précédent. Regroupons ensuite le menu principal ici sur le côté gauche. Regroupons ensuite la section d'en-tête. Commençons maintenant dissection principale de ce panneau d'interface utilisateur Nous pouvons commencer par localiser la boîte blanche, puis regrouper les différentes sections à l'intérieur de ce panneau. C'est bon. Passons maintenant à la section principale, à savoir les boîtes de contacts. Réfléchissons aux formes regrouper et à celles qui ne doivent pas être groupées. Comme la plupart des parties de ce flux de démonstration étaient déjà séparées dans le design précédent, nous pouvons regrouper toutes les formes ou couches que nous sommes certains de ne pas animer ou utiliser dans After Effects Par exemple, puisque nous allons créer une animation de forme morphante pour chaque case de chaque contact, dans cette conception, nous pouvons regrouper l'icône de l'avatar à l'intérieur de la boîte, juste pour l'utiliser comme référence ultérieurement Je ne l'animerai plus car nous l'avons déjà préparé dans le design précédent Maintenant, je vais sélectionner la case et les objets de l'avatar et les regrouper. Faisons-le pour le reste du design. Maintenant, pour le reste des objets à l'intérieur des boîtes, je veux les séparer, car nous devrons créer une sorte d'animation pour eux plus tard dans After Effects. D'accord. Passons maintenant à ce domaine. Nous pouvons regrouper le bouton de date. Maintenant, zoomons et réfléchissons à ce que nous devons faire ici. En attendant, ne le faites pas avec moi. Je voudrais expliquer quelque chose très rapidement. Tout d'abord, si vous souhaitez animer chaque icône ou forme principale séparément, vous pouvez regrouper les formes d'avatar dans un groupe, puis regrouper les formes de message texte dans un autre groupe et enfin laisser le texte temporel sur une couche séparée Bien entendu, nous devrons répéter cette opération pour chaque message de cette section. Mais dans mon cas, je souhaite créer une animation d'introduction pour l'ensemble de la section du message en une seule fois Je vais donc annuler mes actions. Et maintenant tu peux le faire avec moi. Dans notre cas, je vais regrouper toutes ces formes afin d'avoir une couche pour chaque section de message. J'espère que vous comprenez maintenant que le processus de regroupement dépend entièrement de la manière dont vous prévoyez d'animer vos panneaux d'interface utilisateur D'accord. Continuons de le faire pour les quatre prochaines sections de message. Maintenant, arrêtons-nous ici et réfléchissons à ce que nous voulons faire avec les deux derniers messages. Je dis cela parce que je pense que cela peut être une bonne idée de créer une animation de démonstration de la messagerie entre deux contacts. Je vais m'assurer de conserver chaque forme ici sur une couche séparée, car je souhaiterais peut-être créer des animations plus intéressantes pour cette partie. Je vais regrouper les formes d'avatar en une seule couche, puis je laisserai le texte dans la zone de texte sur couches distinctes, car je pourrais modifier le texte plus tard dans le processus d'animation. Je vais également laisser l'heure sur une couche séparée. Il en va de même pour le dernier message. Et ici, je suis sûr que je vais créer une animation de saisie de texte. Je vais donc conserver le texte sur une couche séparée. Maintenant, vérifions la case arrondie qui se trouve derrière. je vois que ce cadre arrondi n'est pas rempli, je vais ajouter un fond blanc, car je sais que je vais animer la forme dans After Effects Une fois cela fait, passons aux trois objets suivants et groupons-les un par un. Ainsi, chaque objet sera sur sa propre couche. Génial. Nous avons donc fini de préparer ce design et nous sommes prêts à commencer à supprimer les couches vides. C'est bon. Tout semble bon. Sauvegardons maintenant ce fichier. Nous avons donc terminé cette conception d'interface utilisateur et nous sommes prêts à passer à la suivante, où nous préparerons le panneau d'interface utilisateur final ou l' écran d'interface utilisateur pour ce projet. Génial. Préparons maintenant le panneau d'interface utilisateur final pour ce projet. Allons sur Figma pour le trouver afin de pouvoir le copier dans Illustrator Selon le storyboard, dans cette partie, nous devons montrer un court flux de démonstration du logiciel où nous présentons l' écran du navigateur de fichiers et démontrons le processus de téléchargement d'un nouveau document Comme vous pouvez le constater, nous avons le panneau principal et une petite fenêtre contextuelle. Tout comme nous l'avons fait la dernière fois que nous avons eu cette situation. Copions d'abord uniquement les couches contextuelles, puis nous reviendrons et copierons l'écran principal. De cette façon, ce sera beaucoup plus facile. Pour préparer ce design dans Illustrator. Nous pouvons trouver le groupe principal de ce design dans les couches Figma Faisons un clic droit dessus et copiez-le au format SVG. Passons maintenant à Illustrator et créons un nouveau document. Nous l'appellerons navigateur de fichiers Screen Eight. Génial. Maintenant, collons le dessin ici. Et pour l'instant, il suffit de le déplacer sur le côté. Ensuite, créons une nouvelle couche puis retournons sur Figma pour copier l'écran principal Nous pouvons désactiver la fenêtre contextuelle pour le moment , puis copier l' intégralité du cadre Figma. De retour dans Illustrator, collons-le sur le nouveau calque que nous avons créé et commençons le processus de séparation de tous les calques avant de commencer à les regrouper. Maintenant que nous avons une couche d' ombre ici, comme dans le design précédent, je vais trouver cette couche dans la pile et la renommer en ombre, afin que nous puissions la retrouver facilement plus tard Très bien, nous pouvons désactiver cette couche pour le moment, puis verrouiller la couche de fond gris principale et enfin supprimer les deux couches situées dessous car nous n'en avons pas besoin. Génial. Commençons donc à regrouper les sections ici, commençant par le menu de gauche. Alors que j'essayais de sélectionner le petit rectangle gris arrondi, j'ai remarqué qu'il y avait une ligne ici dont nous n'avions pas vraiment besoin pour la phase d'animation plus loin dans After Effects. Par conséquent, je vais le sélectionner et le supprimer du dessin. C'est bon. Passons donc à autre chose et groupons cette section de menu. Nous pouvons maintenant placer le menu principal de gauche du logiciel au-dessus de la couche nouvellement créée, sorte que la petite flèche se trouve au-dessus du deuxième élément de menu. C'est bon. Passons maintenant à la section d'en-tête. Mais avant de regrouper l'ensemble de la section, arrêtons-nous une seconde et revenons à Figma pour mieux la comprendre Comme nous voulons créer une animation éclatante lors de l'ajout d'un nouveau fichier dans ce panneau d'interface utilisateur, je pense qu'il est préférable de laisser le bouton violet en tête en dehors du groupe Ce sera le bouton que nous utiliserons pour créer une animation de clic , puis le panneau contextuel permettant de télécharger un nouveau fichier apparaîtra Dans cet esprit, revenons à Illustrator et regroupons abord toutes les formes et couches appartenant à ce bouton violet. Une fois groupés, désactivez cette couche pour le moment afin que nous puissions facilement sélectionner le reste des objets d'en-tête et les regrouper tous ensemble. Génial. Nous pouvons maintenant placer le bouton violet au-dessus du groupe d'en-têtes nouvellement créé, puis passer à la section principale de ce panneau d'interface utilisateur. Comme je suis sûr de vouloir créer une animation d'introduction pour chaque zone de document de cette section, je vais commencer par dissocier une animation d'introduction pour chaque zone de document de cette section, la section et séparer toutes les couches De cette façon, je peux décider quelles formes et couches doivent être regroupées d'une manière adaptée au processus d'animation. C'est bon. Après avoir séparé les couches, j'ai remarqué qu'une forme était utilisée comme masque de découpage Je vais le localiser et le supprimer, afin de pouvoir facilement sélectionner le reste des couches et des objets. Une fois cela fait, je sélectionnerai la section entière et je la regrouperai correctement. Génial. Commençons maintenant à travailler sur la section des boîtes à documents ci-dessous. Lorsque je ne suis pas sûr de ce qui se passe dans la structure, je déplace généralement un peu les objets pour voir quelles couches sont déjà groupées et lesquelles ne le sont pas. Par exemple, dans ce cas, je vois que le trait gris est séparé du remplissage de la case blanche. Dans notre cas, nous n'avons pas besoin qu'ils soient séparés. En fait, je pense également que nous n'avons pas besoin séparer chaque objet de chaque boîte de document. Je peux donc regrouper chaque section en une seule couche. Mais comme je le sais, je vais créer une animation de démonstration pour télécharger un nouveau fichier PNG ou JPEG Je vais m'assurer de séparer les objets de la section de la zone de document PNG De cette façon, j'aurai plus de flexibilité au cas où je souhaiterais faire quelque chose de spécial avec celui-ci ou même dupliquer et remplacer les noms plus tard. Gardons donc cela à l'esprit. Mais pour l'instant, commençons à regrouper chaque section de la boîte de document une par une. Comme nous l'avons dit précédemment, nous allons laisser la section de la zone de document PNG dégroupée pour le moment et passer au regroupement des autres. D'accord. Je suis sûr que je n'aurai pas besoin de créer d'animation spéciale pour les numéros de page. Dans ce cas, nous pouvons simplement sélectionner la section entière et la regrouper. Génial. Maintenant, revenons en arrière et traitons de la section du document PNG non groupé Pour vous faciliter la tâche, nous pouvons commencer par regrouper le trait gris dans la zone de remplissage blanche, puis verrouiller cette couche afin pouvoir sélectionner en toute sécurité tous les objets restants qui forment l' icône du document PNG et les regrouper également. Génial. Passons maintenant au côté droit et vérifions s'il existe d'autres objets que nous pouvons regrouper en une seule couche. Ici, nous pouvons regrouper toute la section avec les icônes Avatar. Quant aux couches de texte, elles sont déjà correctement regroupées sur des couches distinctes, nous n'avons donc pas besoin de les toucher. Nous pouvons les garder tels qu'ils sont. Génial. Nous avons donc fini de préparer l'écran. Nous pouvons maintenant supprimer tous les calques vides du panneau Calques. Génial. Ensuite, réactivons toutes les couches et verrouillons-les afin que nous puissions commencer à travailler sur le panneau contextuel. N'oubliez pas de regrouper la fenêtre contextuelle elle-même au cas où vous souhaiteriez l' aligner rapidement au centre du canevas. C'est bon. Commençons par séparer les couches. Si vous recevez ce message, ne vous inquiétez pas. Cela signifie probablement que vous n'avez pas sélectionné la couche appropriée avant de scinder les couches Pour résoudre ce problème, annulez d'abord l'action. Dégroupez ensuite à nouveau la couche, cliquez pour la désélectionner, sélectionnez-la à nouveau, puis divisez à nouveau les couches Nous pouvons donc clairement décider quelles formes doivent être regroupées dans cette section. D'après ce que je vois, nous pouvons regrouper le trait en pointillé avec le rectangle violet situé derrière Et si nous voulons créer une animation pour cet élément ultérieurement, nous pouvons toujours utiliser les propriétés de contour natives After Effects. Génial. Maintenant, faisons de même avec toutes les formes qui constituent l'icône du dossier. Pour faciliter la sélection, faisons un zoom arrière, trouvons le rectangle blanc de cette fenêtre contextuelle et verrouillons-le. De cette façon, nous pouvons sélectionner en toute sécurité toutes les petites formes qui se trouvent actuellement sur des couches séparées et les regrouper. Ensuite, je vois que chaque ligne de texte se trouve déjà sur une couche séparée, nous allons donc les laisser telles quelles. Examinons maintenant l'icône X et le texte du fichier de téléchargement. Dans ce cas, nous pouvons les regrouper avec le rectangle blanc. Déverrouillons donc le rectangle, sélectionnons toutes ces couches et regroupons-les en une seule. Génial. Nous avons donc terminé de préparer toutes les sections de ce panneau d'interface utilisateur. Nous pouvons maintenant supprimer les couches vides restantes dans le panneau et enfin enregistrer le projet avant de passer à la leçon suivante. Dans cette leçon, nous allons passer en revue tous les designs préparés et y apporter quelques améliorations avant les importer dans After Effects. Ça va être incroyable, alors on se voit là-bas. 8. Affiner la conception avec des coins arrondis: Reviens. Dans cette leçon, nous allons améliorer un peu l'apparence des dessins. Par exemple, nous pouvons commencer par arrondir les angles de tous les panneaux d' interface utilisateur dont nous disposons pour tous les écrans que nous avons préparés pour After Effects Et comme de nombreuses formes sont regroupées, il est préférable d'utiliser l'outil de sélection directe pour sélectionner les coins afin de les arrondir. Sélectionnons donc cette zone, puis maintenons la touche Maj enfoncée et redimensionnons les coins autour de nous jusqu'à, disons, 20 pixels pour le moment. Faisons-le maintenant pour tous les coins de ce design. Nous pouvons sélectionner cette zone, puis passer au coin suivant, maintenir la touche Maj enfoncée et sélectionner également la zone. Ensuite, remontons et tout en maintenant à nouveau la touche Maj enfoncée, sélectionnez également cette zone. Maintenant, réglons la rondeur tous les coins sélectionnés sur 20. Je pense que les coins arrondis sont un peu plus Alors maintenant, une fois que nous sommes satisfaits du nouveau look, n' oublions pas d'appuyer sur Ctrl ou Commande S pour enregistrer le fichier. Génial. Passons maintenant à l'écran suivant et faisons de même. Je vais donc sélectionner les quatre coins ici, puis régler la rondeur sur 20 ou peut-être essayer 30 Je trouve que 30 ans, c'est mieux. Laissons donc les choses comme ça. Sauvegardons la nouvelle mise à jour maintenant. Et avant de continuer, revenons au premier écran et ajustons également les coins à 30. Je tiens à vous montrer ce processus car il peut être un peu difficile de définir la valeur des coins pour les zones où nous avons une forme avec un coin arrondi, c'est assez simple. Il suffit de cliquer sur la forme à l'aide de l' outil de sélection directe , puis de cliquer sur le coin que nous voulons modifier, puis de mettre à jour la valeur du coin. Nous pouvons également faire de même pour ce coin. Faisons de même pour le coin inférieur droit. Et maintenant, voici la partie la plus délicate. Dans les zones où nous avons plusieurs formes ensemble, comme dans cette partie, nous avons la forme blanche de l'en-tête et la forme grise de l'arrière-plan. Nous devons nous assurer de mettre à jour les deux coins des deux formes. Une erreur courante peut se produire lorsque vous sélectionnez les formes puis que vous cliquez sur un point d'angle sans vous rendre compte que vous avez cliqué et sélectionné uniquement le coin de la première forme en ligne Dans ce cas, seul le coin du rectangle blanc de l'en-tête change. Dans ces cas, l'aide de l'outil de sélection directe, sélectionnez les deux formes sans cliquer sur le point d'angle. Passez plutôt directement au réglage de la valeur du coin. Et, bien sûr, après avoir mis à jour tous les coins, n' oublions pas de sauvegarder le fichier. C'est bon. Passons maintenant au troisième écran et ajustons la rondeur des coins. Mais sauvegardons le fichier maintenant et passons à l'écran suivant. Et maintenant, avant de passer à l'écran suivant, je souhaite également masquer toutes les icônes du logo dans la partie inférieure du menu principal. Puisque toute cette zone est groupée, utilisons l' outil de sélection et double-cliquons sur l'une des couches ici jusqu'à ce que nous puissions la sélectionner. Je ne suis pas sûr de ce qui se passe dans cette zone Je vais donc trouver la couche d'ombre et la désactiver pour le moment. Je vois que je peux maintenant sélectionner le reste des formes et des logos. Alors faisons-le. Pour faciliter cette sélection, sélectionnons l'ensemble de la zone, y compris le calque bleu situé derrière, puis maintenons la touche Maj enfoncée et cliquez sur le calque bleu pour le désélectionner Et maintenant, au lieu de les supprimer, désactivons-les dans le panneau des calques. Pour cela, nous pouvons ouvrir le groupe de couches et désactiver les couches sélectionnées. Nous pouvons reconnaître les couches sélectionnées grâce icônes carrées roses situées à côté d'elles. C'est bon. Ça a l'air d'aller bien. Maintenant, nous pouvons quitter le groupe en cliquant quelque part en dehors du dessin pour désélectionner les couches sélectionnées Et avant de passer à l'écran suivant , n'oubliez pas de sauvegarder le fichier. Je vais accélérer ce processus car c'est à peu près le même que ce que nous avons fait sur l'écran précédent. C'est bon. Une fois que nous aurons fini d'ajuster le design, nous pouvons passer à l'étape suivante, où nous allons enfin commencer à importer les designs dans After Effects. Nous avons quelques ressources supplémentaires dans Illustrator que nous utiliserons certainement dans la phase d'animation. Par exemple, nous savons que nous avons une scène dans laquelle nous devons créer une animation de logo afin de pouvoir la préparer dès maintenant. Nous pouvons également créer la palette de couleurs pour ce projet, afin de pouvoir la suivre tout au long du processus d'animation. Mettons-nous donc au travail et préparons ces deux-là très rapidement. Bien entendu, vous n'avez pas besoin de le faire car vous disposez déjà de la palette de couleurs fichiers du logo et du dossier des ressources. Il est très important pour moi de montrer ce processus afin que vous puissiez suivre mon processus lorsque vous travaillerez sur votre vidéo explicative vous travaillerez Et bien sûr, nous pourrions préparer ces fichiers plus tard, une fois que nous aurons déjà commencé l'animation, mais je préfère qu'ils soient prêts le plus rapidement possible. Commençons donc par préparer la palette de couleurs. Pour cela, nous pouvons vérifier dans le projet FiGMA que le client partagé avec nous s'il existe guides de conception ou des actifs de son entreprise plupart du temps, lorsque vous obtenez un projet Figma, vous bénéficiez également de ces ressources de conception Dans notre cas, nous pouvons trouver les couleurs ici dans la section des pages. Maintenant, sélectionnons les couches que nous devons copier Illustrator, puis copiez-les au format SVG Tout comme nous l'avons fait pour les panneaux d'interface utilisateur. Revenons maintenant à Illustrator et créons un nouveau document. Nous pouvons utiliser le modèle de fichier récent et assurer de ne pas oublier de nommer ce fichier. Appelons cela One Point Colors. Nous pouvons maintenant coller les couches de figma et commencer à les préparer. Je vais d'abord réduire ce groupe jusqu'à ce qu'il corresponde à mon document. Ensuite, je vais m'assurer que les couches sont groupées afin de pouvoir aligner l'ensemble de ce groupe au centre du document. Enfin, je vais m' assurer de nommer couleurs de ce calque, car il sera beaucoup plus facile de le retrouver plus tard dans After Effects de cette façon. Une fois terminé, sauvegardons ce fichier et passons à la préparation du logo. ce qui concerne le logo, on peut effectivement le trouver sur l'un des écrans. Comme vous pouvez le voir, nous avons un logo complet ici à l'écran 5. Double-cliquez donc sur le logo et copions les formes pertinentes que nous avons ici. Créons maintenant un nouveau document la même taille et appelons-le simplement logo en un point. Ensuite, collons-le ici, groupons-le, redimensionnons-le et alignons-le sans problème. C'est bon. Maintenant que nous savons que nous allons créer une animation de logo, préparons ce design pour After Effects. C'est-à-dire que nous allons étaler les couches. Mais d'abord, juste pour voir ce que nous faisons, créons un nouveau calque et dessinons un rectangle de la taille du canevas. Et maintenant, remplissez-le d'une couleur différente afin que nous puissions voir clairement sur quoi nous travaillons. Placez cette couche sous le logo. Et si vous le souhaitez, choisissez une couleur plus contrastée pour que le logo ressorte mieux. Enfin, verrouillons cette couche et commençons à préparer le logo. C'est bon. Je vais donc d'abord dissocier les couches, puis sélectionner le texte du logo et l' aligner verticalement au centre du canevas Juste pour être sûr, je vais également regrouper l'icône, afin de pouvoir également l'aligner verticalement sur le canevas, en m' assurant que tout est bien aligné. Une fois que tout est parfaitement aligné, nous pouvons commencer à dégrouper les formes et à les séparer en couches Ici, nous devons libérer le chemin composé. Maintenant, résolvons très rapidement l'étrange problème de remplissage ici. Assurez-vous d'abord de sélectionner toutes les couches problématiques, puis utiliser l' outil Shape Builder pour y remédier. Passez la souris sur la zone problématique, maintenez la touche Alt ou Option enfoncée sur Mac, puis cliquez sur cette zone pour supprimer le remplissage Génial. Commençons maintenant à répartir toutes les lettres dans des calques séparés afin de pouvoir les animer individuellement dans After Effects Une fois cela fait, nommons nos couches afin qu'il soit plus facile de les parcourir ultérieurement dans After Effects pendant la phase d'animation. C'est bon. Et maintenant, sauvegardons ce fichier. Et avec cela, terminez la leçon. Maintenant que tout est prêt pour animation en termes d'éléments de conception vectorielle, nous sommes enfin prêts à ouvrir After Effects et à commencer à importer tout ce que nous avons préparé. C'est ce que nous ferons dans la prochaine leçon. Ça va être génial, alors on se voit là-bas. 9. Importer les designs dans After Effects: Reviens. Dans cette leçon, nous allons importer les dessins dans After Effects et préparer le projet pour l' animation et After Effects. Avant cela, je voudrais prendre la palette de couleurs et les fichiers de logo du dossier AI et les coller dans le dossier des actifs. À mon avis, il s'agit davantage d'actifs généraux que nous utiliserons dans le projet que fichiers d'IA spécifiques préparés pour After Effects. Bien, revenons au dossier AI. Au cas où vous ne m'auriez pas suivi dans la préparation des designs de Figma dans Illustrator, ne vous inquiétez pas Vous pouvez trouver tous ces modèles dans leur état fini et poli les écrans du dossier AE, que vous verrez si vous ouvrez le dossier des actifs situé dans le dossier principal du cours que vous avez téléchargé auprès de moi. D'accord. Ceci fait, ouvrons maintenant Adobe After Effects ensemble. J'utiliserai la version bêta car il s'agit la version la plus récente d' After Effects que j'ai pu obtenir en enregistrant ce cours. Et je souhaite utiliser la dernière version car elle contient des mises à jour très intéressantes, notamment la fonction de décalage des images-clés et des couches que nous allons bien sûr pratiquer ensemble Si vous utilisez une ancienne version d'After Effects, inférieure à la version 2025, ne vous inquiétez pas. Je vais également mentionner comment faire les choses que nous faisons dans la dernière version de votre version. OK. Donc, une fois After Effects ouvert, assurons-nous d'abord que nous sommes tous sur la même longueur d'onde en ce qui concerne la disposition des panneaux. Passons à Window et vérifions-nous que nous avons sélectionné la mise en page par défaut. Si votre mise en page par défaut semble un peu différente, réinitialisez-la car vous avez probablement modifié la position du panneau par le passé. Si vous avez un petit écran, vous trouverez peut-être cette mise en page un peu plus confortable, car vous pouvez voir clairement tous les onglets de la section de droite , comme l' onglet Effets et l'onglet Propriétés. Mais si vous voulez que l'accent soit mis sur la chronologie, vous pouvez saisir le panneau de chronologie et le faire glisser vers le bas ici. Lorsque vous voyez une ligne grise, relâchez le panneau, et maintenant celui-ci sera plus grand, c'est à vous de faire ce qui vous convient le mieux. Et bien sûr, si vous ne voyez pas certains des panneaux importants tels que les panneaux de texte, vous pouvez accéder à Windows et les ajouter à partir d'ici. Par exemple, ajoutons l'onglet paragraphe dans l'onglet personnage. C'est bon. Maintenant, une fois la mise en page terminée, assurons-nous que nous sommes également sur la même longueur d'onde en ce qui concerne les préférences du système. Passons donc aux préférences d'édition, puis à la sauvegarde automatique et réglons l'enregistrement automatique de 20 minutes à 5 minutes. Nous voulons qu'After Effects enregistre automatiquement notre projet par tranches plus courtes, car dans ce type de projet, le système peut se bloquer soudainement Nous voulons donc être sûrs qu'After Effects enregistre automatiquement notre projet toutes les 5 minutes . Passons maintenant à Général et assurez-vous de cocher la case qui centre le point d'ancrage De cette façon, le point d'ancrage de toute forme créée sera automatiquement centré. Une fois que c'est fait, passons à la Médias et cache disque et vérifions-nous que le dossier dans lequel tout le cache temporaire est enregistré lors de l'utilisation d'After Effects se trouve sur un disque dur votre ordinateur qui dispose de beaucoup d'espace libre. Cliquez donc sur Choisir un dossier et assurez-vous que le disque et le dossier dans lesquels vous enregistrez le cache disposent de suffisamment d'espace libre. Sinon, les effets secondaires peuvent agir lentement. Pour la taille minimale du cache disque, vous pouvez la laisser à 46 Go. C'est bon. Passons maintenant au paramètre suivant que nous voulons ajuster, à savoir mémoire et les performances. Dans ce cas, cela dépend beaucoup de votre ordinateur. Si vous constatez que votre RAM installée est inférieure à la mienne, vous verrez probablement des chiffres différents ici. Le plus important est de réduire la RAM réservée aux autres applications. La RAM disponible pour After Effects sera donc plus importante. Génial. Nous avons donc fini ajuster toutes les préférences système nécessaires et nous sommes maintenant prêts à commencer à travailler. Si vous remarquez une petite icône dans le coin supérieur droit de mon After Effects que vous n'avez pas, c'est parce que j'utilise la version bêta, donc ne vous inquiétez pas. C'est bon. Alors maintenant, commençons à travailler. Créons d'abord notre première composition. Nous pouvons l'appeler master comp, et assurons-nous de travailler en résolution Full HD à 30 images par seconde Et maintenant, pour ce qui est de la durée, au cas où vous ne sauriez pas quoi écrire ici, je voudrais vous donner un petit conseil. Tout d'abord, je veux que vous vous rendiez sur le site Web. Vous trouverez le lien dans la description de cette leçon ou dans le document Liens situé dans le dossier des ressources que vous avez téléchargé auprès de moi. OK, donc ce que nous voulons faire, c'est trouver le script que nous avons reçu du client, ou peut-être que nous l' avons créé nous-mêmes. Sélectionnez ensuite tout le texte et copiez-le. Il ne nous reste plus qu'à retourner sur ce site Web et à coller le texte. Il comptera automatiquement les mots. Et comme vous pouvez le voir ci-dessous, il indique le temps qu'il faut pour lire le texte à une vitesse de lecture moyenne. Ce que j'aime faire, c'est vérifier combien de temps cela prendra en mode rapide et en mode lent. Cela me donne la durée minimale et maximale du projet. Maintenant, pour en revenir à After Effects, je sais que ce projet ne prendra certainement pas plus de 2 minutes. Génial. Une fois cela fait, passons à l'onglet Avancé et définissons toutes les valeurs exactement comme je les ai définies. Passons ensuite au moteur de rendu en trois D et assurons-nous que nous utilisons le mode trois D classique. Un dernier ajustement des paramètres que je souhaite faire avant de commencer le projet consiste à réduire la profondeur de bits de ce profondeur de bits plus élevée signifie davantage de nuances de couleurs et des dégradés plus fluides Par exemple, le choix d'une profondeur de bits plus élevée améliore la qualité de l'image, mais nécessite davantage de puissance de traitement et de mémoire, ce qui peut ralentir considérablement les prévisualisations lors du rendu Nous pouvons saisir le paramètre via paramètres du projet de fichier, puis passer à la couleur. Le voici dans les paramètres de couleur. Nous pouvons également y accéder rapidement en cliquant sur l'icône ci-dessous dans le panneau du projet. Réglons la profondeur de bits pour le moment à huit bits par canal afin d'accélérer le flux de travail. Plus tard, avant de rendre le projet une fois que nous aurons terminé, nous pourrons l'agrandir pour obtenir une meilleure qualité de couleur, mais pour le moment, définissez-le sur huit. Génial. Appuyons maintenant sur Ctrl ou Commande S pour enregistrer ce projet, afin que la fonction de sauvegarde automatique soit activée Et, bien sûr, nous pouvons enregistrer manuellement le projet quand nous le voulons pendant le processus. Entrez le dossier principal que vous avez téléchargé pour moi, allez dans le dossier AE et enregistrez le projet que vous êtes en train de créer ici. Dans votre cas, vous verrez probablement un autre fichier ici, le fichier sur lequel j'ai travaillé avec l'animation terminée. Vous pouvez l'ignorer et simplement enregistrer le projet que nous sommes en train de réaliser. D'accord. Commençons maintenant à importer tous les designs d'écran Illustrator dans After Effects tous les designs d'écran Illustrator que nous avons préparés précédemment. Lorsque je travaille sur des projets complexes et multi-scènes, une règle très importante est de veiller à ce que mon projet After Effects soit parfaitement organisé. Dans cet esprit, continuons à travailler et voyons comment appliquer cette règle dans ce cours. Alors maintenant, je veux que vous alliez dans le dossier principal que vous avez téléchargé et que vous entriez dans le dossier AI. J'insiste pour que vous utilisiez les fichiers AI. J'ai préparé ce cours et non les fichiers que tu as enregistrés toi-même. Entrez dans les écrans du dossier AE et utilisez les fichiers contenus dans ce dossier, pas ceux que vous venez d'enregistrer. La raison en est que je veux maintenir un flux constant tout au long leçons sans que vous vous arrêtiez cas où vous auriez oublié quelque chose dans le processus de préparation. Comme je l'ai dit plus tôt, je vais vous présenter toutes les erreurs qui peuvent survenir en cours de route pendant les leçons. Dans ces cas, il suffit d'écouter et de regarder. Mais pour l'instant, veuillez utiliser les fichiers AI finalisés que j' préparés dans les écrans du dossier AE. C'est bon. Donc, la première chose que je veux que nous fassions est d'importer tous les fichiers AI dans After Effects tels quels , sans séparer les couches. De cette façon, nous pourrons utiliser ces écrans ultérieurement comme couches de référence. Maintenant, créons un nouveau dossier dans le panneau du projet et appelons-le screen Designs. Faites glisser tous les fichiers dans ce dossier pour que notre projet reste organisé. Génial. Nous pouvons maintenant enregistrer le projet et commencer à importer les dessins avec toutes les couches séparées comme nous les avons préparés dans Illustrator. Pour cela, nous devons les importer un par un. Commençons par le premier écran. Maintenant, nous devons choisir de l'importer en tant que composition car nous voulons tous les calques contenus dans ce fichier. Ensuite, sous les dimensions du métrage, nous devons choisir la taille de la couche. Voici la différence entre la couche et la taille du document au cas où vous ne le sauriez pas. Taille du document. Chaque couche sera la même taille que le plan de travail original d' Illustrator. Même si le contenu réel est petit, cela peut rendre l'alignement plus difficile. Taille de la couche, les limites de chaque couche sont basées uniquement sur le contenu de cette couche. Cela facilite la mise à l'échelle, l' animation et l'alignement précis des éléments individuels Génial. Cliquez donc sur OK, et voyons que nous avons maintenant une nouvelle composition de l'écran et un nouveau dossier contenant toutes les couches de ce fichier Illustrator. C'est bon. Maintenant, répétons ce processus et importons le reste des fichiers Illustrator dans notre projet After Effects. Un point très important que je veux que vous retiriez de ce cours est que travailler sur des projets complexes n'est pas toujours un processus clair et propre. Au cours du flux de travail, vous trouverez toujours une erreur que vous avez commise plus tôt ou quelque chose que vous avez oublié. Je vais essayer de vous le montrer tout au long du cours et de le rendre aussi réaliste que possible, car dans la vraie vie, nous ne travaillons pas comme des robots. Nous commettons des erreurs, et il est important de savoir comment y faire face. Très bien, une fois que c'est fait, pour que le panneau de projet reste organisé, j'adore cliquer ici sur le type Ainsi, chaque actif que j'ai est trié de manière plus visuelle. Maintenant, pour que notre panneau de projet reste organisé, créons un autre dossier que nous appellerons precomps Nous allons stocker dans ce dossier toutes les précompositions créées au cours du projet Les précompositions que nous avons déjà ici proviennent des conceptions d'écran. Sélectionnons le dossier des précompositions, créons un autre dossier à l'intérieur de celui-ci et Faites ensuite glisser toutes les précompositions des designs d' écran dans ce dossier Pour que notre projet reste encore plus organisé, assurons-nous qu'aucun dossier n'est sélectionné , puis créons un nouveau dossier appelé Screen Designs. Dans ce dossier, faites glisser tous les dossiers contenant les couches d'écran de chaque dessin. Génial Le panneau de projet semble bien meilleur en ce moment. Nous pouvons également ajouter AI au nom de ce dossier. Nous savons donc qu'il s'agit de couches Illustrator. AI est l'abréviation d'Adobe Illustrator. De cette façon, nous pouvons facilement différencier ce dossier de celui dans lequel nous stockerons ultérieurement des designs d'écran Illustrator aplatis Oh, et je viens de remarquer que j'avais une erreur de grammaire, alors je l'ai corrigée. Nous sommes maintenant prêts à poursuivre la leçon. À ce stade, nous pouvons à nouveau enregistrer le projet. Une autre petite chose que j'aime faire est de colorer ma composition principale dans une couleur différente, afin de pouvoir la retrouver facilement plus tard, lorsque je devrai effectuer le rendu du projet final ou naviguer dans le panneau du projet. Nous aurons beaucoup plus de ressources ici plus tard, donc cela peut effectuer le rendu du projet final ou naviguer dans le panneau du projet Nous aurons beaucoup plus de ressources ici plus tard, aider. En parlant d'actifs, allons dans le dossier des actifs et introduisons certains des fichiers que nous utiliserons dans ce projet. Bien entendu, nous finirons utiliser tous les actifs que nous avons ici. Mais pour l'instant, nous n'avons pas besoin de tout importer. Nous pouvons commencer par les ressources que nous utiliserons très prochainement, par exemple la palette de couleurs et le fichier du logo. Commençons donc par le logo. Nous pouvons déjà placer le PreComp nouvellement créé dans le dossier des précompositions, mais pas dans le dossier PreComps de l' écran En ce qui concerne le dossier contenant les couches, nous trouverons une place pour celui-ci plus tard. Très bien, introduisons maintenant la palette de couleurs. Comme nous n'en avons pas besoin sous forme de calques séparés, ce fichier Illustrator n' inclut de toute façon pas de calques séparés. Nous pouvons l'importer sous forme de métrage, ce qui signifie qu'il sera affiché sous forme de fichier Illustrator aplati Je vois que j'ai une étrange boîte blanche en bas. Ils ont probablement été importés de Figma lorsque je les ai copiés au format SVG dans Dans votre cas, vous recevrez mon fichier finalisé, vous ne verrez donc pas ce problème. Pour moi, régler ce problème est très simple. Il me suffit d'ouvrir la palette de couleurs dans Illustrator, sélectionner les formes blanches et de les supprimer. Ensuite, j'appuierai sur GRLS pour enregistrer le fichier car j'ai changé l'emplacement de ce fichier la dernière fois que je l'ai enregistré , je dois le retrouver Il se trouve maintenant dans le dossier des actifs Je vais donc le sélectionner et l'enregistrer par rapport à la version précédente. De retour dans After Effects, la palette de couleurs sera automatiquement mise à jour. Génial. Maintenant, tout semble aller bien. Créons un autre dossier appelé ressources et faisons glisser tous les dossiers contenant des calques Illustrator, ainsi que le reste des ressources que nous utiliserons dans ce projet dans ce dossier, y compris, bien sûr, la palette de couleurs. Maintenant, tout est parfaitement organisé. Sauvegardons le projet, et nous sommes prêts à passer à l'étape suivante où nous allons enfin commencer à travailler sur le projet. Ça va être super amusant. Alors allons-y. Bien, nous allons maintenant créer un autre actif que nous utiliserons certainement dans ce projet Un arrière-plan dégradé animé. Nous pouvons l'utiliser dans certaines scènes ou peut-être même dans toutes les scènes de ce projet. Bien sûr, vous pouvez télécharger des arrière-plans animés prêts à l'emploi à partir de sites Web standard, mais je voudrais vous montrer le moyen le plus utile créer un arrière-plan dégradé animé personnalisé directement dans After Effects et aussi comment l'utiliser intelligemment dans le projet Vous verrez exactement ce que je veux dire dans une minute. La première étape consiste à créer une nouvelle sphère. Pour ce faire, appuyez longuement sur l'outil rectangle et sélectionnez l'outil Ellipse Assurez-vous que le remplissage est réglé sur blanc et que le trait est désactivé. Créez maintenant un cercle proportionnel en maintenant la touche Shift enfoncée tout en dessinant. Pour que nous soyons tous sur la même longueur d'onde, définissez la taille de cette forme sur 500. Si vous utilisez une ancienne version d'After Effects, vous pouvez trouver cette propriété dans les propriétés de la couche. C'est ici. Maintenant, sélectionnons cette couche et revenons à l'outil de sélection afin de pouvoir la déplacer sur le côté. Ensuite, dupliquez le cercle et déplacez-le ici. Faisons-le encore une fois pour en avoir trois au total. Maintenant, sélectionnez les trois sphères et dupliquez-les à nouveau. Déplacez les doublons vers le haut dans la pile de couches et alignez approximativement le tout vers le centre, afin de savoir que le nombre exact de sphères n'est pas important Vous pouvez en créer autant que vous le souhaitez. quoi je veux me concentrer, c'est la technique principale qui sous-tend cette configuration. Maintenant, nous devons commencer à colorer nos sphères. Pour cela, ouvrons le dossier Assets et introduisons le fichier de palette de couleurs dans la scène. Une fois qu'elle est insérée, verrouillez cette couche pour qu'elle ne bouge pas , puis commencez appliquer des couleurs aux sphères. Une fois que vous avez terminé, dupliquez une autre sphère, placez-la quelque part entre les deux et changez de couleur. Répétons ce processus à nouveau pour créer notre dégradé. Génial. Maintenant que toutes nos sphères sont prêtes, nous pouvons désactiver la couche de palette de couleurs et commencer à rendre cette configuration plus intéressante en ajustant l'échelle et la position de chaque sphère. Essayez de faire en sorte que les sphères d'angle soient légèrement plus grandes que les autres. L'objectif ici est de remplir les coins du cadre de sphères plus grandes, tout en gardant l'apparence générale aléatoire autant que possible Génial Nous pouvons maintenant démarrer la phase d'animation de ce dégradé. Pour ce faire, ouvrons la propriété position de l'une des sphères et ajoutons une expression de déplacement très simple Maintenez la touche Alt ou Option enfoncée sur Mac et cliquez sur le chronomètre de position Dans la zone d'expression, tapez wiggle. Entre parenthèses, nous devons ajouter deux valeurs. Écrivons deux pour la première valeur, qui contrôle la vitesse du mouvement. Combien de fois par seconde le mouvement se produira. Pour la deuxième valeur, tapons 30 pour le moment. Cela permet de contrôler la quantité de mouvement en pixels dans toutes les directions. Maintenant, isolons cette couche afin de voir clairement ce qui se passe. Comme vous pouvez le constater, avec ces réglages, la sphère reste essentiellement proche de sa position initiale. Ce que nous voulons, c'est que les sphères parcourent une zone plus large afin que le dégradé continue de changer. Pour ce faire, augmentons la deuxième valeur. Essayez de le régler sur 100 et vous verrez la différence. Ça a l'air mieux, mais maintenant le mouvement semble un peu trop rapide. Dans ce cas, ralentissons le processus en remplaçant le premier chiffre par un. De cette façon, la sphère se déplacera plus lentement, tout en couvrant une grande distance. Je fais ces ajustements ici afin que si vous n'avez jamais utilisé l' expression Wiggle auparavant, vous puissiez clairement comprendre comment elle fonctionne En expérimentant ces valeurs dès maintenant, vous aurez une idée beaucoup plus claire de la manière de contrôler à la fois la vitesse et l'amplitude du mouvement. C'est bon. Ainsi, une fois que nous sommes satisfaits de l'animation, nous pouvons cliquer avec le bouton droit sur la propriété de position d' une sphère et choisir uniquement l'expression de copie. Sélectionnez ensuite le reste des couches et appuyez sur Control V ou Command V sur Mac pour coller l'expression. Comme il s'agit d' une expression ondulée, chaque sphère se déplacera de manière aléatoire Mais voilà le truc. Si toutes les sphères utilisent exactement les mêmes valeurs d'ondulation, l'animation ne semblera pas vraiment aléatoire Pour résoudre ce problème, sélectionnons toutes les autres sphères. Appuyez maintenant deux fois sur la touche E pour ouvrir la zone d'expression, puis modifiez la deuxième valeur de l'expression Wiggle Au lieu de 100, fixons-le à 150 pour ces sphères. De cette façon, certains voyageront plus loin que d'autres, ce qui nous donnera un aspect aléatoire beaucoup plus naturel Génial. Maintenant, ça a déjà l'air mieux, mais laissez-moi vous montrer une petite astuce secrète que peu de gens connaissent. Cela donnera à votre dégradé animé un aspect encore plus dynamique. Créez d'abord un nouvel objet nul, puis associez toutes les sphères à ce zéro. Veillez à ne pas confondre le fouet parent et à ne pas lier le tapis de course. Choisissez Whip. Ils se ressemblent, mais pour cette étape, nous avons besoin du parent et du link pick whip Animons ensuite la rotation de l'objet nul. Au lieu d'ajouter des images-clés manuelles, nous utiliserons une autre expression simple mais puissante Ouvrez la propriété de rotation de la valeur nulle, maintenez l'option Alt enfoncée et cliquez sur le chronomètre, dans le type de zone d'expression Astérisque temporel 100. Cela signifie que le zéro pivotera de 100 degrés par seconde. C'est un peu trop rapide pour notre projet, mais je voulais vous montrer comment cela fonctionne. Ralentissons-le en le remplaçant par T astérisque dix. Désormais, l'ensemble du groupe de sphères tourne en douceur tandis que chaque sphère individuelle continue de bouger indépendamment. Cette combinaison donne au dégradé une sensation de vie. Transformons maintenant cela en un véritable effet dégradé. Pour cela, créez un nouveau calque de réglage. Accédez ensuite au panneau des effets et des préréglages et recherchez Fast Box Blur Faites-le glisser sur le calque de réglage et augmentez le rayon de flou Réglons-le sur 100 pour le moment. Parcourez la chronologie et observez comment les sphères colorées qui se chevauchent se fondent dans un magnifique dégradé changeant C'est une excellente occasion d'ajuster l'échelle et la position des sphères dans la scène. Ce que j'aime faire ici, c'est parcourir la chronologie, vérifier l' apparence de l'animation à différents moments, puis affiner l'échelle et la position des sphères individuelles heure actuelle, comme vous l'avez probablement remarqué, nous n'avons aucun arrière-plan solide dans la scène, ce qui donne au dégradé un aspect incomplet. Pour régler ça. Créons un nouveau solide blanc et plaçons-le sous toutes les couches. Ensuite, activez la couche de palette et recherchez l'effet de remplissage. Appliquez-le sur le solide et choisissez l'une des couleurs les plus claires ou les plus foncées, selon ce qui vous convient le mieux. Cela nous donnera une couleur de fond à fusionner avec nos sphères animées. Personnellement, je vais opter pour une couleur violet vif, que je trouve vraiment jolie. En regardant la configuration maintenant, j'ai remarqué que la sphère en haut à gauche semble un peu trop foncée Je vais donc la changer pour une couleur plus claire. Revoyons un aperçu et voyons à quoi tout ressemble. À ce stade, si vous n'êtes pas satisfait de l'apparence de votre dégradé, essayez de déplacer des sphères. Par exemple, je trouve que cette zone est trop lumineuse, je vais donc faire glisser la sphère beige un peu vers le bas. Vous pouvez continuer à ajuster les positions jusqu'à obtenir une apparence générale équilibrée Un autre ajustement utile consiste à ouvrir les expressions d'ondulation dans les propriétés de position Si vous remarquez que certaines sphères se déplacent trop ou trop peu, modifiez simplement leurs valeurs d'oscillation Ainsi, vous aurez un contrôle total sur le caractère dynamique ou subtil du mouvement de votre dégradé. L'idée clé ici est que cette configuration est flexible. Vous pouvez continuer à affiner les couleurs, l'échelle, les positions et les paramètres de déplacement jusqu'à ce que vous obteniez le dégradé animé qui vous convient Une fois que je serai satisfait de la configuration générale, je pense que nous pourrons améliorer encore l'apparence du dégradé en augmentant le rayon de flou Cela permettra de mélanger les couleurs plus doucement. Et à mon avis, le résultat est bien meilleur. Maintenant que je vous ai montré les différentes étapes à suivre pour affiner vos dégradés, je vais passer quelques instants à recolorer sphères jusqu'à ce que je trouve un look Dans mon cas, je veux que le dégradé penche davantage vers un ton violet plutôt que vers un ton jaunâtre Je vais donc ajuster les couleurs des sphères en conséquence. Très bien, maintenant je suis satisfait du résultat. Avant de poursuivre, copions le nom des effets et collez-le sur le calque de réglage. Nous nous souviendrons donc toujours à quoi sert cette couche de réglage. À ce stade, puisque nous en avons fini avec le dégradé et que nous aimons son apparence, nous ne voulons absolument pas laisser toutes ces couches dans la composition principale. Précomposons-les tous en une seule précomposition. Nous l'appellerons arrière-plan dégradé. Assurez-vous que les deux options sont cochées dans la boîte de dialogue et cliquez sur OK. Maintenant, dans le panneau Projet, faites glisser la précomposition nouvellement créée dans le dossier PreComps pour Je vais également changer la couleur de son étiquette pour revenir à la couleur par défaut de Sandstorm Il est apparu bleu tout à l' heure parce qu'il a été créé dans la composition principale, que j'avais colorée en bleu D'accord. Je veux maintenant vous montrer quelque chose de très important lorsque vous travaillez sur des projets complexes. L'une des principales préoccupations de tels projets est de s' assurer du bon fonctionnement d'After Effects, fois lors de la prévisualisation et lors du rendu Dans notre cas, si vous utilisez la précomposition originale de ce fond dégradé animé tout au long du projet, After Effects sera très sollicité, ce ralentira les aperçus et les rendus finaux Au lieu de cela, nous devons faire rendu de cette animation une seule fois, puis utiliser la version rendue du dégradé partout où cela est nécessaire dans le projet. Laissez-moi vous montrer exactement comment procéder. Commençons par entrer dans la précomposition de cette animation. Ensuite, nous allons définir les paramètres de couleur de notre projet au maximum. À ce stade, je ne veux pas que tu fasses quoi que ce soit. Regardez et écoutez. Je veux vous montrer deux formats différents de haute qualité que vous pouvez utiliser pour le rendu. Le premier est extrêmement lourd, donc je ne recommande pas de l'utiliser, mais je vais vous le montrer afin que vous compreniez la différence entre les formats. Ne vous inquiétez pas, je vous ferai savoir quand il sera temps de revenir en arrière et de me suivre pendant le rendu du deuxième format. Supposons donc que vous sachiez que cet arrière-plan doit absolument être rendu la meilleure qualité possible. Dans ce cas, nous accédons au module de sortie, choisissons QuickTime comme format, puis dans les options de format sous Video Codec, nous sélectionnons soit une animation, soit l'une des résolutions Apple ProRes Pour l'instant, passons à l'animation. Maintenant, je vais choisir un emplacement pour enregistrer ce rendu et appuyer sur le bouton de rendu. C'est bon. Le rendu est terminé. Comme vous pouvez le constater, cela a pris près de 5 minutes. Sur votre ordinateur, cela peut être plus ou moins important en fonction de votre matériel. Mais voici le point important à retenir. Au lieu d'utiliser la précomposition originale de cette animation en dégradé, nous utilisons maintenant le fichier de rendu After Effex gère les séquences beaucoup plus efficacement qu' une précomposition lourde, de sorte que les aperçus et les rendus finaux seront Cependant, comme je l'ai mentionné, ce format est très lourd. Si vous ne disposez pas de beaucoup d'espace libre sur votre ordinateur, vous devriez plutôt le rendre sous forme de fichier MP4 de haute qualité plutôt que de fichier MOV. De cette façon, vous obtiendrez toujours une excellente qualité, mais avec une taille de fichier beaucoup plus légère. Alors maintenant, faisons-le ensemble. Vous pouvez retourner dans After Effects et me suivre pendant que nous effectuons le rendu du deuxième format plus léger. Donc, encore une fois, ouvrons la précomposition d'origine. Cette fois, nous allons changer la profondeur de couleur à 16 bits. Appuyez maintenant sur Ctrl ou Commande plus M pour l'envoyer au Render Q. Dans le module de sortie, choisissez le format h.264 comme format C'est un dossier MP 4. Dans les options de format, vous verrez le débit cible, qui est défini sur 15 mégabits par seconde par défaut Vous pouvez augmenter ce chiffre à 35 ou 45 pour une meilleure qualité, ou si vous préférez, choisissez simplement l'un des modèles prêts à l'emploi qui définit déjà le débit pour vous. Je vais choisir de le rendre dans mon dossier de ressources, mais vous devriez le rendre dans le dossier séparé que je vous ai demandé de créer plus tôt pour vos propres fichiers. Enfin, appuyez sur le bouton de rendu. Une fois le rendu terminé, je supprimerai l'ancien fichier MOV, puis j'importerai la nouvelle version MP 4 de l' arrière-plan dégradé animé dans notre projet. Vous pouvez utiliser le fichier que vous venez de rendre ou celui que j'ai inclus dans le dossier Assets. Génial. Maintenant, comme vous pouvez le constater, le fichier MP four est beaucoup plus léger, mais la qualité est toujours parfaite pour le reste du projet. Si je le place dans la chronologie, il ressemble à la précomposition d'origine. La seule différence est qu' After Effects peut désormais le gérer beaucoup plus efficacement, ce qui permettra de prévisualiser et de rendre le projet final plus rapides et plus fluides C'est ainsi que nous terminons cette leçon. Sauvegardons le projet une fois de plus avant de passer à autre chose. Dans la leçon suivante, nous allons créer le tableau vidéo avant de commencer l'animation proprement dite. Vous verrez pourquoi il est si important de disposer d'un tableau vidéo . Cela va nous faire gagner beaucoup de temps et rendre le processus d'animation beaucoup plus facile. Ça va être incroyable. Je te verrai donc dans le prochain. 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. 10. Création du tableau vidéo pour le timing des scènes: Revenez, nous pouvons maintenant ramener les paramètres de couleur à huit BPC. Nous le ramènerons à 16 lorsque nous aurons terminé cette animation et que nous aurons besoin de rendre la version finale. En attendant, dans cette leçon, nous allons créer le tableau vidéo, qui est une étape très importante dans la création toute vidéo ou animation multi-scènes. Avec la voix off, cela nous aidera à déterminer durée de chaque scène, ce qui sera très utile dans la phase d'animation, afin que nous sachions combien de secondes chaque scène doit durer ce qui sera très utile dans la phase d'animation, afin que nous sachions combien de secondes chaque scène doit Et pour cela, trouvons le storyboard que j'ai préparé plus tôt pour le projet car nous utiliserons les images du storyboard pour créer le tableau vidéo Puisque nous voulons tous les calques, nous pouvons sélectionner la composition, conserver la taille du calque, puis choisir de faire correspondre les styles des calques au métrage. qui n'a pas vraiment d'importance, car nous n'avons aucun style de calque dans ces calques de Photoshop. D'accord, nous pouvons placer le dossier contenant les couches dans le dossier des actifs Passons maintenant à la précomposition que nous obtenons en important le storyboard Pour l'instant, nous pouvons désactiver toutes les couches ici sauf la couche d'arrière-plan, et nous pouvons la verrouiller pour qu'elle n'interfère pas avec le processus. Génial. Maintenant, importons également la voix off dans le projet Que vous obteniez une voix off du client ou que vous la créiez vous-même, peu importe Le plus important, c'est d'avoir n'importe quelle voix off que vous pouvez utiliser lors de la création du tableau vidéo et du démarrage de l'animation du projet lui-même, même s'il ne s'agit que d'une simple voix off créée avec l'IA ou Il est très important de créer une voix off initiale afin de savoir approximativement où chaque scène doit commencer et se Alors maintenant, je vais vous montrer comment le faire totalement gratuitement. Le site web que j'utilise habituellement, que ce soit pour une première voix off ou pour une dernière que j'utiliserai réellement dans le cadre du projet, s' appelle vi point IO Vous pouvez vous inscrire très rapidement à l'aide de votre compte Gmail. Je vais me connecter car je me suis déjà inscrit avec mon compte Gmail. Au moment où j' enregistre ce cours, cette plateforme vous permet de créer quelques minutes de Voiceover gratuitement Peut-être qu'au moment où vous verrez cette leçon, ils auront changé leur package gratuit et celui-ci n'est plus gratuit, mais dans tous les cas, cela ne devrait pas poser de problème car je suis sûr qu'il est très facile de trouver outils gratuits capables de générer deux ou trois minutes de voix off gratuitement J'insiste fortement pour que vous créiez une voix off avant de démarrer l'animation Cela vous évitera beaucoup de révisions et de maux de tête à long terme. D'accord. Donc, une fois que nous sommes connectés au site Web, il est assez facile à utiliser. Je vais cliquer ici pour créer un nouveau projet. Ensuite, je vais choisir la taille de mon écran. Dans mon cas, j'utiliserai la résolution Full HD. Ensuite, pour la couleur de fond, je choisirai le vert, et c'est parce que je vais également créer des légendes dans cette vidéo Lorsque l'arrière-plan est vert, il sera beaucoup plus facile dans After Effects à supprimer dans After Effects à l'aide de l'un des effets de saisie C'est bon. Maintenant, pour créer la voix off, je vais aller dans la section audio et sélectionner la fonction de synthèse vocale Ensuite, je vais passer au script et copier tous les textes que j'ai ici. Ensuite, je vais le coller dans la zone de texte. Et comme vous pouvez le constater, il y a une limite à la quantité de texte que je peux utiliser à la fois. L'étape suivante consiste à choisir la bonne voix pour ma voix off À ce stade, je vais accélérer les choses. Je ne fais que jouer et tester pour trouver le meilleur choix pour ma vidéo. C'est bon. Après avoir testé toutes les voix, j'ai finalement choisi celle qui me plaisait le plus. Je vais maintenant le sélectionner et cliquer sur Générer. Ce processus peut prendre quelques minutes. C'est bon. La voix off est donc Je vais juste changer le nom de ce projet, et maintenant je peux écouter ce que j'ai. Gérer une grande équipe sur plusieurs projets n'est pas chose facile. Trop de tâches, trop de messages. Et avant même de vous en rendre compte, vous êtes plongé dans le chaos, à la recherche d'aide A atteint un point. La plateforme qui simplifie tellement la gestion de projet. Même votre chat pourrait le faire. Avec One Point, vous obtenez une vue d'ensemble parfaitement claire de tout ce sur quoi travaille votre équipe. Tous vos projets, toutes vos tâches, au même endroit. Comme vous pouvez le constater, nous entendons parfois de longues pauses, voire aucune pause. Dans ce cas, je vais ajuster un peu mon texte. En modifiant les signes de ponctuation dans le texte, l'IA modifiera légèrement la version de la voix off Gérer une grande équipe sur plusieurs projets n'est pas chose facile. Trop de tâches, trop de messages. Et avant même de vous en rendre compte, vous êtes plongé dans le chaos, à la recherche d'aide J'ai atteint un point. La plateforme qui simplifie tellement la gestion de projet. D'accord, ça sonne mieux. Mais j'ai décidé de changer la voix off pour un autre artiste. Gérer une grande équipe sur plusieurs projets. Dans ce cas, il me suffit de trouver l'artiste que je veux et de cliquer sur Régénérer Génial. Donc, une fois que je serai satisfait de la voix off, la prochaine chose que je ferai sera d'ajouter des légendes de la voix off dans la vidéo Je fais cela parce que cela m' aide plus tard dans After Effects à comprendre quoi parle la scène, même si je n' entends pas la voix off C'est juste une petite chose que j' aime faire lorsque je travaille sur des projets avec des voix off Ce n'est pas grave si vous ne comprenez pas bien de quoi je parle. Une fois que nous aurons commencé à travailler dessus dans quelques minutes, tout deviendra beaucoup plus clair pour vous. Ici, sur le côté gauche, je peux ajuster le texte si je trouve des erreurs. C'est bon. Donc, une fois que j' aurai maîtrisé les sous-titres, je réduirai la taille de la police et vérifierai à nouveau le tout avant de le télécharger OK, je suis donc prêt à le télécharger. Pour cela, je vais cliquer sur Télécharger et m'assurer que la qualité est réglée sur HD et que les sous-titres gravés sont vérifiés. Je vais maintenant cliquer sur Exporter la vidéo et attendre quelques minutes. Une fois cela fait, je cliquerai sur l'icône de téléchargement et je choisirai de le télécharger sous forme de fichier MP 4, car je veux voir les légendes. Si vous ne voulez pas de sous-titres dans votre voix off, vous pouvez le télécharger sous forme de fichier MP 3 et l'utiliser dans votre projet. D'accord ? Faisons glisser la voix off dans notre projet. Maintenant, intégrons le fichier MP dans notre chronologie et commençons à créer le tableau vidéo. La première chose à faire est supprimer l'écran vert pour voir les sous-titres et les couches du tableau vidéo Pour cela, allons dans le panneau Effets et recherchons l'effet de lumière principal. ne nous reste plus qu'à sélectionner la pipette de la couleur de l'écran et à cliquer sur la couleur verte Génial Commençons donc à créer le tableau vidéo. La première chose que j' aime faire lors la création du tableau vidéo est décaler toutes les images du storyboard, unes après les autres dans la chronologie Pour le faire rapidement, sélectionnons toutes les couches. Passons maintenant à l'image dix et recadrons les couches jusqu'à ce point. Maintenant, pour décaler toutes les couches à la fois, il est important de commencer la sélection à partir de la première couche que nous voulons voir apparaître au début de la chronologie. Dans notre cas, il s'agit de la couche numéro un. Sélectionnez-le, maintenez la touche Maj enfoncée, puis sélectionnez la dernière couche. Maintenant, cliquez avec le bouton droit, accédez à Keyframe Assistant et sélectionnez les couches de séquence, puis cliquez simplement sur OK. Comme vous pouvez le constater, toutes nos couches sont désormais décalées les unes après les autres, à partir de la première couche que nous avons sélectionnée. Il arrive parfois que le premier décalage ne soit pas ce dont vous avez besoin car la durée de chaque couche est trop courte ou trop longue. Dans notre cas, dix images pour chaque couche sont trop courtes, alors annulons ce que nous avons fait et répétons ce processus une fois de plus, mais cette fois, fixons la durée de chaque couche à 1 seconde. Nous pouvons maintenant commencer à ajuster chaque couche en fonction du script. Et comme nous pouvons voir les légendes ci-dessous, nous n'avons même pas besoin d' entendre le script Nous pouvons simplement suivre le texte pour savoir quels cadres doivent être affichés à chaque moment précis. C'est pourquoi j'adore ajouter des sous-titres à mes voix off. Dans le rendu final, je peux simplement désactiver la couche des sous-titres pour ne pas les voir, mais j' entendrai quand même la voix Plus tard, tu comprendras exactement ce que je veux dire. Concentrons-nous maintenant sur le réglage la durée des couches en fonction de la voix off Donc, d'après la voix off, je comprends qu'à ce stade, la première scène doit se terminer et la seconde doit commencer Cela signifie que nous devons ajuster les cadres qui décrivent la première scène jusqu'à présent. Nous pouvons maintenant sélectionner toutes les images qui créent la première scène et raccourcir leur durée. Ensuite, nous pouvons réutiliser la fonction des couches de séquence pour les décaler les unes après les autres sans avoir à les déplacer manuellement. Comme vous le savez peut-être, nous devrons utiliser cette fonction à de nombreuses reprises lors de la création de storyboards ou toute autre animation sur laquelle nous travaillons Maintenant, je veux vous apprendre quelque chose d'important pour devenir un motion designer plus avancé, créer des raccourcis personnalisés pour des actions qui n'en ont pas encore. Par exemple, nous n'avons pas de raccourci pour cette fonction. Je vais donc vous montrer comment créer un raccourci personnalisé pour cela. En profitant de cette opportunité. Je veux vous apprendre le processus de création d'un nouveau raccourci. Vous n'êtes pas obligé de le faire pour cette fonction. Vous pouvez en créer une pour n'importe quelle fonction votre choix, et je vais vous montrer comment faire. Tout d'abord, allez dans Modifier et cliquez sur les raccourcis clavier. Ici, vous pouvez voir que nous utilisons le préréglage par défaut des raccourcis After Effects. Une fois que nous aurons créé un raccourci, cela indiquera que vous utilisez plutôt un raccourci personnalisé. Ensuite, assurez-vous que la langue est définie sur l'anglais. Il ne nous reste plus qu'à taper l'action dans la barre de recherche. Dans notre cas, nous pouvons écrire une séquence. Et si nous faisons défiler la page vers le bas, nous verrons les couches de séquence fonctionner dans la section animation. Pour créer un raccourci, il suffit de cliquer ici à côté du nom dans le menu contextuel et de choisir les touches souhaitées. Nous pouvons démarrer le raccourci avec Ctrl ou Command sur Mac. Nous pouvons maintenant voir toutes les touches disponibles que nous pouvons utiliser, colorées en gris. Ce qui est en violet signifie qu'il est déjà utilisé et que nous ne pouvons pas l'utiliser. Pour ouvrir d'autres touches disponibles, nous pouvons ajouter une autre touche à notre nouvelle combinaison de raccourcis. Par exemple, nous pouvons utiliser la touche Shift avec la touche Ctrl. Maintenant, comme vous pouvez le constater, nous avons beaucoup plus de clés disponibles à utiliser. J'adore utiliser les touches numériques car elles sont plus faciles à mémoriser. Comme vous pouvez le voir, le numéro un est déjà pris, alors utilisons le numéro deux. Une fois cela fait, commençons à sélectionner les images de la première scène, commençant par la première couche, puis en utilisant notre nouveau raccourci , Control Shift 2. Et voilà. Le raccourci fonctionne. Nous pouvons donc maintenant travailler avec les sous-titres de la voix off et comprendre où terminer la dernière image appartenant à la OK. La deuxième scène commence donc ici. Nous pouvons donc maintenant amener la couche sept à ce stade. Voyons maintenant ce que nous avons dans la couche suivante. Si nous lisons les légendes, nous verrons que couche numéro huit ne devrait pas commencer juste après la couche sept D'après les légendes, cette scène devrait commencer à partir de ce moment. Un peu après la septième seconde, cela signifie que la scène représentée dans la couche sept devrait durer jusqu'au début de la couche huit. Voyons ce que nous avons obtenu jusqu'à présent. Gérer une grande équipe sur plusieurs projets n'est pas chose facile. Trop de tâches, trop de messages, et avant même que vous ne vous en rendiez compte, vous vous noyez dans un... Il semblerait que nous ayons tout compris. Il semblerait que nous ayons tout compris En gros, lorsque vous utilisez cette méthode avec les sous-titres, nous n'avons pas le droit à l'erreur Tout est super clair. Passons à autre chose et essayons de le pratiquer une fois de plus. Nous allons maintenant sélectionner toutes les couches après couche huit et les déplacer plus tard dans la chronologie. Ensuite, nous pouvons voir où la scène suivante doit commencer et se terminer. Et avant même de vous en rendre compte, vous êtes plongé dans le chaos, à la recherche d'aide Comme vous pouvez le comprendre, d' après la voix off, lorsque nous entendons « meet one point », nous devons présenter le logo Cela signifie que nous devons commencer la couche 10 un peu plus tôt. Voyons maintenant ce que nous devons faire avant que cela ne se produise. À ce stade, nous voyons, selon les légendes de la voix off, qu'il s'agit d'une scène dans laquelle nous devons présenter la scène de recherche Développons donc le début de la couche neuf. Tout commence donc à partir d' ici. Enfin, nous pouvons étendre la couche huit pour qu'elle se termine à ce stade. Génial. Passons maintenant aux scènes suivantes. OK, voici donc le moment dans la voix off, où l' on parle de la plateforme Dans notre storyboard, c'est la couche où nous voyons le tableau de bord de la plateforme pour la première fois Cela signifie que nous devons commencer la couche numéro 11 à partir de ce moment. Déplaçons toutes ces couches vers la droite pour moment et étendons la scène précédente jusqu'à présent. Maintenant, nous pouvons utiliser la couche 11 pour commencer à partir d'ici. Génial. Alors maintenant, je vois que d'après les légendes de la voix off, la scène du chat devrait commencer à ce moment-là Je vais donc maintenant essayer de situer la scène du chat en partant de quelque part par ici. Cela signifie que nous pouvons étendre la scène précédente jusqu'à présent. OK, j'espère que vous commencez à comprendre l'idée de créer un tableau vidéo avec la voix off et à quel point cela facilite le processus lorsque nous avons des sous-titres en cours de route pour Bien, maintenant continuons et continuons à ajuster les couches du storyboard en fonction du timing de la voix off Dans les cas où les choses se compliquent un peu et que nous n'arrivons pas à adapter les couches à la voix off, j'adore trouver une scène dans laquelle j'ai une animation de texte et l'aligner sur les légendes Comme vous pouvez le voir, nous avons une scène avec une animation textuelle qui indique « N » pour l'image complète. Je vais donc maintenant ignorer tout le reste et continuer regarder les sous-titres pour trouver où commence cette phrase dans la voix off Comme vous pouvez le voir, cela commence quelque part par ici aux secondes 22 ou 23. Maintenant, je vais revenir en arrière et sélectionner toutes les couches à partir de la couche 17 et les faire glisser pour commencer à partir de ce point dans le temps, c' est-à-dire à la fin de la 22e seconde. Maintenant, il ne me reste plus qu'à ajuster le timing fonction des sous-titres pour qu'il s'adapte parfaitement Génial. Maintenant, nous pouvons placer la couche 16 ici à droite et la couche 14 ici à gauche et voir ce qui se passe entre les deux. Je sais qu'au moment de la voix off, lorsque nous entendons un aperçu parfaitement clair, nous devons déjà présenter l'écran d'interface utilisateur du projet Nous pouvons donc commencer cette couche à partir d'ici et la faire glisser vers la droite. Voyons maintenant où nous devons terminer la scène. Je sais que mon image suivante montre la scène de la tâche. Maintenant, je vais lire les sous-titres et voir où commence cette partie dans la voix off Cela commence ici, ce qui signifie que la couche 16 doit commencer ici. Et cela signifie que la couche 15 doit s'arrêter là. Génial. Nous pouvons donc passer aux scènes suivantes, et à partir de maintenant, ce sera super facile car nous avons beaucoup de scènes avec des animations de texte. Cela permet de faire facilement correspondre la voix off à ces scènes pendant que nous lisons les sous-titres Par exemple, pour voir où doit se terminer la scène de questions, il suffit de vérifier les sous-titres de la voix off, là où commence le texte de la scène suivante Comme vous pouvez le voir ici dans les sous-titres de la voix off, nous ne voyons plus Cela signifie que nous pouvons appliquer la couche 17 à ce stade pour le moment. Déplaçons maintenant toutes les couches vers la droite et voyons où commence la scène suivante. Faites attention uniquement aux sous-titres de la voix off. Comme vous pouvez le constater, nous voyons le texte inclus dans chaque projet. Cela signifie qu'à ce stade, nous pouvons commencer la scène suivante et la scène de questions exactement ici. Passons maintenant à la couche 18 pour commencer à partir d'ici. Génial. Et maintenant, pour savoir où cette scène doit se terminer, il suffit de voir où la prochaine scène de texte de question commence la prochaine scène de texte de question en fonction des sous-titres de la voix off Alors maintenant, concentrez-vous sur les légendes uniquement jusqu'à ce que vous voyiez le moment où la question commence Le voici à la 37 ème place. Maintenant, sélectionnons toutes les couches de la couche nommée couche 19, qui présente la scène de questions, puis déplaçons-les toutes pour commencer à partir de la seconde 37. Maintenant, pour savoir où la scène des questions doit se terminer, concentrez-vous uniquement sur les sous-titres de la voix off pour voir où la voix off finit par dire « prendre du retard concentrez-vous uniquement sur les sous-titres de la voix off pour voir où la voix off finit par dire « prendre du retard  ». C'est ici. Élargissez donc le cadre à partir du storyboard de la scène de questions jusqu' à présent. Génial. Cela fait, nous pouvons maintenant sélectionner le reste des couches et les recommencer à la fin de la précédente. Comme vous pouvez le constater, il correspond aux légendes de la voix off et au texte qui doit être affiché dans la scène en ce moment Génial Nous pouvons donc maintenant revenir à la scène précédente avant la question et étendre le cadre jusqu' au point où la scène de question commence. Génial. Alors maintenant, je vois, selon le cadre de mon storyboard, que la scène suivante est une scène de questions Cela signifie que je vais maintenant éviter tout le reste et me concentrer uniquement sur les sous-titres de la voix off pour voir où la voix off répond à voir où la voix off Le voici à la seconde 42. Il ne nous reste plus qu'à rassembler toutes les couches de la couche 21 pour commencer à 42 secondes. Ensuite, nous pouvons étendre couche 20 pour qu'elle se termine à ce moment-là. Alors maintenant, pour voir où se termine la scène des questions, faites attention aux légendes du storyboard pour voir où nous ne voyons plus la question. C'est ici. Déplaçons donc toutes les autres couches pour commencer à partir d' ici, puis terminer la couche 21 à ce stade. Génial Continuons à travailler. Je vois que la scène suivante est parfaitement alignée avec la voix off Puisque le texte que je vois qui doit être présenté dans la scène correspond aux sous-titres de la voix off Maintenant, je continue à me concentrer uniquement sur les sous-titres des voix off et voir de quoi parle la scène suivante Dans ce cas, nous parlons du système de messagerie. Dans notre cas, le début de la scène est correct. Mais maintenant, nous devons trouver où s'arrête cette scène. Pour cela, concentrons-nous sur ce que devrait être la scène suivante selon le storyboard Comme vous pouvez le constater, nous voyons maintenant une scène avec l'écran de l'interface utilisateur du navigateur de fichiers dans laquelle une personne peut partager des fichiers. Dans cet esprit, nous devons maintenant revenir en arrière et concentrer uniquement sur les sous-titres de la voix off et voir où commence la voix off nous concentrer uniquement sur les sous-titres de la voix off et voir où commence la voix off en parlant de cette partie. C'est ici. Comme vous pouvez le constater, la voix off indique le partage, ce qui signifie que la scène du navigateur de fichiers doit commencer à partir d'ici Commençons donc par les couches à partir de maintenant. Génial. Et maintenant, revenons à la partie précédente. D'après le cadre du storyboard, je vois qu'il montre une scène de rappel rapide, et je vois clairement que les légendes ne parlent pas de cette partie Concentrons-nous donc sur les sous-titres de la voix off pour voir où commence la voix off parlant Le voici à la 50e place. Commençons donc par le cadre du storyboard de cette scène. Génial. Nous pouvons donc maintenant étendre la couche 23 jusqu'à ce que la couche 22 commence, puis étendre la couche 22 jusqu'à ce que la couche 23 commence. Alors maintenant, d'après le storyboard, je vois que la scène suivante pose une question Je vais donc maintenant me concentrer sur les sous-titres de la voix off et voir par où la voix off C'est ici. Cela commence alentours de la première minute. Cela signifie que nous devons maintenant sélectionner les couches à partir de la scène des questions et les faire toutes démarrer à partir de la minute. Cela fait, nous pouvons maintenant étendre la couche 24 pour qu'elle se termine à ce moment-là. OK. Passons maintenant à la scène finale. Les cadres du storyboard et les légendes de la voix off semblent parfaitement correspondre, nous n'avons donc rien à faire ici La seule chose que nous pouvons faire, c'est dans la dernière image du storyboard, au moment où la voix off D'accord. Ainsi, une fois le chronométrage terminé, nous pouvons raccourcir la zone de travail jusqu'à la fin de la voix off et vérifier que tout correspond Le storyboard est encadré par la voix off. Jetons donc un coup d' œil à ce que nous avons. Gérer une grande équipe sur plusieurs projets n'est pas chose facile. Trop de tâches, trop de messages, et avant même de vous en rendre compte, vous êtes plongé dans le chaos, recherche d'aide. A atteint One Point. La plateforme qui rend la gestion de projet si simple même votre chat pourrait le faire. Avec One Point, vous obtenez une vue d'ensemble parfaitement claire de tout ce sur quoi travaille votre équipe, tous vos projets, de toutes vos tâches, tout au même endroit. J'ai besoin d'une vue d'ensemble. Chaque projet inclut des tâches détaillées, des sous-tâches et un suivi de la progression en temps réel, afin que rien ne passe entre les mailles du filet Pour savoir qui est en retard, rendez-vous dans l'onglet de votre équipe pour voir l' activité de chacun en un coup d'œil. J'ai besoin de faire un suivi avec quelqu'un. Accédez au système de messagerie intégré où toutes vos conversations sont organisées par contact. Envoyez un rappel rapide ou partagez une mise à jour instantanément. Et oui, le partage de fichiers se fait sans effort. Téléchargez n'importe quel document et toute votre équipe y aura accès immédiatement. Alors pourquoi continuer à lutter ? Rendez-vous sur le site one point.com et simplifiez votre journée de travail dès Gérer une grande équipe Super. Tout semble parfait. Nous sommes maintenant prêts à passer à la leçon suivante où nous allons commencer à animer la première scène Ça va être super amusant. Alors, on se voit là-bas. 11. Le flux de travail de l'animation correct: Reviens. Avant de commencer à animer les scènes, il est important pour moi de vous expliquer le bon flux C'est assez simple à comprendre. Tout d'abord, je veux que tu travailles en macro. Cela signifie que je veux que vous finissiez d'abord d'animer les scènes sans trop entrer dans les détails de conception Le plus important est de commencer par terminer la création d'une bonne animation qui correspond parfaitement à la voix off C'est la partie la plus importante. Ce n'est que lorsque vous l'avez pour toutes les scènes vous pouvez commencer à travailler en micro. C'est-à-dire, entrez dans chaque scène et ajoutez des éléments de conception supplémentaires, puis commencez à colorier et à concevoir les scènes et à ajouter effets spéciaux tels que des flous, des lueurs et des ombres Cette méthode permet non seulement accélérer l'exécution de votre projet et, surtout , de le préparer à adapter l' animation à la voix off, mais elle vous fait également gagner beaucoup de temps à long terme en évitant d'ajuster le design un million N'oubliez donc pas de diviser votre flux de travail en deux parties. Commencez par travailler avec une macro sur les éléments les plus importants, puis commencez à travailler sur Micro pour ajuster les détails de conception. Gardez cela à l'esprit tout au long du cours et faites attention à la façon dont nous allons animer la scène suivante avant finaliser le design de la précédente D'accord ? Nous allons donc commencer cette leçon en créant et en animant la première scène La première chose à faire avant animer une scène incluant une voix off est de voir quelle devrait être la durée de cette incluant une voix off est de voir quelle devrait être la durée de Dans notre cas, après avoir créé le tableau vidéo, nous pouvons clairement voir quand la scène commence et quand elle doit se terminer avant le début de la suivante. Comme vous pouvez le voir, la première scène se termine ici, ce qui signifie que nous avons besoin que l'animation de la scène dure au plus 4 secondes. Connaître la durée d'une scène peut empêcher de nombreux ajustements temporels dans un avenir proche. C'est l'un des avantages importants d'un tableau vidéo. C'est bon. Pour commencer, introduisons d'abord le fichier Voiceover MP four dans le dossier Assets Et maintenant, appuyons sur Ctrl ou Commande N pour créer une nouvelle composition. Appelons cette scène de maquette un. Il existe de nombreuses manières d' animer cette scène. Et cette fois, je voudrais vous donner un petit conseil pour animer des scènes où nous passons à un mouvement latéral, comme nous le faisons dans la première scène Lorsque je m'occupe de ce genre de scènes, j'adore créer une composition large, puis l'animer sur les côtés si nécessaire J'ai abordé cette technique dans mon cours Transition Mastery, dans lequel nous avons appris un tas de méthodes et techniques pour différents types de transitions et dans des vidéos explicatives Très bien, pour avoir une composition large, on peut multiplier la largeur par deux Ensuite, pour la durée, nous pouvons le laisser à 2 minutes pour le moment. Génial. Nous avons donc maintenant une large composition dans laquelle nous pouvons saisir l'intégralité du texte que nous devons animer dans la scène Ouvrons donc le script et copions le texte correspondant. Back and After Effects, sélectionnez l'outil de texte, cliquez une fois pour ouvrir une ligne de texte et collez le texte. Maintenant, ajustons le texte pour l' adapter aux directives de conception de l'entreprise. Dans notre cas, la police principale de l'entreprise est le pop in. En cas de doute, vous pouvez toujours demander au client de confirmer et de vous envoyer la police appropriée afin que vous puissiez l'installer sur votre appareil. Dans notre cas, il s'agit d'une police gratuite que vous pouvez télécharger sur Google Fonts. Vous pouvez également trouver la police dans mes ressources. Si cette police n'est pas installée sur votre appareil, enregistrez le projet, fermez-le et installez la police. Ce n'est qu'après cela que vous pourrez rouvrir le projet et continuer à travailler. Bien, revenons au projet. Je vais trouver la police. Je vais maintenant réinitialiser les propriétés de mon texte. Réglons la taille de police sur 100 pour le moment. Ensuite, assurez-vous que le paragraphe est centré, puis vous pouvez aligner le calque au centre de la composition. Génial. Nous pouvons maintenant commencer à animer la scène. Mais avant cela, supprimons le point que nous avons dans le texte. Dans les vidéos d'animation, il n'est pas courant d'utiliser des points dans les scènes d'animation de texte. Génial Nous pouvons donc maintenant accéder au tableau vidéo et revérifier ce qui doit se passer dans la scène Mon approche pour cette animation sera de diviser le texte en plusieurs parties et de les animer les unes après les autres sans me soucier du timing entre les deux au début Après avoir créé l' animation pour chaque partie, nous allons déplacer les couches et les images-clés pour ajuster le timing Bien, revenons à la scène et commençons préparer pour l' animation. C'est bon. La première chose que nous pouvons faire est donc d'utiliser cette couche comme couche de référence car nous avons besoin quelques animations de type texte différentes. Et c'est une bonne idée de voir où chaque mot doit être placé. Nous pouvons maintenant dupliquer cette couche et verrouiller la référence. Ramenons l'opacité ici à 100. Génial. Maintenant que nous devons créer différents types d'animations pour le texte, commençons à diviser le texte en plusieurs couches distinctes pour chaque partie Pour commencer, dupliquons d'abord notre couche de texte. Assurons-nous maintenant que sur cette couche, nous ne voyons que la première partie du texte. Sélectionnons le texte du multiple du mot jusqu'à la fin de la phrase et supprimons cette partie. Une fois que c'est fait, avant de passer à nouveau à la division du texte, remettons maintenant notre première partie de texte dans la bonne position Dans ce cas, nous devons déplacer cette couche vers la gauche. Ce sera la partie où nous utiliserons animateurs de texte pour animer ce Pour le reste du texte, nous animerons presque chaque mot séparément. Dans cet esprit, sélectionnons cette couche de texte et veillons à supprimer la première partie du texte, y compris le mot multiple. Puisque nous animerons ce mot séparément ultérieurement. OK. Nous pouvons donc maintenant isoler cette couche de texte pour nous concentrer dessus. Maintenant, dupliquons cette couche. Et cette fois, assurez-vous que sur cette couche, nous n'avons que le mot projets. Génial. Ensuite, isolons cette couche et veillons à n'avoir ici que le texte, ce n'est pas facile. Génial Maintenant, ramenons toutes les couches et organisons la position de nos nouvelles parties de texte en fonction de la couche de référence. Bien, à ce stade, nous pouvons sélectionner toutes les couches et centrer leurs points d'ancrage. Pour cela, maintenez la touche Ctrl ou Commande enfoncée et cliquez deux fois sur l'outil AnchorPoint Génial. Passons maintenant à la partie la plus compliquée de cette animation textuelle , à savoir le mot multiple. Sélectionnons cette couche, dupliquons-la, plaçons-la au bon endroit et changeons le texte en texte multiple. Génial. Et maintenant, étiquetons cette couche dans une couleur différente afin de pouvoir différencier les couches plus facilement. Commençons maintenant par cette animation , car c'est la partie la plus complexe de cette scène. Pour mieux nous concentrer sur cette couche, isolons-la et excluons toutes les autres couches à l'exception de la couche de référence. Nous pouvons également l'isoler pour avoir une vision claire de la fin de l'animation finale de ce mot. OK. Nous devons donc maintenant diviser tous les caractères de ce mot en couches distinctes. Il existe un outil payant pour cela au cas où vous souhaiteriez accélérer un peu ce processus. Je vais laisser un lien dans la description. Mais dans mon cas, je ne fais pas ce genre d' animations trop souvent. Je n'ai donc pas besoin de cet outil. Je suis d' accord pour le faire manuellement. Dupliquons donc cette couche sept fois. Donc, au total, nous aurons huit couches, chaque couche pour un caractère de ce mot. Assurons-nous maintenant que chaque couche ne comporte qu'un seul caractère de ce mot. Génial Et maintenant, à l'aide de l'outil de sélection, plaçons toutes les couches dans la bonne position. Génial. Une fois cela fait, nous pouvons commencer à animer les couches Tout d'abord, sélectionnons-les toutes, puis passons à la seconde. Lorsque je ne sais pas quelle doit être la durée de l' animation, je crée généralement une animation d'une seconde. Ensuite, j'ajuste la durée et le timing si nécessaire. OK, maintenant appuyons sur P et créons une image-clé pour la propriété de position pour toutes les couches à ce stade, car nous savons qu'à la fin de leur animation, elles doivent être situées ici Ensuite, passons 15 images plus tôt dans temps et commençons à répartir les couches de manière aléatoire. Cela fait, passons au début de l' animation et plaçons les couches là où nous voulons qu'elles commencent. Dans notre cas, faisons-les ressortir du centre. Amenons-les donc tous approximativement au même endroit. Génial Donc, une fois l'animation de position terminée, passons à autre chose et animons la rotation abord, nous savons qu'à la fin, ils devraient tous ressembler à ce qu'ils sont actuellement . Au milieu de cette animation, nous allons commencer à faire pivoter chaque personnage de manière aléatoire. Enfin, au début de cette animation, nous pouvons copier les dernières images-clés et les coller ici. OK, ça commence à devenir un peu plus intéressant. Alors maintenant, rendons les choses encore plus intéressantes en ajoutant une animation à l'échelle. Au final, l'échelle devrait être la même qu'elle est actuellement. Au milieu de l'animation, fixons l'échelle à 150, par exemple. Et au début, puisque nous voulons créer une animation contextuelle, fixons l'échelle à zéro pour toutes les couches. Génial. Maintenant, assurons-nous qu'aucune couche n'est sélectionnée et appuyons sur vous pour voir toutes les images-clés que nous avons créées et commencer à améliorer le mouvement Tout d'abord, sélectionnons-les et convertissons toutes les images-clés en images-clés Easy Ease Passons ensuite à l'éditeur de graphiques et vérifions-nous que nous utilisons le graphique de vitesse. Maintenant, zoomons un peu pour voir ce que nous faisons et commencer à ajuster la vitesse de l'animation. C'est ajuster la vélocité. Je veux que l'animation démarre rapidement. Sélectionnons donc toutes les images-clés du milieu et déplaçons leurs poignées vers la gauche Maintenant, je veux que les couches planent un peu dans les airs. C'est-à-dire que je veux que l'animation au milieu soit un peu plus lente. Déplaçons donc ces poignées vers la droite. Maintenant, le mouvement ici sera plus lent. Génial. Une fois cela fait, quittons l'éditeur de graphes et continuons à améliorer l'animation. À ce stade, j'aime créer un léger décalage entre les couches. C'est toujours une bonne idée d'avoir plusieurs couches qui font à peu près la même animation. OK, commençons donc par sélectionner toutes les couches après la première et décalons-les de deux images, disons. Maintenant, maintenez la commande du contrôleur enfoncée, cliquez sur la deuxième couche pour la désélectionner et déplacez ces 12 images Faisons-le pour le reste des couches. Comme vous pouvez le constater, ça a l'air mieux. Mais maintenant, je vais annuler mes actions et vous montrer comment retarder les couches beaucoup plus rapidement. Vous pouvez également le faire si vous utilisez la version d' After Effects la plus récente. C'est pourquoi j' utilise la version bêta. Lorsque j'ai enregistré ce cours, cette fonction n'était disponible que dans la version bêta. OK, pour ce faire, nous devons d'abord commencer à sélectionner les couches à partir de la couche avec laquelle nous voulons que le délai commence. Dans notre cas, la première couche que nous devons sélectionner est la lettre M. Ensuite, nous pouvons maintenir la touche Shift enfoncée et sélectionner la dernière couche. Maintenant, maintenez la touche Ctrl Alt enfoncée ou commandez une option sur Mac. Et comme vous pouvez le constater, le curseur prend la de la nouvelle icône de la fonction de temporisation. Cela signifie que nous pouvons maintenant faire glisser les couches vers la droite et obtenir un délai proportionnel. Vous pouvez zoomer et placer l'indicateur de temps sur la première image, puis faire glisser les couches pour placer la deuxième couche ici. C'est ainsi que vous pouvez savoir que le délai est exactement d'une image. Bien entendu, vous pouvez faire le délai que vous voulez. Mais pour cette leçon, suivez ce que je suis en train de faire. Très bien, le délai semble plutôt cool, et maintenant nous pouvons encore améliorer l'animation en ajoutant des mouvements contextuels supplémentaires. Pour cela, créons un nouvel objet nul. Restons maintenant quelque part après la fin de l'animation. Vous pouvez voir où cela se trouve en vérifiant la dernière image clé de la dernière couche. Dans notre cas, c'est quelque part par ici. Placez ensuite le zéro au centre du mot, puis sélectionnez toutes les couches et associez-les au zéro. Maintenant, en utilisant cette valeur nulle, nous pouvons ajouter une animation à échelle secondaire à toutes les couches que nous avons ici. Créons une image-clé avec la valeur actuelle au début Passons ensuite à point situé au milieu de l'animation et redimensionnons le zéro jusqu'à 120, par exemple. Vérifions que ce n'est pas trop. OK, ça a l'air bien. Passons maintenant à un point dans le temps où l'animation est presque terminée et fixons l'échelle à 80. Enfin, passons quelques images une fois l'animation terminée et ramenons l'échelle à 100. Cela créera une animation cool et éclatante. Nous pouvons maintenant facilement simplifier les images clés et voir à quoi cela ressemble. À ce stade, j'adore regarder l'animation plusieurs fois et voir ce que je peux ajuster. À mon avis, nous pouvons apporter l'image-clé finale un peu plus tôt pour obtenir un mouvement plus rapide. Et nous pouvons également utiliser la première image-clé pour commencer, disons, à l'image dix Oui, je pense que c'est beaucoup mieux comme ça. Génial. Nous pouvons donc maintenant continuer à animer les prochaines parties de texte de la scène Avant de poursuivre, nous pouvons étiqueter le zéro avec la même couleur que les multiples couches de texte. Ainsi, nous saurons que toutes ces couches appartiennent à la même partie de texte. C'est bon. Maintenant, animons la première partie du texte. Cela va être beaucoup plus facile car nous allons l'animer à l'aide d' animateurs de texte Au cas où vous ne sauriez pas ce que c'est, je vous conseille vivement de regarder mon cours, text and motion dans lequel j'aborde le monde de l' animation de texte dans After Effects. D'accord. Pour commencer, ouvrons propriétés du texte et ajoutons un nouvel animateur. Commençons par ajouter la propriété position à notre animateur de texte Passons maintenant à notre nouvel animateur et ouvrons le sélecteur de plage Nous pouvons également ouvrir le menu Avancé, que nous utiliserons dans une seconde. Génial. Commençons donc à configurer notre animateur. Voici la propriété de position que nous venons d'ajouter dans la liste. La première chose à faire est de configurer le point de changement pour cet animateur Dans notre cas, je veux que le texte entre par le bas. Par conséquent, mon point de changement se situera quelque part par ici, nous pouvons le régler à 90. Ensuite, pour ce qui est de la forme de notre animateur, assurons-nous de le configurer pour qu'il augmente, car nous voulons que l'animation commence de gauche à droite Ensuite, demandons à l' animateur de déplacer chaque mot plutôt que chaque caractère Nous avons ainsi terminé de configurer l'animateur. Maintenant, pour contrôler cette configuration, nous allons animer la propriété offset Cela fait passer le texte du point de changement de notre animateur à sa forme originale. Du texte. Cela signifie que lorsque le décalage est de -100, le texte sera amené au point de modification défini pour la propriété position de notre animateur Et quand il atteindra 100, le texte retrouvera sa forme originale. OK. Maintenant, assurez-vous d'être au début de l'animation et créez une image-clé pour le décalage à -100 Ensuite, passez au second et réglez le décalage sur 100. Génial. Et maintenant, lorsque nous utilisons des animateurs de texte, nous n'assouplissons pas facilement les images-clés pour contrôler leur Nous pouvons le faire directement d'ici. Une bonne configuration pour un assouplissement agréable consiste à régler E à 20 et Es à 80. Voyons à quoi ça ressemble. Ça a l'air sympa. Pour terminer cette animation, arrêtons-nous au moment où l'animation est complètement terminée et créons un nouveau masque pour cette couche. Ainsi, nous ne verrons pas le texte au début de l'animation. Si nous pouvons encore voir certaines parties du texte au début, nous pouvons modifier le point de changement dans notre animateur Nous avons juste besoin d'ajuster la propriété de position que nous avons ici. Ça a l'air mieux. Génial. Nous pouvons maintenant passer à la partie de texte suivante de cette scène. Nous pouvons animer le mot projet dans le même style d'animation que celui que nous avons utilisé pour la première partie Pour cela, il suffit de copier l'animateur et de le coller sur le calque de texte approprié Nous pouvons faire apparaître cette couche ici pour conserver l'ordre chronologique du texte. C'est bon. Et maintenant, appuyons simplement sur Ctrl+F pour coller l'animateur . Ça a l'air sympa. Avant de poursuivre, restons là où l'animation est complètement terminée et créons également un masque pour cette couche afin d'obtenir la même introduction que le texte précédent. Génial Passons maintenant à la dernière partie du texte de la scène. Pour le rendre un peu plus intéressant, divisons ce texte en deux couches distinctes, un mot par couche, et créons une animation éclatante pour les deux Ensuite, nous pouvons décaler ces couches et obtenir de bons résultats. Avant de les animer, centrons leurs points d'ancrage. C'est bon. Maintenant, sélectionnons-les tous les deux et appuyons sur S pour ouvrir la propriété d' échelle. Créons maintenant la première image-clé pour les deux. Lorsque l'échelle est réglée à zéro. Passons ensuite au cadre 15 et réglons l'échelle à 100. Enfin, déplaçons les dernières images-clés vers l'image 20. Maintenant, placons-nous au milieu de l' image dix et agrandissons-les un peu. Réglons l'échelle à 120. Génial. Maintenant, allégeons facilement les images-clés , puis passons dans l'éditeur de graphes et ajustons les poignées pour que l' animation démarre rapidement, ralentisse au milieu et gagne en vitesse vers la fin Génial. À ce stade, après avoir fini d' animer le texte, avant de passer à autre chose, il est conseillé de travailler avec la voix off et de vérifier si le timing correspond à la narration Passons au tableau vidéo et copions la couche de voix off à partir de là. De retour sur scène. Collons-le ici et voyons ce que nous avons obtenu jusqu'à présent. Nous pouvons désactiver cette couche pour masquer les légendes. Nous n'avons pas besoin de les voir maintenant. Concentrons-nous sur l'écoute de la voix off et le visionnage de l'animation Gérer une grande équipe à plusieurs Gérer une grande équipe à plusieurs. D'accord. Donc, après l'avoir entendu à quelques reprises, je vois que le mot multiple devrait commencer à ce stade. Sélectionnons donc toutes les couches liées à cette partie d'animation de texte et déplaçons-les pour commencer à partir d'ici. À ce stade, j' entends à nouveau la voix et j'essaie de l' ajuster encore plus. Je suis tombé sur plusieurs projets. Je croise plusieurs projets. D'après ce que j'ai compris, notre animation de cette partie dure trop longtemps. Accélérons les choses. Pour cela, ouvrons toutes les images-clés que nous avons pour cette partie d'animation de texte, et assurons-nous maintenant de toutes les sélectionner. Ne manquez pas les images-clés ci-dessous si vous travaillez sur un petit écran OK. Supposons maintenant que l'animation commence à 1 seconde et 15 images et se termine à 2 secondes et 20 images. Restons ici et maintenons la touche Alt ou Option enfoncée sur Mac et faisons glisser la dernière image-clé dont nous disposons jusqu'à présent. Avant de voir ce que nous avons, veillons à ajuster la longueur des couches dès le départ. Cela s'est produit parce que nous avons fait glisser les images-clés vers la gauche tout en raccourcissant la durée de cette animation Maintenant, voyons-le plusieurs fois. Dans le cadre de plusieurs projets. Croisez plusieurs projets. C'est bon. Donc, une fois que c' est fait, passons à la première partie. Vieillissement d'une grande équipe. D'après ce que j'ai entendu, je pense que nous pouvons ralentir un peu cette animation. Ramenons donc la dernière image clé de notre animateur de texte à 1 seconde et à dix images Gérer une grande équipe composée de plusieurs équipes. C'est mieux Nous pouvons commencer la deuxième partie encore plus tôt. Génial. Passons maintenant au mot suivant. Faites équipe sur plusieurs projets. Projet multiple. Je pense que nous pouvons commencer à partir de 2 secondes et cinq images. Projets. Peut-être un peu plus tôt. Eh bien, des projets Simplejects ? Est-ce que c'est le cas. C'est mieux OK. Passons maintenant à la dernière partie du texte en veillant à créer un léger délai pour les deux derniers mots. Jex n'est pas facile. Ce n'est pas facile. Gérer une grande équipe sur plusieurs projets n'est pas chose facile. Trop de textos. D'accord. J'espère qu'en travaillant sur la scène, vous aurez une idée de la façon de créer des scènes principales basées sur du texte. Nous animons d'abord chaque partie, puis ajustons le timing en fonction de la voix off Cette méthode étape par étape vous simplifiera la vie plutôt que de commencer à travailler sur le timing dès le début. Très bien, tout semble parfait. Nous pouvons maintenant supprimer la couche de voix off et commencer à travailler sur la transition pour la scène suivante. Dans notre cas, ce qui déclenche la transition est le point d'exclamation, qui doit apparaître et disparaître tout en révélant l'objet curseur principal que nous avons dans le projet C'est bon. Créons donc d'abord le point d'exclamation Assurez-vous d'utiliser la bonne police pour la taille, vous pouvez la laisser à 100. Ensuite, mettons-le à la bonne position et étiquetons cette couche dans une couleur différente. Maintenant, commençons à l'animer. Tout d'abord, nous savons que cette couche devrait entrer dans la scène à peu près à ce moment-là . Déplaçons-la ici. Nous allons maintenant l'animer en utilisant les propriétés d'échelle et de rotation Créez une image-clé pour la mise à l'échelle et la rotation. Maintenant, appuyez pour voir toutes les images-clés et assurez-vous que l'échelle est réglée sur zéro à ce stade Alors avançons et fixons l'échelle à 100 pour le moment. Faisons maintenant pivoter la couche 180 degrés pour qu'elle soit à l'envers. Ensuite, au milieu de l'animation, agrandissons la couche pour obtenir une belle animation éclatante. Génial Enfin, comme nous devons créer une transition entre cette couche et le curseur, nous pouvons définir la dernière échelle, l' image-clé, à zéro, afin qu'elle disparaisse Ensuite, nous allons commencer l' animation de la sphère à partir d'ici. Pour l'instant, réduisons facilement la rotation des images-clés et veillons à ce que le mouvement commence lentement et prenne de la vitesse vers la fin Ensuite, pour les images-clés de mise à l' échelle, nous pouvons faire démarrer l' animation rapidement, la ralentir au milieu, puis l'accélérer à nouveau à la fin Je trouve que ça a l'air génial. Nous sommes maintenant prêts à travailler sur la dernière partie de la scène, qui consiste à créer l'animation de la sphère. Cette sphère sera notre curseur tout au long de ce projet. Alors, sélectionnons d'abord l'outil de mise en forme. Assurez-vous qu'aucune couche n'est sélectionnée, puis créez une sphère proportionnelle tout en maintenant la touche Maj enfoncée. Réglons la taille sur 60. Et maintenant, avant de poursuivre, je voudrais vous donner un petit conseil. Lorsque vous avez un projet qui inclut une sorte d'animation de curseur ou de sphère comme objet principal, je vous suggère vivement de le précomposer et de le conserver dans une précomposition La raison en est que lorsqu'il est intégré à la précomposition, il sera beaucoup plus facile d' ajuster le design de cet objet ou de créer une animation unique pour celui-ci si nécessaire Ce sera également beaucoup plus facile si vous souhaitez ajouter d' autres couches pour s'adapter à un look spécifique. Vous le comprendrez mieux dans le cours, puisque c'est exactement ce que nous allons faire, nous allons utiliser notre couche d' arrière-plan animée pour colorer cet objet. Pour l'instant, revenons à la scène et commençons à animer cette couche Tout d'abord, commençons par là. Maintenant, placons-le au bon endroit dans la scène. Nous devons le placer au même endroit. Nous pouvons déjà réduire cette pré-composition pour l'obtenir en pleine qualité Plus tard, nous parlerons en détail de la fonction d'effondrement. Mais maintenant, animons cette couche. On peut commencer un peu après l'animation du point d'exclamation Lorsque le point d' exclamation disparaît, nous pouvons utiliser l'échelle pour créer une animation contextuelle d'une seconde. Maintenant, ouvrons la propriété position et créons une jolie animation éclatante Le spectateur se concentre donc cette partie avant de passer à la scène suivante Nous pouvons faire sauter cette couche haut avant de retomber à la fin. Génial. Faisons maintenant en sorte que animation à l'échelle soit rapide car nous voulons qu'elle apparaisse juste avant que le point d' exclamation ne disparaisse. Concentrons-nous maintenant sur l'assouplissement des cadres clés de position. Je vous montre ce processus plutôt que de vous indiquer les paramètres de vélocité finaux car il s'agit d'un flux de travail réaliste. Parfois, nous ne savons pas quel assouplissement convient à l'animation Nous nous adaptons donc en cours de route et essayons de comprendre ce qui convient le mieux. OK, donc maintenant je pense que nous devons déplacer la sphère. Lorsque vous avez déjà positionné des images-clés sur votre couche, n'oubliez pas de vous placer d'abord sur l'une des images-clés Ensuite seulement, alors que toutes les images-clés de position sont sélectionnées, déplacez la sphère là où vous en avez besoin Ce sont des choses très basiques, mais je veux m' assurer que vous ne commettez pas d'erreurs inutiles pendant le cours. D'accord ? Je pense que la position est bonne, mais je pense que l'animation à l' échelle doit démarrer un peu plus vite. Voyons à quoi ça ressemble. C'est mieux Mais la dernière partie semble encore un peu trop lente. De plus, comme vous vous en souvenez peut-être, selon le storyboard et la voix off, cette scène devrait se terminer à la quatrième seconde, et en ce moment nous en sommes presque à la Ouvrons donc les images clés du point d'exclamation et accélérons l'animation Faisons en sorte qu'il dure 20 images. Faisons de même pour l'animation du curseur , puis ajustons le timing. Le moment semble bien choisi, mais je pense que nous pouvons pousser la sphère un peu plus haut avant qu'elle ne tombe. À ce stade, j'ai l'habitude de regarder l'animation plusieurs fois et de faire les derniers ajustements, mais je fais attention à ne pas rester trop longtemps sur une partie. Notre objectif est d'abord de nous assurer que l'animation est bonne et qu'elle correspond à la voix off Nous voulons passer aux scènes suivantes et les terminer toutes. Une fois que tout sera prêt, nous pourrons prendre le temps de peaufiner les touches finales. D'accord, donc une fois que je suis satisfait de l'animation et que je sais qu'elle correspond à la bonne durée, selon le storyboard et le script, nous pouvons recadrer la durée inutile de cette composition heure actuelle, la durée est de 2 minutes, mais la scène se termine aux alentours de la cinquième seconde. Ce que j'aime faire d'habitude, c'est garder une seconde de plus avant de découper la composition Passons donc à la sixième seconde et raccourcissons la zone de travail jusqu'à ce point. Génial. Revenons maintenant à la composition principale et intégrons la première scène dans la chronologie À ce stade, nous devons ajouter animation supplémentaire à cette précomposition afin qu'elle corresponde à ce qui se passe dans la Je préfère procéder de cette façon car je ne veux pas convertir les calques contenus dans la précomposition trois D et les animer avec une caméra. Nous pouvons le faire, et nous le ferons, dans certaines scènes, mais dans de nombreux cas, nous pouvons créer de superbes mouvements dans le design sans trois D. En effet, le rendu des scènes en trois D est beaucoup plus lent que celui des scènes en deux D. Les éviter dans la mesure du possible accélérera notre flux de travail. D'accord. Dans cet esprit, continuons à travailler. abord, nous devons aligner cette précomposition vers la gauche afin pouvoir commencer par le début du texte à l'intérieur Lorsque nous devons créer un mouvement de panoramique latéral, nous utilisons bien entendu la propriété position pour l'animer Je fais généralement correspondre le début de l'animation de position au début de l'animation de la scène, puis je passe au point où l'animation de la scène se termine et je fais glisser la composition de l'autre côté Dans ce cas, nous devons l' aligner sur la droite. Cela nous donne un point de départ solide. Ensuite, nous pouvons facilement simplifier les images-clés et les prévisualiser Pour le moment, l'animation ne correspond pas parfaitement à ce qui se passe dans la scène. Pour résoudre ce problème, nous pouvons travailler sur la vélocité de l'animation de position et ajuster le moment où elle s'accélère. Notre objectif principal ici est d' atteindre le point où le mot multiple apparaît. Cela se produit en ce moment. Nous allons donc modifier les poignées du graphique pour que le mouvement s'accélère au bon moment, en veillant à ce que le mot apparaisse exactement au moment où vous en avez besoin . Pour l'instant, ça a l'air bien. Mais j'ai remarqué que le point d'exclamation dans la sphère commençait trop tard. Revenons à la scène et changeons cette partie un peu plus tôt. J'observe le mot facile et j'essaie de trouver le moment où son animation est presque terminée. Cela semble être le moment idéal pour commencer la dernière partie. Revenons maintenant à la composition principale et voyons à quoi elle ressemble maintenant. Ça a l'air mieux maintenant. Génial. Ensuite, nous pouvons rendre cette animation plus intéressante en ajoutant une animation à échelle lorsque le mot multiple apparaît. Cela se produit quelque part entre la première et la deuxième seconde. Créons donc la première image-clé ici, puis passons à la fin de l'animation contextuelle et ajoutons une autre image-clé à ce moment-là Maintenant, au milieu de cette animation, ajustons l'échelle. Dans un premier temps, essayons de réduire la précomposition à 80. Maintenant, ajustons la vélocité pour qu'elle démarre rapidement, ralentisse, puis reprenne de la vitesse vers la fin. Voyons à quoi ça ressemble. C'est bien, mais je pense que cela sera encore plus beau si nous agissons à la hausse plutôt qu'à la baisse. En raison de cette mise à l'échelle, nous devrons également légèrement la scène vers la gauche au même moment Comme vous l'avez peut-être remarqué, cela crée une nouvelle image-clé. Voyons comment ça se joue maintenant. À ce stade, je veux que la position ralentisse légèrement. Pour ce faire, sélectionnons toutes les images-clés et appuyons sur F neuf pour appliquer Easy Ease par défaut Cela nous donnera une courte pause en mouvement à ce moment précis. Nous pouvons maintenant ouvrir l'éditeur de graphes et affiner la vélocité au début de l'animation de position pour ajouter un mouvement un peu plus intéressant. Une fois de plus, je vous montre le processus brut de création d'un bon mouvement. Ne pensez pas que les concepteurs de motion pro créent une animation parfaite dès le premier essai. Ce n'est pas vrai. Nous ajoutons tous des images-clés , les ajustons et expérimentons jusqu'à ce que nous trouvions quelque chose qui nous convient C'est le processus d'animation naturel et sain. Très bien, tout semble parfait. Pour terminer, je pense que nous pouvons terminer l' animation de position un peu plus tôt, puisque nous avons déjà avancé la dernière partie il y a quelques minutes. Passons de la dernière image-clé à la quatrième et vérifions-la OK, ça a l'air parfait. Avant de passer à l' animation de la scène suivante, réduisons cette précomposition pour vérifier qu'elle n'interférera pas avec l'animation que nous venons de créer réduisons cette précomposition pour vérifier qu'elle n'interférera pas avec l'animation que nous venons Rien ne change ici, car nous n'utilisons que simples calques en deux dimensions sans aucun effet ou trois caméras 3D. Mais plus tard dans le cours, nous verrons des scènes où l'effondrement de la pré-composition fait une différence, et nous approfondirons cela dans ces leçons C'est ainsi que nous avons terminé cette leçon. Nous sommes maintenant prêts à passer à la suivante, où nous allons commencer à travailler sur la scène suivante. Ça va être super amusant, alors je te verrai là-bas. 12. Créer la scène 2 - Animation de la sphère rebondissante: Reviens. Dans cette leçon, nous allons créer la deuxième scène. Passons donc au tableau vidéo pour voir ce qui doit se passer exactement et combien de temps cette scène devrait durer. N'oubliez pas que nous ne voulons pas créer une scène trop courte ou trop longue. Cela posera un problème à long terme car nous devrons ajuster les images-clés et le timing au cas où nous n'aurions pas fait les choses correctement D'accord ? Dans cette scène, nous devons donc présenter un grand nombre de messages et de tâches. Et pour rendre cette scène intéressante, nous devons créer une animation de sphère cool et rebondissante Maintenant, je veux que vous compreniez quelle devrait être la durée de la scène. Pour le calculer, nous devons voir à quelle seconde la scène commence. Dans notre cas, c'est quelque part entre quatre et 15 secondes images. Nous devons maintenant voir où se termine la scène dans notre tableau vidéo. C'est environ la septième seconde. Cela signifie donc que la durée de la scène que nous devons animer devrait durer environ 3 secondes. Je n'ai fait que calculer nombre de secondes entre quatrième et la septième, soit 3 secondes. Cette scène devrait donc durer 3 secondes. Comme nous avons un tableau vidéo très précis qui s'adapte parfaitement à la voix off, nous n'avons même pas besoin d' entendre la voix off et compter la durée de la scène C'est dans cet esprit que nous allons commencer à créer la scène. Tout d'abord, nous devons créer une nouvelle composition. Disons que c'est la scène deux. Assurez-vous d'ajuster les dimensions, puis assurez-vous qu' il s'agit de 30 images par seconde et que la durée est de 2 minutes. Une fois l'animation terminée, nous ajusterons la durée, bien sûr. Génial. Nous devons donc d'abord concevoir la scène et créer ces bulles de message et ces boîtes de tâches. Bien entendu, nous pourrions tout préparer dans Illustrator et l'importer avec le reste des designs. Mais dans mes cours, j' essaie toujours de vous apprendre à concevoir des scènes directement dans After Effects. Pour moi, il est beaucoup plus facile de concevoir des scènes et des effets secondaires, et cela me fait gagner beaucoup de temps. De plus, de cette façon, j'ai beaucoup plus de flexibilité et je peux effectuer toutes les personnalisations et les ajustements en temps réel sans toucher aux fichiers extérieurs Cela dit, commençons à concevoir la première bulle de message, et laissez-moi vous montrer comment le faire très rapidement. Tout d'abord, nous avons besoin d'un message texte. Si vous ne savez pas quoi écrire ou si le client ne vous l'a pas dit, vous pouvez vous rendre sur GPT et lui demander d' écrire quelques messages. C'est exactement ce que j'ai fait. J'ai expliqué sur quoi je travaillais et je lui ai demandé de générer les messages pour moi. J'ai enregistré ce texte sous forme de fichier PDF que vous pouvez trouver dans mon dossier de ressources. C'est ce qu'on appelle des messages aléatoires. Très bien, ouvrons le PDF et copions ce message. Revenons à After Effects, collons-le. Maintenant, ajustons le textyle et la taille. Assurez-vous que le paragraphe est centré et alignez enfin cette couche au centre de la composition. Génial. Et maintenant, créons la bulle de message pour le faire de manière à ce que la taille de la bulle de message s'adapte automatiquement à notre texte. Cherchons l'effet de zone de texte à deux D. Maintenant, pour l'utiliser, il faut double-cliquer dessus. Mais si la couche est sélectionnée, elle ne fonctionnera pas. Assurez-vous donc qu'aucun calque n'est sélectionné , puis double-cliquez sur l'effet. OK. Et maintenant, nous devons nous assurer que la boîte utilise notre couche de texte comme source. Déplaçons le cadre sous la couche de texte. Et maintenant, nous pouvons changer le design de la boîte. Pour le faire rapidement, vous pouvez maintenir la touche Alt ou Option et cliquer plusieurs fois sur le trait jusqu'à ce que vous obteniez l'option sans trait. Maintenant, rendons le remplissage blanc. Changeons la couleur du texte en noir. Et maintenant, comme vous pouvez le voir, nous pouvons ajouter plus de texte, et la zone de texte sera ajustée en conséquence. C'est bon. Concevons maintenant la zone de texte pour qu'elle ressemble à une bulle de message. Nous pouvons régler le rembourrage à 70. Ensuite, nous pouvons arrondir les angles. Réglons-le sur 120. Génial. Maintenant que nous savons que nous aurons besoin d'un plus grand nombre de ces bulles dans la scène, il serait judicieux de précomposer ces couches Appelons deux messages un. Le numéro deux représente le numéro de la scène dans laquelle ce message apparaît. Génial. Alors maintenant, avant de continuer et de dupliquer cette composition, saisissons-la et ajustons Nous n'avons pas besoin que cette maquette soit aussi grosse. Assurez-vous que l'aperçu est coché et ajustez la largeur et la hauteur. Génial. C'est parfait. Passons maintenant au panneau du projet et dupliquons cette précomposition, afin de pouvoir apporter des modifications à l'intérieur du duplicata sans affecter le premier Ouvrons le PDF et copions un autre message. Je vais choisir celui-ci. votre texte est trop déplacé vers la droite, cela signifie que votre paragraphe de texte n'était pas aligné au centre. C'est bon. Revenons maintenant à la scène et introduisons la nouvelle précomposition ici Génial. Nous pouvons le laisser tel quel pour le moment. Commençons maintenant à concevoir la boîte de tâches que nous pouvons voir dans le tableau vidéo. Dans mon cas, j'ajouterai également un message avec l'icône de case à cocher Et pour le faire rapidement, nous pouvons dupliquer la dernière boîte de message que dupliquer la dernière boîte de message nous avons créée et ajuster le design qu'elle contient. Changons le nom en tâche 1. Génial. Passons maintenant à la pré-composition et ajustons le texte et le design Pour les tâches, j'utilise également le GPT pour générer des tâches aléatoires qui peuvent être pertinentes pour mon projet Alors maintenant, allez dans mon dossier Assets et ouvrez un fichier PDF nommé Random Tasks. Copions celui-ci. De retour dans After Effects, remplaçons le texte actuel par le texte de la tâche. Génial. Et maintenant, ajustons le design de la zone de texte. Nous pouvons réduire la rondeur à, disons, 35. Et nous pouvons également ajouter un trait gris à ce dessin, il sera donc différent de la bulle de message. Maintenant, nous devons ouvrir le menu de remplissage et nous assurer qu'il y a l'espace sur le côté gauche pour ajouter l'icône de case à cocher. Nous devons agrandir l' espace ici. Redimensionnons un peu la largeur de cette composition. Génial. Réglons maintenant le rembourrage à gauche à 70 Ça a l'air génial. Ensuite, utilisons l'une des icônes de cases à cocher que nous avons dans nos conceptions d'écran Je pense que c'était dans l'écran des tâches. Saisissons-le et copions la case verte et le trait gris de la case à cocher, car nous pouvons ajouter une animation de case à cocher une fois le curseur atterrit sur ce message lorsque nous créons l'animation rebondissante Commençons par la couche de traits gris, copiez-la, puis passons à notre précomposition des tâches et collez-la ici Alignez-le verticalement au centre de la composition et placez-le sur le côté gauche de la boîte. Ajustons l'échelle en fonction du design. 350 ça a l'air bien. Réduisons cette couche pour l' obtenir en haute qualité. Je vais le déplacer un peu vers la gauche. OK. Ça a l'air bien. Maintenant, apportons l'icône verte de la case à cocher. C'est bon. Ça a l'air parfait. Créons maintenant une autre précomposition de tâches. Pour cela, dupliquons cette pré-composition dans le panneau du projet Entrez maintenant la nouvelle précomposition et modifiez la tâche . Copions celui-ci. Génial. Ensuite, ajustons la position des icônes. Alors maintenant, pour qu' il soit différent des modèles de message, mettons le texte ici en gras. Faisons de même pour la première tâche. Nous pouvons ajuster un peu la position des icônes. OK, ensuite, je pense qu'il vaudrait mieux colorer le trait en noir. Oui, ça a l'air mieux. Faisons de même pour la première tâche. D'accord. Une fois cela fait, nous pouvons fermer toutes ces précompositions et revenir à la composition de scène Apportons ici les deux précompositions de tâches et trouvons une échelle et un emplacement appropriés pour tous les éléments que nous avons Nous pouvons d'abord réduire un peu les précompositions. Réglons l'échelle à 60 pour le moment. Nous pouvons déjà réduire ces précompositions. Et maintenant, trouvons une bonne position pour les messages et les tâches que nous avons ici. À ce stade, j'essaie juste de trouver une composition visuellement équilibrée. J'utilise donc la grille d'action sécurisée pour m'assurer que tout est parfaitement équilibré. Je pense que nous pouvons encore réduire les précompositions . Essayons 50. J'essaie de placer les éléments, afin d'avoir suffisamment d'espace pour ajouter l'animation de sphère gonflable qui doit, à la fin, passer entre les éléments C'est bon. Je pense que je suis bon avec la composition. J'appuierai sur la touche apostrophe pour désactiver le réseau. Maintenant, introduisons la précomposition de l' objet curseur dans la scène et commençons à l'animer D'accord. Donc, d'abord, nous pouvons déjà réduire cette précomposition Et si vous sentez que votre ordinateur est en difficulté, vous pouvez réduire la qualité de l' aperçu. Cela se produit à cause de la réduction des messages et des précompositions de tâches After Effects a du mal à présenter des précompositions complexes basées sur des expressions, comme les zones de texte que nous avons à l'intérieur ces quatre précoms au cas où vous ne vous en rendriez pas compte Les deux effets de zone D que nous utilisons pour nous adapter automatiquement au texte sont adapter automatiquement au texte sont configurés avec des expressions complexes dans C'est l'une des raisons pour lesquelles je dis que l'ajout d'un trop grand nombre d'expressions au projet peut parfois trop grand nombre d'expressions au projet vraiment ralentir votre flux de travail. Bien, revenons au projet. Commençons l'animation du curseur quelque part par ici. Appuyez maintenant sur P et créez l'image-clé de première position au début de la chronologie Maintenant, je ne sais pas combien de temps devra durer toute cette animation. Donc, comme toujours, définissons les images clés toutes les 1 seconde. Plus tard, nous l'ajusterons. D'accord ? Maintenant, abaissez le curseur ici pour qu'il touche la précomposition de la tâche Pour voir ce que nous faisons de mieux, nous pouvons colorer la couleur d' arrière-plan par défaut de la précomposition en gris OK, maintenant bougeons d'une seconde et plaçons le curseur ici. Ensuite, avancez d'une seconde et placez-le pour toucher le premier message précomposé Maintenant, maintenons ce processus jusqu'à ce que le curseur sorte de la scène. Génial. La prochaine chose que j'aime faire lorsque je crée des animations rebondissantes est de courber la trajectoire de position aux points où l'objet doit planer dans les airs Donc, à l'aide de l'outil de conversion des sommets, cliquez une fois sur chaque point que nous avons sur ce chemin Génial. Revenons maintenant à l'outil de sélection et ajustons les poignées des points pour obtenir une bien meilleure courbe. Nous pouvons également activer une courbe ici et ajuster la poignée pour obtenir une trajectoire droite. Super, voyons ce que nous avons. Ça a l'air bizarre pour le moment, mais ça va. Voyons ce que nous devons faire pour qu'il fonctionne mieux. Tout d'abord, simplifions-nous toutes les images-clés et voyons à quoi cela ressemble Comme vous pouvez le constater, nous avons maintenant quelques pauses entre les images-clés C'est mieux, mais il nous reste encore du travail à faire pour vraiment créer ce mouvement rebondissant Pour cela, nous devons accéder au graphique de vitesse et d'abord assurer que les points où le curseur touche les précompositions se produisent très Cela signifie que nous devons déplacer cette poignée vers la droite. Voyons à quoi ça ressemble. Cela semble mieux, mais maintenant nous voulons également que le curseur rebondisse très rapidement Cela signifie que nous devons également démarrer l'animation entrante de la deuxième image-clé très rapidement Et maintenant, comme vous pouvez le voir, nous avons ce mouvement rebondissant. Mais comme vous pouvez le constater, nous avons encore quelques pauses étranges lorsque le curseur passe en l'air Ne t'inquiète pas pour ça. Nous nous en occuperons dans une seconde. Pour l'instant, continuons à faire rebondir tous les points de contact en ajustant les poignées. OK, ça a l'air sympa. Passons maintenant aux moments de pause. abord, vous devez comprendre que cela se produit parce qu'à ce stade, la vitesse est nulle, comme vous pouvez le voir dans la petite boîte jaune. À ce stade, la vitesse du mouvement est 81. Ici, c'est 223. Ici, il y en a plus de 1 000. Tu as compris l'idée. Alors maintenant, ce que nous devons faire, c'est nous assurer que le mouvement à ce stade n'est pas nul. Pour ce faire, nous pouvons augmenter le mouvement sortant, et nous devrons faire correspondre le mouvement entrant exactement à la même vitesse. Mais il existe un moyen de les contrôler tous les deux à la fois. Pour cela, nous devons d'abord les sélectionner tous les deux, puis appuyer sur Control Shift K ou Command Shift K sur Mac. De cette façon, nous allons ouvrir le panneau de vélocité des images-clés. Nous pouvons également ouvrir ce panneau en dehors de l'éditeur de graphes. Pour ce faire, sélectionnez l'image-clé, maintenez la touche Alt ou Option enfoncée sur Mac, puis double-cliquez dessus Vous pouvez également cliquer avec le bouton droit de la souris et sélectionner Keyframe Velocity. D'accord. Revenons maintenant à l'éditeur de graphes. Et une fois que l' image-clé correspondante est sélectionnée, appuyez sur Ctrl Shift K ou Command Shift K sur Mac Et maintenant, il ne nous reste plus qu'à cocher l'option continue. Cela connectera le mouvement entrant et sortant pour cette image-clé, ce qui nous permettra désormais de contrôler à la fois le mouvement entrant et le mouvement sortant Je suggère de régler la vitesse, non pas en faisant glisser la poignée, mais en la déplaçant directement en cliquant sur le point comme ceci Vous pouvez maintenant vérifier votre animation et ajuster la vitesse en conséquence. Ça a l'air mieux. Maintenant, faisons de même pour la deuxième partie où le curseur plane dans les airs C'est bon. Je trouve que ça a l'air génial. Quittons maintenant l' éditeur de graphes et accélérons l'ensemble de l'animation. Faisons-le durer 3 secondes et 15 images. Pour ce faire, sélectionnez toutes les images-clés, maintenez la touche Alt ou Option enfoncée, puis faites glisser la dernière image vers la position de l' indicateur temporel . Voyons à quoi ça ressemble. Passons maintenant à autre chose et rendons la scène un peu plus intéressante en ajoutant une micro-animation aux précompositions des messages et des tâches lorsque le curseur rebondit dessus Ignorons le timing pour le moment et créons d'abord la micro-animation. Pour cela, nous allons utiliser les propriétés de position et de rotation. Commençons d'abord par la position. Faisons en sorte que cette animation dure dix images. Au milieu, baissez un peu la précomposition. Voyons à quoi ça ressemble. OK, ajoutons maintenant une légère animation de rotation. Simplifiez facilement les images-clés et vérifions le mouvement. Ça a l'air cool. Trouvons maintenant le moment idéal pour que ce micromouvement commence. Cela devrait être juste au moment où le curseur atterrit sur ce pré-com. Ça a l'air génial. Faisons de même pour la tâche precom. Cette fois, nous allons le faire pivoter dans le sens inverse. Maintenant, chronométrons cette animation avec le curseur. Génial. Et maintenant, avant de poursuivre, marquons le curseur en jaune. Et faisons de même dans la première scène. D'accord. Nous avons donc terminé l'animation principale qui doit se produire dans cette scène. Pour l'instant, je ne vais pas continuer à m'embêter avec cette maquette en termes de design ou d'ajout d' éléments supplémentaires à la scène Comme je l'ai expliqué plus tôt, nous nous occuperons des touches finales plus tard. Pour l'instant, il y a des choses plus importantes à faire, par exemple vérifier si cela correspond au timing de la voix off. Donc, pour vérifier cela, raccourcissons d'abord la durée de cette scène. Nous pouvons y mettre fin à quatre secondes. Revenons maintenant à la composition principale et travaillons à la transition entre la première scène et la deuxième scène que nous venons de terminer d'animer Mon objectif ici est de réussir une transition harmonieuse. Pour cela, nous devons d'abord trouver le moment où le curseur de la première scène est sur le point de quitter l'écran, puis démarrer immédiatement la deuxième scène. Voici le moment où nous pouvons terminer la première scène. Maintenant, commençons par la deuxième scène et recadrons enfin la première scène pour qu'elle se termine exactement à ce moment-là. Maintenant, vérifions cette partie plusieurs fois pour voir si cela vous convient. Nous devons nous assurer que les deux compositions ne se chevauchent pas Je trouve que c'est beau, mais j'ai un problème avec le curseur la deuxième scène qui plane trop lentement dans les airs après le premier rebond Entrons donc dans la scène et ajustons la vitesse du mouvement à ce moment-là. Génial. Ça a l'air bien mieux maintenant. Cela dit, nous avons terminé la leçon et nous sommes prêts à passer à la suivante, et nous sommes prêts à passer à la où nous allons commencer à créer la scène suivante et bien plus encore. Ça va être amusant . Alors, on se voit là-bas. 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. 13. Créer la scène 3 - Animation de la barre de recherche: Reviens. Commençons cette leçon en travaillant sur la scène suivante. La première chose que nous devons faire avant faire est d' aller sur le tableau vidéo et de vérifier ce que nous devons créer dans la scène et comment elle doit être conçue et animée. De plus, nous devons bien sûr vérifier quelle devrait être la durée de la scène. Comme vous pouvez le voir, cela devrait commencer aux alentours de la septième seconde et se terminer aux alentours de la 11e seconde. Cela signifie que la durée de la scène doit être inférieure à 4 secondes au total. C'est dans cet esprit que nous allons créer une nouvelle composition pour cette scène. Nous pouvons appeler cette scène trois et assurer que tous les réglages sont corrects. Pour le fond, nous pouvons le redéfinir en noir. C'est bon. Et maintenant, le premier et principal objet qui doit figurer dans la scène est la barre de recherche. Si vous vous souvenez, lorsque nous avons préparé le panneau d'interface utilisateur du tableau de bord, nous nous sommes assurés de laisser cet objet sous forme de couche séparée Nous pouvons maintenant ouvrir le panneau de pré-composition du tableau de bord et copier les couches pertinentes à partir d'ici Pour accélérer un peu les choses, il suffit de sélectionner toute la zone contenant les objets de la barre de recherche, puis de maintenir la touche Shift enfoncée et de cliquer sur les couches non pertinentes pour les désélectionner. Vérifions-nous que nous avons sélectionné les couches appropriées. Copions maintenant les couches sélectionnées. Passez ensuite à notre nouvelle composition et collez-les ici. Génial. Voyons maintenant ce que nous avons ici. Comme vous pouvez le constater, après avoir collé les calques, ils ne sont pas organisés dans le bon ordre dans le panneau des calques Au cas où vous ne le sauriez pas, dans After Effects, la sélection joue un rôle important dans cette partie. La première couche que vous sélectionnez apparaît dans la partie supérieure du panneau Calques. C'est ainsi que nous avons sélectionné les couches dans la précomposition du tableau de bord, et c'est pourquoi nous voyons ce résultat ici en ce moment Pour résoudre ce problème rapidement, nous pouvons sélectionner la couche inférieure, car c' est la couche que nous voulons placer au-dessus. Maintenez ensuite la touche Shift enfoncée et sélectionnez la couche supérieure. Appuyez maintenant sur Ctrl ou Commande X pour les couper , puis appuyez sur Ctrl V pour les coller à nouveau ici. C'est une astuce rapide pour réorganiser rapidement vos couches sans le faire manuellement une par une. C'est bon. Et maintenant, commençons à ajuster la scène. Tout d'abord, nous pouvons nous débarrasser de cette icône car nous n'en avons pas besoin ici. Ensuite, assurons-nous que nos objets sont parfaitement alignés au centre de la composition. Pour cela, nous pouvons ouvrir la grille d'actions sécurisées, puis sélectionner toutes les couches et les aligner parfaitement au centre. Ça a l'air génial. Ensuite, nous pouvons également supprimer la couche de recherche car nous allons créer un bouton dans la zone de droite avec un texte de recherche à l'intérieur dans quelques minutes. Continuons à vérifier si nous avons oublié quelque chose ici, car je vois que nous avons trois couches dans le panneau des couches, mais je ne vois que deux objets dans la scène. À ce stade, nous pouvons activer et désactiver les couches pour comprendre ce qui se passe. Comme vous pouvez le voir, j' ai une couche traits qui fait partie du champ de recherche. Dans notre cas, je n'en ai pas vraiment besoin, nous pouvons donc le supprimer dès maintenant. C'est bon. Et maintenant, avant de commencer à animer la scène, redimensionnons très rapidement les objets que nous avons ici Pour cela, il serait judicieux de placer l' icône de recherche dans le champ principal, puis de l'aligner au centre de la composition pour nous assurer qu'elle est parfaitement centrée Nous pouvons maintenant redimensionner la couche de boîte, et l'icône évoluera en même temps. Ça a l'air bien. Maintenant, nous pouvons déjà réduire les couches pour obtenir la meilleure qualité possible et continuer à concevoir cette scène. Puisque nous savons que nous allons ajouter ici une phrase disant « J'ai besoin d'aide ». Sélectionnons l' outil de texte et notons-le ici car nous allons bientôt l'animer. Je vais changer la couleur du texte en blanc, afin que je puisse voir ce que je fais et réglons le poids sur normal. D'accord. Ça a l'air bien. Maintenant, ramenons le texte au noir et placons-le dans le champ de recherche. Nous pouvons réduire légèrement la taille de la police. 35, ça a l'air bien. Génial. Nous sommes donc prêts à commencer à animer la scène. La première chose que nous pouvons animer est l' animation dactylographique du Et pour ce faire, nous utiliserons un effet intégré que nous pouvons trouver dans le panneau des effets et des préréglages Vous pouvez taper machine à écrire dans le champ de recherche, puis utiliser l'effet de console de machine à écrire à curseur clignotant Pour l'utiliser, assurez-vous que le calque de texte est sélectionné, puis double-cliquez sur l'effet pour l'appliquer au calque de texte sélectionné. D'accord. Alors maintenant, comme vous pouvez le voir, le texte commence à s'animer à partir de son centre, ce qui n'est pas ce que nous voulions Nous avons besoin du texte pour démarrer l'animation de la machine à écrire par la gauche, et cela se produit parce que le paragraphe de texte était aligné au centre Dans ce cas, ajustons le paragraphe à gauche et ajustons la position de la couche. Et maintenant, l'animation ressemblera à ce qu'elle devrait être. Appuyons maintenant sur le calque. Et comme vous pouvez le voir ici, nous voyons les deux images-clés qui créent le type animation L'image-clé part de ce moment , car lorsque nous avons appliqué cet effet, nous nous trouvions à ce moment-là Ainsi, si vous n'étiez pas au début de l'animation avant d' appliquer l'effet, déplacez les images-clés pour recommencer depuis le début de la chronologie D'accord. Alors maintenant, faisons en sorte que cette animation dure 1 seconde. Comme vous pouvez le constater, nous avons cette jolie animation de dactylographie et un petit curseur clignotant à côté qui continue de clignoter à l'infini Vous pouvez jouer avec les différentes propriétés de cet effet, si vous le souhaitez. Mais dans mon cas, je vais le laisser tel quel et passer à autre chose. D'accord. Donc maintenant, je ne veux pas que le texte commence à apparaître dans l'animation. Je veux donner un aspect un peu plus réaliste au champ de recherche. Et pour cela, je veux avoir le texte de recherche que nous avons supprimé plus tôt. Laissez-moi vous montrer ce que je veux dire. Revenons au tableau de bord, précomposons, copions la couche de recherche à partir de là, puis collons-la dans notre scène Placez cette couche dans la bonne position et ajustez son échelle à 150, car il s'agit de 150, car il s'agit la valeur d'échelle que nous avons définie pour les autres couches de cette scène. À présent, nous allons placer cette couche sous la couche de texte et l' associer à la zone de recherche blanche. Zoomons un peu pour voir ce que nous faisons et plaçons le texte un peu à gauche. Commençons maintenant la couche de texte 1 seconde après le début de la chronologie. Génial. Maintenant, recadrons la couche de recherche pour la terminer à la seconde. Assurons-nous également de recadrer ce cadre. Et maintenant, si nous prévisualisons ce que nous avons, cela ressemblera davantage un champ de recherche réaliste dont nous savons tous qu'il existe sur Internet. À ce stade, vous pouvez bien entendu modifier le texte ou l' ajuster si vous le souhaitez. Cela n'affectera pas l'animation dactylographique. D'accord. Et maintenant, passons à autre chose et créons le bouton de recherche qui doit se trouver sur le côté droit du champ de recherche. Et il existe un moyen très simple et rapide de le faire. Permettez-moi de fermer toutes les couches du dossier dans le panneau de projet avant de continuer. Bon, maintenant pour créer le bouton, nous pouvons dupliquer le message que nous avons créé plus tôt. Nous allons maintenant changer le nom en un à trois boutons. Le chiffre trois représente la scène dans laquelle ce bouton doit apparaître. Maintenant, entrons cette précomposition et modifions d' abord le texte à rechercher Ensuite, mettons le texte gras et ajustons la largeur de la composition. 450, ça a l'air bien. Trouvons maintenant la couleur correcte avec laquelle la boîte à boutons doit être remplie. Pour cela, passons à précomposition du tableau de bord et ouvrons l'onglet des personnages Utilisons maintenant la pipette pour échantillonner la couleur violette du bouton dans la zone d'en-tête Ensuite, ouvrons la boîte de couleur et copions la balise de cette couleur. Revenons maintenant à la précomposition des boutons, puis sélectionnons la couche de boutons, puis sélectionnons la couche de boutons, ouvrons le remplissage de cette couche et collons la balise que nous avons copiée Enfin, changeons la couleur du texte en blanc. Sauvegardons le projet avant de passer à autre chose. C'est bon. Et maintenant, je veux que nous créions une animation de clic pour ce bouton. Bien entendu, nous pouvons créer une animation à échelle simple pour cela à l'extérieur de la scène principale, mais je voudrais vous apprendre comment, avec une technique très simple, vous pouvez créer une animation par clic beaucoup plus intéressante , utilisée dans de nombreuses vidéos explicatives SAS Avant de commencer l' animation par clic, je tiens à vous faire comprendre que, comme nous utilisons l'effet de zone de texte à deux D, nous ne pouvons pas redimensionner la couche de boutons car elle est connectée par des expressions à la couche de texte présente dans cette composition Par conséquent, nous allons créer l'animation de mise à l'échelle pour la couche de texte, et la boîte à boutons située derrière celle-ci sera animée en conséquence. Si vous nous demandez pourquoi nous ne créons pas une forme régulière pour le bouton au lieu d'utiliser l'effet de zone de texte à deux D, c'est parce que nous savons que plus tard dans le projet, nous aurons un autre bouton avec un texte différent. Par exemple, nous aurons un bouton avec l'annonce textuelle, et il sera beaucoup plus facile d'utiliser l' effet de deux cases en D car la boîte s'ajustera automatiquement au texte. C'est bon. C'est dans cet esprit que nous allons commencer à créer l'animation du clic. Commençons donc par créer une animation à échelle pour le texte. Créez la première image-clé avec la valeur actuelle au début de la chronologie Passons maintenant à 15 images ou peut-être 20 images en avant et créons une autre image-clé avec la valeur actuelle Puis, au milieu de cette animation, réduisons la taille de la couche. Nous pouvons le mettre à 70. Maintenant, allégeons facilement toutes les images-clés et l'aide de l'éditeur de graphiques, déplaçons les poignées vers la gauche Nous allons donc avoir une motion rapide. Je pense que c'est trop lent. Quittons l'éditeur de graphes et faisons en sorte qu'il dure 15 images au lieu de 20 images. Sélectionnez donc toutes les images-clés et tout en maintenant l'option Alter enfoncée, faites glisser la dernière image-clé vers l'image 15 Et maintenant, rendons cette animation de clic beaucoup plus intéressante. Pour cela, sélectionnons d'abord l'outil Ellipse. Maintenant, désactivons le trait. Maintenez la touche Alt ou Option enfoncée et cliquez sur la couleur du trait pour passer d'une option à l'autre jusqu'à ce que vous obteniez l'option du trait désactivé Pour la couleur de remplissage, choisissons le blanc cette fois. Créez maintenant une sphère symétrique. Réglons la taille à 350. Enfin, alignez-la au centre de la composition et remplacez le nom de cette couche par « sweep Bientôt, vous comprendrez quoi servira cette couche. Commençons maintenant à animer cette couche. Tout d'abord, nous allons utiliser la propriété scale. Au début de l'animation, réglez l'échelle sur zéro et créez la première image-clé. Ensuite, déplacez 15 images vers l'avant et réglez l'échelle sur un nombre plus élevé, par exemple 110. Revenez maintenant au début de la chronologie et appuyez sur T pour ouvrir la propriété d'opacité Créez la première image-clé avec une valeur de 100 %. Ensuite, passez à l'image 15 et réglez la valeur sur zéro. Comme vous pouvez le constater, nous avons déjà un aperçu intéressant. C'est bon. Passons à autre chose. Maintenant, simplifions-nous les images-clés et ajoutons-y un mouvement rapide, comme nous l'avons fait pour l' animation à l'échelle du texte, et voyons à quoi cela ressemblera Je pense que l'opacité disparaît trop vite. Nous pouvons ralentir un peu cette animation en sélectionnant les images clés de l' opacité et en appuyant sur F neuf pour réinitialiser l'atténuation de cette animation Je pense que nous pouvons le ralentir encore plus en faisant glisser les deux dernières images-clés vers l'image 20. C'est bon. Maintenant, ouvrons la fonction Trackmat et créons cette couche utilisant le canal Alpha de la couche de boutons. Cela signifie que la sphère ne sera visible que dans la forme du bouton. Revenons à la couche de forme car nous avons besoin de voir le bouton. C'est bon. Et maintenant, comme vous pouvez le voir, plus de l' animation de mise à l'échelle du texte, nous avons une animation de clic très intéressante. Je pense que les choses sont trop claires au début. Pour résoudre ce problème, ouvrons les images-clés de la couche et modifions la valeur de la première image-clé d'opacité à 80 % au lieu de 80 % au lieu Ça a l'air bien mieux. D'accord. Nous pouvons maintenant enregistrer le projet et ajouter ce bouton à notre scène. Réduisons cette pré-composition. Nous pouvons régler l'échelle à 40, réduire la précomposition et la placer ici sur le côté droit . C'est bon. Une fois cela fait, nous devons maintenant chronométrer l'animation cliquable en fonction de l'animation qui se déroule dans la scène. Cela signifie que le clic doit commencer après la fin de l'animation de saisie. Mais comme vous le savez peut-être, nous ne pouvons pas simplement déplacer cette précomposition pour commencer à partir d'ici, car ainsi nous ne la verrons pas au début de l'animation Passons plutôt à la bonne seconde, puis entrons dans la précomposition du bouton, appuyons sur vous pour faire apparaître toutes les images-clés et déplacons-les pour commencer à partir de ce moment De retour dans la scène principale, nous avons maintenant l'animation du clic qui commence juste à temps. Nous pouvons ajuster cela ultérieurement au cas où nous changerions quelque chose dans la scène. Mais pour l'instant, laissons les choses telles quelles. Nous pouvons également réduire la taille de police à 30. Je trouve que ça a l'air un peu mieux. C'est bon. Maintenant, sauvegardons le projet et retournons au tableau vidéo pour voir si nous devons ajouter autre chose dans cette scène. Comme vous pouvez le constater, nous devons créer l'animation du curseur qui tombe dans une sorte d'océan. Pour l'instant, le Dark Ocean n'est qu'un atout de design qui n' est pas essentiel au déroulement de la scène. plus important est de créer l'animation du curseur, car elle doit être synchronisée avec l'animation principale de cette scène, qui est l'ensemble de l'animation du champ de recherche que nous avons créée précédemment C'est la façon de penser que je souhaite que vous adoptiez lorsque vous travaillez sur des projets complexes. Comme je l'ai déjà mentionné à quelques reprises dans ce cours, je veux que vous finissiez toujours animer les éléments importants en premier, plutôt que de vous occuper des éléments de conception qui ne jouent pas un rôle important dans le timing de l'animation principale D'accord. Cela dit, revenons à notre scène et ajoutons-y la précomposition de l'objet curseur Nous pouvons déjà réduire cette précomposition, et commençons à créer l' animation dont elle a besoin Nous devons créer une sorte d' animation du curseur qui tombe, passe sous la barre de recherche et termine en cliquant sur le bouton. Nous pouvons le faire du côté droit ou du côté gauche. Je préfère le faire du côté gauche. Commençons donc l'animation du curseur quelque part par ici. Au début de l'animation, créez l'image-clé de première position. Déplaçons maintenant 1 seconde, un petit zoom arrière et le curseur sur le côté gauche. Encore une fois, avançons encore une seconde et plaçons la sphère quelque part en dessous du champ de recherche. Nous reviendrons sur ce point plus tard. Nous allons suivre cette trajectoire. Pour le moment, nous pouvons placer le curseur quelque part par ici. Ensuite, avançons d'une seconde et plaçons le curseur quelque part autour du bouton, ou nous pouvons le placer sur le bouton. À ce stade, je ne sais pas vraiment à quoi ressemblera exactement mon animation , et c'est parfaitement bien. Mais ce que je sais, c'est que je vais maintenant modifier la trajectoire de position. J' essaie donc de créer le chemin de telle sorte qu' après la courbure, je puisse faire un mouvement agréable pour le curseur Si vous n'avez pas assez d'expérience dans After Effects, cela vous semblera probablement très étrange. Mais au fur et à mesure que vous acquerrez de l' expérience avec les tracés, qu'il s'agisse de tracés de position ou tracés créés à l'aide de l'outil Stylo , vous comprendrez comment les structurer de manière à obtenir, à l' aide des poignées, le chemin qui correspond à votre scène. Commençons donc à tracer le chemin. Pour cela, nous pouvons utiliser l'outil de conversion des sommets ou le raccourci. Maintenez la touche Ctrl et la touche Alt enfoncées et cliquez une fois sur le point. Maintenant que nous obtenons les poignées de courbe que nous pouvons ajuster de manière à ce que le curseur se déplace vers le bas, répétez ce processus pour le reste des points de cette trajectoire de position jusqu'à obtenir une belle trajectoire sinueuse OK, alors maintenant que nous avons l'animation du curseur, je vois qu'il faudra 3 secondes au curseur pour atteindre le bouton. Cela signifie que toutes les animations se produisent avant qu'elles ne se produisent trop rapidement, alors ajustons-les. Tout d'abord, nous pouvons prolonger un peu la durée de l'animation de saisie entre la première et la troisième. Ensuite, entrons dans le bouton de précomposition et déplaçons toutes les images-clés pour commencer à ce moment-là C'est bon. Je pense que c'est bien pour le moment. Continuons donc à travailler. Tout d'abord, nous pouvons étiqueter le curseur avant la composition en jaune, comme nous l'avons fait pour les trois compositions précédentes De cette façon, nous pouvons facilement le distinguer du reste des couches. Et maintenant, à partir de maintenant, créons une animation de clic pour le curseur. Dans ce cas, nous pouvons simplement créer une animation à l'échelle, en mettant le curseur à zéro. Faisons en sorte que cette animation dure dix images et voyons à quoi elle ressemble. D'accord, je trouve que ça a l'air sympa pour le moment, mais je pense que nous pouvons facilement faciliter l'animation de saisie afin qu'elle ne démarre pas de manière linéaire. Simplifiez facilement ces images-clés. Et maintenant, l'animation aura un début et une fin faciles. Sympa. Ça a l'air mieux. Nous pouvons placer le bouton prec sous la couche de texte pour avoir une chronologie plus organisée Maintenant, appuyons sur P sur l'objet curseur et commençons à ajuster l' animation de position que nous avons créée. Pendant ce temps, vous devez comprendre qu' en ajustant l' animation de position, nous devrons peut-être ajuster le reste de l' animation de la scène. Sélectionnons toutes les images-clés et commençons par les simplifier toutes. Maintenant, faisons en sorte que cette sphère entre rapidement en scène. De cette façon, nous obtiendrons un beau mouvement continu par rapport à la scène précédente dans une belle transition assortie. À ce stade, je suis d'accord avec le fait que le curseur s'arrête, car cela permettra de mettre l'accent sur le texte. Et maintenant, à ce stade, je vérifie simplement l' animation et j'essaie me demander si le moment est venu. À mon avis, le texte devrait terminer l'animation de type un peu plus rapidement. À ce stade, je regarde toujours l'animation plusieurs fois jusqu'à ce que je trouve quelque chose qui me convient. À ce stade, nous pouvons déplacer certaines images clés et améliorer un peu le timing. est important de se rappeler que lorsque vous ajustez certaines images clés, vous devez toujours vous assurer que vous ajustez également le reste des images clés liées à cette animation en fonction du nouveau timing Dans notre cas, je dois déplacer l'animation à l'échelle pour commencer à partir d'ici, puis je dois entrer l'animation du bouton et m' assurer que l'animation par clic correspond également au timing extérieur. OK, je pense que ça a l'air un peu mieux maintenant. Et avant de poursuivre, j' ajusterais la poignée de cette image-clé pour que le curseur commence à se déplacer lentement, puis prenne de la vitesse vers la fin Génial. Ainsi, une fois terminé l'animation principale que nous aurons terminé l'animation principale qui doit se produire dans cette scène, nous pouvons passer à la suivante. Dans ce cas, je souhaite créer une animation de mise à l'échelle pour le champ de recherche. Ainsi, après le clic, il couvrira tout le cadre. Ainsi, nous pouvons convertir la couche blanche du champ de recherche en une couche de forme. Cliquez avec le bouton droit de la souris pour créer et sélectionnez Créer des formes à partir d'une couche vectorielle. Cela nous permettra de modifier la forme de cet objet de design comme si nous l'avions créé à l'aide de la forme ou de l'outil Stylo. Et comme le calque d'origine a été créé dans Illustrator, il se peut que le calque de forme nouvellement créé comporte certaines propriétés dont nous n'avons pas besoin. À ce stade, n'hésitez pas à étudier comment cette couche est construite et supprimer les propriétés inutiles telles que les groupes ou les chemins de fusion. Cela fait, commençons à travailler sur l'animation outtro de la scène afin de pouvoir passer facilement à la suivante abord, nous devons trouver le moment où nous voulons démarrer l'animation Otro Dans notre cas, nous pouvons commencer à partir des quatre secondes, quelques images après l'animation du clic. Puisque nous sommes en train d' animer la couche de forme, ouvrons les propriétés de la couche et créons la première image-clé pour le tracé de cette Ensuite, avançons d'une seconde , puis double-cliquez sur la forme pour sélectionner tous les points. Redimensionnez cette forme tout en maintenant la touche Maj enfoncée et touche Ctrl ou Commande enfoncée sur Mac pour la redimensionner proportionnellement Redimensionnons-le jusqu'à ce que tout le cadre soit recouvert de la forme blanche. C'est bon. Donc pour l'instant, l'animation n'a pas l'air très excitante, alors améliorons-la. Tout d'abord, assouplissons facilement les images clés. Maintenant, faisons en sorte que cette animation démarre lentement en ajustant la poignée dans l'éditeur de graphes sur la droite. Je pense que ça a l'air beaucoup mieux maintenant. Maintenant que c'est fait ? Sauvegardons le projet avant de passer à autre chose. D'accord. Revenons maintenant à notre composition principale et insérons la nouvelle scène dans la chronologie Comme vous le constatez, nous n'avons pas complètement terminé l' atro-animation de la troisième scène. Et c'est parce que, comme je l'ai déjà dit, il est très important de vérifier d'abord que la voix off et l'animation nous avons créée sont Avant de créer trop de scènes et d'animer trop de couches, veillons à intégrer la voix off dans la timeline principale de Comp et à regarder l' animation dans son intégralité pour vérifier si elle correspond à la Il est préférable de détecter les erreurs et de les corriger dès maintenant, avant que trop de scènes ne soient affectées par les erreurs que nous aurions pu commettre au début. Dans cet esprit, voyons ce que nous avons. Gérer une grande équipe sur plusieurs projets n'est pas chose facile. Trop de tâches, trop de messages, et avant même de vous en rendre compte, vous êtes plongé dans le chaos à la recherche d' aide. A atteint One Point. Sur la plateforme qui désigne le chef de projet vous remarquerez peut-être que la troisième scène n' est pas synchronisée avec la voix off Concentrons-nous donc sur la résolution de ce problème. Passons d'abord à la transition entre la deuxième et la troisième scène. Comme vous pouvez le constater, le curseur de la deuxième scène est déjà hors cadre à ce stade. Et comme nous voulons créer une transition adaptée vers la troisième scène, il est conseillé de couper cette précomposition dès que le curseur sort du cadre Assurez-vous de zoomer et de supprimer également le dernier cadre. C'est bon. Passons maintenant à la troisième scène pour partir de ce moment précis et regardons à nouveau l'animation. Écoutons la voix off lorsque la troisième scène commence et essayons comprendre ce que nous devons ajuster à l'intérieur Avant même de vous en rendre compte, vous êtes plongé dans le chaos à la recherche d'aide J'ai atteint un point. La plateforme qui fait en sorte que le produit fonctionne bien. Donc, la première chose que je remarque, c'est que toutes les animations doivent se dérouler un peu plus rapidement car, comme nous l'avons entendu, la scène suivante doit déjà commencer à ce moment-là. Passons donc à la scène trois et commençons accélérer l'animation de saisie . Finissons-en à la deuxième. Ensuite, ajustons toutes les animations qui se produisent avec le curseur. Cela signifie que nous devons également ajuster l' animation de clic à l'intérieur. Et n'oubliez pas de régler l'animation extérieure de la scène Ce sont les principaux cadres de la boîte de forme blanche. accord ? Maintenant, revenons à la composition principale et voyons cette partie une fois Pour obtenir de l'aide. J'ai atteint un point. La plante demande de l'aide. Mais je pense que nous devons encore rendre cette animation un peu plus rapide et plus tôt dans la scène. Passons donc à la précomposition et ajustons à nouveau les images clés Je vous montre ce processus car je veux que vous vous habituiez à vous assurer que les premières scènes votre projet sont synchronisées avec la voix off, afin que vous puissiez vous entraîner à chronométrer l' animation en fonction Il est très important de le faire au début avant passer à l'animation des autres scènes Je pense que nous pouvons également rendre cette partie plus fluide en faisant cette image-clé une image continue et en accélérant le mouvement qui se produit à ce moment-là En fin de compte, je ne veux pas que la pause se produise ici. OK, je pense que ça a l'air mieux. Revenons maintenant à la composition principale et regardons à nouveau cette partie Et avant même de vous en rendre compte, vous êtes plongé dans le chaos, à la recherche d'aide J'ai atteint un point. Noyée dans le chaos, cherchant de l'aide J'ai atteint un point. J'ai atteint un point. Pour obtenir de l'aide. D'accord, je pense qu'à ce stade, l'animation Otro doit déjà commencer à se produire Entrons donc dans la scène et, cette fois, déplaçons uniquement les dernières images clés de cette animation vers les deux et 15 images suivantes. Et, bien sûr, n'oubliez pas animation de clic dans la précomposition des boutons, n'est-ce pas l'animation de clic dans la précomposition des boutons, n'est-ce pas ? Je pense que cela fonctionnera très bien. Et maintenant, nous pouvons continuer à travailler sur l' animation Otro de cette scène Tout d'abord, recadrons la précomposition de l'objet curseur juste au moment où son animation est terminée Ensuite, créons une animation d' opacité simple pour le bouton, afin qu'il disparaisse juste après le clic sur l'animation Je trouve que ça a l'air sympa. Faisons de même pour l'icône en forme de loupe Nous pouvons recadrer ces deux couches à ce stade afin que la chronologie reste propre. Maintenant, avant de poursuivre, je vais placer la couche de recherche ici en haut pour que ma chronologie reste organisée. Très bien, passons maintenant à la couche de texte que nous avons ici Commençons également son animation Otro à partir des deux et 15 secondes images Mais cette fois, pour rendre les choses un peu plus intéressantes, convertissons cette couche en trois dimensions et créons une animation outtro dans laquelle le texte vole vers la caméra et sort du cadre Créez donc d'abord une image-clé pour la propriété position à ce stade. Ensuite, avancez d'une seconde dans le temps. Vous pouvez utiliser le menu horaire ici si vous ne souhaitez pas faire glisser l'indicateur de temps manuellement. Maintenant, déplacez la valeur de la position Z jusqu'à ce que cette couche soit complètement hors cadre. Je trouve cette animation très cool, et je souhaite également appliquer le même type d' animation au bouton et animation au bouton et à l' icône de la loupe Supprimons donc d'abord les images-clés d'opacité de ces couches, en nous assurant de commencer par les supprimer de la dernière image-clé afin que l'image restante conserve la valeur Supprimez ensuite également le reste des images-clés . C'est bon. Créons maintenant la même animation d'outtro sur la propriété position pour ces deux couches Pour vous montrer ce processus, car il s'agit du flux de travail réaliste des projets de motion design. Parfois, nous créons des animations qui semblent correctes au début, mais plus tard, nous réalisons qu'une autre animation est plus esthétique. Cela signifie que vous ne comprendrez souvent ce qui fonctionne le mieux qu'après l'avoir testé directement dans After Effects. Et je vous dis cela parce que je veux que vous vous habituiez à des situations où vous ne savez pas exactement quoi faire. Au lieu de deviner, essayez différentes animations. Le fait d'y penser dans votre tête ne vous donnera pas la réponse. En fait, tester différentes approches le fera. C'est bon. Ainsi, après avoir converti ces couches en trois D et créé l'animation de position, vous pouvez constater que la couche de boutons semble ne pas bouger. Cela se produit parce que nous réduisons cette précomposition. Comme je l'ai indiqué dans les leçons précédentes, c'est le bon moment pour parler un peu en profondeur la fonction des transformations d'effondrement dans After Effects. Lorsque nous réduisons une couche ou une précomposition, After Effects nous montre les informations d'origine de cette Par exemple, lorsque vous réduisez un calque Illustrator, After Effects utilise les données vectorielles d'origine, ce qui nous permet de voir le calque en pleine qualité vectorielle sans perte de résolution Lorsque vous réduisez une précomposition, After Effects présente les informations d'origine contenues dans Dans notre cas, étant donné que les calques contenus dans la précomposition ne sont pas des calques en trois D, After Effects les considère toujours comme deux D. C'est pourquoi le bouton ne se comporte pas comme un objet en trois D. Si nous désassemblons la précomposition, After Effects ignore les informations internes et traite la précomposition comme une seule couche en trois Mais comme nous voulons conserver la meilleure qualité pour ce bouton, nous allons garder la précomposition réduite Pour résoudre le problème, il suffit de saisir la précomposition et de convertir également toutes les couches qu'elle contient en trois D. Maintenant, même si la précomposition est réduite, After Effects utilisera les trois informations D provenant de l'intérieur, et le problème est résolu Bien, maintenant que cela est réglé, ajustons l'animation et le timing de l'Outro Je pense que cette animation peut commencer à la deuxième et à la 20e image. C'est toujours une bonne idée d'ajouter un petit délai entre les animations des différentes couches. Dans ce cas, le champ de recherche blanc peut démarrer en premier, puis environ cinq images plus tard. Les autres couches suivent. Génial. Nous pouvons maintenant réduire cette précomposition pour la terminer à la quatrième et revenir à la composition principale pour voir comment tout fonctionne ensemble Gérer une grande équipe sur plusieurs projets n'est pas chose facile. Trop de tâches, trop de messages, et avant même de vous en rendre compte, vous êtes plongé dans le chaos à la recherche d' aide. J'ai atteint un point. Très bien, je trouve que tout va bien. Cela dit, nous avons terminé cette leçon et sommes prêts à passer à la suivante. Ça va être une bonne idée. On se voit là-bas. 14. Créer la scène 4 - Animation de logo: Reviens. Dans cette leçon, nous allons commencer à travailler sur la scène suivante. Donc, comme d'habitude, la première chose à faire est de vérifier quelle devrait être la durée de cette scène. Comme vous pouvez le constater, la scène doit commencer à la 11e seconde et se terminer aux 17 et 15 secondes. Cela signifie que la durée de cette scène doit pas dépasser 7 secondes. Dans cet esprit, créons une nouvelle composition et commençons à travailler dessus. On peut appeler cela la scène 4 de la composition. Ajustons les dimensions. OK. Nous pouvons maintenant commencer à travailler sur la première partie de cette scène, qui est l' animation du logo de l'entreprise. Pour cela, ouvrons le dossier des précompositions dans le panneau du projet et faisons glisser le logo précomposé dans notre chronologie. Génial. Passons maintenant à la précomposition et réfléchissons à un moyen d'animer ce logo. La plupart du temps, dans ce type de projet, l'animation du logo n'a pas besoin d'être très compliquée. Par conséquent, essayez de regarder le logo et réfléchissez à la manière la plus simple de l'animer. Dans notre cas, je pense qu'il peut être intéressant de créer une animation de rotation pour les icônes sombres du logo qui sortent de la sphère verte située derrière celui-ci Et pour le texte du logo, nous pouvons l'animer de la manière très courante utilisée dans ce type de projet, qui consiste à créer une animation révélatrice Maintenant, je voudrais vous rappeler quelque chose dont nous avons parlé dans les leçons précédentes. Je tiens à vous rappeler mon processus de réflexion lorsque j'ai une animation de logo à créer ou toute autre tâche d'animation à animer. Lorsque je regarde mon écran, je le divise en plusieurs parties d'animation. Dans ce cas, je divise la scène en trois parties principales L'animation des icônes triangulaires, l'animation de la sphère verte et l'animation du texte. Ensuite, je décide sur quelle partie de l'animation je dois commencer à travailler en premier. Et pour être honnête, ce n' est pas très important. Le plus important, c'est que je crée d'abord l'animation pour chaque partie , puis que je commence à chronométrer les trois parties dans ma chronologie. Cette façon de penser est particulièrement utile lorsque nous devons créer une animation de démonstration pour les panneaux d'interface utilisateur du logiciel SAS. Dans cet esprit, continuons à travailler, et cette idée deviendra progressivement plus claire pour vous au cours du processus. Tout d'abord, nous pouvons commencer par la partie la plus simple, qui consiste à animer les triangles Pour plus de commodité, nous pouvons désactiver toutes les autres couches présentes dans la chronologie, afin de pouvoir nous concentrer uniquement sur les icônes triangulaires. Et comme j'aime toujours le faire, taguons ces couches d' une autre couleur pour distinguer cette partie de l'animation des autres parties que nous aurons ici dans un avenir proche. D'accord. Et maintenant, commençons à l'animer Pour commencer, nous pouvons passer à la seconde et créer la première image-clé pour la propriété position pour toutes ces couches Et c'est parce que nous savons que c'est la position qu'ils doivent tous occuper à la fin de l'animation. Nous pouvons maintenant passer au début de la chronologie et créer des images-clés à ce moment-là, puis zoomer et ajuster la position afin de les faire ressortir du centre Génial. Une fois cela fait, placons-nous au milieu de l'animation à l'image 15 et ouvrons les icônes encore plus avant d'atteindre la position finale. Et comme je veux qu'ils se déplacent tous sur la même distance, au lieu de les déplacer manuellement, nous pouvons utiliser l'axe de position X comme calculateur et ajouter à la valeur actuelle, disons 200 pixels. Pour le triangle supérieur, au lieu d' ajouter 200 pixels à l'axe X, nous devons abaisser l'axe Y de 200 pixels. Faisons de même pour le reste des icônes triangulaires. Si vous n'êtes pas sûr, vous pouvez jouer avec les valeurs et comprendre si vous devez augmenter la valeur de 200 ou la réduire de 200 pour obtenir l' apparence que nous recherchons. Génial. Nous avons maintenant le début de l' animation de rotation éclatante que nous essayons de créer Créons ensuite une animation de rotation. Pour cela, créons une nouvelle couche nulle. Placez-le au-dessus des triangles et centrez le point d'ancrage du zéro. Placez-le ensuite au centre des icônes triangulaires. Passons maintenant au moment où l'animation est déjà terminée et où les triangles sont placés dans leur position finale, puis mettons toutes les icônes à zéro, balisons-les toutes en orange et changeons le nom en icônes nulles. Passons maintenant au début de l' animation et faisons tourner le zéro d'une rotation complète pendant l' animation éclatante. Génial. Utilisons maintenant la valeur nulle et ajoutons une animation contextuelle secondaire à l'aide de la propriété scale Créez la première image-clé ici, une autre image-clé à la seconde Et au milieu de l'animation, redimensionnons le zéro à, disons, 120. Faisons un petit zoom arrière pour voir à quoi cela ressemble. Je pense que c'est trop. Réglons l'échelle à 110. Génial. Une fois cela fait, commençons à travailler sur l'amélioration du mouvement. Tout d'abord, ouvrons toutes les images-clés que nous avons créées pour cette partie de l'animation et simplifions-les facilement. Voyons à quoi ça ressemble. Je pense que nous pouvons améliorer l' animation en ajustant les images-clés et en créant des mouvements un peu plus rapides. Mais au lieu de le faire à l'aide de l'éditeur de graphes, je tiens à vous rappeler que lorsque vous avez plusieurs images-clés pour la même valeur sur plusieurs couches, vous pouvez toutes les sélectionner et accéder au panneau de vous pouvez toutes les sélectionner et accéder vélocité des images-clés pour ajuster la vélocité en utilisant le pourcentage d' influence de l' en utilisant le pourcentage d' influence de l'animation entrante et sortante Fixons-le à 75 % pour les deux. Dans l'éditeur de graphiques, il semblerait que nous ayons fait glisser les poignées un peu vers la gauche et un peu vers la droite Je trouve que ça a l'air génial. Passons maintenant à l'amélioration du reste des images-clés À mon avis, nous pouvons laisser la rotation telle qu'elle est pour le moment. Concentrons-nous sur les images clés de l'échelle. Commençons par ajuster la vélocité à 75 %, comme nous l'avons fait pour la position des icônes, et voyons à quoi cela ressemble. Ça a l'air sympa, mais je veux que les icônes restent un peu plus longtemps lorsqu' elles sont toutes ouvertes Par conséquent, je vais réinitialiser les images-clés de l'échelle en appuyant sur F neuf ou F et F neuf, si vous utilisez Mac, et j'ajusterai la vélocité à l' aide de l'éditeur de graphes, afin que l'animation démarre rapidement, ralentisse plus longtemps au milieu, puis accélère à nouveau vers la fin Je trouve que c'est beaucoup mieux comme ça. fois cela fait, je pense que c'est une bonne idée de décaler légèrement l' animation de l'icône. Mais avant cela, utilisons une astuce simple pour rendre l'animation éclatante un peu plus intéressante Pour cela, zoomons sur la dernière image clé d'échelle de objet nul et déplaçons-le de cinq images vers l'avant. À ce stade, réduisons plutôt l'échelle nulle à, disons, 85 %. Comme vous pouvez le constater, cette astuce simple ajoute une touche agréable au mouvement. Génial. Passons maintenant à l'animation de la sphère verte Tout d'abord, nous pouvons l'étiqueter en vert pour le séparer visuellement de la partie d'animation précédente. Créons maintenant une animation éclatante à belle échelle pour cela. Bien, après avoir créé l'animation contextuelle, j'essaie maintenant de chronométrer cette animation pour qu'elle commence un peu après l'animation des icônes du triangle Comme je l'ai dit, c'est toujours une bonne idée de décaler légèrement les couches. À ce stade, j' essaie de le placer à différents moments et de voir à quoi ressemble l'animation. Je peux également régler la vélocité à 85 au lieu de 75 pour obtenir des mouvements encore plus rapides Je trouve que c'est beaucoup mieux comme ça. C'est bon. fois cela fait, passons à l'animation la partie suivante de l'animation du logo , à savoir les lettres du logo Comme je l'ai dit plus tôt, nous allons l'animer dans un style courant pour ce type de projet, une animation par trait révélateur Nous appliquons cette technique dans le cadre du cours d'animation de logo, où nous avons créé cinq types différents d'animations de logo premium. Donc, si vous souhaitez découvrir d'autres moyens d' animer des logos dans vos projets plus importants, je vous suggère vivement de suivre ce cours. D'accord ? Pour en revenir au projet, nous allons révéler ces lettres l'aide d'un effet de trait et pour utiliser l'effet de trait, nous devons d'abord créer un masque sur ce calque. Le masque doit suivre la forme de la lettre. La façon dont vous commencez à créer le trait affectera l' animation révélatrice à l'avenir. Je veux que la révélation commence par la partie supérieure, puis se dirige vers la gauche. Je vais donc commencer à créer mon masque de cette façon. Assurez-vous donc que la couche est sélectionnée et commençons à créer le premier point ici. Le point suivant sera là, et avant de relâcher le clic, faisons glisser la souris vers le bas pour rendre cette zone sinueuse Vous pouvez maintenir la touche Shift enfoncée pendant cette opération. Continuons ainsi jusqu'à ce que nous arrivions à la zone supérieure. Dans cette zone, il n'est pas nécessaire de faire glisser la souris. Il suffit de cliquer une fois. Le plus important est de veiller à ne pas fermer le chemin. Si vous fermez le chemin, il sera un peu plus difficile de créer l'animation de révélation. C'est bon. Une fois cela fait, recherchons l'effet de trait et ajoutons-le au calque. Tout d'abord, assurez-vous que tous les masques sont cochés. Ensuite, pour le style de peinture, choisissez Révéler l'image originale. Ensuite, augmentez la taille du pinceau jusqu'à ce que vous voyiez la lettre entière. Assurez-vous ensuite que la dureté de la brosse est réglée sur 100 %. Et maintenant, pour l'animer, nous allons utiliser la propriété end. Au début de l'animation, créons la première image-clé avec une valeur de 0 % Ensuite, avançons d'une seconde et fixons la fin à 100 %. Nous pouvons désactiver le reste des couches pour pouvoir nous concentrer dessus. Comme vous pouvez le constater, le début de la révélation semble un peu étrange car une grande partie de la lettre est révélée dès le début Pour le rendre un peu plus subtil, nous pouvons également animer la taille du pinceau Au début de l'animation, réglez la taille du pinceau sur zéro, à la fin de l' animation, réglez-la le nombre que nous avons choisi plus tôt, soit 20. Nous allons maintenant obtenir une animation de révélation plus agréable. Ensuite, simplifiez facilement toutes les images-clés et, à l'aide de l'éditeur de graphes, faisons démarrer l'animation rapidement et ralentissez vers la fin. Voyons à quoi ça ressemble. Je trouve que cela semble bon, et la bonne nouvelle, c'est que nous n'avons pas besoin de répéter ce processus pour toutes les couches. Nous pouvons simplement copier l'effet et le coller sur le reste des lettres. Mais nous devons créer les masques pour chaque lettre afin que l' effet fonctionne correctement. Continuons donc à créer le masque pour chaque lettre présente dans la scène pour la lettre N. Je veux que l'animation de révélation commence par la zone supérieure. Je vais donc commencer à créer le masque à partir de ce point, puis créer le deuxième point ci-dessous. Maintenant, au lieu de continuer utiliser le masque pour le reste de la lettre, il est préférable de créer un nouveau masque pour cette partie de la lettre. Génial. Ceci étant fait, passons à la lettre suivante. Cette fois, je veux que l' animation de révélation commence par la partie inférieure Le premier point que je vais créer pour le masque se trouvera donc ici. Ensuite, je vais monter et terminer le masque selon la forme de la lettre. Continuons de le faire pour le reste des lettres. Pour le point de la lettre I, nous pouvons l'ignorer pour le moment car nous allons créer une animation à l'échelle pour le révéler ainsi que le reste des lettres. C'est bon. Maintenant, pour la deuxième lettre N que nous avons ici, nous pouvons copier les deux masques que nous avons déjà créés pour le premier et les coller sur celui-ci pour gagner du temps. Très bien, une fois que nous aurons fini créer les masques pour toutes les lettres, revenons à la première lettre et copions l' effet de trait qui en résulte. Ensuite, sélectionnons le reste des lettres. Assurez-vous que nous sommes au début de la chronologie et collez l'effet. Génial. Maintenant, toutes les lettres sont animées et nous pouvons passer à autre chose. Réduisons tous les calques d' Illustrator que nous avons ici. Et maintenant, rendons la révélation des lettres un peu plus intéressante car elles sont trop statiques pour le moment. Nous pouvons leur ajouter une animation de position, car nous savons que la position finale de ces lettres doit être là où elles se trouvent. le moment, nous allons passer à la seconde et créer une image-clé pour la position avec la valeur actuelle Passons maintenant au début de l' animation et amenons toutes les lettres vers la gauche. Je pense que c'est suffisant pour le moment. Génial. Avant de poursuivre, j'ai remarqué que j' avais oublié de créer une animation révélatrice pour le point de la lettre I. Alors allons-y très rapidement dès maintenant. Passons à la seconde. Ouvrez ensuite la propriété d'échelle de cette couche. Maintenant, créons ici une image-clé avec la valeur actuelle, puis revenons au début de l'animation et mettons l'échelle à zéro Pour terminer, simplifions-nous les images-clés et créons la même vélocité que celle que nous utilisons pour l'animation des traits révélateurs pour le reste des lettres. C'est bon. fait, rétablissons la propriété de position de cette couche afin que nous puissions voir toutes les propriétés de position pour toutes les lettres. Adoucissons ensuite facilement toutes les images-clés et ajustons la vélocité en fonction de l'animation de révélation Voyons à quoi cela ressemble ensemble. Je pense que la motion est bonne. Améliorons maintenant l'animation en décalant les couches de lettres Faisons en sorte que la lettre T soit la première à entrer dans la scène. Je vais le faire en utilisant la nouvelle fonctionnalité. C'est trop beau. Laissons les choses telles quelles pour moment et trouvons le bon moment pour démarrer cette partie d'animation. Rassemblons toutes les couches de lettres cadre 5 et voyons à quoi cela ressemble. Je pense que cela semble correct, mais à mon avis, nous pouvons encore améliorer l' animation d'introduction des lettres en ajoutant une animation de mise à l'échelle à chacune d'entre elles. Pour vous faciliter la tâche, passons à l'image 5. Et pendant que toutes les couches sont sélectionnées, appuyez sur le crochet gauche pour amener toutes les couches à ce point dans le temps. Maintenant, verrouillons cette couche car nous avons déjà une animation à l'échelle. D'accord. Maintenant, sélectionnons le reste des couches, appuyons sur S et créons la première image clé avec une valeur plus élevée pour chacune d'entre elles. Peut-être 120. Essayons 150. C'est trop. Je pense que 135 devrait être plus beau. C'est bon. Maintenant, avançons d'une seconde. Il s'agit d'une deuxième image et de cinq images et ramenez l'échelle à 100. Maintenant, l'animation devrait paraître un peu plus intéressante. Débloquons donc la couche. Ensuite, sélectionnez à nouveau toutes les couches pour créer un délai agréable. Le décalage peut être un peu plus important. À mon avis, cela semble bien, et avec cela, nous avons fini d' animer le logo, et nous sommes prêts à passer à autre chose Mais avant cela, nous pouvons supprimer la couche d'arrière-plan que nous avons ici. Revenons maintenant à la composition de la scène 4 et essayons d'ajouter une touche supplémentaire à l'animation du logo Tout d'abord, réduisons cette précomposition, puis ouvrons la propriété scale pour créer une animation à échelle supplémentaire afin d'améliorer le logo. Intro Zoomons un peu sur la chronologie et créons la première image-clé pour la propriété d'échelle de la précomposition avec une valeur inférieure. Je pense que 70 devrait fonctionner. Ensuite, avançons d'une seconde et créons une image-clé d'une valeur de 100 Enfin, placons-nous au milieu de cette animation et réglons l' échelle sur une valeur plus élevée. Nous pouvons le régler à 110. Maintenant, allégeons facilement les images-clés et réglons la vélocité à, disons, 85 % Voyons à quoi tout ressemble . Je trouve que ça a l'air génial. C'est bon. Revenons maintenant au storyboard et voyons ce qu'il nous reste à animer ensuite. Comme vous pouvez le constater, nous allons enfin pouvoir animer notre premier panneau d'interface utilisateur dans le projet Revenons donc à la scène et trouvons la composition de ce panneau d'interface utilisateur ou de cet écran d'interface utilisateur dans notre dossier Screens dans le dossier PreComps Dans notre cas, nous devons utiliser l'écran du tableau de bord. Faisons-le glisser dans la scène et commençons à travailler sur cette partie de l'animation. C'est bon. Donc, tout d'abord, nous pouvons désactiver la précomposition du logo pour le moment, afin de pouvoir nous concentrer uniquement sur l'écran D'après notre storyboard, nous savons que cet écran doit être présenté sous un léger angle Et comme vous pouvez probablement le deviner, nous pouvons atteindre cet angle en convertissant cette précomposition en une couche tridimensionnelle Ouvrons maintenant la propriété de rotation et ajustons l'axe de rotation jusqu'à obtenir l'angle que nous recherchons. Comme nous souhaiterons peut-être zoomer sur différentes zones de ce panneau d'interface utilisateur, il est conseillé de réduire cette précomposition pour qu'elle reste de la plus haute qualité Mais comme vous pouvez le constater, une fois cela fait, la précomposition apparaît dans son angle original en deux D. Voici donc une question pour toi. Comment pouvons-nous résoudre ce problème ? Pour résoudre ce problème, nous devons entrer dans la précomposition et convertir toutes les couches qu'elle contient en trois couches D. abord, nous pouvons sélectionner toutes les couches, les réduire pour conserver leur qualité, puis les convertir toutes en trois couches D. Une fois cela fait, nous pouvons revenir à la scène principale et voir que tout fonctionne parfaitement bien. Génial. Passons maintenant à la précomposition du tableau de bord et continuons à préparer l'intégralité de cet écran d' interface utilisateur pour l'animation La première chose sur laquelle nous devons nous concentrer maintenant est de précomposer les couches qui appartiennent à chaque section de cet écran d'interface utilisateur Pour commencer, nous pouvons verrouiller les couches auxquelles nous sommes sûrs de ne pas toucher. Commençons par verrouiller la couche d'arrière-plan gris principale. Ensuite, verrouillons le menu principal sur le côté gauche. Génial. Nous pouvons maintenant commencer à précomposer les couches de chaque section, commençant par la zone d'en-tête Nous allons donc sélectionner toutes les couches de cette zone et les précomposer. Comme nous utilisons la fonction de précomposition, lorsque nous sélectionnons l'une des précompositions dans le dossier Screens , la nouvelle précomposition sera automatiquement placée sera Je le souligne parce que cela permet de garder le panneau de projet organisé. Plus tard, lorsque nous rechercherons cette précomposition et que nous la verrons dans le dossier Screens, vous saurez pourquoi elle s'y Bien, revenons à la précomposition. Il faut maintenant lui donner un nom. Pour garder les choses organisées, commençons le nom par S un, représentant l'écran 1. Ajoutons ensuite un en-tête. Ensuite, après avoir précomposé les couches pertinentes, nous devons réduire la précomposition et la convertir en une couche tridimensionnelle Enfin, nous devons nous assurer que le point d'ancrage est parfaitement centré pour cette précomposition Pour ce faire, nous pouvons maintenir la touche Ctrl ou Commande enfoncée sur Mac et double-cliquer sur l'outil de point d'ancrage pendant que la précomposition est sélectionnée Et maintenant, avant de passer à autre chose, nous pouvons verrouiller cette précomposition Génial. Passons maintenant à la section suivante, qui comprend les trois cases situées sous l'en-tête. Supposons que nous voulions créer une animation pour chacune de ces trois sections. Dans ce cas, il est conseillé précomposer les couches appartenant à chaque section individuellement Pour le nommage, encore une fois, nous allons commencer par S one, puis nous pouvons ajouter quelque chose comme le panneau 1. Une fois cela fait, nous réduisons la précomposition et la convertissons en une couche tridimensionnelle Enfin, nous devons nous assurer que le point d'ancrage est parfaitement centré pour cette précomposition. Super, super. Continuons de le faire pour le reste des sections. Une autre astuce pour faciliter le processus de sélection consiste à désactiver temporairement les précompositions nouvellement créées Bien entendu, vous n'êtes pas obligé de suivre ces étapes dans cet ordre précis. Vous pouvez d'abord précomposer toutes les couches pertinentes et ensuite seulement ajuster les points d'ancrage pour chacune Vous n'avez pas nécessairement besoin de le faire immédiatement après la précomposition Bien, maintenant que toutes les couches ont été précomposées, je peux convertir toutes les précompositions en trois couches D, les réduire, puis ajuster le point d'ancrage pour chacune des 11 couches les unes Une fois cela fait, nous aurons une configuration très organisée pour animer chaque section de cet écran d'interface utilisateur Ainsi, vous pouvez facilement saisir n'importe quelle précomposition et animer les objets qu'elle contient séparément des autres couches C'est la bonne façon de gérer des panneaux d'interface utilisateur complexes comportant de nombreuses sections différentes et de nombreuses couches appartenant à chaque section. Dans notre cas, je ne suis pas sûr que nous allons animer chaque section de cet écran Je te le laisserai peut-être comme devoir à la fin du cours. Je ne veux pas passer trop de temps animer de petites sections Je préfère me concentrer sur des concepts plus importants qui sont pertinents pour des projets comme celui-ci. Bien, avant de terminer cette leçon, assurons-nous que notre panneau de projet est propre et organisé. Comme vous pouvez le constater, nous sommes déjà en train de créer de nombreuses précompositions et ressources, et nous en aurons encore plus dans les prochaines leçons C'est tout à fait normal. Cela se produit également dans les projets du monde réel. C'est pourquoi il est si important de tout garder propre et organisé afin de pouvoir naviguer facilement dans votre projet. Comme je l'ai mentionné plus tôt, les précompositions que nous avons créées à l' écran ont été automatiquement placées dans le dossier Screens, car l'une des précompositions de ce dossier a été sélectionnée lorsque nous avons Mais je ne veux pas que les précompositions de section se trouvent dans le dossier Screens Je vais donc sélectionner le dossier des précompositions et y créer un nouveau dossier appelé panels, puis je déplacerai toutes les précompositions de section que nous créons dans ce projet dans ce Ça a déjà l'air beaucoup mieux. Les précompositions qui ne sont pas des précompositions de section peuvent être placées directement dans le dossier Faisons également glisser la précomposition du tableau vidéo à cet endroit. Et pour les compositions principales des précompositions de la scène principale, nous les garderons à l'extérieur afin qu'elles soient faciles Bon, maintenant, tout est bien organisé. Sauvegardons le projet. C'est ainsi que nous terminons cette leçon. Enregistrez votre projet une fois de plus avant de passer au suivant, où nous continuerons à travailler sur la scène. Ça va être génial. On se voit là-bas. 15. Scène continue 4 - Logo et transition vers le tableau de bord: Reviens. Dans cette leçon, nous allons continuer à travailler sur la scène 4. Fermons d'abord toutes les pré-compositions que nous n' allons pas utiliser Nous pouvons également fermer la pré-composition du tableau de bord car nous n'animerons rien ici. C'est bon. Nous pouvons maintenant réactiver animation du logo et commencer à travailler sur l' introduction de cette scène abord, je vais retourner sur le tableau vidéo pour me rappeler quelle devrait être la durée de cette scène. Je vois que cela devrait commencer aux alentours de la 11e seconde et se terminer aux alentours des secondes 15 et 20 images. Cela signifie que j' ai 4 secondes et 20 images pour présenter l'animation du logo et l' écran du tableau de bord avant de passer à la partie suivante où nous voyons le chat et la scène des écrans divisés Dans cet esprit, revenons à la composition de la scène 4 et déplaçons d'abord la précomposition du tableau de bord quelque part par ici Et maintenant, en attendant, animons la pré-composition du logo pour le réduire et l' augmenter afin disposer d'un espace pour accéder au tableau de bord Commençons par l'animation à l'échelle. Disons qu'après l' introduction du logo, nous avançons d'une seconde, puis le logo sera réduit à 80 ou peut-être 75 % Passons maintenant au deuxième numéro un et créons une animation de position. Je vais créer la première image-clé ici. Nous pouvons appuyer pour voir toutes les images-clés que nous avons ici. Ensuite, je vais passer à la deuxième et placer le logo quelque part dans le cadre. Génial. Maintenant, sélectionnons les nouvelles images-clés que nous avons créées et simplifions-les facilement. Passons maintenant à l'éditeur de graphes de vitesse et ajustons d'abord la vélocité des images-clés de l'échelle précédente telle qu'elle était À ce moment-là, la vélocité a changé car nous avons facilement allégé l'image-clé. Lorsque nous faisons cela, il est donc important de vérifier la vélocité de l'ensemble de l'animation. C'est bon. Faisons maintenant ce mouvement, commençons lentement et gagnons en vitesse vers la fin. Voyons à quoi ça ressemble. Ça a l'air bien pour le moment. Continuons à travailler sur la partie suivante, qui consiste à créer l'animation d' introduction pour la précomposition du tableau de bord, qui peut également commencer à partir de Donc, d'abord, amenons-le ici et ouvrons maintenant la propriété de rotation pour ramener la rotation X à zéro. Maintenant, comme je sais que plus tard je voudrais ajouter de la profondeur de champ pour cette partie, je vais créer une nouvelle caméra dans la scène. Nous pouvons utiliser la caméra à un nœud. Et pour la taille de l'objectif, choisissons 35 mm car cela nous donnera le Alright Et maintenant, ouvrons les options de la caméra et assurons-nous que la profondeur de champ est désactivée pour le moment. Nous ne voulons pas travailler lorsqu'il est allumé , car cela peut ralentir l'ordinateur. Comme je l'ai mentionné plus tôt, ce n'est qu'une fois que nous fini d'animer l'animation essentielle que nous commencerons à ajouter la touche finale à notre projet, n'est-ce pas ? Maintenant, avant de passer à autre chose, taguons la précomposition du logo dans une autre couleur Commençons maintenant à travailler sur l'animation d'introduction du tableau de bord Nous pouvons donc d'abord commencer par animer la position. Et comme nous savons que la précomposition doit être placée juste ici, à la fin de l'anime, nous pouvons passer à la deuxième et créer la première Revenons ensuite à la seconde et glisser la précomposition vers le bas hors du cadre. À ce stade, nous pouvons également le rapprocher un peu plus la caméra pour obtenir un mouvement un peu plus intéressant. Très bien, une fois que nous avons fini d'animer la position, ajoutons maintenant une animation de rotation Essayons d'abord de voir quelle devrait être la rotation à la fin de l'animation d' introduction Réglons l'axe X sur -25 pour le moment. Avant de passer à l'animation de rotation, je pense que nous pouvons abaisser le tableau de bord à la dernière image-clé. Et maintenant je vois que les logos sont trop grands. Ouvrons donc les cadres clés de la précomposition du logo et ajustons l'échelle et la position si nécessaire Nous avons donc maintenant beaucoup plus d' espace pour le tableau de bord, et avec cela, nous pouvons recommencer à l'animer À ce stade, je veux que le tableau de bord soit placé quelque part par ici. Et maintenant, pour ce qui est de la rotation, je veux qu'elle commence à entrer en scène lorsque la rotation en X est de -90 Je vais donc créer une image-clé à la deuxième avec cette valeur. Ensuite, je vais passer à la deuxième et définir la valeur sur -25. Génial. Nous pouvons maintenant commencer améliorer l' animation et à essayer de voir à quoi ressemblera le mouvement si nous ajustons la vélocité de l' animation de position et de rotation d'une certaine manière, afin qu'elle commence lentement, gagne en vitesse, puis ralentisse vers la fin. Voyons à quoi cela ressemble dans l'ensemble. Je pense que l'animation est trop rapide. Passons donc à la troisième étape et ramenons les derniers cadres clés du logo et les précompositions du tableau de bord à ce stade Voyons ça encore une fois. D'accord. Je trouve que cela semble bien meilleur, mais à mon avis, la vélocité des deux précompositions à la fin devrait être exactement la même Sélectionnons donc toutes les dernières images-clés et appuyons sur F neuf pour réinitialiser l'assouplissement Passons maintenant à l'éditeur de graphes et ralentissons le démarrage du mouvement. Accélérez au milieu et ralentissez vers la fin. N'oublions pas le cadre clé à échelle précédent de la précomposition du logo Je vais le répéter. Il s'agit d'un processus d'animation réaliste. Nous essayons toujours de voir à quoi ressemblera l'animation avec différentes vitesses et différents moments jusqu'à ce que nous obtenions quelque chose qui nous plaît. Génial. Une fois cela fait, revenons au tableau vidéo et voyons ce que nous devons faire ensuite. Comme vous pouvez le constater, nous devons préparer cette scène pour l' introduction du chat Dans cet esprit, revenons à la scène et continuons à travailler dessus. Commençons par créer l'animation extérieure du logo Passons à la quatrième étape et sortons le logo du cadre. Une fois cela fait, passons à l'éditeur de graphes et ajustons la vélocité pour obtenir un mouvement un peu plus fluide. Oui, je trouve que ça a l'air sympa. Et maintenant, nous pouvons continuer à travailler sur le réglage la position du tableau de bord avant la composition. Encore une fois, assurons-nous d'en être aux quatre secondes et réglons d'abord la valeur de rotation X à zéro. Ensuite, ajustez la valeur de position. À ce stade, nous pouvons utiliser la grille d'action sécurisée pour vérifier que nous déplaçons la pré-composition au bon endroit Assurons-nous que l'écran est parfaitement centré dans le cadre. Comme vous pouvez le voir, il est parfaitement centré verticalement, mais horizontalement, il n'est pas centré. Cela peut nous arriver à tout moment. Nous oublions parfois d' aligner les objets de la scène, mais cela ne pose aucun problème à corriger Tout ce que nous avons à faire est de nous assurer que nous nous trouvons exactement sur l'une des images-clés de position de cette précomposition Cliquez ensuite sur la valeur de position pour sélectionner toutes les images-clés et ajustez les valeurs de position jusqu'à ce que la précomposition soit centrée exactement au milieu Si vous le faites alors que vous n'êtes pas placé sur l'une des images-clés de position, vous créerez une image-clé inutile C'est bon. Alors maintenant, je pense que tout va bien. Nous pouvons vous appuyer sur le tableau de bord avant la composition pour voir les images-clés de manière plus pratique et ajuster la vélocité de ce mouvement pour l'adapter au mouvement du logo avant la composition Faites attention au graphique de rotation. Comme vous pouvez le constater, j'ai oublié de régler sa vélocité Je vais donc m'assurer de sélectionner la propriété de rotation et ajuster la vélocité en fonction mon mouvement. Voyons à quoi ça ressemble. Je pense que le tableau de bord à la fin de l'animation est trop proche de la caméra Je vais donc me tenir devant la dernière image-clé et ajuster l' axe de position de cette précomposition Oui, je trouve que c' est un peu mieux. Maintenant, revenons au tableau vidéo et rappelons-nous ce qu'il faut faire ensuite. D'accord. Nous devons maintenant commencer l' animation d'introduction du chat Et avant cela, revenons à notre scène et sauvegardons le projet pour enregistrer tous les progrès que nous avons réalisés jusqu'à présent. Une fois que nous aurons terminé, pour trouver le cadeau amusant, ouvrez le dossier des actifs que vous avez téléchargé pour moi, et vous le verrez là. Et avant de l'intégrer au projet, je voudrais vous montrer d'où vient ce cadeau Il existe un site Web appelé Giffi où vous pouvez télécharger toutes sortes de mèmes et de cadeaux amusants que vous pouvez utiliser dans Je vais laisser le lien vers ce site Web dans le fichier PDF appelé Inks que vous pouvez trouver dans le dossier Mes actifs. Je n'ai donc fait que rechercher CAT dans le champ de recherche, puis j'ai commencé à réfléchir au cadeau qui conviendrait le mieux à mon projet. J'ai décidé d'opter pour celui-ci, alors j'ai cliqué dessus. Puis j'ai remarqué que ce GIF spécifique ne jouait pas en boucle. Et à ma grande surprise, quand j'ai regardé les cadeaux similaires en dessous, j'ai trouvé le même , mais en jouant en boucle parfaite d'avant en arrière. J'ai donc cliqué dessus et ai téléchargé sur mon ordinateur. C'est bon. Alors maintenant, intégrons ce Jif dans notre projet. Maintenant, pour avoir ce GIF dans une précomposition, faisons-le glisser vers l'icône de précomposition située dans le panneau du projet Ainsi, une nouvelle précomposition avec cette couche sera automatiquement créée Génial. Et maintenant, appuyons sur Ctrl ou Commande K pour entrer dans les paramètres de cette composition et ajuster sa taille Comme vous pouvez le constater, la taille PreComp est créée automatiquement fonction de la taille de la couche Redimensionnons la largeur et la hauteur à 500. Génial. Maintenant, redimensionnons la couche pour l'adapter à la nouvelle taille de composition. Génial. Ensuite, améliorons un peu l'apparence de cette vidéo. Tout d'abord, nous pouvons appliquer la ceinture de teinte, effet de saturation et redimensionner la saturation Ensuite, nous pouvons ajouter l'effet de courbes et rendre le métrage un peu plus contrasté. Et maintenant, depuis que nous avons redimensionné la couche, elle a perdu de sa qualité. Pour nous assurer d'obtenir la meilleure qualité possible, nous pouvons activer la fonction de qualité et d'échantillonnage. Génial. Alors maintenant, une fois que c'est fait, parlons de la durée de ce GF. Comme vous pouvez le constater, pour l'instant, la durée initiale est de 2 secondes et cinq images. Nous devons donc d'abord étendre la durée de la composition. Faisons en sorte que ça dure 10 secondes. Génial. Mais maintenant, comme vous pouvez le voir, notre Jif se termine à 2 secondes et cinq images Dans notre cas, nous avons besoin que cela dure un peu plus longtemps. After Effects propose un moyen rapide de prolonger la durée d'une vidéo en boucle Pour cela, sélectionnons d'abord cette couche dans le panneau du projet. Une fois terminé, cliquez dessus avec le bouton droit de la souris et accédez à Interpréter les vidéos. Cliquez ensuite sur Main. Et maintenant, comme nous avons une vidéo en boucle, nous pouvons faire jouer la boucle plusieurs fois Mettons-le à dix. Génial. Il ne nous reste plus qu'à étendre la couche. Et comme vous pouvez le constater, la vidéo continue de jouer, étendons la couche jusqu'à la fin de la chronologie. Génial. Cela fait, revenons à notre scène, et avant d'y intégrer cette précomposition , ajustons le nom Appelons ça un cadeau pour chats. Déplaçons également le cadeau vers le dossier Ressources. Très bien, maintenant, introduisez la pré-composition dans la scène, et continuons à travailler dessus Trouvons d'abord une bonne position pour cela. D'après le tableau vidéo, ça devrait être quelque part par ici. Ensuite, ajoutons des coins arrondis à cette précomposition afin qu'elle corresponde à l'apparence générale de notre scène Pour ce faire, entrez la précomposition et assurez-vous maintenant qu'aucune couche n'est sélectionnée Sélectionnez ensuite l' outil rectangle et double-cliquez dessus. Cela créera un rectangle parfaitement adapté à la taille de la communication. Ensuite, assurez-vous que cette forme est remplie et que le trait est désactivé. Alors arrondissons ses angles. Maintenant, changeons le nom de cette couche en masque, et maintenant nous allons créer la couche GIF utilisant le canal Alpha de cette forme. Cela rendra le cadeau visible uniquement dans les limites de la forme. De cette façon, nous pouvons obtenir de jolis coins arrondis pour le cadeau , que nous pouvons ajuster ultérieurement si nécessaire. Je préfère cette méthode plutôt que de créer un masque sur la couche gif qui ne peut pas être personnalisé. D'accord. Et maintenant, avant de poursuivre, ajustons un peu la saturation car elle est trop forte, à mon avis. Je vais également ajuster un peu les courbes. D'accord. Et maintenant, nous devons créer une animation d'introduction pour ce cadeau Mais avant de le faire, je veux retourner au tableau vidéo et vérifier combien de temps cette partie devrait durer. Cela commence donc aux 15 et 20 secondes images, et se termine aux 17 et 15 secondes images. Cela signifie que toute cette partie ne doit pas durer plus de 2 secondes. Revenons donc au cadeau pour chats et créons une animation d'introduction simple en utilisant la propriété scale Et pour le rendre un peu plus intéressant, nous pouvons également créer une animation à l'échelle pour le masque. Génial. Donc, une fois que nous avons l'intro, avançons d'une seconde et créons une animation Otro pour celle-ci Nous pouvons copier les images-clés de l'animation d'introduction, les coller ici, puis inverser les Maintenant, allégeons facilement les images-clés. Et dans l'éditeur de graphes, faites en sorte que l'intro se rapidement et que l'outtro démarre lentement Voyons à quoi ça ressemble. D'accord. Donc, une fois que nous aurons les animations d' intro et d'outro, comme vous vous en souvenez peut-être, toute cette partie devrait pas durer plus de 2 secondes Restons-en donc à ce stade et les deux derniers cadres clés pour commencer à partir de là. Et avant cela, je viens remarquer, en regardant le délai, que la fréquence d'images de cette précomposition n'est pas de 30 images par seconde Cela s'est produit parce que nous avons créé cette précomposition à l'aide de la méthode automatique en faisant glisser la ressource vers l'icône de pré-composition dans le panneau du projet La précomposition est créée en fonction des informations du fichier que vous avez fait glisser Il est important de le savoir, alors j'ai décidé de vous montrer ce processus. Réglons ça très rapidement. Entrez les paramètres de composition et réglez la fréquence d'images sur 30. D'accord ? Une fois que c'est fait, commençons l'animation d'outtro à partir de la seconde et de 15 images Cela dépasse la durée de deux secondes que nous avions prévue, mais ça va. Nous pouvons voir si cela correspond au timing général de la scène, et au cas où cela semble trop long, nous pouvons l'ajuster ultérieurement. Pour l'instant, attribuons une couleur différente à cette pré-composition et trouvons le bon moment pour qu'elle commence À ce stade, je place simplement la précomposition à un endroit me semble être le mieux adapté , puis je regarde l'animation globale Si cela ne vous convient pas, je le ferai glisser vers un autre point dans le temps. Dans notre cas, je pense que nous pouvons commencer cette pré-composition à partir des quatre autres D'accord ? Je pense que c'est bon moment pour commencer cette précomposition, mais comme vous pouvez le constater, l'apparence générale de la scène semble un peu statique Pour l'améliorer, nous pouvons créer un léger zoom avant ou arrière pour la caméra en utilisant la propriété position. Passons donc au début de l' animation et créons la première image-clé à cet endroit Passons ensuite à un moment où l'animation sera définitivement terminée et créons une animation légère avec zoom arrière. Voyons à quoi tout cela ressemble. Comme vous pouvez le constater, cela ajoute un peu plus de mouvement à l'apparence générale. Si le zoom arrière est à peine perceptible, vous pouvez régler la dernière image-clé pour que l'appareil photo recule davantage Regardons cette animation une fois de plus. Je trouve que cela semble beaucoup mieux, mais à mon avis, nous pouvons commencer l'animation des cadeaux un peu plus tôt, disons, à partir de la troisième seconde, car je me souviens que toute cette scène ne devrait pas durer plus de 5 secondes. C'est bon. Une fois cela fait, nous pouvons enregistrer le projet et voir à quoi ressemblera cette scène avec les autres scènes de la Master Comp Revenons donc à la Master Comp et intégrons la quatrième scène dans la chronologie À ce stade, il nous suffit de trouver le meilleur moment pour que cette scène commence. Je regarde attentivement ce qui se passe dans la scène précédente et j' essaie de commencer la suivante en conséquence. Après avoir trouvé un bon moment, il est conseillé de regarder l'animation pour voir si la transition fonctionne bien. À mon avis, ça a l'air bien, alors maintenant je vais m'assurer de regarder à nouveau l'animation. Mais cette fois, en écoutant la voix off, pour voir si tout est parfaitement synchronisé Il est très important de le faire avant de passer à l'animation de la scène suivante. Je cherche de l'aide. A atteint One Point. La plateforme qui rend la gestion de projet si simple même votre chat pourrait le faire en un seul point. D'accord. Après avoir regardé l'animation avec la voix off, j'ai remarqué que la scène numéro quatre devrait commencer un peu Commençons cette précomposition à partir de la onzième seconde et regardons-la à nouveau en écoutant la voix off. Mangez un point. La plateforme qui rend la gestion de projet si simple même votre chat pourrait le faire. Avec un point, tu as atteint un point. La plateforme qui fait P. Oui, je pense que nous devrions la laisser comme ça. Cela signifie qu'à ce stade, scène trois devrait déjà se terminer. Passons donc à cette pré-composition et ouvrons d' abord toutes les images clés que nous avons ici Commençons maintenant à raccourcir quelques images la dernière partie de l'animation Sélectionnez toutes les images clés et déplacez-les de dix images vers l'arrière. Nous pouvons également ramener ces autres images clés de quelques images en arrière. Mais pour l'instant, laissons les choses telles quelles et voyons à quoi ressemble l'animation après avoir ajusté la première partie de l'animation. Ça a l'air sympa. Avant de poursuivre, n'oubliez pas d'ajuster l'animation des clics pour qu'elle commence à partir de ce moment. D'accord. Et maintenant, accélérons un peu l'animation d'outtro en ramenant les dernières images clés de quelques images en arrière Amenons-les à 1 seconde. Génial. Maintenant, après avoir ajusté l'animation, c'est toujours une bonne idée de revoir le mouvement pour voir s'il vous convient Nous devons nous assurer que ce n'est ni trop rapide ni trop lent. Je pense que la motion est bonne. Revenons maintenant à la composition principale et voyons à nouveau l'animation avec la voix off Je cherche de l'aide. J'ai atteint un point. Je cherche de l'aide. J'ai atteint un point. La plateforme n'est pas Awesome. Une fois que le timing est adapté à la voix off, nous pouvons maintenant entrer dans la scène quatre et y ajouter une couche d'arrière-plan Utilisons l'animation d' arrière-plan en dégradé que nous avons créée pour ce projet. Vous le trouverez dans le dossier des actifs du panneau de projet. Maintenant, créons une belle introduction pour ce fond d'écran. Ma méthode préférée pour créer une animation d'introduction pour une couche d'arrière-plan est créer un masque d'ellipse et animer. Laissez-moi vous montrer ce que je veux dire. Assurez-vous d'abord que la couche est sélectionnée, puis choisissez l'outil Ellipse Double-cliquez sur l'outil Ellipse pour créer un masque d'ellipse pour cette couche Maintenant, double-cliquons sur le masque et ajustons-le pour qu'il soit plus proportionnel. Maintenez la commande du contrôleur enfoncée tout en faisant cela. Grâce à la grille d'action sécurisée, je peux voir où ajuster la forme du masque pour obtenir un aspect arrondi. Génial. Une fois cela fait, ouvrons les propriétés du masque et animons la propriété d' expansion du masque Comme vous pouvez le constater, cela crée une forme intéressante pour le masque. J'aime beaucoup le look de la forme elliptique. C'est bon. Définissons donc la valeur d'expansion jusqu'à ce que nous ne voyions plus la couche. Ne le réglez pas plus haut que nécessaire. Créez maintenant la première image-clé au début de l'animation Ensuite, avancez d'une seconde et ajustez la valeur jusqu'à ce que nous voyions toute la couche d'arrière-plan. Et encore une fois, n'augmentez pas la valeur plus que nécessaire. C'est bon. Maintenant, allongeons les images-clés et faisons en sorte que cette animation démarre rapidement dès le début. Voyons à quoi ça ressemble. Ça a l'air génial. La dernière chose que nous pouvons faire ici est de créer un petit décalage entre l' animation d'introduction en arrière-plan et le reste des parties de l'animation de cette scène Commençons par les autres précompositions à partir de la dixième image. Peut-être cadrez cinq et voyez d' abord à quoi cela ressemblera avec le délai de cinq images cela ressemblera avec le délai de cinq images. Je trouve que ça a l'air sympa. Revenons maintenant à la composition principale et regardons-la avec la voix off. Atteignez un point. la plateforme qui simplifie la gestion de projet, j'ai remarqué que la précomposition CAT devrait commencer aux alentours de 15 secondes Déplaçons donc la tête de lecture à 15 secondes et dix images, entrons dans la scène quatre et apportons quelques petits ajustements Commençons par la précomposition Cat pour commencer à partir de maintenant Génial. Maintenant, ralentissons un peu l' animation du tableau de bord. Si cela commence à partir des trois et cinq secondes images, terminons-le aux cinq et cinq images suivantes, ce qui fera exactement 2 secondes d'animation. Regardons l' animation et veillons à ce qu'elle ne soit pas trop lente. Je pense que c'est bon. Revenons maintenant à la composition principale et regardons-la à nouveau avec la voix off pour confirmer que tout est Atteignez un point. L'intrigue. Une forme qui rend la procréation si simple. Même ton chat le fait. Avec un point, fais-le avec un point. Génial. Je pense que tout fonctionne très bien. Nous pouvons maintenant passer à la création de l'animation Otro, qui doit avoir lieu aux alentours de la 17e seconde Pour l'instant, désactivons la voix off afin qu'elle ne nous distraie pas lorsque nous visionnons l'animation Otro Nous y travaillerons dans la prochaine leçon. Ça va être génial. Alors, on se voit là-bas. 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. 16. Créer une scène 5 - Animation d'écrans partagés: Je suis de retour. Commençons cette leçon en allant sur le tableau vidéo pour vérifier quelle est la prochaine scène que nous devons animer La scène suivante est la partie où nous voyons tous les écrans de l'interface utilisateur, et elle commence aux 17 et 15 secondes. Voyons maintenant où cela s'arrête. Il se termine aux 19 et 15 secondes images. Cela signifie que cette animation devrait durer 2 secondes. Pour rappel , l'idée cette composition à écran partagé m'est venue regardant une superbe vidéo de référence sur YouTube Cela me rappelle à quel point il est agréable de voir de nombreux autres projets pour trouver l'inspiration Bien, revenons à la leçon. Une autre chose que nous pouvons apprendre du tableau vidéo est qu'après l'animation de la division des écrans, nous devons entrer dans l'écran du projet Dans cette optique, revenons à notre scène et continuons à animer dans cette chronologie plutôt que de créer une nouvelle précomposition pour des raisons évidentes Comme nous devons poursuivre l'animation tout en continuant à voir l'écran du tableau de bord pour la partie animation divisée, il est préférable de continuer à travailler sur cette chronologie et de ne pas créer de nouvelle scène. Et avant de poursuivre, organisons notre chronologie ici. Tout d'abord, nous pouvons recadrer le logo avant la composition au point de ne plus le voir dans la scène Ensuite, nous pourrons faire de même pour la pré-composition pour chats. Trouvons donc le moment où cette animation s'est déjà terminée et recadrons cette couche à ce point. Enfin, abordons la pré-composition ici pour avoir une mise en page plus chronologique dans notre Passons maintenant au moment où nous pensons que c'est le bon moment pour passer à la prochaine partie de l'animation, qui présentera tous les écrans de l'interface utilisateur Nous pouvons commencer à partir de la septième. Une fois cela fait, ouvrons le dossier des précompositions et le dossier Screens qu'il contient pour trouver l'écran d'interface utilisateur du projet qui doit être présenté dans la scène suivante Passons maintenant à notre chronologie. Et pensez à un moyen d' organiser l'écran avec le reste des écrans pour la scène en écran partagé. Et avant cela, ouvrons également la position de la caméra et ramenons la dernière image-clé à ce point dans temps, car à partir de ce moment, nous allons créer une transition pour la prochaine partie de l'animation C'est bon. Passons maintenant à la phase de préparation des projets dans la chronologie Convertissons ensuite cette couche en couche tridimensionnel et trouvons sa place dans notre espace tridimensionnel. Pour voir ce que nous faisons de mieux, changeons la vue en une vue personnalisée afin voir plus clairement les trois espaces en D. Comme vous pouvez le constater, la pré-compilation du projet se trouve désormais devant le tableau de bord, ce qui n' est pas ce dont nous avons besoin Nous voulons qu'il soit en retard. Et comme nous le saurons plus tard, nous ajouterons tous les autres écrans. Pour ce faire, il serait judicieux de garder l'espace entre chaque écran égal. Voyons d'abord la valeur de position de la précomposition du tableau de bord Maintenant, définissons cette valeur exacte pour la précomposition du projet, afin qu'elle soit alignée sur la position du tableau de bord Utilisons maintenant la case de valeur comme calculatrice et déterminons quelle doit être la distance entre l'écran du projet et l'écran du tableau de bord. Essayons de le déplacer de 250 pixels. Je pense que la distance est bonne. Passons maintenant à la scène avec le reste des écrans. Et maintenant, je veux partager mes réflexions avec vous. Je sais que les autres écrans de cette scène doivent être présentés pendant très peu de temps. Je sais également que si j'intègre toutes les pré-compositions des écrans dans la timeline, After Effects aura du mal à prévisualiser la scène Dans cette optique, je pense que ce serait une bonne idée plutôt que d' utiliser les fichiers d'IA des dessins de ces écrans que nous avons importés au début du projet plutôt que d'utiliser les précompositions fichiers d'IA des dessins de ces écrans que nous avons importés au début du projet plutôt que d'utiliser des écrans des Pour After Effects, le rendu d'un fichier Illustrator est beaucoup plus simple. Plus qu'une précomposition contenant un tas de fichiers Illustrator. Je ne l'ai pas fait pour l'écran du projet car je sais que cet écran devrait être animé dans ma prochaine partie d'animation. J'ai donc apporté la précomposition de l' écran et non sa couche Illustrator aplatie. D'accord. Donc, dans cet esprit, continuons à travailler, et ce que je viens d'expliquer sera beaucoup plus clair pour vous maintenant. Amenons donc l'écran suivant sur la chronologie et ajustons sa position. Tout d'abord, nous le convertissons en une couche tridimensionnelle. Utilisons ensuite la valeur de position de l'axe Z du dernier écran et ajoutons-y 250 pixels. De cette façon, nous placerons cet écran 250 pixels après l'écran précédent. OK. Passons maintenant à la suivante. Pour accélérer un peu ce processus, au lieu de faire glisser l'écran suivant vers la chronologie puis de l'ajuster, nous pouvons dupliquer le dernier écran de la chronologie, sélectionner celui du bas et ajuster sa valeur de position sur l'axe Z. Ensuite, pendant que cette couche est sélectionnée dans la chronologie, nous pouvons accéder au panneau du projet, sélectionner l'écran suivant, maintenir la touche Alt ou option enfoncée, et la faire glisser en haut de l'écran sélectionné dans la chronologie pour la remplacer. Génial. Et maintenant, répétons ce processus pour le reste des écrans. C'est bon. Maintenant, nous pouvons rétablir la vue sur la caméra active et continuer à travailler sur la scène. La prochaine chose que nous pouvons faire est d'intégrer tous les nouveaux écrans de la chronologie à partir de la septième . Puisque c'est à ce moment-là cette partie d'animation débutera, nous pouvons ensuite placer tous les écrans au-dessus du tableau de bord avant la composition pour que notre chronologie reste organisée. C'est bon. Préparons maintenant l'écran du projet pour l'animation. Ce que je veux dire par là, c'est que nous devons nous assurer que cette précomposition fonctionnera correctement au cas où nous voudrions la réduire Comme vous pouvez le constater, après avoir réduit la précomposition, nous voyons la Et c'est parce que nous avons ici une caméra qui surveille désormais l'intérieur de la précomposition et n'interagit pas avec les couches de la précomposition puisqu'il s' agit toutes Donc, pour résoudre ce problème, il suffit d' entrer dans la précomposition, de réduire toutes les couches et les convertir en trois couches D. Ainsi, la caméra de la scène principale les verra. Cela fait, revenons à la scène et convertissons également le reste des écrans en trois couches D. Nous pouvons également les effondrer. Génial. Et maintenant, commençons à travailler sur l'animation en écran partagé. La première chose que nous pouvons faire est de créer un nouvel objet nul. Convertissons-le ensuite en couche 3D, plaçons-le au-dessus de tous les écrans et renommons-le en écrans nuls Ensuite, nous devons placer ce zéro au milieu de tous les écrans. Pour plus de commodité, nous pouvons utiliser la vue personnalisée, ou pour une vue encore meilleure, nous pouvons choisir la vue de dessus. Comme nous avons huit écrans, nous devrions placer le zéro quelque part par ici afin avoir quatre écrans avant et quatre écrans après. Et pour savoir exactement où le placer entre les deux, nous pouvons utiliser l' axe de position Z de l'écran qui le précède. Copions cette valeur depuis l'écran et collons-la dans la valeur nulle. Modifiez ensuite l'axe de position Z des nuls en conséquence. Si la distance entre les écrans est de 250 pixels, cela signifie que nous devons déplacer le zéro de moitié de ce nombre. Ajoutons donc 125 pixels à l'axe Z nul actuel. Génial. Et une fois cela fait, nous devons attribuer la valeur nulle à toutes les couches d' écran. Mais avant cela, divisons la précomposition du tableau de bord afin de pouvoir avoir cette précomposition séparément pour la première partie d'animation de la scène et une autre pour la partie d'animation sur laquelle nous travaillons actuellement Génial. Et maintenant, parentons tous les écrans à zéro. C'est bon. Revenons maintenant à la vue active de la caméra et animons la scène Nous pouvons commencer par zéro à partir d'ici. OK. Maintenant, ouvrons la propriété de rotation et trouvons le bon axe à animer. Dans notre cas, nous allons animer l'axe y. Créons la première image-clé ici, puis avançons d'une seconde et faisons-la pivoter de -69 degrés Avant de poursuivre, nous pouvons ouvrir les images-clés cette précomposition et supprimer toutes les Nous le faisons parce que nous allons créer une animation de rotation et de position complètement différente pour cette précomposition afin d' obtenir l'aspect sinueux que nous visons lorsque l'animation divisée commence Cela dit, ouvrons la propriété de rotation pour tous les écrans et voyons quel axe nous devons animer C'est l'axe X. Créons donc une image-clé pour toutes les couches avec la valeur actuelle À ce stade, nous pouvons appuyer sur vous pour ne voir que les images-clés Passons ensuite à la seconde et commençons à ajuster l' axe X pour chaque couche d'écran obtenir un aspect incurvé proportionnel Faisons pivoter l' écran du tableau de bord à 25 degrés. Et pour le dernier écran, c'est-à-dire le navigateur de fichiers, faisons le contraire. Réglez-le sur -25 Pour l'écran qui le précède, nous pouvons régler la rotation à -20. Pour le précédent, nous pouvons régler la rotation à -15. Pour le suivant, moins dix. Comme vous le remarquerez peut-être, je fais pivoter les couches de cinq degrés pour donner à la courbe un aspect proportionnel. C'est bon. Et maintenant, pour les quatre premiers écrans, nous pouvons régler celui-ci sur cinq. La prochaine sera fixée à dix. Et pour le dernier, nous pouvons régler la rotation à 15. Ça a l'air sympa, et nous y sommes presque. Maintenant, pour le rendre plus beau, nous pouvons également créer une animation de position. Nous allons donc sélectionner tous les écrans et appuyer sur P. Maintenant, créez une image-clé au début de l'animation Ensuite, passons 1 seconde et commençons à ajuster la position de chaque écran pour obtenir ce joli look sinueux À ce stade, comme certains écrans sont un peu plus grands que les autres, j'essaie simplement de déplacer chaque couche de manière intuitive jusqu'à ce que j'obtienne quelque chose qui me plaît D'accord, je pense que ça a l'air bien pour le moment. Passons à la création de l'animation de l'écran du projet sortant de cette liste, puisqu'il s'agit de l' écran qui doit être affiché dans la scène suivante Dans un instant, nous avancerons d'une seconde et ajusterons la précomposition, la position et la rotation de l'écran du projet Mais avant cela, faisons sorte que le reste des écrans sorte du cadre. Et nous pouvons le faire en utilisant la couche nulle. Passons donc à la huitième seconde, puis appuyons sur P, créons une image-clé, puis passons à la neuvième seconde et retirons le zéro du cadre jusqu'à ce qu'aucun écran ne soit visible dans le cadre Génial. Et maintenant, assurons-nous de diviser les projets avant la composition à huit secondes, car nous voulons qu'ils ne soient pas affectés par le zéro Nous devons animer cette partie séparément afin pouvoir entrer dans la partie d'animation suivante de manière beaucoup plus pratique Assurons-nous qu'il n'est pas parent à zéro. Génial. Et maintenant, nous pouvons facilement animer cette couche sans nous soucier du mouvement nul. Et avant de l'animer, veillons à supprimer les premières images-clés et à ne conserver que les dernières afin que le precom reste dans sa position actuelle Cela fait, nous pouvons maintenant passer à la deuxième couche et animer cette couche Tout d'abord, veillons à mettre l'axe de rotation X à zéro. Ensuite, ajustons l'axe de rotation Y jusqu'à ce que l' écran de l'interface utilisateur fasse face à la caméra. Génial. Une fois le réglage de la rotation terminé, commençons à nous occuper de la position. Appuyons deux fois sur vous pour voir tous les images-clés. Maintenant, ouvrons la grille Action Safe et commençons à ajuster la position. Nous pouvons le placer au centre de la maquette pour le moment. Ne vous inquiétez pas de la collision qui se produit ici. Nous allons nous en occuper dans une minute. Pour l'instant, concentrons-nous sur la recherche d'une bonne position pour cet écran d'interface utilisateur. Si vous ne savez pas à quoi doit ressembler la scène, il est conseillé de revenir sur le tableau vidéo et de revérifier la scène Je vois que nous devons également ajouter une couche de texte ici. C'est important car je sais maintenant que je dois laisser de l'espace pour une couche de texte dans la scène. Profitons également de cette opportunité pour vérifier pendant combien la partie écran de l'interface utilisateur du projet animation de la partie écran de l'interface utilisateur du projet doit être présentée. Il commence à 19 secondes et 15 images et se termine à 24 secondes. Cela signifie que nous avons un peu plus de 5 secondes pour présenter cette partie de l'animation. C'est bon. Dans cet esprit, revenons à la scène et continuons à travailler. À partir de maintenant, nous avons 5 secondes pour présenter cette partie de l'écran de l'interface utilisateur. Nous allons placer la pré-composition dans une position similaire à la référence vous ai parlé lorsque nous avons parlé de la création du storyboard Bien, revenons à la leçon. Avancons d'une seconde , puis ouvrons toutes les propriétés de rotation. Essayons maintenant de jouer avec les différents axes jusqu'à ce que nous obtenions quelque chose qui nous plaise. Dans notre cas, je vois que nous devons également animer l'axe de rotation Z. Par conséquent, tout d'abord, créons une image-clé à neuf secondes, puis passons à la deuxième dixième et modifions la valeur D'accord. Je pense que l' angle est parfait. Maintenant, fixons la position et veillons à rapprocher la précomposition de l'appareil photo À ce stade, j'essaie juste de trouver un bon angle et de m'assurer que la composition est équilibrée. Je joue donc avec toutes les propriétés j'ai animées jusqu'à obtenir un bon résultat, en m'assurant d'avoir suffisamment d' espace pour la couche de texte qui doit se trouver dans cette partie de l'animation. Mm. Voyons à quoi ça ressemble. Je trouve que ça a l'air génial. Sélectionnons la précomposition et appuyons sur vous pour ne voir que les images-clés C'est bon. Maintenant, ouvrons le script et copions le texte correspondant. Vérifions-le dans le tableau vidéo. Dans notre cas, nous n'avons besoin que de cette partie du script pour le moment. Nous allons donc le copier et le coller dans la scène. Ajustons maintenant le texte. Allons-y avec une version en gras de la police. Ensuite, changeons la couleur en blanc. Et pour la taille de police, définissez-la sur 40. Enfin, assurons-nous que le paragraphe est aligné au centre, puis alignons-le horizontalement par rapport au centre de la composition. Et je pense que nous pouvons le placer quelque part par ici, non ? Maintenant, plaçons le texte au-dessus la couche nulle et faisons-le commencer à neuf secondes. On peut ajuster un peu la position. Plus tard, nous animerons toutes les couches de texte de nos scènes. Pour l'instant, concentrons-nous sur la poursuite de animation du reste des éléments essentiels de l'animation Comme vous vous en souvenez peut-être, la partie animation présentant l'écran d'interface utilisateur du projet devrait durer 5 secondes. Cela signifie que nous devons maintenant créer une animation édifiante pour chaque section de cet écran d'interface utilisateur Comme nous l'avons vu, cette animation est très utilisée dans ce type de projet. Apprenons donc comment procéder. Mais avant cela, je venais de remarquer que j'avais oublié d' ajouter une image-clé de position à la couche messages à l'écran Très bien, commençons maintenant à créer l'animation édifiante Trouvons le moment où cette animation doit démarrer. Nous devrions commencer par les dix secondes. Passons maintenant à la pré-compilation des projets. Ici, dans cette chronologie, nous voyons que l'animation débutera à partir des trois secondes. Génial. Commençons donc par verrouiller la couche grise BG. Nous pouvons donc sélectionner facilement le reste des couches. Nous pouvons également verrouiller la couche de menu de gauche. Voyons maintenant quelles couches nous devons animer. Dans notre cas, il s'agit des couches des boîtes de projet. Sélectionnons-les donc tous et étiquetons-les avec une couleur différente. Nous pouvons les activer et les désactiver pour nous assurer que la sélection est correcte. Génial. Maintenant, étiquetons-les en orange. Maintenant, ouvrons la position pour chacun d'entre eux et créons une image-clé à ce stade Ensuite, avançons d'une seconde et créons également une autre image-clé ici Passons ensuite au milieu de l'animation et ajustons la position de l'axe Z pour les faire apparaître. Nous pouvons revenir à la scène pour voir à quoi cela ressemble avec l'angle que nous avons créé. Je pense que c'est trop. Abaissons-les tous un peu. Vérifions-le encore une fois. Oui, je pense que ça a l'air mieux. Revenons maintenant à la précomposition et ajustons le mouvement. Faisons en sorte que l'animation démarre rapidement, ralentisse au milieu et prenne de la vitesse vers la fin. Génial. Et maintenant, créons un léger décalage entre les couches. Je sélectionne chaque couche pour m'assurer qu'elles sont toutes organisées par ordre chronologique, l'une après l'autre Oui, il semble que l'ordre dans le panneau des couches soit correct. Décidons maintenant que la case en haut à gauche lancera l'animation en premier. Cela signifie que nous allons sélectionner le reste des images-clés et les déplacer, disons, deux images vers l'avant Nous pouvons le faire manuellement en maintenant la touche Alt ou Option enfoncée et en utilisant la flèche droite. Ou nous pouvons le faire en utilisant la nouvelle fonctionnalité. Je vais annuler mon action et zoomer un peu pour vous montrer comment faire. Si vous souhaitez utiliser la nouvelle fonction, vous devez vous rappeler que l'ordre de votre sélection affectera la direction du décalage. Déplaçons deux cadres vers l'avant. Donc, si je commence à sélectionner depuis la couche supérieure, maintenez les touches Ctrl et Alt enfoncées pour activer la nouvelle fonctionnalité. Le décalage commencera à partir de la couche supérieure. Dans notre cas, nous voulons que cela commence par la couche inférieure. Je vais donc commencer la sélection à partir de la couche inférieure. Maintenant, je m'assure que les images clés de la couche nommée couche 353 atteignent la position des indicateurs temporels. indiquera que le décalage est égal à une distance de deux images. Je pense que nous pouvons augmenter le décalage. Génial. Et maintenant, avant de passer à autre chose, revenons à la scène pour voir à quoi cela ressemble. Cela semble correct, mais je pense que toute cette partie de l'animation est trop rapide et dure trop peu de temps. Sachant que cette partie devrait durer quatre ou cinq secondes, je suis sûr que nous devons ralentir un peu cette animation. Revenons donc à la précomposition de l'écran et ralentissons l'animation. Concentrons-nous sur les images clés de la couche inférieure. Pour l'instant, cette animation dure 1 seconde. Il commence à la troisième seconde et se termine à la quatrième. Cela vaut également pour le reste des couches. Leurs animations durent toutes une seconde. Passons maintenant aux cinq secondes. Sélectionnez ensuite toutes les images-clés, maintenez la touche Alt ou Option enfoncée et faites glisser la dernière image-clé pour augmenter proportionnellement la distance entre les images-clés Ce faisant, faites attention au moment où la dernière image-clé de la couche inférieure atteint les cinq secondes. Cela indiquera que son animation dure désormais 2 secondes et, comme vous le savez peut-être déjà, elle s'applique également au reste des couches. C'est ainsi que nous ralentissons l'animation de toutes les couches de 1 seconde à 2 secondes. Une fois cela fait, revenons à la scène et voyons à quoi cela ressemble. Et surtout, veillez ce que l'animation se termine au bon moment. L'animation se termine aux alentours de la douzième seconde, ce qui est excellent car il nous reste maintenant quelques secondes pour créer la transition pour la prochaine partie de l'animation. Pour la partie d'animation suivante, nous devons créer une animation par clic de curseur sur l' une des boîtes du projet, qui nous amènera ensuite à l'écran d'interface utilisateur du deuxième projet. Commençons donc à travailler sur cette partie dès maintenant. Passons donc d'abord au deuxième écran du projet et essayons de comprendre ce qui doit se passer. Comme vous pouvez le voir ici, nous travaillons actuellement sur un projet appelé site Web Dribble Cela signifie donc que nous devons créer une animation de clic pour cette zone de projet dans le premier écran du projet. Une fois que nous avons compris le flux, nous pouvons accéder au deuxième écran du projet et commencer réfléchir à un moyen de créer une animation d'introduction pour celui-ci Dans notre cas, nous nous concentrerons sur la création d'une sorte d'animation pour ces sections de tâches. Mais comme vous pouvez le constater, je viens remarquer que ces cases ne sont pas remplies. Donc, avant de commencer à animer, permettez-moi de résoudre ce problème très rapidement Dans votre cas, puisque vous utilisez mes fichiers finalisés, toutes les sections sont déjà corrigées. Je voulais juste vous montrer que parfois il nous manque quelque chose dans Illustrator, et c'est tout à fait normal. Donc, pour résoudre ce problème, il me suffit trouver ce design dans Illustrator, sélectionner ces cases et de m' assurer d'y ajouter un fond blanc. Je vais accélérer ce processus pour le moment. Une fois terminé, je n' oublie pas de sauvegarder le fichier. Ensuite, je peux retourner dans After Effects et attendre quelques secondes jusqu'à ce que les modifications soient mises à jour ici. C'est bon. Maintenant, je vais également enregistrer mon projet ici dans After Effects, et nous pouvons continuer à travailler. À ce stade, nous savons déjà ce que nous devons faire pour le reste de la scène. Mais avant de commencer à créer une animation complexe, il est conseillé de revenir à la composition principale et de voir l' animation que nous avons créée en même temps que d' entendre la voix off pour voir à partir de quel moment nous devons commencer à créer l'animation du flux de démonstration Cela rend la gestion de projet si simple que même votre chat pourrait le faire. Avec un point, vous obtenez une idée parfaitement claire de tout ce que votre équipe travaille sur l'ensemble de votre projet. D'accord, au fur et à mesure que vous aurez une vue d'ensemble claire de tout ce que votre équipe travaille sur tous vos produits. Je pense que nous pouvons commencer à la 22e place. Cela signifie que l'animation stimulante des boîtes de projet devrait déjà s'arrêter là Entrons donc dans la scène, puis entrons dans la pré-composition du projet pour raccourcir cette partie de l'animation à l'emplacement des indicateurs temporels, ce qui, dans cette chronologie, signifie que cette animation devrait se terminer aux quatre secondes environ Donc, en gros, notre première durée de cette animation était parfaite. Je voulais vous montrer cette situation parce que nous avons parfois l'impression que notre animation doit avoir une certaine apparence. Mais le plus important est de faire l'animation corresponde à la voix off, plutôt que de simplement lui donner l'impression que nous ressentons C'est pourquoi il est si important de toujours revenir à la composition principale et de revérifier le projet après chaque partie d'animation que vous avez fini En un seul point, vous obtenez une vue d'ensemble parfaitement claire de tout ce sur quoi travaille votre équipe Maintenant, l'animation se synchronise avec la voix off, et nous sommes prêts à commencer à travailler sur l'animation du flux de démonstration Cela devrait commencer aux alentours de la 22e seconde. Entrons dans la scène et commençons cette animation à partir du moment où toutes les boîtes ont déjà atterri. Placez l'indicateur de temps ici. Commençons maintenant à créer le mouvement de clic sur la première zone de projet. Comme nous savons qu'il nous faudra quelques images pour que l' animation du clic se produise, veillons à ce que cette précomposition reste immobile pendant quelques Pour ce faire, nous devons créer des images-clés pour toutes les propriétés animées avec la valeur actuelle. Maintenant, faisons en sorte que cette précomposition reste pendant dix images. Je pense que cela devrait être suffisant pour l'animation du clic. Donc, si nous sommes à l'image 12, passons à l'image 22, ce qui fait dix images au total. Enfin, créons un autre ensemble d' images-clés pour toutes les propriétés animées avec la valeur actuelle C'est dans cette partie que nous allons créer l'animation du clic. Si vous souhaitez ajuster l'angle ou la position de la précomposition avant le début du flux de démonstration, n'oubliez pas de mettre à jour les dernières images-clés en conséquence pour conserver ce Pratiquons-le dès maintenant. Nous pouvons modifier l'angle en jouant un peu avec les valeurs des propriétés animées jusqu'à créer un angle plus intéressant. D'accord. Maintenant, une fois que c'est fait, vous pouvez simplement supprimer ces images-clés et copier-coller les nouvelles ici à la place C'est bon. À partir de maintenant, entrons dans la précomposition du projet et trouvons la première zone de projet pour créer une animation par clic pour celui-ci. C'est ici. Ouvrez la propriété scale et créez une image-clé avec la valeur actuelle Déplacez ensuite dix images vers l'avant et créez la même image-clé. Passons maintenant au milieu de cette animation et réduisons la taille de la couche. Essayons notre 80. Génial. Et maintenant, simplifions-nous les images-clés et voyons à quoi cela ressemble Essayons de rendre cette motion un peu plus rapide. C'est mieux. Génial. Maintenant, revenons à la scène. Et à partir du moment où l'animation par clic se termine, changeons l'angle de cette précomposition par un angle différent qui conviendra le mieux au prochain écran d'interface utilisateur qui doit être présenté après l'animation par clic Supposons que l'animation de changement d' angle dure 1 seconde. Utilisons donc cette boîte de temps et changeons les secondes à 12. De cette façon, l' indicateur de temps avancera d'exactement 1 seconde. Génial. À ce stade, ajustons toutes les propriétés que nous avons animées pour obtenir un angle frontal agréable. Grâce à la grille d'action sécurisée, il est facile d'aligner la précomposition au centre Très bien, je trouve que ça a l'air bien. Nous savons maintenant que lorsque nous présentons l'écran suivant, nous devons également modifier le texte que nous avons ici dans la scène. Séparons donc la couche de texte dès le début de la transition, puis ouvrons le script pour copier le texte pertinent. Double-cliquez sur la couche de texte et collez le nouveau texte. Génial. Nous avons donc maintenant préparé notre transition. Et avant de passer à autre chose, vérifions-le s'il se synchronise parfaitement avec la voix off Nous pouvons également confirmer qu'il s'enfonce en vérifiant que le texte change au bon moment. Aperçu de tout ce sur quoi travaille votre équipe , de tous vos projets, toutes vos tâches, le tout au même endroit. Très bien, je trouve que tout va bien. Nous sommes maintenant prêts à revenir à la scène et à commencer à travailler sur création de l'animation d'introduction pour l'écran d'interface utilisateur du deuxième projet La transformation doit commencer juste après l'animation du clic. Dans ce cas, nous allons créer l'animation d'introduction de l'écran suivant dans la pré-composition du projet Créez d'abord une animation d'introduction pour toutes les sections de cet écran, puis nous créerons une animation d'introduction pour l'écran suivant Ensuite, nous synchroniserons ces deux parties de l'animation pour créer une transition fluide. Enfin, nous aurons cette animation de flux de démonstration pour cet écran d'interface utilisateur. Nous allons continuer sur ce sujet dans la prochaine leçon. Ça va être incroyable. Alors, on se voit là-bas. 17. Créer l'animation de outro pour l'écran des projets: Reviens. Nous allons commencer cette leçon en travaillant sur l'animation Otro pour l'écran du projet Cela doit commencer à se produire juste après l'animation du clic. Nous allons donc rester ici et commencer réfléchir à un moyen de faire ressortir toutes les couches afin de pouvoir commencer à afficher les couches de l'écran suivant. D'accord. C'est dans cet esprit que nous allons commencer à créer une animation d'introduction pour la section principale de cet écran d'interface utilisateur Pour le faire de la manière la plus pratique, nous pouvons utiliser la boîte blanche de cette section. Laissez-moi vous montrer ce que je veux dire. Tout d'abord, colorons-le dans une couleur différente afin de pouvoir le retrouver rapidement. Ensuite, nous pouvons sélectionner tous les objets et couches liés à cette section et les associer à la boîte blanche principale. Une fois cela fait, nous pouvons créer une animation d'outtro uniquement pour cette couche Ensuite, nous pouvons passer à la création d'une animation d'outtro pour le reste des sections Cela dit, ouvrons la position de la boîte blanche principale de cette section et créons une animation extérieure simple sur le côté droit Faisons en sorte que cette animation se termine à la cinquième seconde. Passons ensuite au point de départ de cette animation et créons une animation d'introduction pour le grand menu de gauche Nous pouvons le déplacer hors du cadre vers la gauche. Génial. Et maintenant, créons une animation d'outtro pour l'en-tête Avant cela, j'ai remarqué que l'en-tête n'était pas beau. J'adorerais qu'il commence par le côté gauche et qu'il ne soit pas recadré comme c'est le cas actuellement C'est ainsi que j'ai obtenu le design de Figma. Mais ici, dans After Effects, je vais le modifier pour l' adapter à mon animation. Dans votre cas, vous ne le voyez pas parce que vous utilisez mes fichiers Illustrator finalisés. Vous avez donc déjà résolu ce problème. Pour y remédier, je suis simplement passé à ce design dans Illustrator et j'ai ajusté la forme sur le côté gauche. Une fois terminé, j'ai enregistré le projet afin pouvoir obtenir la version mise à jour et After Effects. Enfin, j'ai mis à jour la position de la couche qui était perturbée à cause de la modification de conception que j'ai apportée dans Illustrator. C'est bon. Et maintenant, une fois que j'ai résolu ce problème, après avoir vérifié à quoi devrait ressembler l'écran suivant, j'ai compris que la section d'en-tête ne changeait pas, donc je n'ai pas besoin de créer une animation tro pour elle. Alors maintenant, avant de passer aux couches suivantes, veillons à ce que ces couches ne soient visibles que dans les limites de la zone grise principale de cet écran. Je pense que cela sera plus beau au lieu de simplement laisser les couches sortir telles qu'elles sont actuellement. Commençons par le menu. Nous devons créer cette couche, utiliser l'Alpha de la boîte grise. Faites donc glisser le fouet de la fonction Trackmat de la couche de menu vers la couche de boîte grise, qui est la dernière couche de notre panneau de couches Enfin, réactivez cette couche. Génial Maintenant, faisons de même pour le cadre blanc de la section principale. Génial. Et maintenant, répétons ce processus. Pour le reste des couches, nous voulons être masqués. Pour une raison quelconque, lorsque j'ai essayé de faire ce processus pour un tas de couches à la fois, cela n'a pas fonctionné. Donc, si cela vous arrive, ne vous inquiétez pas. Assurez-vous simplement de le faire un par un. Comme vous pouvez le constater maintenant, cela fonctionne. Nous pouvons également le faire pour deux couches à la fois. C'est bon. Une fois cela fait, revenons à la scène et voyons à quoi cela ressemble. Comme vous pouvez le constater, étant donné que nous avons une animation de certaines couches qui s'élèvent, nous ne les voyons pas car elles sont désormais masquées par la couche d'arrière-plan gris principale Lorsque vous êtes dans cette situation, il vous suffit d'entrer dans la précomposition avec les couches masquées et de trouver le moment où l' animation ascendante s'est complètement terminée Nous pouvons rester à ce stade, point l'animation d' outtro, et à partir de là , nous pouvons sélectionner toutes les couches nous ne voulons pas masquer dans la partie d'animation précédente et les scinder Nous pouvons maintenant placer la couche dupliquée ici. Enfin, nous devons sélectionner les couches dont nous n'avons pas besoin, masquer et désactiver la fonction Track Mat pour Maintenant, ces boîtes de projet ne sont masquées par aucune couche au moment où elles apparaissent Ensuite, nous les avons masqués pour la partie animation outtro C'est ainsi que l'on fait face à ce genre de situations. C'est bon. Nous pouvons maintenant à l'écran suivant et essayer de comprendre quelles couches et objets doivent être présentés après l'animation par clic. Nous devons nous assurer d' entrer dans ces deux sections. Commençons par le grand menu sur le côté gauche. Nous devons d'abord le copier. Revenons ensuite au premier écran du projet et arrivons au moment où nous avons besoin des nouvelles couches pour entrer dans la scène. Dans notre cas, c'est depuis le début de l'animation Otro. C'est bon. Alors maintenant, collons le menu copié ici et plaçons-le au-dessus de toutes les couches. Nous pouvons maintenant faire démarrer cette couche à partir de ce moment. Et maintenant, assurons-nous que cette couche est masquée. Nous pouvons le placer en dessous de l'en-tête. OK, alors maintenant, faites en sorte qu'il utilise l'Alpha de la boîte grise pour masquer cette couche. Génial. Nous pouvons maintenant commencer à créer une animation d'introduction pour ce menu. Nous pouvons créer une image-clé ici car nous savons que c' est la position dans laquelle elle doit se trouver après l'intro Nous pouvons maintenant aller au début de notre animation et déplacer cette couche vers la gauche. Une fois cela fait, nous pouvons retarder l'animation d'introduction par rapport à l'animation d'extérieur du menu précédent C'est bon. Revenons maintenant à l'écran du deuxième projet et copions le reste des couches. Nous allons sélectionner ces quatre couches, les copier et les coller dans la précomposition du premier projet Amenons-les également à partir de ce moment . C'est à ce moment que débutera l'introduction de l' écran du deuxième projet Génial. Passons à nouveau au deuxième écran et, cette fois, copions la boîte blanche. Maintenant, cliquez sur cette couche et collez le cadre blanc pour qu'il soit au-dessus de celui sélectionné. fait, créons une animation d'introduction pour cette nouvelle section Nous allons créer une introduction différente pour le reste des couches qui doivent apparaître dans la section Mais nous pouvons animer toutes ces couches ensemble. Marquons la boîte blanche et associons-y ces quatre couches. Avant de l'animer, veillons à placer cette section au bon endroit Comme vous pouvez le comprendre, nous devrions le réduire un peu. Sélectionnez donc la couche de boîte blanche et abaissez-la un peu. C'est bon. Et maintenant, ouvrez la position de cette couche. Nous pouvons également ouvrir la position du nouveau menu pour voir où il se termine. Ainsi, à la fin de l'animation d' introduction, nous allons créer une image-clé avec la valeur de position actuelle Et au début, décidons que cette section entrera dans l' écran par la partie inférieure. Vous pouvez vérifier à quoi cela ressemble avec l'animation extérieure de la section précédente Je trouve que ça a l'air génial, et nous pouvons enregistrer le projet et passer à autre chose. Créons maintenant une animation d' introduction pour les autres couches qui doivent figurer dans cette section Nous allons donc sélectionner toutes les listes de tâches ici. en revenir à la pré-composition du premier projet, Pour en revenir à la pré-composition du premier projet, assurons-nous de sélectionner cette couche afin que les couches collées soient au-dessus. Génial. Marquons-les maintenant en orange et commençons par là. Génial. Maintenant, zoomons un peu et réduisons-les pour les adapter au design original de cette section. Vous pouvez vérifier à quoi cela devrait ressembler dans le deuxième projet, precomp D'accord. Et maintenant, commençons à créer une introduction pour toutes ces couches À la fin de l'intro, ils devraient être placés ici. Et au début, abaissons-les. Nous pouvons les placer quelque part par ici. Et maintenant, pour rendre les choses un peu plus intéressantes, faisons-les commencer au deuxième point. Je souhaite créer un léger décalage entre ces couches et le reste des sections. D'accord, pour le moment, ça a l'air d' aller bien. Passons à autre chose. À ce stade, cela ne me dérange pas que la partie inférieure de la boîte blanche soit hors de l'écran. J'adore son apparence, mais je souhaite masquer les couches de tâches afin qu'elles ne soient visibles que dans les limites de la boîte blanche. Pour cela, assurez-vous d'abord de savoir quelle est la couche de boîte blanche. C'est celui-ci. Nous devons maintenant sélectionner les couches de tâches et leur faire utiliser le canal Alpha de la couche boîte blanche. Enfin, n'oubliez pas de réactiver la couche de boîte blanche. Faites-le pour les autres couches de tâches. C'est bon. Une fois cela fait, il peut être judicieux de revenir à la composition principale et de voir si tout va bien Comme vous pouvez le constater, il se passe quelque chose de très étrange. Revenons donc à la pré-compilation de nos projets et corrigeons ce problème. Comme toute cette scène se trouve dans un espace en trois D, nous devons nous assurer que toutes les nouvelles couches cette pré-composition sont également des couches en trois D. Alors maintenant, lorsque nous regarderons la scène principale ou que nous verrons cette partie de l'animation dans la composition principale, tout sera parfait C'est donc le bon moment pour enregistrer toute la progression et regarder l'animation avec la voix off pour voir si le moment est Votre chat pourrait le faire. En un seul point, vous obtenez une vue d'ensemble parfaitement claire de tout ce que votre équipe travaille sur tous vos projets, toutes vos tâches, le tout au même endroit. J'ai besoin de toutes les demandes, en un seul endroit. D'accord. Maintenant, je comprends qu'à ce stade, ensemble de cette animation du flux de démonstration devrait se terminer au deuxième 27 mars. Cela signifie que j'ai quelques secondes pour créer le reste de l' animation de ce flux de démonstration. Passons maintenant à la scène de pré-composition. Dans cette chronologie, le flux d'animation de démonstration devrait se terminer à 16 secondes. vous disant cela, vous comprenez que les codes temporels peuvent être différents dans chaque pré-composition, et c'est parce que la pré-composition sur laquelle nous travaillons dans la chronologie commence à la 11e seconde de la composition principale Et dans cette pré-composition, nous avons commencé à animer à partir du deuxième zéro Par conséquent, nous voyons ici un code temporel différent. Notre point final dans la chronologie cette précomposition est la marque des 16 secondes, non celle des 27 secondes, comme dans la composition précédente où se trouve la scène de pré-composition et en commençant par les Ensuite, lorsque nous entrerons dans la précomposition du projet, le code temporel de fin sera à nouveau différent Ici, il en est à neuf secondes. En effet, l'animation commence ici à partir du deuxième zéro, et non à partir du deuxième point sept, car la précomposition du projet commence dans la précomposition de la scène 4 Donc, ne pensez pas que vous faites une erreur. Dans la composition principale, le chronométrage indique quelque chose de différent par rapport à la précomposition de votre scène, faites confiance à la position de l'indicateur de C'est pourquoi il est important de placer l'indicateur de temps au bon moment dans la composition principale puis de ne pas le déplacer lorsque vous entrez dans les précompositions Il est très important de comprendre cela, en particulier dans ce type de projet, car la création d' animations de flux de démonstration peut être structurée à partir plusieurs précompositions qui ne démarrent pas au même moment Bien, revenons au projet. Passons maintenant à un zoom arrière, et tout en gardant à l'esprit que l'animation doit se terminer à neuf secondes de cette chronologie, commençons à travailler sur la partie d'animation suivante de ce flux de démonstration. Cette fois, arrêtons-nous au moment où l' introduction des couches de tâches se termine et affichons l'icône verte de la termine et case à cocher afin que nous puissions commencer à créer l'animation de la case à cocher Comme vous pouvez le voir, nous avons deux couches pour créer le design des cases à cocher Par conséquent, assurez-vous de les sélectionner tous les deux , puis de les coller dans la précomposition du premier projet Commençons maintenant par là et colorons-le en vert. Et maintenant, nous devons chronométrer l'animation d'introduction de la case à cocher avec les couches Nous pouvons démarrer l'animation des cases à cocher juste après l'introduction des couches de tâches Restons donc ici pour le moment. Maintenant que je sais que j'ai besoin de quelques cases à cocher dans la scène, je préfère précomposer ces deux couches et créer l'animation qu'elles contiennent, afin de pouvoir facilement dupliquer la précomposition et la répartir sur toute la partie de l' Nous pouvons l'appeler tâche terminée ou case à cocher. Assurons-nous simplement de sortir la nouvelle précomposition du dossier de l'écran Cela apparaît ici parce que lorsque nous avons créé cette précomposition, l' une des précompositions de ce dossier C'est bon. Et maintenant, marquons-le en vert et saisissons-le. Et maintenant, avant de commencer à animer, ajustons le code temporel de début de la précomposition pour qu'il commence à zéro Ce n'est pas zéro car lorsque nous avons précomposé les couches, nous en étions aux cinq secondes. C'est bon. Maintenant que les icônes sont trop petites, redimensionnons ces couches. Nous pouvons régler l'échelle à 300, super. Et maintenant, placons-le au centre de la maquette. Nous pouvons utiliser l'outil d'alignement, assurez-vous de régler l' alignement sur la composition. Je pense que nous pouvons fixer l'échelle à 500. C'est mieux Enfin, réduisons les couches. Génial Et maintenant, avant de l'animer, convertissons les couches en trois couches D. Comme nous savons qu'ils doivent être présentés dans une scène en trois D, ajustons ensuite la taille de la composition en fonction des couches de la composition, laissons de l'espace libre pour créer une belle animation éclatante C'est bon. Passons maintenant au début de la chronologie et créons une animation éclatante de dix images pour les deux couches Je pense que nous pouvons l' agrandir davantage au milieu de l'animation. Ça a l'air mieux. Nous pouvons maintenant retarder l'icône V de trois images pour la rendre un peu plus intéressante. Je pense que c'est trop. Ramenons-le d'une image en arrière. Voyons à quoi ça ressemble maintenant. Génial. Je trouve que ça a l'air génial. Maintenant, nous pouvons revenir à la scène et chronométrer cette animation avec le reste de la scène. Tout d'abord, nous pouvons réduire la précomposition et la convertir en une couche tridimensionnel. Passons maintenant au point où l' animation s'est terminée et ajustons la taille de la précomposition en fonction de la case à cocher de la tâche Nous pouvons régler l'échelle à 30. Et maintenant, déplaçons-le au bon endroit. Appuyons sur Cutrel ou sur Command Shift H pour masquer les guides de couches afin que nous puissions voir ce que nous faisons Génial. Et maintenant, synchronisons cette animation avec la scène. Nous pouvons démarrer l' animation des cases à cocher à partir d'ici. Génial. Et maintenant, sauvegardons le projet avant de continuer. Nous pouvons maintenant fermer tous les précoms non pertinents et commencer à ajuster le mouvement dans chaque partie de cette animation de flux de démonstration Comme vous pouvez le constater, jusqu'à présent, nous n'avons simplifié aucune des images-clés Lorsque vous travaillez sur de longues scènes comprenant quelques parties d' animation, il est préférable de vous concentrer d'abord sur la création de l' animation initiale et de vous assurer que le moment est bien choisi plutôt que finaliser chaque image-clé créée pour les couches de la Gardez cette méthode à l'esprit lorsque vous travaillez dans After Effects. Revenons maintenant à la scène principale et commençons à ajuster toutes les images clés que nous y avons créées en premier. Assurez-vous qu'aucune couche n' est sélectionnée et appuyez sur vous pour voir toutes les images-clés que nous avons ici Commençons maintenant à travailler sur la première partie de l'animation, qui correspond au démarrage de l' animation fractionnée. Examinons d'abord le mouvement principal qui se produit ici, savoir la rotation du zéro qui fait pivoter tous les écrans Assurons-nous d' ajuster la vélocité des images-clés de rotation à 75 % Dans l'éditeur de graphes, cela ressemble à ceci. Regardons maintenant l'animation plusieurs fois et voyons ce que l'on ressent. Je pense que nous pouvons augmenter la vélocité de 85 % pour obtenir des mouvements un peu plus rapides D'accord, je pense que ça a l'air mieux. Passons maintenant au mouvement descendant. Je veux que cette couche commence à monter rapidement et ralentisse vers la fin. Comme vous pouvez le constater, cela crée une collision entre l' écran du projet et l' écran situé derrière celui-ci. Sélectionnons donc le premier mouvement de l'écran du projet avant la composition et veillons à ce qu'il commence lentement et prenne de la vitesse vers la fin, à l'opposé du mouvement descendant du zéro. Cela créera une meilleure synchronisation de vélocité entre les deux animations. Nous pouvons maintenant accélérer le déplacement de l'écran du projet au milieu de l'animation, si nous le voulons, en ajustant la vélocité de sortie. Pendant que je le fais, je m'assure vérifier le chronométrage afin que les compositions n'entrent pas en collision Génial. Je vois donc cela en ajustant la vélocité de cette façon. Peut s'adapter à l'animation. À ce stade, nous pouvons sélectionner toutes les images clés de l'écran du projet et les simplifier facilement, puis créer la même vélocité pour l'ensemble de l'animation. Avant de poursuivre, vérifions-nous que cette collision ne se produise pas. Très bien, je trouve que tout va bien. Et nous pouvons maintenant passer à la partie suivante de l'animation, qui est l'animation du reste des écrans. abord, sélectionnons toutes les images-clés, simplifions-les, puis dans l'éditeur de graphes, veillons à avoir une vélocité similaire à celle que nous avons créée pour l'animation nulle. Dans notre cas, Dans notre cas, le pourcentage d'influence doit être environ 85 % pour la vélocité entrante et sortante Voyons à quoi tout ressemble. Le mouvement descendant semble un peu étrange, à mon avis. Ajustons donc la vélocité de cette animation comme nous l'avons fait pour le reste de l'animation. J'adore la sensation que procure le mouvement en ce moment, mais comme vous pouvez le constater, nous avons à nouveau eu le problème de collision. Dans ce cas, nous pouvons simplement rester ici au milieu de l'animation de la pré-composition du projet et nous assurer de déplacer la couche sur son axe de position Z. Mon objectif est d'éloigner un peu cette couche de la couche qui la sous-tend. Nous pouvons également en parler un peu. Et maintenant, zoomons et vérifions si cette collision se reproduit. C'est bon. Je vois que tout va bien, et nous sommes maintenant prêts à passer à autre chose. À ce stade, passons à la précomposition de l'écran du projet et ouvrons toutes les images-clés de toutes les couches pour voir ce que nous pouvons ajuster Dans ce cas, nous avons déjà traité l'animation des boîtes de projet, mais nous pouvons supprimer les images-clés précédentes sur la deuxième partie des couches des boîtes de tâches C'est bon. Maintenant, faisons des allers-retours sur la chronologie pour voir si tout fonctionne toujours bien après la suppression de ces images-clés Nous ne devrions pas avoir de problèmes, mais cela vaut quand même la peine de vérifier. C'est bon. Passons maintenant aux images-clés que nous n'avons pas encore ajustées. Nous pouvons commencer par assouplir les images-clés de cette couche. Pour voir quelles couches nous sélectionnons, rétablissons les guides de couches en utilisant Alright Et maintenant, allégeons facilement ces images-clés, puis réglons la vélocité à 85 % Cela a l'air sympa, mais je pense que l'animation d'introduction de cette section se produit trop rapidement. Faisons-le donc durer un peu plus longtemps pour ralentir l' animation. Dans notre cas, nous pouvons nous tenir aux cinq et cinq images suivantes et apporter la dernière image-clé. Le mouvement semble toujours très rapide, à mon avis. Faisons donc en sorte que cette animation dure exactement 1 seconde. Donc, si l'animation commence à 4 secondes et 22 images, passons à 5 secondes et 22 images et ramenons ici la dernière image-clé Voyons à quoi ça ressemble maintenant. Je peux à peine voir quelque chose car les autres couches entrent déjà dans la scène. Dans ce cas, isolons uniquement la couche de boîte blanche pour nous concentrer sur son mouvement. D'accord. Je pense que ça a l'air beaucoup mieux maintenant. Ceci fait, ajustons durée de l'animation d'introduction pour toutes les couches qui devraient entrer dans la scène après la première partie de l'animation Comme nous avons fait durer une seconde l'animation d'introduction de la section précédente, cela signifie que nous devons également faire durer l'animation d'introduction de la nouvelle section d'une seconde. Passons donc, encore une fois, aux cinq et 22 images suivantes et ramenons ici la dernière image-clé de cette couche Ensuite, nous devons faire de même pour le reste des animations. Pour ces deux couches, elles commencent toutes les deux à quatre et 25 images, ce qui signifie que nous devons passer aux cinq et 25 images suivantes et déplacer les dernières images-clés ici Faisons également en sorte que l'introduction de la liste des tâches dure 1 seconde Et, bien sûr, n' oublions pas de démarrer également l'animation des cases à cocher à partir d'ici Génial. Une fois cela fait, commençons à assouplir les images-clés En commençant par les images-clés de position de ces trois couches, réglez la vélocité sur 85 % Ça a l'air sympa. Maintenant, faisons de même pour les couches de tâches. Parfait. Comme nous savons que toute cette partie de l'animation devrait se terminer aux alentours de neuf secondes, nous pouvons constater que nous avons tout le temps nécessaire pour atteindre ce point. Faisons donc un bon décalage entre les couches de tâches pour remplir l'espace libre. N'ajoutez pas trop de délai entre les couches car nous avons encore besoin de quelques secondes pour l'animation de la case à cocher verte Cela dit, lançons cette précomposition une fois que la dernière couche de tâches aura terminé son animation Bien, dupliquons maintenant cette précomposition et plaçons la nouvelle case à cocher sous la Pour le rendre plus intéressant, commençons celui-ci à la septième seconde. C'est bon. Une fois les images-clés ajustées, revenons à la composition principale et prévisualisons l'animation avec la voix off pour nous revenons à la composition principale et prévisualisons assurer que tout fonctionne parfaitement. L'art pourrait le faire. un seul point, vous obtenez une vue d'ensemble parfaitement claire de tout ce sur quoi travaille votre équipe. Tous vos projets, toutes vos tâches. Toutes. un seul point, vous obtenez une vue d'ensemble parfaitement claire de tout ce sur quoi travaille votre équipe, tous vos projets, de toutes vos tâches, tout au même endroit. J'ai besoin d'une vue d'ensemble. Je vois que la scène suivante devrait commencer ici. Pour éviter d'avoir un cadre statique, revenons à la scène et ajoutons une autre animation de case à cocher verte pour la troisième tâche, juste pour remplir l'espace vide Assurez-vous que le délai est le même que celui de la deuxième case à cocher. Génial. Maintenant que nous avons fini de créer la partie la plus complexe, savoir l'animation du flux de démonstration, nous pouvons revenir à la scène et ajouter mouvements de caméra intéressants pour correspondre à l'animation du flux de démonstration. Mais au lieu d'animer la caméra elle-même, animons la précomposition d'écran du projet car je ne veux pas interférer avec l' animation de interférer avec l' Et je veux également vous montrer un moyen plus simple de créer des mouvements semblables à ceux d'une caméra sans réellement animer la caméra Cela dit, commençons. Tout d'abord, étant donné que la précomposition contient déjà des images-clés, nous allons créer un nouvel objet nul et y associer la précomposition De cette façon, nous aurons une couche propre avec laquelle travailler. Créez donc un nouvel objet nul et placez-le sous la couche de caméra. Commençons ce zéro au bout de 12 secondes et renommons-le en zéro écran 2 Déplacez-vous. Puisqu'il contrôlera le mouvement des projets de la précomposition nommée scène 2 Maintenant, convertissez le zéro en une couche tridimensionnelle et placez-le dans la même position que la précomposition de l'écran du projet Vous pouvez copier les valeurs de la précomposition vers la valeur nulle. Si vous passez à l'affichage personnalisé, vous verrez que la valeur nulle est placée exactement à l'endroit où se trouve la précomposition. Parfait. Nous pouvons maintenant attribuer la précomposition à la valeur nulle Avant cela, déplaçons ces deux couches haut et fermons la couche caméra. Génial. Maintenant, placez la deuxième partie du projet en précomposition vers la valeur nulle Cela fait, nous pouvons désormais contrôler cette précomposition en utilisant le null sans interférer avec les images clés déjà présentes sur la déjà présentes sur C'est bon. Créons un angle intéressant. Créez d'abord une image-clé pour la rotation en X aux 12 et 22 secondes images Avancez ensuite d'une seconde et faites pivoter la précomposition à environ 25 degrés Retournez ensuite au début de cette animation. Appuyez sur P pour afficher la propriété de position et créer une image-clé avec la valeur actuelle Avancez d'une seconde et rapprochez le zéro de la caméra. Une fois cela fait, simplifiez facilement les images-clés et ajustez la vélocité dans l'éditeur de graphiques à environ 85 % pour les mouvements entrants et sortants Génial. Maintenant, voyons à quoi ça ressemble. Je trouve que c'est une bonne idée, mais à mon avis, nous devrions commencer cette motion un peu plus tôt. Disons à partir des 12 et dix secondes images. Ouvrons les images clés de la précomposition et chronométrons l'animation nulle pour qu'elle commence au milieu de l'animation de précomposition D'accord, je pense que tout va bien maintenant. Mais comme vous l'avez peut-être remarqué, nous pouvons voir la section suivante en bas. Entrons dans la précomposition et corrigeons cela. Ouvrez d'abord les images-clés de la boîte blanche principale et placez-vous devant la première image-clé. Ensuite seulement, abaissez un peu plus la couche. Maintenant, retournez sur les lieux et vérifiez. Ça a l'air mieux. Je pense que nous pouvons également retarder légèrement l' animation des cases Plus tard, nous ajouterons une animation de curseur à cette scène. Et j'aimerais avoir quelques images libres pour créer soit une animation d'introduction pour le curseur, soit éventuellement une animation de zoom sur la tâche avec la case à cocher Cela dit, entrons dans la précomposition et déplaçons les trois précompositions à cocher pour commencer à partir des sept et dix secondes images Parfait. Revenons maintenant à la scène et, à ce moment précis, rapprochons encore plus le zéro la caméra afin que nous puissions voir les trois premières tâches de près. Nous pouvons également jouer avec la rotation pour obtenir un angle plus intéressant. N' oubliez pas le texte ci-dessus. Essayez de ne pas trop placer l'écran de l'interface utilisateur dans cette zone. Génial. Maintenant, ajustons également la vélocité à environ 85 % pour cette animation. Lorsque vous effectuez cette opération, assurez-vous d'ajuster les deux propriétés. Dans ce cas, la rotation me manque. Je vais donc facilement atténuer à nouveau les images clés pour réinitialiser l'assouplissement , puis l'ajuster correctement. Une fois que c'est fait, voyons ce que nous avons. Euh, ça a l'air super. Pour ajouter un léger mouvement à la scène, nous pouvons nous tenir un peu après la scène, devrions nous terminer et rapprocher légèrement la caméra de l'écran de l'interface utilisateur. C'est un excellent exemple de la raison pour laquelle il est préférable d'utiliser un objet nul pour des angles complexes au lieu de se débrouiller directement avec l'appareil photo. Vous pouvez toujours garder l' appareil photo pour des mouvements plus simples. Je pense que nous pouvons nous en rapprocher encore plus. Regardons-le encore une fois. Très bien, je trouve que ça a l'air génial. Revenons maintenant à la composition principale et prévisualisons-la avec la voix off Gérer une grande équipe chargée de plusieurs projets n'est pas chose facile. Trop de tâches, trop de demandes. Avant de vous en rendre compte, vous gémissez sur le coût à la recherche de Met One Point Point. La plateforme qui rend gestion de projet si simple que même votre chat pourrait le faire. Avec un point, tu obtiens un Christ Oui. Tout est projeté. Toutes vos tâches réunies au même endroit. Le tableau complet ? Parfait. Il semble que tout soit synchronisé. Trouvons donc le moment où démarrer l'animation d' outtro pour l'ensemble de la scène D'après la voix off, il semblerait que cela devrait commencer aux alentours de la 27e seconde. Restons là, puis entrons dans la scène, et je vais vous montrer comment créer une animation d'outtro simple qui passe parfaitement la scène suivante avec un match cut Tout d'abord, nous devons régler la dernière image-clé de l'appareil photo pour qu'elle s'arrête là Maintenant, avancez d'une seconde et poussez la caméra vers l'arrière. Redimensionnons le panneau pour plus de commodité. Maintenant, allez au début de l'Outro et ouvrez également les images-clés nulls Créez des images-clés avec les valeurs actuelles des deux propriétés, car nous ne voulons pas qu'elles changent jusqu'à présent. Avancez ensuite d'une seconde et ajustez le zéro pour que l'écran de l'interface utilisateur s'aligne parfaitement au centre Nous pouvons pousser la caméra encore plus loin en arrière et la relever légèrement. Génial. Nous y sommes presque. Depuis que nous avons reculé la caméra. Nous pouvons maintenant voir certaines des couches d'animation précédentes. Pour résoudre ce problème, il suffit de trouver le point dans la chronologie où nous sommes sûrs à 100 % que ces couches ne sont plus nécessaires. Dans ce cas, c'est lorsque notre premier null termine son animation. Nous pouvons également réduire ce zéro jusqu'à la fin de son animation. C'est l'endroit idéal pour recadrer le reste des écrans qui ont été parés à ce zéro. Sélectionnez-les donc tous et appuyez sur Alt (crochet droit) pour les recadrer. Génial Ceci étant fait, revenons à notre animation d' outtro À ce stade, nous pouvons commencer à ajuster le mouvement. Tout d'abord, sélectionnez l'objet nul et appuyez sur U pour vous assurer qu'aucune image clé n'a été oubliée. Génial. Maintenant, sélectionnez toutes les images-clés et appuyez sur F neuf ou sur F et F neuf si vous utilisez un Mac Ensuite, ouvrez l'éditeur de graphique de vitesse et ajustez la vitesse pour la rapprocher de 95 %. Nous faisons cela parce que nous voulons créer cette transition Match Cut. Et pour que cela fonctionne, le mouvement doit atteindre un pic très rapide. Maintenant, placez-vous au point du graphique où le mouvement est le plus rapide. Revenez ensuite à la composition principale et recadrez la précomposition à ce point Ainsi, lors de la prochaine scène que nous allons créer, nous poursuivons le mouvement sans problème. Plus d'informations à ce sujet dans la prochaine leçon. Pour l'instant, revenons à la scène et ajustons sa durée. Ne le recadrez pas trop près de la fin du mouvement d'outtro. Avancez plutôt d'une seconde et réduisez la chronologie jusqu'à ce point. Génial. Une fois cela fait, entrez dans la pré-composition de l'écran. Juste pour vérifier, nous n'avons rien oublié. Tout semble bon ici, et nous n'avons pas besoin de raccourcir cette chronologie. Passons donc à autre chose. Nous pouvons maintenant faire un peu de ménage, fermer les précoms inutiles, puis revenir à la composition principale pour préparer l'animation Avant de terminer, organisons également le projet en déplaçant la tâche effectuée précomposition dans le dossier des précompositions Faites de même avec la précomposition Cat Jeff. Une fois que c'est fait, enregistrez le projet. C'est ainsi que nous avons terminé cette leçon. Ensuite, nous terminerons la transition vers le match cut et commencerons à créer la prochaine animation du flux de démonstration. Ça va être une bonne idée. Alors, on se voit là-bas. 18. Création du modèle d'animation de la ouverture: Reviens. Commençons la leçon en allant sur le tableau vidéo et en vérifiant quelle est la prochaine chose à faire Comme vous pouvez le voir, nous devons maintenant créer l'animation Title. Cette animation du titre apparaîtra dans les scènes suivantes du projet à chaque fois avec un texte différent. Comme vous pouvez le constater, nous l' avons également ici. Toutes les questions du script seront présentées de la même manière. Dans la dernière partie, cette animation de titre sera similaire à notre première animation de titre au début de cette vidéo. Bien, maintenant que nous savons que nous aurons deux ou trois animations de titre identiques, nous pouvons les structurer d'une certaine manière, afin qu'il soit facile pour nous de les dupliquer et de simplement modifier le texte dans cet esprit que nous allons créer une nouvelle composition pour la première animation du titre. Appelons-le « Titre principal ». Assurez-vous de changer la résolution en Full HD et vérifiez que les autres paramètres sont corrects. Génial. Maintenant, sélectionnons l'outil de texte et accédons au script pour copier le texte de la première animation du titre. Dans notre cas, c'est cette question. Revenons au projet. Collons le texte et ajustons-le. Tout d'abord, assurez-vous de centrer le paragraphe. Et voyons maintenant quelle taille peut bien fonctionner ici. Je trouve que 150 c'est génial. Ensuite, choisissez le gras pour la police, puis alignons la couche au centre de la ligne. Enfin, nous pouvons centrer le point d'ancrage. Pour cela, maintenez la commande du contrôleur enfoncée et double-cliquez sur l' outil AnchorPoint Génial. Revenons maintenant à l'outil de sélection et rendons cette composition un peu plus intéressante. Tout d'abord, nous pouvons intégrer l' animation d'arrière-plan en dégradé que nous avons créée au début du projet. Je vais maintenant vous montrer quelques astuces de base que vous pouvez utiliser pour que le dégradé soit légèrement différent du reste des scènes de ce projet. Cela peut être une bonne idée car nous pouvons décider que l'arrière-plan des animations du titre sera un peu différent du reste du projet pour rendre un peu plus intéressant. C'est vrai. Donc, la première astuce que j'aime faire lorsque j'ai des animations en dégradé est d' ajouter l'effet d'inversion Maintenant, je peux changer de canal ici pour obtenir des variations intéressantes pour le dégradé. C'est bon. Pour l'instant, disons que nous optons pour la luminance. Si nous zoomons, nous pouvons voir les pixels qui donnent au dégradé un aspect de mauvaise qualité. Pour résoudre ce problème, nous pouvons ajouter l'effet Fast booxplur. Ensuite, assurez-vous de régler le rayon de flou sur un nombre élevé Je pense que 20 c'est suffisant dans notre cas. Ensuite, pour améliorer l'apparence, nous pouvons également ajouter l'effet de teinte et de saturation et augmenter la saturation principale à nombre plus élevé pour obtenir un aspect intéressant pour le dégradé Comme vous pouvez le constater, cela crée belles parties contrastées dans le dégradé. Et maintenant, si vous souhaitez modifier la couleur du dégradé, vous pouvez jouer avec la propriété de teinte principale. Mais si vous souhaitez avoir le contrôle total des nouvelles couleurs, vous pouvez ajouter l'effet toner. Supprimons maintenant l'effet d'inversion afin de voir ce que nous pouvons faire avec l'effet toner avec nos couleurs d'origine. C'est bon. Donc, tout d'abord, pour avoir le contrôle d'un plus grand nombre de tons dans notre dégradé, nous pouvons changer les tons en Penton Nous avons maintenant cinq types de couleurs que nous pouvons contrôler. Nous pouvons maintenant intégrer la palette de couleurs à la composition et commencer ajuster les différents tons que nous avons maintenant Disons que je veux que ce dégradé soit plus violet, alors je vais commencer à choisir les couleurs violettes. Je vous montre ces astuces parce que je veux que vous sachiez que vous pouvez contrôler totalement les couleurs de votre arrière-plan dégradé, rendiez vous-même ou que vous téléchargiez une animation en dégradé sur Internet. Parfois, nous aimons le mouvement du dégradé, mais nous ne les avons pas dans les couleurs précises qui doivent correspondre à la palette de nos clients. Vous savez maintenant comment ajuster n'importe quel dégradé en fonction des besoins de votre projet. C'est bon. Maintenant que cela est expliqué, supprimons l'effet toner et continuons à ajuster un peu plus notre arrière-plan dégradé. Si vous pouvez toujours voir les pixels, vous pouvez redimensionner le rayon de flou Et sachez également que l' ordre des effets peut également affecter l' apparence du dégradé. Comme vous pouvez le constater, le fait d'avoir un effet de flou sous l'effet de teinte améliore légèrement l'apparence du dégradé OK, alors maintenant que nous serons satisfaits de l'apparence de la composition du titre, nous pourrons commencer à l'animer Il existe une infinité de façons de le faire, mais je veux montrer comment vous pouvez donner une belle apparence à votre projet, même avec une animation très simple. Commençons par ouvrir l'échelle des deux couches. Réglons maintenant l'échelle à 200. Nous pouvons régler la couche de texte sur 400 pour obtenir un mouvement un peu plus intéressant. Créez maintenant une image-clé au début de la chronologie. Ensuite, avançons d'une seconde et ramenons l'échelle à 100 pour les deux. Le texte semble trop long. Réglons l'échelle à 90. Ensuite, allégeons facilement les images-clés et réglons la vélocité pour les deux à environ 95 % L'objectif est de créer un mouvement super rapide. Voyons à quoi ça ressemble. C'est bon. Ça a l'air bien pour le moment. Nous avons donc créé l'intro du titre Créons maintenant l'Outro. Mais avant cela, passons au tableau vidéo et vérifions combien de temps cette animation doit durer Il commence aux secondes 27 et 15 images, et voyons maintenant où il se termine aux secondes 29 et 10 images. Cela signifie que nous avons un peu plus de 2 secondes pour cette animation. Revenons maintenant à la composition du titre. Créons une courte pause pour l'animation afin que le spectateur puisse lire le texte. Faisons en sorte que la pause dure dix images. Créons maintenant une image-clé avec les mêmes valeurs ici. Avancons ensuite d'une seconde et copions les premières images-clés ici Maintenant, nous devons nous assurer que le mouvement est similaire à l'intro Comme vous pouvez le constater, ce n'est pas le cas. Adoucissons donc facilement les images-clés outtro pour réinitialiser la vélocité , puis ajustons-la à 95 % Voyons à quoi ça ressemble. Je pense qu' il n'y a pas assez de temps pour lire le texte. Faisons en sorte que la pause dure encore cinq images. C'est à ce moment que nous terminerons l'animation pour obtenir une belle transition adaptée à presque toutes les scènes. C'est bon. Ajoutons maintenant un petit détail à l'animation pour attirer l'attention du spectateur sur le mot important de ce texte. Dans mon cas, je souhaite ajouter une jolie animation de trait sous le mot. Laissez-moi vous montrer ce que je veux dire. Tout d'abord, assurez-vous qu'aucune couche n'est sélectionnée. Sélectionnez ensuite l'outil Stylo. Maintenant, assurez-vous de désactiver la couleur de remplissage et d'activer la couleur du trait. Pour ce qui est de la couleur du trait, intégrons la palette de couleurs à la composition et décidons d'utiliser une couleur vive afin qu'elle soit en fort contraste avec l'arrière-plan afin que nous puissions le voir clairement D'accord. Supprimons maintenant la palette de couleurs et créons une ligne sous le mot full pour la largeur du trait. On peut le laisser le 20. Créons maintenant un point supplémentaire le chemin et faisons-le apparaître. Ensuite, courbons-le et ajustons les poignées pour obtenir une jolie ligne arrondie. Réduisons-le un peu. Génial. Maintenant, changeons le nom en trait et commençons à l'animer Et nous allons le faire en utilisant l'effet trim path. Pour l'instant, passons à la deuxième étape et créons des images-clés pour la propriété finale Si vous souhaitez que votre trait se déplace dans l'autre sens, vous pouvez ouvrir les propriétés du trait et modifier la direction du tracé. C'est bon. Je vais le ramener à ce qu'il était. Et maintenant, animons-le. À ce stade, définissez la propriété end sur zéro. Passons maintenant à la fin du moment de pause et ramenons la valeur finale à 100. Génial. À présent, nous allons attendre cinq images après le début de l'animation et créer une image-clé pour la propriété start avec la valeur zéro Ensuite, placez cinq images après la fin de l'animation et définissez la valeur de départ sur 100. Maintenant, nous avons une jolie animation de trait. Faisons en sorte que le trait soit visible un peu plus longtemps, et nous pouvons le faire en jouant avec la vélocité des deux animations. Tout d'abord, sélectionnons les images-clés de fin et faisons en sorte que cette animation démarre rapidement Ensuite, faisons en sorte que les images-clés de démarrage démarrent lentement. Nous avons ainsi ajusté le timing entre ces deux animations pour que le trait soit visible encore quelques images avant qu'il ne disparaisse. Génial. Maintenant que nous avons terminé l'animation initiale de l' animation du titre, ajoutons un léger mouvement de zoom arrière supplémentaire à la scène afin qu'elle ne paraisse pas statique. Je vais vous montrer comment le faire rapidement. Créons d'abord un nouveau calque de réglage au-dessus de tous les calques. Ajoutons-y ensuite l'effet de transformation. Passons maintenant au début de la chronologie, réglons l'échelle sur 120 et créons une image-clé ici Passons maintenant à un moment où nous sommes sûrs que l'animation devrait déjà se terminer. Dans notre cas, nous pouvons nous contenter de trois secondes et fixer maintenant l'échelle à 100. Maintenant, si vous regardez l'animation, vous verrez que nous obtenons un mouvement de zoom arrière agréable et doux, mouvement de zoom arrière agréable et doux, et l'animation meilleure car même au moment de la pause, est meilleure car même au moment de la pause, la scène bouge. D'accord ? Une fois cela fait, nous avons fini de créer l'animation du titre. Nous pouvons activer la fonction de qualité et d'échantillonnage pour obtenir le maximum de qualité pour le gradient MP. Pour le dossier, nous l'avons ici. Passons maintenant au quatrième et réduisons la composition jusqu'à présent. Revenons à la composition principale et introduisons ici la précomposition du titre Et maintenant, pour obtenir une transition fluide, recadrons la précomposition du titre à partir du moment où l' animation d'introduction est Pour savoir où il se trouve, nous pouvons entrer dans la précomposition et trouver le moment où l'animation de l'une des couches se fait à toute vitesse Dans notre cas, c'est ici au cadre 15. Nous pouvons reculer d'une image, puis revenir à la composition principale et découper la précomposition jusqu'à ce point Maintenant, si vous regardez l'animation entre la dernière scène et le titre, vous verrez que nous avons une transition Match Cut super cool. Génial. Maintenant, recadrons ce précomptage depuis la fin, également au moment où les outtros passent à vitesse maximale pour passer à la scène suivante Génial Cela étant fait, nous sommes maintenant prêts à travailler sur la scène suivante. Avant cela, je vous suggère sauvegarder le projet afin garantir les progrès que vous avez réalisés jusqu'à présent. C'est bon. Revenons maintenant au tableau vidéo et voyons quelle est la prochaine scène que nous devons créer OK, alors maintenant, comme vous pouvez le voir, nous devons travailler sur l'écran principal de l'interface utilisateur de la tâche. D'après ce que nous voyons dans le storyboard, nous pouvons clairement voir que nous devrons créer une courte animation de flux de démonstration Je parle de la création d'une animation d'introduction pour la fenêtre contextuelle que nous voyons ici Pour mieux comprendre cela, ouvrons cette précomposition d'écran d'interface utilisateur et voyons ce que nous y trouvons OK, nous pouvons donc voir ici la fenêtre contextuelle présentant les sous-tâches de la tâche principale, qui dans ce cas, est de concevoir le nouveau tableau de bord. Je le sais parce que je peux le voir dans le titre de cette fenêtre contextuelle. Génial. C'est dans cet esprit que nous allons créer une nouvelle composition pour la nouvelle scène dans laquelle nous allons créer cette animation de flux de démonstration Appelons cela la scène 5 de pré-composition. Assurez-vous que les paramètres sont corrects et cliquez sur OK. Génial. Voici donc la nouvelle pré-composition de la scène. Et maintenant, faisons glisser la pré-composition de l'écran de l' interface utilisateur des tâches pré-composition de l'écran de l' interface utilisateur des tâches dans la chronologie de la nouvelle composition de scène Plus tard, nous ajouterons ici le texte et l'animation du curseur. Mais pour le moment, concentrons-nous sur création de l'animation du flux de démonstration. La première chose que nous pouvons faire est sélectionner toutes les couches ici et de les réduire. Je ne prévois pas d'animer la scène dans un espace tridimensionnel Je ne convertirai donc pas les couches en couches tridimensionnelles OK. Et maintenant, sélectionnons toutes les couches liées à la conception de la fenêtre contextuelle et précomposons Comme nous avons cette couche d'ombre, il est plus facile de comprendre quelles couches sélectionner, en commençant par celle-ci et toutes les autres couches ci-dessus. Vous pouvez activer ou désactiver le calque sélectionné pour vous assurer que vous l'avez bien compris. C'est bon. Et maintenant, précomposons-les tous. Nous pouvons appeler cet écran de précomposition une fenêtre contextuelle. Génial. Maintenant, réduisons la précomposition et assurons-nous que le point d'ancrage se trouve au centre. Génial Maintenant, désactivons également la fenêtre contextuelle dans la couche d'ombre et commençons à préparer le reste du dessin pour l'animation. À ce stade, nous devons comprendre quelles couches nous devons précomposer et autres Et, bien sûr, tout dépend de l'animation que nous voulons créer ici. Dans notre cas, la chose la plus importante à savoir est que nous devons créer une animation par clic pour cette tâche, car la fenêtre contextuelle que nous avons dans le design s'y rapporte. Mais avant cela, je vais m'assurer que les zones de tâches sont remplies de blanc. J'ai oublié de le faire lors de la phase de préparation dans Illustrator. Mais c'est très bien. Comme je l'ai déjà dit, cela peut nous arriver à tous. Et il est important pour moi de vous montrer un flux de travail réaliste. Dans votre cas, vous n' avez rien à faire car vous avez déjà mes fichiers Illustrator finalisés. Je vais donc accélérer un peu ce processus, car je ne fais que trouver les couches pertinentes et m' assurer de définir une couleur de remplissage sur le blanc. Génial. Maintenant, après avoir enregistré le fichier, je vais retourner au projet et attendre qu'il soit mis à jour. Génial Donc, une fois que tout sera mis à jour, je sauvegarderai le projet et vous pourrez continuer à le suivre. Revenons au tableau vidéo et vérifions combien de secondes la scène doit durer Cela nous aidera à comprendre où terminer la scène et combien de temps doit durer la partie animation. La scène commence donc aux secondes 29 et 15 images, et elle se termine aux secondes 38 et 28 images. Cela signifie que nous avons un peu plus de 7 secondes pour présenter toutes les animations qui se déroulent ici. C'est dans cet esprit que nous pouvons maintenant réduire la précomposition et commencer à travailler sur l'introduction de cet écran Je préfère d'abord terminer l'intro, afin de savoir avec certitude par où commencer l'animation du flux de démonstration qui doit suivre l'intro C'est mieux que de créer d'abord le flux de démonstration , puis d'ajuster les images-clés après avoir créé l'intro Génial. Comme nous avons une animation Zoom in rapide qui se produit dans l'avant-plan de l'animation du titre, nous pouvons créer une animation Zoom in rapide pour l'introduction de cette scène afin d'obtenir un résultat original. Transition. Créons donc une animation à l'échelle pour cette pré-composition, à partir d'une échelle de 50 Et puis après 1 seconde, ne réglez pas l'échelle à 100 car nous avons besoin d'espace pour le texte, nous pouvons le mettre à 80. Génial. Dans cet esprit, créons également une animation de position. Je veux que l'écran soit là bas. Nous pouvons utiliser la grille d'action sécurisée pour nous assurer ne pas trop la déplacer vers le bas. D'accord ? Ajustons maintenant la vélocité pour que ce mouvement soit ultra rapide au milieu de l'animation. C'est à ce moment que nous allons commencer cette précomposition. Passons maintenant au Master Comp et introduisons la nouvelle scène ici Maintenant, entrons en scène et arrêtons-nous au point le plus rapide. Enfin, revenons à la composition principale et recadrons cette précomposition à ce stade ne nous reste plus qu'à placer la scène pour qu'elle commence juste après l'animation du titre et vérifier à quoi ressemble le tout. Génial Je pense que le match cut fonctionne parfaitement. Nous pouvons maintenant entrer dans la scène et commencer à animer l'animation du flux de démonstration, commençant juste après l'intro Entrez les tâches avant la composition et commençons à travailler. Très bien, nous pouvons donc créer une belle animation contextuelle pour toutes les tâches de la section principale ici créer une belle animation contextuelle pour toutes les tâches de la section principale À partir de maintenant, nous allons créer une image-clé pour la propriété d'échelle avec la valeur actuelle, comme toujours, afin que tout soit nous allons créer une image-clé pour la propriété d'échelle avec la organisé Marquons ces couches d'une couleur différente. Ensuite, passons 1 seconde et créons une autre image-clé ici Puis, au milieu de cette animation, agrandissons-les toutes. 120 ça a l'air bien. Génial. Et maintenant, avant de régler les images-clés, finissons d'animer et chronométrer l'ensemble de l' Maintenant, après l'animation qui apparaît, je souhaite ajouter une animation de case à pour quelques-unes des premières tâches Et comme j'ai une animation de case à cocher prête dans une précomposition séparée, nous pouvons maintenant supprimer ces couches Plus tard, nous ajouterons la case à cocher pré-comp que nous avons préparée Pour l'instant, créons l' animation de clic pour la troisième tâche. Mais au lieu d' animer cette couche, nous utiliserons un objet nul Et c'est parce que le point d'ancrage de cette couche est centré, et je ne veux pas le modifier ou modifier les images-clés que j'ai déjà sur cette couche. Laissez-moi vous montrer ce que je veux dire. Créons maintenant un nouvel objet nul et créons une petite configuration pour l'animation par clic. Placez le zéro dans la zone à partir de laquelle vous souhaitez que l' animation du clic soit déclenchée. Nous pouvons remplacer le nom par le nom de la couche qui lui sera associée Dans notre cas, il s'agit de la couche portant le numéro 100, nous pouvons donc l'appeler null 100. Une fois cela fait, associons la couche correspondante à la valeur nulle. Et maintenant, à partir de la deuxième étape, c'est-à-dire après l'animation contextuelle, créons une animation à échelle réduite pour la valeur nulle Faisons en sorte qu'il dure 15 images. D'accord. Maintenant, une fois que nous avons obtenu l'animation du clic, nous pouvons découper cette couche pour commencer et terminer en fonction des images-clés Plus tard, nous pouvons déplacer cette valeur nulle vers l'arrière ou vers l'avant dans le temps au cas où nous souhaiterions que l'animation du clic se produise à un autre moment. D'accord. Une fois cela fait, continuons à travailler sur la prochaine partie de l'animation, qui est l'introduction de la fenêtre contextuelle de sous-tâche Tout d'abord, après l'animation du clic, la couche d'ombre doit apparaître. Alors apportons-le ici. Et maintenant, créons un fondu d'une seconde dans l' animation à l'aide de la propriété d' opacité Si l'animation commence à la deuxième et à la quinzième image, elle doit se terminer aux deuxième, troisième et quinzième images. OK. Et maintenant, pour rendre cela un peu plus intéressant, ajoutons également une belle animation floue Pour cela, créons d'abord un nouveau calque de réglage. Placez-le au-dessus de la couche d'ombre et déplacons-le pour qu'il commence là où commence l'ombre. Ensuite, nous devons rendre cette couche de réglage visible uniquement dans les limites de la forme principale de cet écran d'interface utilisateur, car nous ne voulons pas éléments situés en dehors de cette zone soient flous Il suffit que la zone de l'écran soit floue. Donc pour ce faire, on peut simplement créer la couche de réglage, utiliser l'Alpha de la boîte principale. N'oubliez pas de réactiver la couche de boîte de cette façon, nous avons masqué la couche de réglage OK. Ajoutons maintenant l'effet de flou Fast Box au calque de réglage et créons une animation pour le rayon de flou Si nous activons l'arrière-plan transparent, nous verrons que le flou ne couvre que les limites de l'écran de l'interface utilisateur, ce que nous voulons Cela signifie que si nous ajoutons de nouveaux éléments derrière la couche de réglage, cela ne fera que brouiller les parties situées derrière les limites de la forme de l'écran de l'interface utilisateur D'accord. Je vais supprimer la forme et animer le flou Tout d'abord, nous pouvons changer le nom de la couche de réglage en flou Réglons maintenant le rayon de flou à zéro et créons des images-clés Ensuite, avançons d'une seconde et réglons le flou sur une valeur supérieure. Peut-être dix. Je pense que c'est trop. Essayons-en cinq. Oui, c'est mieux. Génial. Maintenant, une fois cela fait, introduisons la précomposition contextuelle ici et créons une animation contextuelle simple à l' aide de la Génial. Je trouve que ça a l'air sympa, et nous pouvons maintenant passer à autre chose. Après l'animation contextuelle, nous devons ajouter une animation de case à cocher dans la précomposition contextuelle. Comme nous avons déjà préparé une précomposition animée prête à l'emploi, nous pouvons le faire en une minute Pour le moment, concentrons-nous sur l'amélioration du mouvement des images-clés que nous avons créées ici Mais avant cela, je viens de remarquer que la couche de réglage n' atteint pas la partie inférieure de cette section. Pour résoudre rapidement ce problème, nous pouvons utiliser le canal Alpha de la boîte principale de cet écran d' interface utilisateur pour le masquer. Génial. Donc maintenant, nous ne voyons pas la partie inférieure de la boîte blanche de cette section, et nous pouvons passer à l'amélioration du mouvement. Commençons par les couches de tâches. Faisons-les apparaître rapidement dès le début de l'animation. J'ai remarqué que j'avais raté la première tâche, qui est la couche inférieure du panneau des couches. Permettez-moi d'ajuster le mouvement ici très rapidement. C'est un bon exemple pour toujours s'assurer que vous obtenez toutes les images-clés que vous souhaitez ajuster D'accord. Cela fait, je suis content du mouvement, et maintenant, pour le rendre un peu plus intéressant, je vais créer un décalage d'une image entre les images-clés pour créer un délai agréable Voyons à quoi ça ressemble. Je pense que nous pouvons augmenter le délai. Disons, deux images décalées. Pour cela, je vais deux images après la première tâche, les images-clés, puis m'assurer que la deuxième tâche commence à se déplacer à partir de ce point Cette fois, j'utiliserai la nouvelle fonction de décalage Je vais donc m'assurer de ne pas sélectionner les images-clés dans la couche supérieure Je vais les sélectionner dans la couche inférieure car je veux que le décalage soit dans le sens vers la droite. D'accord. Je trouve que ça a l'air génial. Ajustons maintenant l' introduction pour la partie suivante, fonction de l'animation des couches de tâches Cela fait, commençons maintenant à ajuster la prochaine partie de l'animation que nous avons ici, commençant par l'animation par clic. Ajustons maintenant l'animation de l'ombre et du flou. Faisons en sorte que ça démarre rapidement. Passons maintenant à l'animation contextuelle. Nous pouvons régler la vélocité des images-clés de l'échelle à 85 % et voir à quoi cela ressemble Je trouve que ça a l'air génial, et nous pouvons passer à la partie suivante de l'animation, qui commence juste après l'animation contextuelle. Restons donc ici et entrons dans la précomposition pour ajouter l'animation de case à cocher qui doit se trouver Tout d'abord, zoomons pour voir ce que nous faisons de mieux. Et maintenant, au lieu d'animer chacune des cases à cocher ici, nous allons utiliser notre animation prête à l'emploi que nous avons préparée plus tôt Trouvons-le donc dans le dossier des précompositions et faisons-le glisser vers la chronologie Maintenant, réduisons la précomposition et réduisons-la. Nous pouvons régler l'échelle à 20. Maintenant, plaçons cette précomposition à côté de la quatrième sous-tâche. Je pense que nous pouvons l'étendre un peu. Voyons à quoi ça ressemble. Réglons l'échelle à 25. Génial. Trouvons maintenant le bon moment pour démarrer cette animation. Cela doit se produire juste après l'animation contextuelle. Restons donc ici et entrons dans la précomposition contextuelle. Maintenant, déplacez l' animation de la case à cocher pour commencer à partir d'ici. Génial Et maintenant, dupliquons-le et commençons les 115 nouvelles images par la suite. Nous pouvons maintenant étiqueter les pré-compositions en vert et enfin apporter la nouvelle pour la sixième sous-tâche Je ne pense pas que nous ayons besoin de créer plus que cela, puisque nous avons déjà presque atteint la limite de durée dont nous avons besoin. Dans cet esprit, passons à la composition principale et voyons l' animation en écoutant la voix off pour vérifier si tout est parfaitement synchronisé avant de créer un Otro Bien sûr. Chaque projet inclut des tâches détaillées, des sous-tâches et un suivi de la progression en temps réel, afin que rien ne passe entre les mailles du filet Je veux voir qui. D'accord, je trouve que ça a l'air génial. Maintenant, nous pouvons commencer à réfléchir à l'avant-plan de cette scène, qui doit se produire aux alentours de 37 secondes. Lorsque nous revenons sur les lieux, nous pouvons constater qu'il nous reste encore beaucoup de temps pour atteindre ce point. À l'heure actuelle, l'animation que nous avons créée semble un peu ennuyeuse. Profitons donc de cette opportunité pour ajouter jolis mouvements de zoom avant et de zoom arrière afin de rendre la scène plus dynamique. Je souhaite également modifier l'animation contextuelle que nous avons créée pour les boîtes de tâches un peu plus tard dans la chronologie, car nous avons beaucoup d' espace libre avant la fin de la scène D'accord. Cela dit, passons aux deux secondes de la chronologie de la scène et commençons par l'animation contextuelle des couches de tâches. Je constate que j'ai oublié de créer un délai entre la première couche et les deux couches inférieures Je vais donc déplacer les images-clés de la couche inférieure d'une image vers l'avant C'est bon. À présent, sélectionnons toutes les images-clés des couches de tâches et démarrons cette partie de l'animation dès les deux secondes Génial. Maintenant, sélectionnons la prochaine partie de l'animation et ajustons le timing en conséquence. À bien y réfléchir, commençons cette partie d'animation une seconde plus tard, car je souhaite laisser de l'espace libre pour une animation Zoom in ou une animation avec curseur pour le moment. Une fois terminé, revenons à la scène, passons à la deuxième seconde et commençons à ajuster les propriétés d'échelle et de position jusqu'à ce que nous obtenions quelque chose de beau. Mon objectif ici est de créer une belle animation Zoom dans laquelle la section de la liste des tâches apparaîtra plus près. À ce stade, le spectateur doit se concentrer sur cette zone. Je suis juste en train d' expérimenter différentes valeurs échelle et de repositionner la précomposition, sorte que la liste des tâches se trouve davantage au centre Nous pouvons activer la grille Action Safe pour nous assurer d'avoir une composition équilibrée. Je trouve que ça a l'air sympa, mais la position de départ de la précomposition peut être légèrement ajustée Déplaçons-le légèrement vers le haut afin de créer une plus grande différence entre la première et la deuxième position. Ne vous inquiétez pas pour le texte qui doit se trouver dans la zone supérieure. Nous pouvons plutôt placer ce texte en bas. Passons maintenant à la deuxième image-clé et ajustons à nouveau la taille et la position de la précomposition pour rendre l' animation Zoom in Assurons-nous également que la section de la liste des tâches est parfaitement alignée au centre. Utilisez les guides Action Safe Grid pour vérifier l'alignement. À ce stade de la chronologie, les zones de tâches doivent être centrées exactement conformément aux guides. Petit rappel, cela devrait être votre flux de travail principal lorsque vous travaillez sur ce type de projet. Créez d'abord l'animation essentielle, puis améliorez le mouvement. Ensuite, vérifiez la synchronisation de l'animation avec la voix off. Enfin, ajoutez des mouvements de type caméra dans la scène pour la rendre plus intéressante. Bien, revenons maintenant à la composition principale et trouvons une scène contenant une couche de texte afin de pouvoir copier et la réutiliser Collez la couche de texte dans la chronologie et insérez-la dès le début de l'animation. Placez cette couche sous l'écran de l'interface utilisateur quelque part par ici. Enfin, passons au script et copions le texte qui doit apparaître dans cette scène. Nous allons d'abord copier la première partie de la phrase. Trouvons maintenant l' endroit idéal pour le texte. Génial. Maintenant, créons un angle agréable pour l'écran de l'interface utilisateur pendant la partie où le panneau contextuel de l'interface utilisateur apparaît. Nous pouvons commencer à changer l' angle à partir du moment où l' animation de la liste des tâches se termine et voir à quoi cela ressemble. Tout d'abord, créez des images-clés pour les propriétés, l'échelle et la position avec leurs valeurs actuelles, car nous ne voulons pas que l'écran de l'interface utilisateur se déplace avant ce point Cela nous donne un moment de pause. Récourcissons cette pause, par exemple, plaçons les images-clés au bout de quatre secondes. Une fois cela fait, décidons où le changement d'angle doit se terminer. Elle peut se terminer juste avant l'animation du clic. Passons donc à ce point dans le temps et ajustons l'échelle et la position des images-clés de la précomposition Placez-le de manière à ce que nous ayons encore de l'espace pour ajouter la deuxième partie du texte par la suite Nous pouvons maintenant diviser la couche de texte à ce stade et copier la deuxième partie du texte à partir du script. De retour dans le projet, collons le texte dans le nouveau calque de texte et déplacons-le vers le haut. Génial. Développons maintenant cette couche et trouvons bon moment pour créer une autre animation à angle variable. Cette fois, nous allons créer une animation Zoom in sur la zone des sous-tâches dans le panneau contextuel de l'interface utilisateur Pour ce faire, nous allons continuer à synchroniser la mise en scène avec l'animation qui se déroule dans la précomposition de l'écran de l'interface utilisateur Jusqu'à présent, nous pouvons faire une pause dans la scène. Créons donc des images-clés avec les valeurs actuelles des deux propriétés Avancez ensuite d'une seconde et créez une animation Zoom in en ajustant les propriétés d'échelle et de position. C'est bon. Je trouve que ça a l'air bien. Nous pouvons maintenant améliorer le mouvement de toutes les images-clés que nous avons ici Pour ce faire, nous utiliserons le panneau de vélocité des images clés. Petit rappel. Vous ne pouvez pas ajuster différentes propriétés ensemble à l'aide du panneau de vélocité. Donc, commencez par le faire pour la propriété position , puis répétez le processus pour la propriété scale. Réglons les deux à 85 % de vélocité. Voyons ce que nous avons. Ça a l'air génial, mais je pense que l'animation des cases à cocher dans la fenêtre contextuelle devrait commencer un peu plus tard dans la chronologie Commençons juste après la fin de l'animation Zoom in. Alors restez là, puis entrez dans la précomposition contextuelle et déplacez les deux précompositions jusqu' à ce Génial Une fois cela fait, revenons à la composition principale et comparons l'animation à la voix off Prêtez attention à la façon dont le VO indique où cette scène doit se terminer. Photo. Chaque projet inclut des tâches détaillées, des sous-tâches et un suivi de la progression en temps réel Rien ne passe donc entre les mailles du filet. Tu le veux ? Tout semble parfait. Nous pouvons maintenant commencer à travailler sur l'animation d'outtro cette scène, car à ce stade, la scène suivante devrait déjà commencer Commençons par entrer en scène. Avant de poursuivre, agrandissons rapidement la couche de texte. Trouvons maintenant le bon moment pour démarrer l'animation d' outtro Je pense que nous pouvons commencer à 7 secondes et 20 images. Créons donc des images-clés à ce moment-là. Avancez ensuite d'une seconde. Dans la chronologie, créez une animation extérieure simple dans laquelle la précomposition se déplace vers le bas, hors du cadre Ensuite, allez dans l'éditeur de graphes et réglez la vélocité à 95 % pour rendre le mouvement un peu plus rapide. Je veux qu'il en soit ainsi parce que je me prépare à passer à la scène suivante. À bien y réfléchir, je pense que nous devrions laisser une pause légèrement plus longue avant que l'écran de l'interface utilisateur ne s'éteigne. À mon avis, l'Otro démarre trop tôt après l'animation de la case à cocher. Décalons l'animation d'outtro pour qu'elle commence à 8 secondes. Génial. Trouvons maintenant point le plus rapide dans le mouvement Otro et dans le recadrage de la composition principale, la pré-composition à ce stade Revenons maintenant dans la scène et découpons la chronologie 1 seconde après la fin de l'animation automatique. Je n'aime pas terminer les scènes directement sur le mouvement final. Je préfère toujours laisser une seconde de temps libre au cas où j'aurais besoin de faire des ajustements plus tard. Bien, une fois cela fait, nous pouvons passer à la scène suivante, qui dans notre cas, est une autre animation du titre Pour le faire rapidement, dupliquons l'animation du titre que nous avons déjà dans la chronologie et placez-la juste après la dernière scène. bien, c'est qu'il est déjà taillé pour s'adapter à la transition Match Cut Mais si nous saisissons cette précomposition et modifions le texte, texte sera également mis à jour dans la première animation du titre, puisqu'il s'agit de la même précomposition, et ce n'est pas ce que nous voulons corriger Nous devons dupliquer la pré-composition dans le panneau de projet. Ensuite, nous remplacerons l'ancienne précomposition de la chronologie par cette nouvelle. Génial. Entrez maintenant la nouvelle précomposition du titre et modifiez le texte Comme vous pouvez le constater, le texte est plus long que le premier. Pour résoudre ce problème, réduisons la taille de la police. Environ 100, ça semble bien. Une fois terminé, n'oubliez pas d'ajouter le trait sous le mot important dans le texte. Dans mon cas, je vais le placer ici. Génial. Remplacez maintenant l'ancienne précomposition la chronologie par cette nouvelle De cette façon, nous conservons le recadrage de l'animation du titre précédente, mais avec du nouveau texte à l'intérieur Et juste comme ça, nous avons une autre transition parfaite. Nous sommes maintenant prêts à passer à la leçon suivante et à commencer à créer la scène suivante. Mais avant cela, corrigeons un dernier détail. Si vous ne l'avez pas remarqué, nous n'avons pas les icônes de cases à cocher qui doivent figurer dans la liste des tâches principale Ils n'ont pas besoin d'être animés. Passons donc à la précomposition de la fenêtre contextuelle et copions la couche d' icônes à cocher à partir de là Maintenant, retournez à l'écran de précomposition de l' interface utilisateur des tâches et collez la couche dedans Avant de coller, assurez-vous que toutes les couches sont dans leur état statique dans le temps toutes les couches sont dans leur état statique dans le Dans notre cas, c'est au début de l'animation. Bien, placez maintenant l'icône dans la première tâche de la liste. Une fois terminé, dupliquez-le et placez-le dans la deuxième tâche. Parfait. Maintenant, étant donné que les tâches elles-mêmes ont une animation contextuelle, nous voulons que les cases à cocher se déplacent avec Veillez donc à associer chaque case à cocher à la couche de tâches correspondante Prévisualisez l'animation pour vous assurer qu'elle f 19. Animer l'écran de l'interface utilisateur Contacts en 3D: Reviens. Dans cette leçon, nous allons commencer à travailler sur l'écran de l'interface utilisateur des contacts. Tout d'abord, voyons quelle devrait être la durée de la scène. Il commence aux secondes 38 et 28 images, et se termine aux secondes 42 et 18 images. Cela signifie que nous avons environ 4 secondes et quelques images pour animer la scène C'est dans cet esprit que nous allons maintenant créer une nouvelle composition et l' appeler scène six Assurez-vous que les paramètres sont corrects et cliquez sur. OK. Génial. Maintenant, intégrons l' écran de l'interface utilisateur des contacts dans la nouvelle scène. Je souhaite animer la scène, comme dans cette référence. Cela signifie que nous devrons certainement utiliser l'espace à trois D. Dans cet esprit, entrons dans la précomposition et sélectionnons d'abord toutes les couches ici, réduisez-les, puis convertissez-les toutes en trois couches D. Génial. Commençons maintenant à préparer cet écran d'interface utilisateur pour l'animation. Ce que je veux dire par là, c'est que nous pouvons précomposer les couches associées à chaque section Ce sera beaucoup plus facile pour nous à long terme. Nous pouvons donc d'abord verrouiller les couches dont nous sommes certains que nous ne précomposerons pas Maintenant, sélectionnons toutes les couches de la section principale et précomposons-les. Faites attention à ce que je ne coche pas les cases de contact. C'est parce que je veux qu' ils restent à l'extérieur, afin de pouvoir les animer sans toucher aux couches qui ne seront pas Génial. Maintenant, sélectionnons également ces trois couches qui appartiennent à la section principale et découpons-les à partir d'ici, puis collons-les dans la précomposition Génial. Revenons maintenant à la scène principale et précomposons les couches de la partie supérieure Passons maintenant à l'action des contacts. Comme plusieurs couches appartiennent à chaque zone de contact, nous devons sélectionner toutes les couches associées à cette zone de contact et les précomposer Disons que c'est l'écran 5, contact 1. Nous pouvons copier le nom , puis continuer à précomposer le reste des sections de contact et coller le nom de la N'oubliez pas d' ajuster le nombre. Faisons-le pour le reste des contacts. Génial Une fois cela fait, réactivons toutes les précompositions, réduisons-les et convertissons-les toutes en trois couches D. Enfin, centrons le point d'ancrage pour chacun d'entre eux. Vous pouvez cliquer sur une précomposition pour vous assurer que le point d'ancrage est centré D'accord. Tout semble parfait, et nous pouvons maintenant enregistrer le projet avant de passer à autre chose. Profitons également de cette opportunité pour organiser notre panel de projets. Ouvrons le dossier Screens et faisons glisser toutes les précompositions que nous avons créées pour cette scène dans la scène précédente Dans le dossier Screens, seules les précoms de l'écran principal de l'interface utilisateur doivent rester Rien d'autre Pour tous les autres précompositions, nous pouvons les faire glisser dans le dossier principal des précompositions Génial. Nous sommes maintenant prêts à commencer à animer la scène. La première chose que nous pouvons faire est de créer une animation d'introduction pour cette scène Comme nous avons affaire à trois couches D, nous pouvons créer une nouvelle caméra 35 MM dans la scène et l'utiliser pour créer une belle animation Zoom in pour l'intro Au début de l'animation, je vais déplacer la caméra vers l'arrière. Ça suffit. Maintenant, avançons d'une seconde et rapprochons la caméra de l'écran de l'interface utilisateur. Notez que nous devons économiser de l'espace dans la partie supérieure du cadre pour ajouter le texte qui doit figurer dans cette scène. Pour plus de commodité, nous pouvons ouvrir la grille d'action sécurisée du titre et jouer avec les valeurs de position. Très bien, je trouve que ça a l'air bien. Passons maintenant à la deuxième étape et commençons créer l'animation contextuelle pour les précompositions des contacts abord, nous devons ouvrir la propriété position et créer la première image-clé ici Ensuite, avançons d'une seconde et créons également la même image-clé ici Ensuite, placons-nous au milieu de l' animation et rapprochons toutes les précompositions de la caméra Veillez à ne pas définir la valeur manuellement une seule fois pour toutes les précompositions, car cela ajustera également le reste des axes de position, ce qui n'est pas ce que nous voulons Assurez-vous donc d'ajuster la valeur en faisant glisser l'axe Z. Déplaçons maintenant les précompositions vers la gauche. Ainsi, lorsqu'ils sortiront, ils seront placés au centre de la composition. Continuez à ajuster les valeurs de position jusqu'à ce qu'elles soient un peu plus proches de l'appareil photo et bien centrées horizontalement dans le cadre. C'est bon. Je trouve que ça a l'air bien. Passons au début de cette animation et ouvrons maintenant la propriété de rotation pour créer un effet de rotation agréable pendant l'animation. Dans notre cas, nous utiliserons l'axe de rotation Y. Créons donc d'abord la première image-clé avec une valeur de zéro à ce stade Passons ensuite aux deux secondes et créons la même image-clé ici Passons maintenant au milieu de l'animation et commençons à ajuster la rotation de chacune des précompositions À ce stade, j'essaie juste de faire pivoter chaque précomposition tout en conservant un changement de rotation similaire sur toutes. Cela signifie que nous pouvons régler la rotation de la précomposition supérieure à 30 Pour le suivant, réglez-le sur 20. Le prochain sera dix. Le suivant , on peut partir à zéro. Le prochain sera de moins dix. Après ça -20, et le dernier -30. La rotation semble bonne, mais comme vous pouvez le constater, la précomposition inférieure est recadrée dans la partie inférieure de la Alors, en nous tenant au milieu de l'animation, ajustons la position de toutes les précompositions et déplaçons-les légèrement vers le haut Génial Maintenant, une fois que nous avons créé l'animation initiale, nous pouvons sélectionner toutes les images-clés et les simplifier facilement, puis ajuster leur mouvement dans l'éditeur de graphes Je veux que le mouvement démarre rapidement, puis qu'il ralentisse au milieu et qu'il prenne de la vitesse vers la fin. Voyons à quoi ça ressemble. C'est bon. Je trouve que ça a l'air génial. Mais à mon avis, l'animation est trop rapide pour le moment. Revenons donc à la chronologie. Placez-vous à la troisième seconde, puis sélectionnez toutes les images-clés, maintenez la touche Alt ou Option enfoncée et faites-les glisser de la dernière image-clé à la position de l'indicateur temporel. C'est bon. Maintenant, la vitesse est excellente, et nous pouvons créer un joli décalage entre les précompositions pour les rendre un peu plus intéressantes Cette fois, j' utiliserai la nouvelle fonctionnalité After Effects pour décaler les images-clés Commençons donc par redimensionner ce panneau afin de voir toutes les images-clés Maintenant, assurez-vous de sélectionner les images-clés de la couche à partir de laquelle vous souhaitez que le décalage commence Dans notre cas, je veux que la première précomposition supérieure lance le mouvement en C'est pourquoi je vais sélectionner toutes les images-clés de la couche inférieure du panneau des calques de la composition C'est la première précomposition supérieure, alors ne vous y trompez pas. D'accord. Maintenant, je vais déplacer, disons, deux images après les premières images-clés, puis maintenir la touche Alt enfoncée, contrôler et déplacer les images-clés maintenir la touche Alt enfoncée, contrôler et déplacer jusqu'à ce que je voie les images-clés précomposées suivantes atteindre la position de l'indicateur Voyons à quoi ça ressemble. Très bien, je trouve que ça a l'air génial. Et maintenant, une fois cette partie d'animation terminée, nous pouvons nous arrêter là et créer l'animation atro pour cette scène. Créons donc la première image-clé pour la position de la caméra ici, puis avançons d'une seconde Cela signifie que nous devons rester à la deuxième quatrième image et à dix ou douze images. Nous pouvons maintenant ramener la caméra manuellement en arrière, ou nous pouvons simplement copier l'image-clé de la caméra en première position et la coller ici Génial Réglons maintenant la vélocité de cette animation à 95 % afin de créer une transition parfaite entre les deux parties. OK, je trouve que tout va bien. La seule chose que nous devons ajouter ici est une couche de texte qui devrait être présentée dans cette scène. Pour cela, entrons dans l'une de nos scènes où nous avons déjà une couche de texte et copiez-la à partir de là afin de pouvoir la coller dans notre nouvelle scène. Passons maintenant à la scène six et collons la couche de texte ici. Développez cette couche et démarrez-la depuis le début de la chronologie. Après cela, nous pouvons aller sur le tableau vidéo pour voir quel devrait être le texte de cette scène. Très bien, voici le texte. Passons maintenant au script et copions le texte correspondant. Génial. Maintenant, une fois cela fait, ajoutons un mouvement de caméra secondaire à la scène afin qu'elle ne paraisse pas aussi statique qu'elle ne l'est actuellement. Pour cela, entrons dans la précomposition des contacts et créons un nouvel objet nul que nous utiliserons pour créer le mouvement de caméra secondaire Tout d'abord, nous devons le convertir en une couche à trois DD. Maintenant, assurons-nous que l'objet nul est placé au centre de la composition, soulevons-le jusqu'à ce qu'il soit aligné avec le point central de la grille d'action sécurisée C'est bon. Maintenant, attribuons à la caméra notre valeur nulle et changeons le nom de la caméra nulle en caméra nulle. Génial. Passons maintenant au début de la chronologie et créons une image-clé de première position pour le zéro. Passons maintenant au moment où la courte scène s'est déjà terminée, qui, dans notre cas, est la cinquième. Ajustons maintenant l'axe de position Z pour le zéro afin de le rapprocher un peu plus de l'écran de l'interface utilisateur. Réglons-le sur 600 et voyons à quoi cela ressemble. Je pense que c'est trop près. Passons donc à la dernière image-clé et changeons-la en 400 Nous pouvons toujours voir le contact inférieur recadré dans la partie inférieure du cadre. Pour résoudre ce problème, nous pouvons chronométrer le mouvement de la caméra secondaire en fonction de l'animation des précompositions de contact Cela signifie que nous pouvons nous placer au milieu de leur animation contextuelle et ajuster l' animation de la caméra secondaire à ce moment-là Nous pouvons augmenter légèrement le zéro. Voyons à quoi ça ressemble. D'accord, je trouve que c'est sympa, mais nous pourrions couvrir le texte de la scène principale après avoir créé cette animation Revenons donc à la composition de la scène principale et voyons ce que nous avons ici Oui, comme je le pensais, nous couvrons le texte, ce qui n'est pas ce que nous voulons. Essayons donc de résoudre ce problème. Tout d'abord, nous pouvons faire apparaître le texte un peu et voir à quoi il ressemble maintenant. Je vois que l'écran de l'interface utilisateur touche presque le texte, mais pour l'instant, laissez-le tel quel, car le plus important est que nous puissions voir le texte clairement. Avant d'entrer dans les détails, vérifions-nous d'abord que l'animation que nous avons créée est synchronisée avec une voix off, ce qui est pour le moment la chose la plus importante à régler avant d' ajuster l'apparence Revenons donc à la composition principale et intégrons la nouvelle scène dans la chronologie Assurons-nous maintenant que la transition Match Cut fonctionne correctement. Pour cela, nous devons entrer dans la scène puis dans la précomposition de l'écran de l' interface utilisateur Nous devons maintenant nous tenir au moment où l' animation d'introduction atteint sa vitesse maximale, c' est-à-dire à l'image 15 de cette chronologie Nous pouvons maintenant revenir à la composition principale et recadrer la composition précédente à la position des indicateurs temporels. Génial. Et maintenant, faisons de même pour l'animation outtro. Trouvons le moment où l'animation outtro est la plus rapide Restons ici avec l'indicateur de temps. Revenons maintenant à la composition principale et recadrons la composition précédente à la position des indicateurs temporels Génial Cela fait, concentrons-nous maintenant sur le visionnage de l'animation tout en écoutant la voix off pour voir si tout est parfaitement synchronisé Ensuite, il vous suffit de vous rendre dans l'onglet de votre équipe pour voir l' activité de chacun en un coup d'œil. J'ai besoin de tomber, d'accord. Je pense que l'animation Otro doit avoir lieu plus tard. Cela devrait être le cas à ce stade. Restons donc là, puis étendons la précomposition à la position des indicateurs temporels Passons ensuite à l'animation Otro et assurons-nous qu'elle commence à partir de ce moment Nous pouvons créer l'animation d' outtro, exactement par les quatre secondes juste pour garder une chronologie plus organisée Quelques images n' affecteront pas trop la précision du naufrage. Génial. Trouvons maintenant le nouveau point le plus rapide pour l'animation d'outtro, qui se trouve quelque part par ici Revenez maintenant à la composition principale et ajustez la durée de la scène en conséquence Génial Une fois cela fait, nous pouvons entrer dans la scène et la terminer à la sixième seconde, soit une seconde après la fin de l'animation d' outtro. Génial. Maintenant, une fois que nous avons fait le bon choix, nous pouvons passer quelques minutes à ajuster l'apparence de la scène, en particulier au moment où l'écran de l'interface utilisateur recouvre presque le texte Passons d'abord à la préconfiguration de l'écran de contact et ajustons mouvement de la caméra secondaire que nous avons ici Nous pouvons commencer par ajuster la dernière image-clé. Réglons-le sur 300 pour que l'appareil photo soit un peu plus éloigné de l'écran. Le plus important est que vous sachiez quoi ajuster au cas où vous vous retrouveriez dans une situation similaire dans vos futurs projets. Je vais juste ramener l'image-clé de position initiale finale de la caméra à la cinquième seconde Nous aurons donc une animation outtro complète d'une seconde. Maintenant, il sera beaucoup plus facile de se tenir au milieu de l'animation, qui dure 4 secondes et 15 images. Revenons ensuite à la composition principale et assurons-nous d'avoir obtenu la pré-composition au bon endroit. Génial Nous avons maintenant fini animer la scène de l' écran des contacts Revenons maintenant au tableau vidéo et voyons ce que nous devons faire ensuite. Comme vous pouvez le constater, nous avons une autre animation de titre qui doit commencer après la scène de contact. Revenons donc à la composition principale et répétons le même processus que dans la leçon précédente Dupliquez d'abord l'une des précompositions de l'animation du titre dans la chronologie, puis dupliquez-la dans le panneau du projet pour modifier le texte sans affecter le texte précédent Je vais accélérer ce processus, et vous pourrez me suivre. Et pour terminer, bien sûr, nous remplacerons entre les deux. Voyons à quoi ça ressemble. Très bien, et avec cela, nous avons terminé cette leçon. Nous sommes maintenant prêts à passer à la suivante, où nous allons commencer à créer la scène la plus complexe de ce projet. Ça va être super intéressant, alors je te verrai dans le prochain. 20. Créer l'animation complexe de l'flux de démonstration: Je suis de retour. Dans cette leçon, nous allons commencer à travailler sur l'animation de flux de démonstration la plus complexe du projet. Nous devrons présenter l'écran des messages principaux qui se transforme en section de conversation privée Je vais vous enseigner l'une des meilleures méthodes pour faire face à ce genre de situations où de nombreuses couches doivent être transformées en d' autres couches. Commençons donc. Tout d'abord, comme nous le faisons habituellement, nous devons commencer par vérifier quelle sera la durée de la scène. Dans ce cas, la scène commence à la seconde 44 et se termine à la seconde 50. Cela signifie qu' au total, nous avons environ 6 secondes pour animer l' ensemble de l'animation du flux de démonstration Dans cet esprit, revenons à la composition principale et fermons toutes les précompositions pertinentes que nous avons dans le panneau de composition. Génial. Et maintenant, la première chose à faire avant d' animer la scène est de bien comprendre ce que nous devons faire dans l'animation du flux de démonstration Cela signifie que nous devons nous poser quelques questions importantes. Par exemple, quelles couches de chaque écran d'interface utilisateur devraient apparaître ou disparaître ? Quelles couches peuvent être transformées et quelles couches doivent sortir du cadre, quelles couches doivent être présentées sur les deux écrans, etc. Pour répondre à toutes ces questions, il est préférable d'ouvrir les deux écrans de l'interface utilisateur et de commencer à enquêter. Dans notre cas, la majeure partie de l'action se fera dans la section principale de l'écran des messages. Nous devons transformer les boîtes de discussion de la liste pour qu'elles soient présentées dans leur deuxième forme de conception comme indiqué dans la deuxième scène des messages Nous pouvons également constater que le menu de gauche et l'en-tête ne changent pas. Nous devons garder cela à l'esprit. Notre objectif principal sera ici dans la section principale. Maintenant, une fois que nous avons compris ce que nous devons faire plus ou moins, nous pouvons commencer par créer une nouvelle composition que nous pouvons appeler scène sept et commencer à la préparer pour l'animation. Dans cette composition, nous essaierons de combiner les deux écrans d'interface utilisateur dont nous avons besoin pour créer l'animation du flux de démonstration, à les messages et les messages destinés aux précompositions Commençons par créer une nouvelle composition. Avant de poursuivre, faisons rapidement glisser la nouvelle composition hors de ce dossier Et maintenant, intégrons le premier écran de l'interface utilisateur dans la chronologie. Génial. Ceci étant fait, je veux vous enseigner le principal processus de réflexion lorsque vous devez créer une transition pour un ensemble de couches entre deux scènes. Passons à la précomposition et commençons à travailler, et je vais vous l'expliquer lentement étape par étape La première chose à vérifier est de savoir si cette scène sera animée dans un espace en trois D ou non, car si c'est le cas, il est préférable de convertir toutes les couches en trois couches dès maintenant avant de passer à autre chose. Dans notre cas, nous ne l'animerons pas dans un espace en trois D, alors gardons-les sous forme de couches à deux D. Ensuite, nous pouvons passer à l'étape suivante, qui consiste à précomposer les couches Comme nous avons une énorme quantité de couches ici, nous devons réfléchir aux couches que nous pouvons précomposer ensemble pour avoir une chronologie plus claire Dans notre cas, comme nous l'avons déjà vu précédemment, nous savons que le menu de gauche dans l'en-tête ne changera pas pour les deux écrans. Cela signifie que nous pouvons les sélectionner le premier message est pré-composé et les précomposer ensemble. Voici les couches que nous pouvons précomposer en premier. Mais avant cela, n' oublions pas de réduire toutes les couches à ce stade Nous n'aurons donc pas besoin de le faire plus tard fois que nous les aurons dans des précompositions séparées Cela prendra plus de temps. Nous pouvons donc gagner temps en réduisant toutes les couches dès C'est bon. Maintenant, sélectionnons les couches que nous pouvons déjà précomposer, y compris la zone grise principale de cet écran d'interface utilisateur Nous pouvons l'appeler écran six panneaux un. Trouvons la précomposition nouvellement créée dans le panneau du projet et vérifions-nous qu'elle se trouve à l'extérieur et non à l'intérieur d'un Nous voulons l'atteindre rapidement pour le moment. D'accord. Maintenant, réduisons la précomposition dans la chronologie et plaçons-la sous toutes les couches Nous pouvons maintenant le verrouiller et avant de continuer, enregistrer le projet. Génial. Voyons maintenant si nous devons précomposer une autre pile de couches ensemble ou non Pour cela, nous pouvons trouver le fichier Illustrator de l'écran d'interface utilisateur suivant le dossier des actifs de cet écran d'interface utilisateur et double-cliquer dessus pour l'ouvrir dans le panneau d'aperçu secondaire. De cette façon, nous pouvons maintenant vérifier les deux écrans et commencer à réfléchir et à planifier l'animation du flux de démonstration. Comme vous pouvez le comprendre, l'animation du flux de démonstration dans cette scène doit montrer l'animation des clics sur l'un des chats, puis juste après , nous devons présenter le panneau de conversation qui affichera le chat de ce contact. Mais maintenant, vous vous demandez probablement comment nous allons créer cette transition. Il y a tellement de couches dans les deux compositions. De quoi avons-nous même besoin pour commencer ? Pour répondre à tous ces doutes, vous devez commencer à penser dans un état d'esprit très simplifié. Vous devez diviser tous les éléments de conception ici en différentes parties d'animation, comme nous l'avons déjà fait dans le cours. Dans ce cas, étant donné que nous avons beaucoup de couches, commençons à réfléchir à quoi peut ressembler la séparation. Par exemple, je vais d'abord concentrer sur le premier écran de messages et trouver un élément de conception qui doit être modifié pour le deuxième écran. Dans ce cas, commençons par les icônes en forme d'étoile. Cela peut être la partie de l'animation que nous traiterons en premier. À ce stade, nous n'avons pas à nous soucier du timing et de la durée de chaque partie de l'animation. Nous n'avons pas non plus à nous soucier de nous assurer qu'elle sera synchronisée avec la voix off Pour l'instant, nous nous concentrons uniquement sur la création de l'animation du flux de démonstration. Cela signifie que nous devons maintenant créer une animation d'introduction et une animation d'introduction pour toutes les couches présentes sur les deux écrans d'interface utilisateur auxquels nous avons affaire C'est bon. Maintenant, je regarde simplement le premier et le deuxième écran pour comprendre quelle animation de transition je peux faire pour cette partie de l'animation. Dans le premier écran, ils apparaissent sur le côté gauche de la boîte, et dans le second, ils apparaissent sur le côté droit. Pour me faciliter la vie, je peux créer une animation d' outtro simple, en utilisant la propriété scale pour faire disparaître les étoiles du premier écran, et je peux créer une intro pour les étoiles du second écran en utilisant également la propriété scale Donc pour le moment, ne t' inquiète pour rien d'autre. Concentrons-nous uniquement sur cette partie. Fermons donc le deuxième aperçu et commençons par sélectionner toutes les couches d'icônes d'étoiles présentes dans la scène. Génial. Et maintenant, ils sont tous placés dans la même zone de la pile de couches. Déplaçons l'un d'entre eux vers le haut dans le panneau des calques. Une fois cela fait, nous pouvons maintenant les étiqueter dans une couleur différente. Génial. Nous pouvons maintenant zoomer sur la chronologie et commencer à créer l'animation d'outtro depuis le début de la chronologie Ouvrons la propriété scale et décidons que l'animation durera 1 seconde. Plus tard, nous pourrons ajuster toutes les parties de l'animation que nous créons pour les adapter à la voix off. Pour l'instant, concentrons-nous sur la création ces parties d'animation pour l'animation du flux de démonstration. OK. Maintenant, pour rendre cette animation un peu plus intéressante, faisons en sorte que les étoiles soient un peu plus grandes au milieu de l'animation pour obtenir un mouvement rebondissant Génial. Maintenant, une fois que nous aurons fini de créer l' outtro pour les étoiles, sélectionnons-les toutes et placons-les au-dessus de toutes les couches Nous placerons chaque partie de l' animation au-dessus de la précédente pour obtenir une chronologie propre et organisée. Bientôt, tu comprendras ce que je veux dire. Génial. Nous pouvons maintenant vérifier l'animation une fois de plus. Je pense que nous devrions les redimensionner davantage au milieu de l'animation. Ils sont très petits, donc je veux que le spectateur les remarque avant qu'ils ne disparaissent. Je pense que nous pouvons fixer l'échelle à 200. Oui, ça a l'air mieux. Génial. Nous en avons donc terminé avec la première partie de l'animation, et nous sommes prêts à décider quelle sera la prochaine. Pour cela, vous pouvez toujours revenir en arrière pour voir le deuxième écran de l'interface utilisateur et mieux comprendre ce qu'il faut faire. Nous pouvons peut-être traiter le texte ici, ou nous pouvons décider de traiter toutes les icônes ici sur le côté droit. Dans tous les cas, pour faciliter la sélection des couches, sélectionnons la case blanche de cette section et verrouillons-la. Maintenant, allons-y et sélectionnons toutes les icônes sur le côté droit. Comme vous pouvez le constater, nous avons également sélectionné les petites cases blanches de chaque chat. Maintenons donc la touche Maj enfoncée et désélectionnons-les. Génial. Maintenant, plaçons tous les calques sélectionnés au-dessus de tous les calques du panneau Calques. Ensuite, étiquetons-les dans une autre couleur. D'accord. Maintenant, assurons-nous qu' aucune couche n'est sélectionnée et appuyons pour fermer toutes les couches précédentes. cela fait, créons une animation Otro pour toutes les icônes que nous venons de taguer à partir de la seconde, juste après l'Otro des étoiles Utilisons également la propriété scale cette fois. D'accord. Je pense que ça a l'air bien, et nous pouvons passer à la partie suivante. Passons maintenant au texte de la scène. Comme vous pouvez le constater, le nom du contact ne change pas. Il change juste légèrement de position. Mais les autres couches de texte que nous avons ici sont en train de changer complètement. Dans cet esprit, créons une animation d'outtro pour toutes les couches de texte, à l' exception des noms Nous les traiterons plus tard. Il vaut mieux terminer avec les parties d'animation les plus simples et ensuite commencer à penser aux plus complexes. C'est bon. Cela dit, revenons au projet et sélectionnons toute cette zone. Désélectionnons maintenant les cases blanches. Génial. Ensuite, nous allons faire apparaître toutes les couches dans les couches, les encadrer et les étiqueter dans une couleur différente. Et maintenant, créons une animation Otro pour tous à partir des trois secondes, juste après les icônes Outro Cette fois, utilisons l'opacité pour créer une animation en fondu pour l'Outro Génial. Fermons maintenant toutes les couches, enregistrons le projet et passons à la partie d'animation suivante. Pour que la chronologie reste organisée, commençons la prochaine partie de l' animation à troisième seconde, juste après l'animation textuelle qui s'estompe Et cette fois, concentrons-nous sur la création l'animation morphing pour les boîtes de discussion Nous devons tous les faire ressembler à ce qu'ils sont dans le prochain écran d'interface utilisateur. Permettez-moi de vous montrer la meilleure approche pour faire face à ce type de situations dans lesquelles vous souhaitez créer une animation de morphologie pour les panneaux de l'interface utilisateur au lieu de simplement créer des animations d' introduction et d'introduction en utilisant l'échelle C'est bon. La première chose que nous pouvons faire est donc de créer un nouveau calque de forme que nous utiliserons la place des calques Illustrator de la boîte. C'est mieux car nous aurons beaucoup de liberté pour modifier la forme de cette forme ultérieurement. Assurons-nous donc qu'aucune couche n'est sélectionnée. Zoomez légèrement, puis sélectionnez l'outil rectangle et créez une nouvelle forme exactement de la taille de la boîte blanche. Ouvrons maintenant les propriétés de forme et désactivons les proportions limitées, afin de pouvoir ajuster la largeur et la hauteur séparément. Génial. Et maintenant, arrondissons les coins pour qu'ils correspondent au design original. Génial. Ensuite, ajoutons un fin trait gris à cette forme. Pour obtenir la couleur exacte, nous pouvons la vérifier dans le design original dans Illustrator. Trouvons donc cet écran d'interface utilisateur. C'est ici. Nous pouvons utiliser l'outil de sélection directe pour sélectionner la forme appropriée. Nous pouvons maintenant copier le code couleur du trait. De retour dans After Effects, collons ce code dans la couleur du trait de notre forme. Enfin, ajustons la largeur du trait. Je pense que le mettre à deux semble parfait. Génial. Cela fait, découpons cette couche de cette précomposition et collons-la dans l' écran de l'interface utilisateur des premiers messages Nous devons maintenant commencer à l'animer. Pour plus de commodité, réduisons l'opacité afin voir où elle doit être placée tout au long de l'animation Mettons-le ici pour le moment. Passons maintenant à la quatrième place de la tête de jeu , car nous allons bientôt y créer une image-clé pour que la forme ressemble à ce qu'elle est actuellement À la troisième étape, cela devrait ressembler à ce qui se passe dans cet écran d'interface utilisateur. Plus long et plus fin. Génial. Nous pouvons maintenant commencer à créer l'animation de morphing. Nous pouvons soit animer la propriété de taille, soit convertir la forme en une trajectoire de Bézier, ce qui nous donnera plus de liberté pour modifier sa Mais avant cela, faisons d'abord en sorte que la forme ressemble exactement à ce qu'elle devrait être dans l'écran d'interface utilisateur actuel avant qu'elle ne prenne sa forme dans l'écran suivant Nous allons donc placer cette couche exactement au milieu de la longue boîte blanche que nous avons ici. Pour nous assurer qu'il est parfaitement aligné, ouvrons les règles, sélectionnons la forme longue et créons un nouveau guide à sa position de point d'ancrage. De cette façon, nous savons exactement où placer notre nouvelle forme . E. Une fois cela fait, nous pouvons retirer le guide et fermer les règles. C'est bon. Utilisons maintenant la propriété size pour l'animation morph Créez d'abord une image-clé avec les valeurs actuelles, car à ce stade, la forme doit ressembler à ce qu'elle est actuellement Revenons ensuite à la troisième seconde et ajustons la taille de la forme en fonction des dimensions de la longue boîte que nous avons dans cet écran d'interface utilisateur. Cela fait, nous pouvons maintenant ramener l'opacité à 100 % et passer à ajustement de l'animation de morphing. Ensuite, nous devons modifier sa position en fonction du moment où la forme change de forme pour qu'elle devrait être dans l'écran d'interface utilisateur suivant Pour savoir exactement où il doit être placé, utilisons la couche Illustrator de l' écran de l'interface utilisateur du second message comme référence. Intéressons-nous donc à la chronologie et réduisons son opacité pour comparer l'apparence de l'écran suivant à l'écran actuel Comme vous pouvez le constater, le deuxième écran est un peu plus haut que le premier soucions pas pour le moment et concentrons-nous uniquement sur le positionnement correct de la forme. Pour éviter toute confusion avec toutes les couches, ramenons l'opacité de la couche de référence d'écran suivante à 100 % et créons des guides correspondant à l'emplacement des boîtes de discussion De cette façon, nous n'aurons pas besoin d'activer ou de désactiver la couche de référence pour vérifier si tout est aligné Une fois cela fait, nous pouvons supprimer la couche de référence et verrouiller les guides afin qu'ils n' interfèrent pas avec notre flux de travail. Génial. Désactivons maintenant toutes les couches qui ne sont pas pertinentes pour cette partie de l'animation afin de pouvoir nous concentrer plus clairement sur les cases. Je veux que vous compreniez que nous n' allons pas animer les couches de boîte d'origine Nous allons plutôt dupliquer la forme que nous avons créée, en conservant les couches de boîtes la scène comme points de référence. Pour l'instant, sélectionnons-les tous et plaçons-les ensemble dans une seule zone. Ensuite, nous pouvons les étiqueter dans une couleur différente. Pour l'instant, désactivons toutes les cases, sauf la première de la scène, afin de pouvoir nous concentrer sur son animation morphing Avant cela, organisons les actifs dans les boîtes de contact. Nous pouvons également les étiqueter dans une couleur différente. Attends, j'ai remarqué qu' il y a une couche entre les deux , dans la pile. Isolons-le pour voir ce que c'est. Je vois que c'est une icône en forme d'étoile dans la première partie de l'animation. Pour une raison ou une autre, nous avons oublié de le déplacer avec le reste des étoiles. Pour résoudre ce problème, sélectionnons tous les actifs contenus dans les boîtes de contact et déplaçons-les sous la couche d'étoiles. Bien. Nous pouvons maintenant les désactiver et continuer à travailler sur l'animation des boîtes. Passons d'abord au moment où notre forme a déjà changé de forme. Ici, nous allons utiliser la propriété position pour ajuster son placement. Créons maintenant les images-clés de première position. Passons ensuite à la troisième étape car au début de l'animation de morphing, la forme devrait se trouver ici À la quatrième étape, nous devons le déplacer dans la zone que nous avons marquée plus tôt avec des guides. Très bien, ça a l'air bien pour le moment. Avant de passer à autre chose, plaçons également la couche Wide Box avec le reste et étiquetons-la de la même couleur. Maintenant, désactivons toutes les couches l' exception de la forme que nous avons créée. Maintenant, dupliquons cette forme. Pour savoir où le placer, nous allons réactiver toutes les longues couches de boîtes étiquetées en violet. Baissons leur opacité à environ 30 %, puis verrouillons-les pour qu'ils servent de référence Revenons maintenant à notre nouvelle forme dupliquée. Placez-vous à la première position des images-clés, sélectionnez la propriété pour que les deux images-clés soient actives et ajustez l'emplacement des formes il corresponde à la zone de référence Parfait. Passons maintenant aux deuxièmes images-clés et ajustons-les à nouveau pour qu' elles correspondent aux guides de l'écran suivant Génial. Nous avons maintenant l'animation de morphing pour les deux premières cases Répétons ce processus pour le reste des boîtes. Dupliquez le calque, placez-vous devant les images-clés, ajustez les deux positions Ajustez ensuite le dernier. Encore une fois, dupliquez la couche, placez-vous devant les images-clés. Ajustez les deux positions. Ajustez ensuite le dernier. Répétons ce processus pour le reste des boîtes. Maintenant, comme vous pouvez le constater, à un moment donné, nous n'avons plus de guide indiquant qu' une autre case doit être placée. En effet, dans l'écran d'interface utilisateur suivant, il n'y a que six boîtes de discussion, non neuf, comme dans le premier. Donc, pour ces boîtes supplémentaires, déplaçons-les hors du cadre. Nous pouvons les empiler soigneusement les uns au-dessus des autres. O. Génial. Nous avons donc terminé préparer la première partie de l' animation morphing de la chatbox Maintenant, sélectionnons toutes les longues couches de boîtes nous avons utilisées comme références. Au lieu de les supprimer, désactivons-les et activons la fonction shi afin qu'ils n'encombrent pas la chronologie Parfait. Nous pouvons maintenant réactiver toutes les couches et désactiver les guides que nous avons créés. Déplaçons également toutes les nouvelles couches de boîtes sous le reste des éléments pour garder les choses organisées. Génial. Passons maintenant à la prochaine partie de l'animation relative aux boîtes de discussion. Ouvrez d'abord le second message Illustrator layer afin que nous puissions savoir quels calques animer ensuite. À ce stade, nous pouvons commencer à utiliser les icônes d'Avatar. Génial. Fermez maintenant l'aperçu et sélectionnez toutes les couches d' icônes d'avatar de la scène. À présent, déplacez-les ensemble dans le panneau des calques et ajoutez-leur une nouvelle couleur. Décidons que ces animations d'avatar doivent commencer même temps que l' animation de morphing de la boîte au troisième moment Déplacez la tête de lecture vers la troisième seconde, appuyez sur P et créez une image-clé pour la position de toutes les couches d'avatar Avancez ensuite d'une seconde et ajustez leurs positions. Pour savoir exactement où ils doivent aller, nous allons utiliser la couche Illustrator de l'écran suivant comme référence. Réintroduisons-le et réduisons son opacité. Verrouillons maintenant la couche de référence et sélectionnons toutes les icônes d'Avatar. Ensuite, déplacez-les dans leur position correcte. Maintenant, maintenez la touche Ctrl ou Commande enfoncée sur Mac et cliquez sur cette couche pour la désélectionner, puis ramenez les autres couches vers le bas pour qu'elles correspondent au dessin Répétez ce processus pour les autres sections de la boîte de discussion. Ne vous sentez pas dépassé par ce processus. Dans les projets réels, vous ne devez généralement pas traiter autant de couches et de sections. J'utilise cette configuration complexe ici dans le cours afin que vous puissiez vous entraîner autant que possible. Le plus important est que vous appreniez à aborder les scènes complexes étape par étape, divisant la scène en parties d'animation et en vous concentrant sur chaque partie une par une Cela vous donne un point de départ solide lorsque travaillez sur des animations de flux de démonstration complexes. C'est bon. Maintenant, pour ces trois dernières couches, placons-les selon leur case appropriée. Parfait. Une fois cela fait, nous pouvons passer à l' animation des couches de noms Comme d'habitude, sélectionnons toutes les couches de noms et marquons-les d'une couleur différente. Maintenant, zoomez un peu, déplacez l'indicateur de temps sur la troisième seconde, point où cette partie de l' animation doit commencer, et créez une image-clé de position pour chacune d'entre elles. Avancez d'une seconde et ajustez leur position un par un, comme nous l'avons fait avec les icônes d'Avatar. Génial. Maintenant, c'est fait. Passons au reste des objets de design dans cette section. Commençons par ce bouton violet. À la troisième étape, nous allons animer sa position de l'endroit où elle se trouve actuellement à l'endroit où elle doit se trouver dans le deuxième écran des messages Marquez-le dans une couleur différente pour plus de clarté. Ouvrez la propriété position, créez une image-clé à la troisième seconde, puis avancez d'une seconde et abaissez-la légèrement Parfait. Passons maintenant à cet autre objet de design. Il est déjà présent dans le premier écran, il suffit donc d' animer également sa position Marquez-le en rouge pour rester organisé. Encore une fois, créez une position des images-clés à la troisième seconde, puis avancez et ajustez son placement. C'est bon. Nous avons donc fini d'ajuster tous les objets de design qui restent cohérents entre le premier et le deuxième écran. Nous allons maintenant aborder les nouveaux objets de design qui n'apparaissent que sur le deuxième écran. Par exemple, nous devons ajouter les messages texte dans chaque boîte de discussion. J'ai déjà préparé quelques lignes de texte que nous pouvons utiliser. Avant de poursuivre, verrouillons et isolons la couche de référence afin savoir exactement où placer le texte. Créons maintenant le premier message texte. Accédez au dossier de ressources que vous avez téléchargé auprès de moi et ouvrez le fichier PDF appelé Random Messages two. Copiez le premier message. C'est bon. De retour dans After Effects, collez-le ici. Mais au lieu de le conserver sous forme d'une seule ligne de texte, supprimons cette couche et créons une zone de texte. De cette façon, le réglage des messages multilignes sera beaucoup plus facile. Génial. Ouvrez maintenant les propriétés du texte et ajustez les paramètres de police. Tout d'abord, réinitialisez le fil. Pour la taille de police, définissons-la sur 14. Ensuite, mettez-le en place. Maintenant, avant de l'animer, dupliquons cette zone de texte pour le reste des sections de la boîte de discussion afin pouvoir facilement remplacer le texte ultérieurement Remplacez maintenant chaque texte dupliqué par les messages du fichier PDF D'ailleurs, j'ai généré tous ces messages avec Chat GPT. J'ai expliqué que je travaillais sur une vidéo explicative SAS pour une société de CRM, a créé des messages de discussion aléatoires que nous pourrons utiliser dans cette démo Cool. C'est bon. Ceci fait, sauvegardons le projet avant de passer à autre chose. Maintenant, déplacez la tête de lecture sur la quatrième et alignez toutes les couches de texte pour commencer à partir d'ici Pour l'animation d'introduction, utilisons la propriété d'opacité pour créer un effet de fondu simple pour chacune d' C'est bon. Et maintenant, changeons la couleur de toutes les couches de texte en noir. Génial. Maintenant, rendons toutes les couches visibles et passons à autre chose. Je vois que la position de mes couches de texte n' est pas alignée avec le nom Je vais donc toutes les sélectionner et les déplacer légèrement vers la droite. OK, ça a l'air mieux. Passons maintenant au design du second message et voyons ce que nous pouvons faire ensuite. Je viens de remarquer que la couleur du texte n'est en fait pas noire. C'est un gris foncé. Ajustons-le rapidement. Sélectionnez toutes les couches de texte. Ensuite, avec l'exemple de l'outil Eyedropper, la couleur gris foncé des icônes d'Avatar apparaît dans le dessin Oui, cela correspond parfaitement au style original. Maintenant, prévisualisons-le avec le reste de l'animation. Petit rappel. Vous n' avez pas encore trop à vous soucier du timing. Pour l'instant, nous sommes en train de terminer l'animation initiale. Plus tard, nous affinerons le timing pour qu'il corresponde à la durée globale de la scène et à la voix off Passons maintenant aux objets de design suivants. Pour voir ce qui va suivre, réactivez la couche de référence et vérifiez la partie droite des boîtes de discussion. Ici, nous pouvons commencer à animer les icônes des étoiles avec une belle animation d'introduction Cela dit, désactivons la couche de référence, puis passons à la précomposition principale de l'écran d'interface utilisateur du deuxième message et copions toutes les icônes en forme d'étoile qui s'y trouvent Maintenant, revenez à l'écran des premiers messages où se déroule notre animation de flux de démonstration et collez-les ici. Assurez-vous de coller les couches au-dessus toutes les autres couches de cette chronologie. Ensuite, étiquetez-les dans une couleur différente pour l'organisation. Commençons par les cinq secondes et utilisons la propriété scale pour créer une jolie animation d'introduction pour les étoiles Génial. Maintenant, à la sixième étape, animons l'objet de design suivant Les icônes temporelles, sélectionnez-les toutes, copiez-les et collez-les dans notre scène. Fixez leur point de départ à la sixième seconde. Cette fois, utilisons l'opacité pour un fondu fluide dans l'animation N'oubliez pas de baliser ces couches avec une couleur différente, puis d'enregistrer le projet avant de poursuivre. Après avoir vérifié la lecture, je pense que c'est mieux si les icônes horaires apparaissent avec les icônes en forme d'étoile. Revenons-les donc à la cinquième place. Génial. Revenons maintenant à l' écran du deuxième message et voyons ce qui va suivre. Après avoir terminé l'animation du flux de démonstration pour le menu de gauche dans les sections de discussion des contacts, nous pouvons maintenant passer à la section de discussion principale. Commençons par quelques objets de design simples. Sélectionnez ces quatre couches, copiez-les et collez-les dans notre scène, en commençant par les cinq secondes. Marquez-les dans une nouvelle couleur. Pour leur animation d'introduction , utilisons la propriété scale Pour ajouter de la variété à la couche de texte, nous utiliserons plutôt un fondu dans l'animation avec opacité Parfait. Agrandissons maintenant les trois autres couches. Une fois que c'est fait, passons à autre chose. De retour dans le deuxième écran, copiez les trois couches suivantes, démarrez-les également à la cinquième. Pour ces deux couches, animons avec un fondu en opacité Et pour le troisième, utilisez une animation agrandie. Remarquez que je ne copie pas tout en même temps depuis le deuxième écran. Au lieu de cela, je traite chaque section une par une. Il s'agit de la meilleure approche pour les animations de flux de démonstration complexes. Cela permet de tout structurer et de gérer. Maintenant que nous avons terminé les parties les plus simples, passons à la dernière section. L'espace de conversation. Nous allons le diviser en deux parties, les bulles de message supérieures et les deux dernières bulles de message. Les deux derniers nécessitent une introduction un peu plus complexe puisque j'y ai prévu une conversation personnalisée Pour l'instant, sélectionnez toutes les couches des bulles supérieures, copiez-les et collez-les dans la chronologie principale à la sixième seconde. Génial. Maintenant, marquez-les en vert. Retournez ensuite au deuxième écran et copiez les couches des deux dernières bulles de message. Collez-les dans la chronologie, commençant également à la sixième seconde. Zoomez et vérifiez soigneusement l'ordre des couches. Il est important que tout soit empilé correctement, ajustez-le au besoin. Génial. Maintenant, pour leur introduction, animons-les en les faisant glisser depuis le bas du cadre Mais d'abord, assurez-vous de relier tous les éléments de la bulle à leur couche d'icônes d'avatar. Parfait. Maintenant, faites de même pour la deuxième bulle. Génial. Maintenant, étiquetez chaque pièce d'une couleur différente pour rester organisé. Maintenant que nous voulons que la scène ressemble à l' état final de l'interface utilisateur après l'introduction, passons à la septième seconde et créons des images-clés de position pour deux icônes d'Avatar dans toutes les couches de bulles de message associées Retournez ensuite à la sixième et faites glisser toutes ces couches vers le bas pour qu'elles s'animent depuis l'extérieur du cadre Nous allons laisser les choses comme ça pour le moment. En attendant, préparons également la dernière partie animée de la scène, couches du champ de recherche situées en bas, copiez-les, collez-les dans la chronologie et démarrez-les à la septième seconde. Pour leur introduction, nous utiliserons la même technique, en les faisant glisser depuis le bas du cadre. Parfait. À ce stade, nous avons créé l'animation initiale pour toutes les sections de l'interface utilisateur. Maintenant, vérifions tout par rapport à la référence. Génial. Maintenant, coupez la couche de référence à sa place, collez-la au-dessus de toutes les couches pour un accès facile, étiquetez-la dans une autre couleur et activez-la. Comme vous pouvez le constater, nous devons ajuster la taille de l'écran principal de l'interface utilisateur pour qu'il corresponde parfaitement au design d'origine. Pour ce faire, ouvrons les règles et créons des directives. Tout d'abord, un pour indiquer la taille globale de l'écran. Et puis deux autres pour marquer le haut et le bas de la section de conversation principale. Fermez les règles. Et maintenant, commençons à ajuster la partie la plus importante, la section de conversation elle-même. Tout d'abord, localisons la couche de la boîte blanche dans cette section à l'intérieur du panneau des couches. C'est ici. présent, le meilleur moyen d' ajuster sa taille consiste à convertir ce calque Illustrator en une forme présentant un tracé plus fréquenté Cela nous permettra d'animer directement le tracé de la forme Une fois cela fait, nous pouvons désactiver le calque d'origine et le masquer pour ne pas encombrer le panneau des calques Nous allons également étiqueter la nouvelle forme dans une couleur différente pour plus de clarté. Avant d'animer, ouvrons le calque de forme et vérifions s'il contient des propriétés inutiles Je peux voir ici quelques chemins non pertinents. Supprimons donc d'abord ce groupe, puis supprimons également la propriété merge paths. Génial. Ouvrez maintenant le chemin et créez une image-clé au début de la chronologie Plus tard, nous synchroniserons correctement cette animation avec le reste de la scène. Pour l'instant, avançons d'une seconde et sélectionnons la partie inférieure du chemin. Faites-le ensuite glisser vers le bas pour l'aligner sur le guide que nous avons créé précédemment Parfait. Maintenant, faisons de même pour la partie supérieure du chemin. Cela fait, nous devons maintenant ajuster la taille de l'écran principal de l'interface utilisateur. Pour gagner du temps, au lieu de tout redimensionner, nous déciderons de ne garder visible que la section principale de la conversation Les autres sections de l'interface utilisateur peuvent disparaître. Cela nous permet non seulement de gagner du temps, mais aussi attirer l' attention des spectateurs sur la partie la plus importante de la scène. Vous verrez ce que je veux dire dans un instant. Passons donc au début de la chronologie et créons une simple animation en fondu pour la première composition du panel. Maintenant, c'est terminé. Réactivons la couche de référence pour vérifier si nous n'avons rien oublié. J'ai remarqué qu'il nous restait encore une étape avant de passer à autre chose créer une animation de changement de couleur pour le contour de la boîte de discussion. Désactivons à nouveau la couche de référence et, pour plus de commodité, désactivons également les guides. Passez maintenant le pointeur de la souris sur les couches de forme dans la chronologie. Regardez attentivement le panneau d'aperçu. Lorsque vous survolez un calque de forme, ses guides de calque apparaissent en bleu D'ailleurs, elles sont bleues parce que cette couche est étiquetée en bleu. Voici la bonne couche de forme. Sélectionnons-le et appuyons sur U pour afficher les images-clés. Placez-vous au début de l'animation, ouvrez les propriétés du trait dans le menu des couches et créez une image-clé pour la couleur du trait À ce stade, laissez la couleur telle quelle. Maintenant, appuyez à nouveau sur vous pour ne voir que les images-clés. Passez au quatrième et changez la couleur du trait en violet. Nous pouvons échantillonner le violet directement à partir de l'icône du bouton pour rester cohérent avec le design. Parfait. Maintenant que c'est fait ? Sauvegardons le projet. Cela met fin à cette leçon. Dans la prochaine, nous continuerons à travailler sur cette animation complexe de flux de démonstration. Ça va devenir encore plus intéressant. On se voit donc dans la prochaine leçon. 21. Réglages de la synchronisation et animation de l'interaction par clics: Reviens. Nous allons commencer cette leçon en ajustant le timing de l'animation. Et comme nous allons créer une animation d'introduction pour la scène avant le début de l'animation du flux de démonstration, nous pouvons avancer toutes les couches animées de 2 secondes. De cette façon, nous aurons du temps pour l'animation d'introduction la scène. C'est bon. Maintenant, sélectionnons toutes les couches du premier écran de l'interface utilisateur et étendons-les afin de pouvoir les voir au début de la chronologie. Génial. Maintenant, ouvrons ces images-clés pré-comp et déplaçons-les également pour commencer à partir des deux secondes À partir de ce moment, l'animation du clic doit se produire, et nous passerons à l'écran d'interface utilisateur suivant. OK. Et maintenant, créons cette animation de clic. Comme vous vous en souvenez peut-être, nous devons le faire pour cette boîte de discussion de contact. Et maintenant, il s'agit de créer l'animation du clic. Créons un nouvel objet nul dans la scène. Assurez-vous qu'il se trouve au-dessus de cette couche de forme. Copions le nom de cette couche de forme et collons-le dans la valeur nulle afin de savoir de quelle couche de forme elle sera responsable. Nous pouvons étiqueter le nul en bleu. Nous savons donc qu'il appartient à cette partie de l'animation. C'est bon. Maintenant, assurons-nous que le point d'ancrage du zéro est placé au centre de cette icône d'avatar. Ensuite, associons la couche de forme correspondante à la valeur nulle. Nous allons maintenant créer une animation de clic en animant l' échelle de la valeur nulle À ce stade, l'animation du clic devrait déjà se terminer. Créons donc la première image-clé ici. Déplaçons maintenant dix images vers l'arrière et créons également une image-clé ici Enfin, placons-nous au milieu de l'animation et réduisons le zéro. Je pense que nous pouvons le mettre à 70, non ? Et maintenant, comme vous pouvez le constater, nous avons également besoin du reste des objets de conception de cette boîte de discussion pour les réduire. Par conséquent, sélectionnons toutes les couches pertinentes et décidons de les associer à la couche nulle ou à la couche de forme. Passons à la couche de forme. Vérifions-le. J'ai remarqué que j'avais oublié d'être parent de l'icône de l'avatar. Trouvons-le donc très rapidement et associons-le également à la couche de forme. C'est bon. Nous avons donc fini de créer l'animation du clic, et nous pouvons maintenant découper le zéro pour qu'il s' adapte à l'animation. Nous n'avons pas besoin que cette couche se trouve à la fin de la chronologie. Génial. Une fois cela fait, nous pouvons passer à l'étape suivante, qui consiste à ajuster le mouvement. C'est-à-dire que nous allons facilement simplifier toutes les images-clés que nous avons créées jusqu'à présent et essayer de rendre le mouvement un peu plus intéressant Tout d'abord, redimensionnons le panneau de chronologie afin de voir autant de couches que possible. Commençons maintenant par ajuster l'animation des clics. abord, assouplissons facilement les images-clés, puis faisons en sorte que le mouvement démarre rapidement au début et ralentisse vers la fin Je pense que nous pouvons faire ce type de mouvement pour le reste de l'animation. À mon avis, ça a l'air bien. C'est bon. Une fois cela fait, vérifions-nous aucune couche n'est sélectionnée et appuyons sur T pour ouvrir les images-clés d'opacité que nous avons créées dans la scène Nous ajusterons chaque propriété à la fois Pour l'instant, examinons toutes les images-clés d'opacité. Assurez-vous donc de tous les sélectionner, puis allons-les facilement et faisons le mouvement comme pour l'animation par clic. Génial. Ça a l'air bien. Maintenant, appuyons sur U pour fermer toutes les couches, puis sur S pour traiter les images-clés d'échelle Assurons-nous de sélectionner toutes les images-clés présentes dans la chronologie Maintenant, simplifions-les et ajustons le mouvement dans l'éditeur de graphes. Œuvre. En regardant l'animation, j'ai remarqué que l'une des couches d'icônes en forme d'étoile était étiquetée dans la mauvaise couleur. Je vais donc m'assurer de trouver cette couche et de l'étiqueter de la bonne couleur. Celui-ci doit être étiqueté en rose. C'est bon. Une fois cela fait, fermons toutes les couches et ouvrons les images-clés de position Sélectionnons toutes les images-clés de position que nous avons ici et ajustons le mouvement Génial. Maintenant, une fois que nous avons fini d' ajuster toutes les images-clés, fermons toutes les couches, puis appuyons sur vous pour voir toutes les images-clés correspondant à toutes les propriétés que nous avons animées, juste au cas où nous aurions oublié d'ajuster certaines propriétés au cours du processus C'est toujours une bonne idée de vérifier par vous-même avant de passer à l'étape suivante. Comme vous pouvez le voir, nous avons ici l'animation de taille que nous avons créée pour les couches de forme. Ajustons donc également ces images-clés. Pour voir uniquement la taille des images-clés, nous pouvons sélectionner uniquement les couches de forme , puis saisir la taille dans la barre de recherche du panneau Calques Génial. Maintenant, sélectionnons toutes les images-clés de trajectoire et ajustons le mouvement comme pour le reste de la scène Puisque nous décochons la proportion contrainte pour les valeurs de taille, nous devons ajuster les deux valeurs une par une. Génial. Ensuite, nous pouvons ajuster les images-clés de couleur. Mais avant cela, je venais de remarquer que je n'avais pas ajusté la taille des images-clés de cette couche. Alors laisse-moi le faire très vite. OK, maintenant ajustons images-clés de couleur. Génial une fois que c'est fait. Nous pouvons maintenant enregistrer le projet, et nous pouvons également fermer la barre de recherche avant de passer à l'étape suivante. Jetons un dernier coup d'œil à toutes les images-clés pour voir si quelque chose nous manque Je constate que j'ai raté les images-clés de trajectoire de cette couche de forme Si vous l'avez fait également, ajustons rapidement l'animation ici. Il est important pour moi de vous montrer que lorsque vous avez beaucoup de couches et d'images-clés, il est conseillé de vérifier par vous-même plusieurs fois avant de passer à autre chose Très bien, nous avons maintenant complètement fini d' ajuster toutes les images-clés, et nous sommes maintenant prêts à voir à quoi tout ressemble Ajustons donc la taille du panneau de calque et voyons toutes les animations que nous avons créées depuis le début de cette scène. J'ai remarqué que l'icône de l'avatar de la deuxième boîte de discussion bouge très bizarrement. Concentrons-nous donc sur cette partie et essayons de résoudre ce petit problème. Tout d'abord, zoomons et essayons de comprendre à quel moment exactement le problème commence. Cela se produit dans la partie animation par clic. Trouvons donc où se trouve notre animation de clics dans la chronologie. Dans notre cas, c'est le nul qui déclenche l'animation du clic. Cela signifie que l'icône de l'avatar est probablement pas apparentée à zéro Peut-être que c'est rattaché à une autre couche. Je pense que nous l'avons substitué à la couche de forme blanche, dans ce cas Il est très important de se tenir au moment où l' animation du clic ne se produit, puis trouver la couche d'icônes de l'avatar et de la mettre en relation avec la valeur nulle. Voyons ce que nous avons. OK, ça a l'air bien. Maintenant, associons également le reste des objets de conception liés à la boîte de discussion à la valeur nulle plutôt qu'à la couche de forme. Génial. Maintenant, tout semble parfait, et nous pouvons enregistrer le projet avant de passer à autre chose. À l'étape suivante, il serait judicieux de commencer à travailler sur le timing de l' animation de morphing qui se produit dans cette animation de flux de démonstration Nous pouvons désactiver cette pré-composition pour moment afin de nous concentrer sur l'animation du flux de démonstration Pour le moment, nous nous sommes concentrés sur la création de l'animation initiale. Ensuite, nous améliorons le mouvement, et maintenant nous pouvons ajuster le timing des couches. Certaines sections peuvent commencer plus tôt et d'autres un peu plus tard. Pour comprendre ce qu' il faut faire, je fais généralement des allers-retours dans la chronologie pour voir quelles parties de l'animation du flux de démonstration peuvent être ajustées pour améliorer la transition. Par exemple, je pense que les couches de texte peuvent disparaître un peu plus tôt dans la chronologie. Nous pouvons démarrer l'animation en fondu à partir du moment où les autres icônes commencent à se réduire. Alors faisons-le dès maintenant. Pour cela, nous devons d'abord ouvrir toutes les images-clés de toutes les couches Trouvons maintenant un point dans le temps où l' animation du texte doit se terminer. Je pense que cela peut se terminer juste avant que les couches de forme ne transforment l'animation ou peut-être même plus tôt Pour l'instant, restons ici et trouvons les couches de texte. Ils sont là. Ce sont toutes les couches avec l'animation d'opacité Nous allons donc sélectionner toutes les images-clés d'opacité de ces couches et les déplacer plus tôt dans la Nous pouvons tous les déplacer pour commencer à partir du moment où l'animation Otro de l'icône commence ici à la troisième seconde Génial. Maintenant, regardons cette animation et voyons ce que nous pouvons ajuster ensuite. D'après ce que je pense, je pense que nous pouvons commencer à utiliser les icônes du texte encore plus tôt Commençons toute cette partie de l'animation par les deux et 15 images suivantes, qui se trouvent au milieu de l'animation Otro des étoiles Sélectionnez donc toutes ces images-clés et déplacez-les pour commencer par les deux et 15 images suivantes Voyons à quoi ça ressemble. Je pense que ça a l'air beaucoup mieux. Cela fait, continuons à vérifier l'animation et voyons quelle partie de l'animation nous pouvons ajuster ensuite. Dans ce cas, je pense que nous pouvons commencer l'animation morphologique des formes juste après le Otro des icônes et la partie animation du texte, qui se trouve à la seconde, à trois et quinze images présent, sélectionnons toutes les images-clés pour la prochaine partie de l'animation, icônes des avatars, les noms et les images-clés de forme, et déplaçons-les vers les trois et 15 images suivantes. Voyons à quoi ça ressemble. Génial. À mon avis, ça a l'air sympa. Maintenant, trouvons le moment où nous pouvons commencer l'animation d'introduction couches du deuxième écran de l'interface utilisateur Dans ce cas, nous pouvons commencer à partir de la quatrième étape, qui se trouve au milieu de l'animation de morphing Restons donc ici, puis faisons défiler la chronologie vers le haut et sélectionnons toutes les couches du deuxième écran d'interface utilisateur. Enfin, amenons-les à commencer par les quatre autres. Voyons maintenant à quoi cela ressemble. Génial. Nous pouvons maintenant passer à l'ajustement de la prochaine partie de l'animation. Cette fois, nous pouvons nous concentrer sur toutes les couches qui doivent entrer dans la scène après les couches de texte du deuxième écran d'interface utilisateur. Je pense que nous pouvons nous placer au milieu de l'animation du texte, qui se trouve à partir des quatre et 15 images suivantes. Sélectionnons donc toutes ces couches et partons d' ici. Voyons maintenant à quoi cela ressemble. Ça a l'air sympa. Passons maintenant à la partie suivante de l'animation. Cette fois, concentrons-nous sur les couches principales de la section de conversation. À mon avis, ils doivent également tous commencer plus tôt. Je pense que nous pouvons également commencer cette partie d'animation à partir des quatre et 15 secondes images. OK, je pense que ça a l'air mieux. Passons maintenant à la dernière partie de l'animation , qui commence également par les quatre et 15 images suivantes pour le moment. Regardons cette partie plusieurs fois pour voir ce que l'on ressent. À mon avis, nous pouvons démarrer la dernière partie d'animation de l'ensemble de la section de conversation avec les couches de texte des quatre autres. Sélectionnons donc toutes les couches de la deuxième interface utilisateur l' exception des couches de texte , puis amenons-les toutes aux quatre secondes. Je vous montre ce processus afin que vous compreniez que nous ne savons jamais avec certitude quel est le moment idéal. Nous devons toujours vérifier l' animation et voir s'il y a une bonne fluidité dans le mouvement. Dans ce cas, je suis content des résultats. Passons maintenant à rendre cette animation un peu plus intéressante, et nous pouvons le faire en créant un léger décalage pour les couches de la dernière partie de l'animation. C'est la section des conversations. J'adorerais voir à quoi cela ressemblera si nous commençons l'intro de la première bulle à la dernière, l' une après l'autre. Alors faisons-le dès maintenant. abord, pour avoir une chronologie organisée, je vais modifier l'ordre des couches de bulles de discussion. Nous n'avons pas à le faire, mais je préfère que les couches soient organisées de cette façon. La bulle de message supérieure sera donc située en dessous dans le panneau des couches. La deuxième bulle de discussion sera au-dessus et ainsi de suite. C'est bon. Ainsi, une fois toutes les couches organisées, je peux toutes les sélectionner sauf celle-ci, car elle entrera d'abord dans la scène, puis commencera à créer un décalage d'une image. N'oubliez pas que ces quatre couches appartiennent à une seule bulle de message, alors assurez-vous de les déplacer comme une seule unité. Il en va de même pour la dernière bulle de message. Laissons la dernière partie de l'animation ici pour le moment. Je veux d'abord voir à quoi ça ressemble. Regardons-le plusieurs fois pour voir ce que tu ressens. Je pense que le décalage est excellent, mais j'ai remarqué que le cadre blanc principal de cette section s' agrandit trop tard. Cela signifie que nous n'avons pas ajusté son calendrier. Alors faisons-le très rapidement. Nous devons d'abord trouver cette couche. C'est ici. Nous devons maintenant démarrer l'animation du chemin à partir du moment où les boîtes de discussion commencent à se transformer pour s'adapter au design du deuxième écran d'interface utilisateur Dans notre cas, c'est à partir des trois et quinze secondes images. Voyons à quoi ça ressemble. Génial. Nous pouvons maintenant revenir à la dernière partie de l'animation où nous voyons l'introduction des couches du champ de recherche et où nous y créons également un joli décalage Pour commencer, nous pouvons sélectionner toutes les couches associées à cette partie de l'animation et ouvrir leurs images-clés Une fois cela fait, décidons à présent quelles couches doivent entrer dans la scène en premier. Je veux que ces deux couches commencent en premier, je vais donc les apporter ici dans la pile de couches. Pour le bouton, je veux qu'il entre en dernier. Je vais donc l'apporter ici au-dessus de toutes les couches. Ensuite, pour l'icône des encres, je pense qu'elle devrait entrer dans la scène avant l'icône Smiley D'accord. Commençons donc à créer le décalage. Je veux qu'ils entrent en même temps. Ensuite, je veux que l'icône Link entre dans la scène, suivie du reste. Voyons ce que nous avons. H Je pense que nous pouvons commencer cette partie d'animation un peu après la partie des bulles de message. Commençons cette partie de l'animation par les quatre et 15 images suivantes. Génial. Commençons donc à travailler sur la prochaine partie de l'animation, qui est l'animation de discussion que je prévois de créer ici. Ensuite, nous travaillerons sur l'outtro de toute cette scène qui devrait se produire après un clic sur une animation sur le bouton Envoyer Et au lieu d' animer cette couche, nous pouvons utiliser le bouton de précomposition que nous avons créé précédemment, dans lequel l' animation des clics est déjà prête Donc, d'abord, trouvons la précomposition appropriée. C'est ici. Dans le dossier des précompositions. Si vous souhaitez le trouver rapidement, vous pouvez utiliser la barre de recherche pour le trouver. C'est l'un des avantages de l'étiquetage de vos précompositions. C'est bon. Maintenant, une fois que nous avons trouvé la précomposition, nous devons la dupliquer depuis le panneau de projet Nous devons maintenant ajuster le nom en fonction du numéro de la scène sur laquelle nous travaillons. Dans ce cas, il s'agit de la scène 7. Génial. Maintenant, sélectionnez la couche de boutons dans la chronologie et faites glisser la nouvelle précomposition dessus tout en maintenant la touche Alt ou Option enfoncée pour la remplacer Ceci fait, ajustons maintenant l'échelle de la précomposition en fonction du design Réglons l'échelle à 30. Maintenant, réduisons la précomposition et trouvons le bon moment où nous voulons que l'animation du clic se Comme nous devons créer l'animation du chat avant l'animation du clic, nous devrions nous laisser quelques secondes libres pour cela, et pour l'instant, démarrer l'animation du clic à partir, disons, des huit secondes. Passons donc à la précomposition du bouton et déplaçons les images-clés jusqu'à ce point Génial. Et maintenant, changeons le texte à envoyer ici avant de passer à autre chose. Une fois terminé, revenons à la scène de l'écran et sauvegardons le projet pour sécuriser tous les processus effectués jusqu'à présent. Génial. Et maintenant, commençons à travailler sur l'animation de discussion qui peut commencer à partir de la septième pour le moment. Tout d'abord, nous devons ajouter une animation de saisie de texte ici. Pour cela, nous pouvons utiliser l'animation de saisie de texte que nous avons créée au début du projet. C'est ici. Copions cette couche de texte. Revenons maintenant à la scène et collons-la au-dessus de toutes les couches. Utilisons maintenant la touche du crochet gauche pour amener cette couche à la position de l'indicateur de temps. accord ? Nous pouvons également ouvrir les images-clés et supprimer les images-clés de position qu'elles Génial. Passons ensuite au moment où l'animation est terminée et ajustons la position et l' emplacement de cette couche de texte. OK. Cela semble suffisant. Passons maintenant au début de cette animation et recadrons le type de votre couche de discussion à ce stade. Génial. Nous avons donc maintenant une belle introduction pour l'animation de saisie de messages Une fois cela fait, nous pouvons maintenant ajuster le message en fonction du sujet que nous voulons aborder dans la conversation. Dans ce cas. Comme le message précédent demandait une conception d'interface utilisateur, disons dans notre message que je vous enverrai un lien avec une bonne référence. Plus tard, nous modifierons également le texte contenu dans les deux dernières bulles du message pour l'adapter au sujet de la conversation. Maintenant, ce message va être envoyé, puis nous avons besoin de quelques cadres pour que le curseur vole jusqu'à l'emplacement du bouton, puis clique dessus. Nous pouvons démarrer l' animation des clics à partir d'ici. Entrez le bouton, précomposez et ajustons le timing des images-clés Génial. Maintenant, au moment où l'animation du clic commence, le texte peut disparaître puis réapparaître une bulle dans la section de conversation ci-dessus Cela signifie qu'à partir de ce moment, nous devons créer une bulle de message verte avec le dernier message que nous venons de créer. Pour cela, tout d'abord, sélectionnons toutes les couches liées à la dernière bulle verte, puis dupliquons-les. Nous allons placer les nouvelles couches ci-dessus afin de les avoir en une seule pile. Précomposons ensuite ces couches. Nous pouvons appeler cet écran cinq bulles une. Génial. Maintenant, plaçons cette précomposition sous le bouton et saisissons-la pour ajuster le texte à l'intérieur Supprimons d'abord toutes les images-clés présentes sur toutes les couches ici Maintenant, appuyez sur S sur la dernière couche et redimensionnez-la légèrement. Les couches sont trop petites pour que je puisse les utiliser. Nous pouvons régler l'échelle à 300. Ensuite, ouvrons la grille d'actions sécurisées et positionnons les couches au centre du cadre. Génial. Nous avons maintenant besoin de cette bulle pour afficher le texte pour lequel nous avons créé une animation de saisie dans la scène d'écran. Revenons donc en arrière et double-cliquez sur la couche de texte que nous avons ici pour copier le texte. Revenons à la précomposition. Créons une nouvelle couche de texte et collons le texte. Redimensionnons maintenant la police à 42, disons, et créons la bulle de message correspondante. Je ne veux pas que tu me suives pour le moment, car j'ai deux moyens de le faire. Je vais vous montrer le premier moyen, mais nous allons utiliser le second. Donc, lorsque nous commencerons la deuxième méthode, je vous indiquerai quand vous devrez passer à l'action. Pour l'instant, je veux juste que vous voyiez comment créer une bulle de message personnalisée en utilisant les deux zones de texte en D que nous avons déjà utilisées dans le cours Pour commencer, je vais ajouter la zone de texte à la scène et m'assurer qu'elle affecte la couche de texte que j'ai ici. Ensuite, je vais ajuster les couleurs et les placer sous le calque de texte afin que nous puissions voir le texte. Jusqu'à présent, ce sont des choses que nous avons déjà faites. Mais maintenant, je veux vous montrer quelles propriétés vous devez ajuster pour obtenir cette forme inhabituelle que nous avons dans le design original. Faites attention aux coins de la bulle à message verte dans le design original. Ils ne sont pas tous également arrondis. Donc, dans le cas de vos futurs projets, vous devez créer une forme unique. Vous pouvez ouvrir le menu des coins arrondis et jouer avec les propriétés du menu Activer par angle. Comme vous pouvez le voir, j' essaie de cocher et décocher les différentes cases ici jusqu'à ce que j'obtienne la bonne combinaison de configuration Dans ce cas, décochez uniquement la case arrondie en bas à droite. C'était la bonne configuration. Ensuite, il ne me reste plus qu'à décider quel devrait être le degré de rondeur. Très bien, je vais maintenant supprimer la zone de texte que j'ai créée, et nous allons le faire ensemble en utilisant la deuxième méthode, qui est plus simple à créer, mais moins automatisée Dans ce cas, je suis d'accord. Je vais utiliser le calque d'origine et convertir en une forme avec un tracé de Bézier Nous pouvons maintenant masquer la couche d'origine. D'accord. Ouvrons maintenant la nouvelle couche de forme et supprimons les propriétés non pertinentes qu'elle contient, comme le groupe que nous avons ici et les chemins de fusion. Une fois cela fait, plaçons le texte dans la bonne position. Ensuite, à l'aide de l'outil Stylo, sélectionnez l'un des points du tracé. Nous pouvons maintenant revenir à l'outil de sélection et sélectionner tous les points sur le côté gauche. Ensuite, faisons-les glisser jusqu'à ce que le chemin corresponde à la longueur du texte. Nous pouvons supprimer cette couche affichant le texte d'origine. D'accord. Maintenant, nous allons sélectionner toutes les couches que nous avons ici et les placer au centre du cadre. Cela semble sympa, mais je pense que nous pouvons maintenant ouvrir les paramètres de composition et ajuster la taille de la composition en fonction de la taille de la bulle du message Réglons la hauteur sur 300, puis la largeur sur, disons, 1 000. Cela fait, revenons à la composition d'écran et créons une animation d'introduction pour la nouvelle précomposition à bulles de message Tout d'abord, commençons par cette pré-composition à partir de la huitième Ajustons maintenant la taille de la pré-composition pour l'adapter au design général C'est bon. Cela semble suffisant. L'animation d'introduction de cette bulle de message débutera à partir des huit secondes Nous pouvons placer cette précomposition au-dessus de toutes les couches. Et maintenant, avant de commencer à créer l'introduction de cette bulle de message, remplaçons cette bulle une nouvelle bulle contenant un message différent Nous avons besoin que la conversation soit un peu plus réaliste. Pour ce faire, trouvons d'abord notre bulle de message nouvellement créée dans le panneau du projet, puis dupliquons-la à partir d'ici. Mais avant cela, nous pouvons faire glisser cette précomposition depuis le dossier des écrans Il n'est pas nécessaire qu' il soit là. C'est bon. Et maintenant, dupliquons la précomposition. Nous pouvons maintenant copier les dernières couches de messages pour référence, puis entrer dans la nouvelle bulle de message, pré-composer et les coller ici. Supprimons d'abord l' animation que nous avons dessus, puis plaçons-les à côté de notre design de bulle de message. Et maintenant, nous devons en ajuster le design pour qu'il ressemble à celui de la référence. Tout d'abord, nous pouvons retourner la bulle du message horizontalement. Déplaçons-le ensuite vers la gauche. Maintenant, déplaçons également l'icône de l'avatar vers la gauche. Mais avant cela, déparentons les couches, séparant afin de pouvoir déplacer sans déplacer le reste des C'est bon. Une fois cela fait, ajustons la couleur de la bulle. Nous pouvons échantillonner la couleur à partir de la couche de référence. Génial. Nous pouvons maintenant supprimer toutes les couches de référence. Nous pouvons maintenant placer l' heure sur le côté gauche. Enfin, déplaçons toutes les couches vers le centre du cadre. Génial. Nous pouvons maintenant centrer le point d'ancrage de la bulle de message, puis modifier le texte que nous avons ici. Écrivons. Je n'ai aucune idée. Maintenant, ajustons le tracé de la forme pour que la bulle corresponde à la longueur du texte. OK, déplaçons les couches une dernière fois vers le centre. Génial. Revenons maintenant à la précomposition de l'écran et remplaçons la bulle de message que nous avons ici par la nouvelle que nous avons créée Et comme nous voulons enregistrer l'animation d'introduction de cette bulle de message, nous pouvons remplacer la couche d'icônes Avatar puisqu'elle contient l' animation de position et que les autres couches sont apparentées à celle-ci Faites maintenant glisser la nouvelle précomposition à bulles de message dessus tout en maintenant la touche Alt ou Option enfoncée sur Mac Ajustons maintenant la taille. Et après cela, ajustons sa position. Tout d'abord, ouvrons les images-clés de position sur cette couche Nous devons maintenant rester sur l'une des images-clés, puis sélectionner toutes les images-clés de position et ensuite seulement ajuster la Je pense que la position semble bonne, mais nous pouvons inverser l'heure. Nous créerons peut-être une animation d' introduction à ce sujet dans le futur. Pour l'instant, restons-en au design original. C'est bon. Maintenant que cela est fait, nous avons terminé de préparer toute la configuration de la section d'animation de conversation, et nous sommes maintenant prêts à l'animer Comme vous le savez peut-être, notre nouveau message vert doit entrer dans la section par le bas, ce qui signifie que toutes les bulles de message doivent remonter. Ce sera la première chose à laquelle nous devrons faire face. Donc, pour l'instant, avançons la dernière bulle de message de la chronologie. Bientôt, nous trouverons le moment idéal pour cela. Pour l'instant, concentrons-nous sur le déplacement de tous les messages vers le haut, et nous pouvons le faire en utilisant un objet nul. Créons d'abord un nouvel objet nul dans la scène. Nous pouvons changer le nom en bulles nulles. Ensuite, taguons-le en vert. Et maintenant, placons-le dans un ordre qui nous convient dans la pile de couches. Ce que je veux dire par là, c' est que nous devrions le placer au-dessus de toutes les couches qui lui seront associées Nous n'avons pas besoin d'ajouter la dernière bulle verte à ce message. Mais nous devons associer la dernière bulle de message grise à la valeur nulle. Trouvons donc la précomposition de cette bulle de message et plaçons le zéro au-dessus de celle-ci Nous pouvons changer la couleur de cette précomposition en mousse C. Maintenant, plaçons le zéro quelque part entre les bulles de message , puis commençons à y associer toutes les bulles de message. Une fois cela fait, commençons par le zéro à huit secondes et animons sa position pour qu'elle remonte Je viens de remarquer que cette bulle de message m'a manqué d' être parent. Alors laissez-moi annuler mon action, et paraissons-la à zéro. D'accord ? Maintenant, déplacez le zéro vers le haut afin avoir suffisamment d'espace dans la zone inférieure pour entrer dans la nouvelle bulle de message que nous avons créée. Faisons en sorte que cette nouvelle bulle commence à neuf pour le moment. Bientôt, nous allons créer une belle animation d' introduction. En attendant, nous pouvons l' étiqueter en vert. OK. Et maintenant, pour le moment, nous ne devrions pas voir l' heure de ce message. Entrons donc dans la précomposition et désactivons-la pour le moment. Revenons à l'animation. Nous avons besoin de voir apparaître l'heure du message précédent, et nous pouvons créer un joli fondu dans l'animation à partir du huitième. Restons donc ici, puis entrons dans cette précomposition. Créons maintenant un fondu dans l'animation pour la couche temporelle. Faisons en sorte que cette animation dure une seconde. OK. Ça a l'air bien. Nous pouvons maintenant revenir à l'animation principale et créer une animation d'introduction pour la dernière bulle de message Nous pouvons faire en sorte que cette précomposition commence dès les huit secondes. Maintenant, appuyons sur Y pour passer à l'outil de point d'ancrage et déplaçons le point d'ancrage de cette précomposition vers le coin inférieur droit Maintenez la touche Ctrl ou Commande enfoncée sur Mac pour l'accrocher exactement dans le coin. Ceci fait, commençons maintenant à l'animer. Nous pouvons d'abord créer une animation à l'échelle. Et comme nous savons que la précomposition doit être telle qu'elle est actuellement, nous allons créer une image-clé Ensuite, ajoutons-y également une animation de rotation. Pour la même raison, nous allons également créer un cadre clé de rotation ici. Revenons maintenant d'une seconde en arrière et réduisons la précomposition tout en la faisant pivoter. De cette façon, nous obtiendrons une belle animation de rotation Supprimons maintenant facilement les images-clés nulles et faisons en sorte qu'elles commencent à bouger rapidement dès le Une fois terminé, ajustons l'animation de la bulle avant la composition en conséquence Mais avant cela, rendons-le un peu plus intéressant en le faisant évoluer au milieu de l'animation. De cette façon, l' effet d'éclatement sera plus visible. C'est bon. Et maintenant, sélectionnons toutes les images-clés et modifions-les facilement. Passons ensuite à l'éditeur de graphes et faisons bouger le mouvement rapidement en ajustant l'influence de la vélocité à environ 80 % Je trouve que ça a l'air sympa. Nous pouvons maintenant revenir à la chronologie. Avant de passer à autre chose, commençons exactement la dernière pré-composition à bulles à partir de la neuvième. Génial. fois cela fait, nous avons créé une belle animation de flux de démonstration d'une conversation en ligne. À ce stade, nous pouvons enregistrer le projet et passer à l'étape suivante. À ce stade, nous pouvons également nous assurer que toutes nos couches et précompositions de la chronologie sont réduites afin obtenir la meilleure qualité de scène Génial. Maintenant, je vais enregistrer le projet une fois de plus. Passons au début de la chronologie pour voir l' animation complète que nous avons créée jusqu'à présent. J'ai remarqué que dans la partie inférieure gauche des boîtes d'avatar, certaines couches n'ont pas leur place. Je parle de celui-ci. Il s'agit peut-être d'une couche que nous avons oublié de supprimer lors des étapes précédentes. Trouvons cette couche dans la pile de couches et essayons de comprendre de quoi il s'agit. Je vois maintenant qu'il s'agit d'une couche de texte qui appartenait à la dernière bulle de message grise du design original. Nous avons remplacé ces couches par une précomposition qui inclut nos couches personnalisées Cela signifie que nous n'avons plus besoin de cette couche ici. Il en va de même pour cette couche. Il s'agit de la couche temporelle du design original. Nous n'en avons pas besoin non plus, puisque nous l'avons déjà inclus dans la précomposition C'est pourquoi je vérifie toujours l'animation après chaque étape. Et je vous suggère de faire de même. Lorsqu'il s'agit d' un grand nombre de couches, c'est toujours une bonne idée de vérifier par nous-mêmes. Même si nous sommes sûrs à 100 % d'avoir tout fait parfaitement. Il vaut mieux que vous trouviez le problème pertinent plutôt que de le trouver par le client. D'accord. Maintenant que tout cela est dit, vérifions cette animation ensemble dans la composition principale. Nous reviendrons sur cette pré-composition plus tard pour apporter la touche finale Pour l'instant, il est important de vérifier à quoi cela ressemble avec la voix off Accédez au système de messagerie intégré où toutes vos conversations sont organisées par contact. Envoyez un rappel rapide ou partagez une mise à jour instantanément. Et oui, le partage de fichiers se fait instantanément. Et oui, le partage instantané. Et oui, partager. Et oui, partager. Et oui. D'accord. Je pense donc que nous sommes d'accord avec le fait que l'animation du flux de démonstration soit supprimée par la voix off Nous pouvons l'ajuster un peu plus tard si nécessaire. Mais pour l'instant, je veux continuer à animer la scène. Nous devons créer une intro Otro pour la scène. Nous devons également créer des mouvements de caméra pour que les spectateurs puissent se concentrer sur les sections pertinentes de l'écran de l'interface utilisateur. Nous devrons également ajouter le texte qui doit être présenté lors de l'animation du flux de démonstration. n'est qu'après cela que nous commencerons à travailler sur la prochaine animation du flux de démonstration que nous pouvons voir ici dans le tableau vidéo Pour l'instant, concentrons-nous sur la création des mouvements de caméra et l' ajout des lignes de texte du script à la scène. Mais tout d'abord, n'oublions pas de revenir à précomposition du panneau principal que nous avons dans le premier écran d'interface utilisateur de cette animation de flux de démonstration Une fois cela fait, nous pouvons passer à la composition de la scène principale et commencer à planifier les mouvements de caméra Tout d'abord, réduisons cette précomposition afin de pouvoir également voir toutes les couches d'effondrement qu'elle contient en haute qualité Et maintenant, avant d'animer cette précomposition pour obtenir de jolis mouvements de caméra, ajoutons d'abord le texte qui doit constituer Pour cela, nous pouvons aller sur le tableau vidéo et voir cela. Comme vous pouvez le constater, cette longue scène inclut un très long texte. Dans notre cas, nous pouvons diviser le texte en plusieurs parties, chacune affichée en fonction de ce qui se passe dans l'animation du flux de démonstration. Cela dit, passons au script et copions la première partie du texte à afficher dans la scène. Revenons maintenant au projet et collons le texte. Je viens de remarquer que nous devrions d'abord copier une couche de texte d'une autre scène contenant du texte. Ainsi, il sera plus facile de coller le nouveau texte dans la nouvelle scène. Passons à la scène 6 et copions la couche de texte à partir d'ici. Passons maintenant à la scène sept et collons cette couche ici. Maintenant, revenons au script et copions le texte. Génial. Revenons maintenant au projet. Double-cliquez sur la couche de texte et collez le texte copié à partir du script. D'accord. Maintenant, divisons cette couche de texte au moment où nous arrivons à la deuxième partie de l'animation de démonstration, car nous allons ajouter ici la deuxième partie du texte principal de cette scène à partir du script. Revenons donc au script et copions la deuxième partie du texte principal, pour revenir au projet. Collons maintenant le texte et développons cette couche. Génial. Nous avons maintenant le texte de la première partie de l'animation du flux de démonstration et de la seconde partie. Passons maintenant au moment où se déroule la troisième et dernière partie de l' troisième et dernière partie de l'animation de démonstration, c' est-à-dire à la huitième seconde, et divisons la couche de texte à ce stade. Passons ensuite au script et copions la dernière partie de texte que nous avons dans cette scène. Revenons au projet. Collons le texte. Et je supprimerai le point à la fin du texte. Très bien, nous pouvons maintenant étendre un peu cette couche et enregistrer le projet avant de passer à l'étape suivante. Notre prochaine étape sera de créer l'animation d'introduction de cette scène et de créer les mouvements de caméra Pour commencer, trouvons d'abord la bonne échelle et la bonne position pour que la précomposition de l'écran de l'interface utilisateur se trouve au début de l'animation Vous pouvez utiliser la grille d'action sécurisée pour vous assurer de placer la précomposition au centre du cadre D'accord ? Je pense donc que nous sommes bons maintenant en ce qui concerne l'échelle et la position de la précomposition Passons maintenant à la deuxième étape et créons une image-clé pour la propriété scale ici 22. Créer la scène 8 - Animation de démonstration par glisser et déposer: Reviens. Dans cette leçon, nous allons commencer à travailler sur la scène suivante. Mais avant cela, organisons notre panel de projets. Nous allons placer ces trois pré-compositions dans le dossier de pré-composition. C'est bon. Et maintenant, créons une nouvelle pré-composition pour la nouvelle scène Nous pouvons l'appeler scène huit. Assurez-vous que c'est en Full HD et que les autres paramètres sont corrects. Fermons maintenant toutes les pré-compositions que nous avons ici. C'est bon. Passons maintenant au tableau vidéo et voyons ce que nous devons faire Dans cette scène, nous allons créer une animation de flux de démonstration par glisser-déposer. Commençons par comprendre quelle devrait être la durée de la scène. Il devrait commencer aux environs de la 53e seconde et se terminer à environ 1 minute et 1 seconde. Cela signifie qu'il nous reste environ 8 secondes. Génial. Dans cet esprit, trouvons l'écran d'interface utilisateur approprié que nous allons animer dans cette scène Génial. Alors voilà. Passons maintenant à la nouvelle composition de scène et y faisons glisser l'écran de l' interface utilisateur du navigateur présent, je souhaite adopter une approche légèrement différente de celle du flux de travail d'animation que nous utilisions jusqu'à présent. Jusqu'à présent, nous avons d'abord animé l'animation initiale pour chaque partie, puis créé l' intro et l'outro, puis créé les mouvements de caméra, puis ajusté l' Cette fois-ci, je veux que nous ne travaillions pas selon cette approche étape par étape. Cette fois-ci, je veux vous guider avec une approche dans laquelle nous travaillerons ensemble sur toutes les étapes. Je veux que vous expérimentiez les deux approches afin que vous puissiez bien comprendre ce qui fonctionne le mieux pour vous. De plus, vous comprenez donc qu'il est parfois encore préférable de travailler sur toutes les étapes simultanément. OK. Cela dit, au lieu de commencer par la première partie du flux d'animation, commençons à travailler sur l'introduction de cette scène Pour cela, revenons à la composition principale et voyons l'extrait de la dernière scène Nous avons une belle animation de zoom arrière. Mon objectif est de créer une transition sympa. Créons donc le même mouvement pour l'introduction de la nouvelle scène que dans la dernière Ensuite, nous pouvons chronométrer le mouvement pour obtenir une transition fluide. Dans cet esprit, revenons à la nouvelle scène et commençons à créer l'intro Tout d'abord, nous pouvons réduire cette précomposition. Zoomons ensuite sur la chronologie et utilisons les propriétés de position et d'échelle pour créer une animation de zoom arrière d'une seconde. Comme nous voulons que la précomposition ressemble et soit placée là où elle se trouve actuellement, après l'animation d'introduction, nous devons créer une image-clé pour les propriétés pertinentes au Ensuite, nous devons aller au début de la chronologie et ajuster l'échelle et position pour obtenir un joli mouvement de zoom arrière. Ouvrons la grille d'action sécurisée pour voir le centre du cadre. Maintenant, trouvons une bonne position pour la précomposition à ce stade Je ne veux pas positionner la scène en fonction du panneau contextuel car moment, nous ne la voyons pas. Nous verrons plus loin dans l'animation. Passons donc à la précomposition et désactivons les couches contextuelles pour le Bien, revenons à la scène principale. Continuons à ajuster la précomposition. J'essaie de placer la précomposition pour que les zones de liste des fichiers soient parfaitement centrées dans le cadre D'accord ? Je pense que c'est bon. Je pense que c'est suffisant. Maintenant, ajustons la vélocité des images-clés pour obtenir un mouvement rapide et agréable. Cela signifie que nous pouvons déplacer les poignées afin de constater influence d'environ 95 %. Je trouve que le mouvement est beau, mais nous pouvons peut-être ajuster la position de la précomposition au début de la chronologie Ce sera un peu plus intéressant si l'animation Zoom arrière commence par le nom de l'écran de l'interface utilisateur. Je vais me tenir debout devant les images-clés de première position et ensuite seulement ajuster la position de la précomposition à ce stade. Mettons-le ici. Voyons à quoi cela ressemble maintenant. Je pense que ça a l'air mieux pour le moment. Ce que nous avons fait maintenant, c'est que nous avons consacré une grande partie de notre temps à ajuster l'animation d'introduction Mais est-ce bien de le faire ? Je veux vous montrer ce type de flux de travail afin que vous puissiez répondre vous-même à cette question. Plus tard dans la leçon, tu pourras y répondre. Parce que pendant l'animation, il se peut que nous changions cette animation d' introduction que nous avons passé tant de temps à perfectionner en ce moment Peut-être que passer ce temps à ce stade du processus n'était pas un bon choix. reviendrons plus tard, pour Nous y reviendrons plus tard, pour l' instant, continuons à travailler. C'est bon. Passons maintenant à la pré-composition de l'écran de l'interface utilisateur du navigateur et commençons à préparer pour l'animation du flux de démonstration Tout d'abord, nous pouvons réactiver les couches contextuelles, puis les étiqueter dans une couleur différente. Ensuite, nous pouvons réduire toutes les couches que nous avons ici pour les obtenir à la résolution la plus élevée. Une fois cela fait, commençons à créer la première partie de l'animation pour l'animation du flux de démonstration. Nous pouvons maintenant désactiver les couches contextuelles, puis étiqueter également la couche d'ombre d' une couleur différente. Essayons maintenant de comprendre quelle devrait être notre première partie d'animation. Dans notre cas, nous devons créer une animation dans laquelle nous ajoutons un fichier supplémentaire à la liste des fichiers dans la section principale de cet écran d'interface utilisateur. Et avant que tout cela n'arrive, nous devons créer une animation par glisser-déposer. L' animation par glisser-déposer se produira fois que le panneau contextuel sera entré dans la scène. Cela signifie que nous devons également créer une sorte d' animation par clic pour déclencher l' introduction du panneau contextuel Dans notre cas, nous pouvons déclencher cela en créant une animation de clic pour le bouton publicitaire que nous avons ici dans la section d'en-tête. Génial. Nous avons donc maintenant une idée des différentes parties de l'animation que nous devons créer ici. Dans cet esprit, je comprends que la première chose que je peux faire maintenant est précomposer les couches du panneau contextuel dans une précomposition De cette façon, il me sera beaucoup plus facile de créer une animation d'introduction et de la chronométrer avec le reste des couches De plus, il sera beaucoup plus pratique de créer des micro-animations dans le panneau contextuel de l'interface utilisateur. Déplacez la nouvelle précomposition hors du dossier de l'écran avant de passer à autre chose. Nous pouvons maintenant commencer à travailler sur la première partie animée de ce flux de démonstration, savoir l'animation par clic sur le bouton Ajouter et l' introduction du panneau contextuel Comme nous savons que l'animation d'introduction de la scène se termine à la seconde, cela signifie que cette partie de l'animation doit commencer à partir de la seconde. Et pas avant. Cela signifie que nous pouvons déplacer la fenêtre contextuelle et la couche d'ombre pour commencer à partir des deux secondes. Et de la première à la deuxième, nous allons créer une animation de clic sur le bouton publicitaire dans la section d'en-tête. Alors maintenant, au lieu de créer d'abord l'animation par clic, continuons à travailler avec notre nouvelle approche ne pas conserver le flux de travail étape par étape. Au lieu de nous concentrer d'abord sur l'animation du clic, nous allons nous concentrer sur le mouvement de la caméra. Dans notre cas, au lieu d'animer une caméra, nous allons simplement continuer à ajuster la position et l' échelle de l'animation Dans cet esprit, passons maintenant à la deuxième étape et positionnons la pré-composition de l'écran de l'interface utilisateur de manière à ce que nous puissions voir un peu mieux le bouton Nous avons besoin de l'attention des spectateurs pour qu'ils se concentrent sur ce domaine. Bon, maintenant, à ce stade, après le zoom et l'animation, nous pouvons créer l' animation de clic pour le bouton. L'animation par clic durera dix images. Restons donc ici , puis entrons dans la précomposition pour déplacer le chronomètre du panneau contextuel pour qu'il commence à partir de ce moment, soit deux et dix images Une fois cela fait, revenons à la deuxième étape et créons l'animation du clic. Sélectionnons d'abord la couche de boutons et plaçons-la au-dessus de toutes les premières couches de pièces d'animation. Maintenant, au lieu d' animer cette couche, nous pouvons utiliser la précomposition d'animation des boutons nous avons utilisée plus tôt dans Une fois trouvée, dupliquons cette précomposition et ajustons le nom en fonction de notre scène Maintenant, maintenez la touche Alt ou Option enfoncée sur Mac et faites-la glisser sur la couche de boutons la chronologie pour la remplacer par la précomposition des boutons Ensuite, ajustons la taille de la précomposition en fonction du design de l'écran de l'interface utilisateur Ensuite, entrons dans la précomposition du bouton et ajustons le texte. Génial. Maintenant, nous devons nous assurer que nous sommes au bon moment pour que l' animation du clic se produise. Ensuite, nous pouvons entrer dans la précomposition du bouton et faire glisser les images-clés jusqu'à ce point D'accord. L'animation des clics est maintenant prête et nous sommes prêts à passer au panneau contextuel. Nous avons besoin de la fenêtre contextuelle pour entrer dans la scène juste après l'animation du clic. Commençons par les deux et cinq secondes images. Pour l'animation d'introduction, utilisons la propriété scale pour créer un bel effet de pop out pour cette Faisons en sorte que cette animation dure une seconde. Génial. Une fois l'animation contextuelle terminée, nous pouvons maintenant créer une animation pour la couche d'ombre. Pour cela, nous pouvons utiliser l'animation d'ombres floues que nous avons créée dans l'une des scènes précédentes Pour trouver dans quelle scène il se trouvait, je vais utiliser la barre de recherche du panneau de projet. L'ombre de l'écran huit n'est pas ce dont nous avons besoin, car c'est la couche que nous voyons maintenant dans notre scène. Ce que nous devons vérifier, c'est l' ombre de l'écran quatre. Très bien, cliquez dessus et choisissez « révéler dans la composition ». De cette façon, After Effects ouvrira la composition avec cette couche à l'intérieur Ici, cette couche est déjà ennemie. Nous pouvons maintenant sélectionner la couche de flou et d'ombre à partir d' ici et la copier-coller dans notre nouvelle scène Collez-le au-dessus de la couche d' ombre que nous avons actuellement, puis appuyons sur le crochet gauche pour l'aligner ici. Nous pouvons maintenant supprimer l' ancienne couche d'ombre. Génial. Maintenant, vérifions-nous que les nouvelles couches que nous avons introduites correspondent au design de notre écran d' interface utilisateur dans cette scène. Comme vous pouvez le constater, les deux couches ont été placées dans la même position que dans la scène à partir de laquelle elles ont été copiées. Cela signifie que nous devons les ajuster un peu. Alors faisons-le rapidement. Bien, maintenant, marquons ces deux couches en violet et ouvrons leurs images-clés pour vérifier que l'animation correspond à l'introduction du panneau contextuel Voyons à quoi ça ressemble. Je pense que nous pourrons commencer cette partie animation un peu plus tard. Faisons glisser ces trois couches pour commencer aux deux et dix images suivantes. Très bien, ça a l'air bien pour le moment. Avant de passer à l'étape suivante, sauvegardons le projet afin de garantir les progrès que nous avons réalisés jusqu'à présent. Génial. Maintenant, au lieu de passer directement à la partie d'animation suivante, restons-en à notre nouvelle approche et prenons le temps finaliser et d'ajuster cette partie d'animation Nous pouvons commencer par ajuster le mouvement de l'animation contextuelle. Réglons la vélocité à 85 % et voyons à quoi cela ressemble. Je pense que c'est bon. Revenons maintenant à la scène principale et ajustons l' angle de la caméra au moment où le panneau contextuel apparaît. Ce changement d'angle de caméra devrait avoir lieu à la troisième seconde. Restons donc là et ajustons les propriétés de position et d'échelle de la précomposition d'écran Pour l'instant, copions les valeurs précédentes avant le zoom et l'animation et collons-les les valeurs précédentes avant ici. Maintenant, notre prochain mouvement de caméra devrait se faire vers la gauche, car nous devons créer l'animation par glisser-déposer. Cela signifie que nous allons nous déplacer vers la gauche et que le curseur amène un fichier du côté droit et le dépose dans la section du panneau contextuel. Dans cette optique, nous pouvons rendre la scène plus intéressante en zoomant un peu plus sur le panneau contextuel, notamment parce que nous voulons que le spectateur prête attention à ce moment-là Jouons donc avec les valeurs d'échelle et de position jusqu'à ce que nous obtenions une belle apparence de la scène. Mon objectif est de faire en sorte que le panneau contextuel soit situé au centre du cadre. D'accord. Je trouve que ça a l'air sympa, et maintenant nous devrions passer à la préparation du prochain mouvement de caméra. Heure. Puisque nous voulons ajouter une animation par glisser-déposer, nous devons déplacer la précomposition vers la gauche afin d'avoir l'espace pour récupérer le fichier et déposer dans le panneau contextuel Décidons que cette animation prendra 2 secondes. Pourquoi ? 2 secondes ? Parce qu'il va se passer beaucoup dans cette partie de l'animation, et je ne veux pas que ça paraisse trop rapide. D'accord ? Passons donc à la cinquième seconde et déplaçons la précomposition vers la gauche Nous avons donc de l'espace libre sur le côté droit. De cette façon, nous créerons l'illusion que la caméra se déplace vers la droite à l'endroit où se trouve le fichier avant de le prendre avec le curseur et de le glisser-déposer dans le panneau contextuel. Maintenant, avançons d'une seconde dans le temps et copiez-collez l' image-clé de position précédente ici car nous voulons que la précomposition revienne à sa position précédente Cela signifie qu'à ce stade, nous aurons déjà fait glisser le fichier dans le panneau contextuel Pour rendre l'animation un peu plus intéressante, nous pouvons créer une micro-animation dans le panneau contextuel. Mon objectif est de créer une sorte de micro-animation qui montrera le panneau contextuel réagissant au fichier déposé. Bientôt, tu comprendras ce que je veux dire. Pour l'instant, restons-en là et entrons dans la précomposition du navigateur Et à partir de ce moment précis, nous allons créer cette micro-animation dans la précomposition contextuelle Alors d'abord, saisissons-le. Ici, nous pouvons créer une animation contextuelle pour l' icône du dossier que nous avons Nous pouvons également créer une belle animation rotative pour le trait en pointillé que nous avons ici, mais nous y reviendrons plus tard Pour l'instant, concentrons-nous sur l'icône du dossier. Créons d'abord une image-clé pour la propriété scale à ce stade avec la valeur actuelle Décidons ensuite que cette animation contextuelle durera dix images et créons ici une autre image-clé avec la même valeur Passons maintenant au milieu de cette animation et agrandissons la couche. Nous pouvons le régler à 200. Voyons à quoi ça ressemble. Je pense que nous pouvons l'étendre un peu plus. Essayons 300. Génial. C'est mieux. Maintenant, ajustons la vélocité des images-clés à 85 % pour obtenir un mouvement un peu plus intéressant Voyons à quoi ça ressemble maintenant. À mon avis, c'est super rapide. Faisons donc en sorte que cette animation dure exactement 1 seconde. Cela signifie que s'il commence à 3 secondes et 20 images, il doit se terminer à 4 secondes et 20 images. Prévisualisons-le à nouveau. Maintenant, je pense que cela semble trop lent. Faisons donc durer cette animation jusqu'à 4 secondes et dix images et vérifions-la une fois de plus. Génial. Je pense que nous avons bien compris cette fois. Maintenant, pour rendre l'animation contextuelle un peu plus intéressante, placons-nous au début de cette animation et plaçons le point d'ancrage dans la zone centrale inférieure de la couche Cela rendra l'icône du dossier plus dynamique. À mon avis. De plus, l'icône du dossier n'entre plus en collision avec le texte situé en dessous. Ceci fait, passons à la prochaine micro-animation que nous pouvons créer ici. Cette fois, faisons pivoter le trait en pointillé. Le moyen le plus simple de le faire est de recréer le rectangle à partir de zéro Nous allons donc sélectionner l'outil rectangle, assurer qu'aucune couche n'est sélectionnée et créer un nouveau rectangle ayant approximativement la même taille que le rectangle d'origine dans le dessin. Pour la couleur, passons à une couleur de remplissage normale et, pour l'instant, définissons-la sur le gris. Maintenant, créez le rectangle et ajustez sa taille. Pour cela, utilisons la propriété size. Tout d'abord, je vais décocher les proportions contraintes, puis ajuster les valeurs séparément Nous pouvons également déplacer la forme manuellement jusqu'à ce qu'elle corresponde au design d'origine. Génial. Maintenant, ajustons les coins arrondis de la forme pour qu'elle soit plus proche du dessin original. Génial. Cela fait, passons maintenant au trait qui doit se trouver sur cette couche. Pour la couleur, nous pouvons échantillonner le violet que nous voyons dans le trait ou dans l'icône du dossier. Pour le poids du trait, nous pouvons le régler à deux. Ensuite, nous devons nous assurer que ce trait ressemble au dessin original. Cela signifie que nous avons besoin qu'il apparaisse sous forme de pointillés. Pour cela, ouvrez le menu à l'intérieur de la couche et ajoutez des tirets Pour faire pivoter le trait, nous allons utiliser la propriété offset. Mais avant cela, ajustons la valeur du tiret pour qu'elle corresponde au design. Nous pouvons le mettre à cinq. Voyons maintenant s'il ressemble au design original. Oui, je trouve que ça a l'air génial. Pour l'instant, laissons cette couche désactivée afin de pouvoir échantillonner la couleur grise du dessin original pour colorer le remplissage de notre nouvelle forme. D'accord. Le design est beau, et nous sommes maintenant prêts à l'animer. Comme je l'ai dit plus tôt, nous utiliserons la propriété offset pour cela. Mais au lieu de créer manuellement des images-clés pour la rotation, utilisons une simple expression temporelle pour la faire pivoter à l' infini sans Pour cela, maintenez la touche Alt ou Option enfoncée sur Mac, puis cliquez sur le chronomètre correspondant à la propriété offset À présent, dans la zone d'expression, tapez T asterisk -100. Cela fait, le trait pivote désormais à l'infini vers la droite sans que nous ayons à créer des images-clés manuellement Si cela vous semble trop rapide, vous pouvez réduire la valeur contenue dans l'expression. Réglons-le sur -50 et voyons à quoi cela ressemble. Génial. Je trouve que ça a l'air très bien. Cela fait, nous pouvons maintenant désactiver la couche rectangulaire d'origine. Ensuite, nous pouvons expédier cette couche dans la chronologie puisque nous n'en avons plus besoin. Enfin, plaçons notre nouvelle couche de forme au-dessus de la dernière couche. D'accord. Et maintenant, une fois que nous aurons terminé la micro-animation dans le panneau contextuel, nous pouvons rendre cette animation encore plus intéressante en ajoutant une microanimation supplémentaire pour le panneau contextuel situé à l'extérieur de la scène com. Laissez-moi vous montrer ce que je veux dire. Tout d'abord, revenons au moment où cette animation commence. Maintenant, revenons à la configuration du navigateur. Une fois ici, nous pouvons créer une animation à échelle supplémentaire pour la précomposition contextuelle, à partir de ce moment Créez donc la première image-clé ici. Maintenant, nous devons synchroniser cette animation avec celle qui se déroule dans la précomposition contextuelle Si vous ne savez pas où cela se termine, vous pouvez entrer dans la précomposition et vous tenir au moment où l'animation s'y Revenez ensuite à la précomposition du navigateur, créez une autre image-clé à ce stade, puis placez-vous au milieu de cette animation pour réduire la précomposition contextuelle Nous pouvons maintenant ajuster la vélocité à 85 pour qu' elle corresponde au mouvement à l'intérieur de la précomposition contextuelle Et avec cela, nous avons créé une animation de réaction plutôt sympa pour le panneau d'interface utilisateur contextuel. Cela aura l'air beaucoup plus cool une fois que nous ajouté l'animation glisser-déposer. Mais pour l'instant, concentrons-nous sur le démarrage de la prochaine partie de l'animation. Lorsque nous devons afficher la liste des fichiers principaux avec le nouveau fichier créé par glisser-déposer, nous devons pour cela créer une animation outtro pour la précomposition contextuelle qui se produit juste après l'animation de mise à l'échelle Passons aux 7 et 20 images suivantes et mettons l'échelle à zéro à ce stade. Nous pouvons ensuite accéder à l' éditeur de graphes et ajuster le mouvement, afin qu'il commence lentement et s' accélère vers la fin. Ensuite, créons également une animation outtro pour le flou dans l' ombre que nous avons ici Nous devons synchroniser cette animation avec l'animation outtro du pop up precom Pour le faire rapidement, nous pouvons nous tenir là, copier les premières images-clés des deux couches et les coller ici. Cliquez ensuite avec le bouton droit de la souris, accédez à Keyframes Assistant et choisissez Images-clés inversées Prévisualisons cette animation quelques reprises pour voir ce que vous ressentez. Génial. Je trouve que ça a l'air très bien. Nous sommes maintenant prêts à animer la partie suivante, où nous ajouterons un autre fichier à la liste pour terminer notre animation du flux de démonstration pour cette scène Comme je le savais déjà, je voulais créer ce type d'animation. Lors de la création du storyboard dans Illustrator, lors de la préparation de cet écran d'interface utilisateur pour l'animation, j'ai veillé à un modèle de boîte de fichiers soit séparé en couches dans la liste Ainsi, nous pouvons maintenant trouver ces couches dans la chronologie, les sélectionner toutes et les dupliquer. Parce que je savais que le fichier ajouté ici dans la partie glisser-déposer serait un nouveau fichier JPEG ou PNG. Je me suis assuré que les couches de conception ce fichier PNG étaient également séparées. Sélectionnons donc toutes les couches liées à cette zone de fichier et appuyons sur Ctrl plus D pour les dupliquer Déplaçons-les maintenant vers le haut pour qu' ils soient empilés. Une fois cela fait, précomposons toutes ces couches et appelons cet écran de précomposition huit panneaux deux Génial. Nous allons maintenant utiliser cette précomposition comme nouvelle zone de fichier qui apparaît dans la liste des fichiers après l'animation par glisser-déposer Mais d'abord, nous devons ajuster le design à l'intérieur de cette précomposition Utilisons la région d'intérêt pour recadrer la taille de cette composition, car elle est trop grande pour le moment Une fois cela fait, sélectionnons maintenant tous les éléments qu'il contient et associons-les à la couche de boîte blanche. De cette façon, nous pouvons sélectionner la couche de boîte blanche, l' aligner au centre de la composition et nous assurer que tout est parfaitement centré. OK. Créons maintenant une nouvelle couche de texte avec un nom de fichier différent. Pour avoir un flux agréable et continu par rapport à la scène précédente, nous pouvons nommer ce fichier point de référence JPEG. Cela fonctionne car dans la scène précédente, la conversation portait sur l'envoi d'une référence pour la tâche en cours de discussion. Après avoir ajusté la taille et la position du texte, nous pouvons désactiver le calque de texte d'origine. Nous allons laisser le reste de l'information tel quel et passer à autre chose. Maintenant, revenons au navigateur, à l'interface utilisateur, un écran, réduisons notre nouvelle précomposition et trouvons une bonne place pour elle dans la liste Zoomons et veillons à ce que l'espacement entre les boîtes de fichiers soit cohérent avec le reste de la liste Une fois cela fait, commençons à créer l'animation descendante pour toutes les boîtes de fichiers de la liste. Mais avant cela, parlons de la zone de fichier PNG où tous les éléments se trouvent sur des couches séparées. Assurez-vous de sélectionner tous les objets associés à ce fichier et de les associer à la boîte blanche principale de cette conception de fichier. Génial. Marquons maintenant toutes ces couches en orange, afin de savoir qu'elles appartiennent à une seule section. Ensuite, nous pouvons sélectionner toutes les couches associées à ce fichier, l' exception de la couche en boîte blanche, et les expédier dans la chronologie. De cette façon, il sera beaucoup plus facile de créer l'animation descendante pour les zones de fichiers de la liste. Et pour éviter toute interférence, bloquons les couches de flou et d'ombre Eh bien. Très bien, commençons maintenant sélectionner toutes les couches de la boîte de fichiers. Pour ce fichier, veillez à ne pas sélectionner l'un de ses éléments se trouvant sur une couche séparée. Sélectionnez plutôt la case blanche de ce fichier. Maintenant, une fois les cinq couches sélectionnées, trouvons le bon moment pour démarrer cette animation. Dans notre cas, elle peut démarrer juste après l'entonnoir contextuel ait terminé son animation d'introduction, qui dure sept et vingt images à la seconde Alors, en restant ici, créons les premières images-clés pour le poste Maintenant, avançons d'une seconde. La chronologie et abaisse toutes les couches sélectionnées. Nous devons nous assurer que notre nouvelle pré-composition est placée exactement à l'endroit où se trouve la première boîte de fichiers Par conséquent, avant de faire glisser les couches vers le bas, appuyons sur Ctrl ou Commande R pour ouvrir les règles, puis créons un guide afin de savoir jusqu' les règles, puis créons où nous devons faire glisser les couches vers le bas Nous pouvons maintenant désactiver les règles et commencer à faire glisser les couches vers le bas. Génial. Et maintenant, simplifions-nous les images-clés et ajustons le mouvement dans l'éditeur de graphes Faisons en sorte que le mouvement démarre rapidement et ralentisse vers la fin. Voyons à quoi ça ressemble. C'est bon. Je pense que ça a l'air bien pour le moment. Nous n'avons plus besoin du guide que nous avons créé, alors retirons-le du cadre. C'est bon. Passons maintenant à la zone supérieure de la section liste, car nous devons masquer la nouvelle zone de fichier dans cette zone. Pour cela, nous pouvons retrouver le dégradé de blanc que nous avons créé dans la scène précédente, puis le copier à partir de là et le coller dans notre nouvelle scène. Ouvrons donc la scène sept , puis saisissons les messages PreComp Trouvons maintenant cette couche de forme dégradée blanche que nous avons créée ici et copiez-la. Pour revenir à la nouvelle scène, avant de coller la couche, examinons d'abord l'ordre de la liste des fichiers que nous avons ici Ce que je veux dire par là, c'est que je veux placer le nouveau fichier précomposé que nous avons créé au bon endroit dans la pile de couches Peut-être devons-nous le placer ici. Non. Donc, selon l'ordre des couches, il s'agit de la zone de la zone de fichier inférieure du dessin. Cela signifie que nous devons déplacer la pré-composition pour qu'elle se trouve avant la couche de fichiers, qui est le premier fichier de la liste du dessin Dans notre cas, nous devons le placer ici. Ainsi, comme vous pouvez le constater, lorsque je sélectionne chaque couche, nous avons un ordre chronologique Je fais cela parce qu'il me sera un peu plus facile de savoir où placer la couche de dégradé blanc. Dans notre cas, le dégradé blanc doit se situer au-dessus toutes les couches de la boîte de fichiers, car nous devions masquer la zone de fichier supérieure. Je vais donc sélectionner cette couche pour coller le dégradé blanc au-dessus. Amenons maintenant cette couche au début de la chronologie, puis ajustons sa conception pour l'adapter à notre section de liste. Tout d'abord, je vais l'amener au centre de la section de liste, puis j'ajusterai la largeur de cette forme. Restons un peu dans l'aperçu et ajustons un peu plus la position. C'est bon. Maintenant, le dégradé blanc masque la zone de fichier supérieure, mais il cache également une autre couche qui n'a pas besoin d'être masquée. Laissez-moi vous montrer ce que je veux dire. Si nous désactivons maintenant le dégradé blanc puis désactivons également la première zone de fichier de la liste, nous verrons qu'il y a une section ici avec du texte. Cette petite section doit être vue. Par conséquent, nous devons trouver cette couche dans le panneau des couches, puis la déplacer au-dessus de la couche en forme de dégradé blanc. Génial. Et maintenant, nous pouvons réactiver toutes les couches. Et comme vous pouvez le constater, nous avons plus que la bonne zone cachée. Cela fait, nous pouvons maintenant revenir en arrière et en avant dans la chronologie et voir à quoi ressemble cette section. Je trouve que ça a l'air génial. Nous devons donc maintenant faire de même pour la partie inférieure de cette section. Notre objectif est maintenant de masquer la zone de fichier inférieure car, comme vous pouvez le voir, elle entre en collision avec les éléments de conception des numéros de page. Nous pouvons donc d'abord dupliquer le calque de forme en dégradé blanc , puis le faire glisser vers le bon endroit. Ensuite, nous pouvons cliquer avec le bouton droit sur le calque et le retourner verticalement. Voyons maintenant à quoi cela ressemble pendant l'animation et essayons d' ajuster sa position si nécessaire. Dans mon cas, je dois abaisser un peu plus la couche. Génial. Maintenant, tout semble aller bien, et nous sommes prêts à passer à l'étape suivante. À l'étape suivante, je souhaite que le mouvement descendant des boîtes de fichiers soit légèrement retardé dans l'animation. Je veux que la première zone de fichier la liste commence à se déplacer en premier, puis que les autres boîtes de fichiers se déplacent en conséquence. Cela signifie que nous devons maintenant retarder toutes les images-clés que nous avons créées pour la propriété position de ces couches Dans ce cas, pour obtenir un délai appréciable, créons un décalage de deux images entre les images-clés Pour créer le délai, je vais utiliser la nouvelle fonction de décalage d' After Effects. Et comme je veux que la première zone de fichier la liste soit déplacée en premier, je vais commencer à sélectionner les images-clés depuis la couche inférieure, car il s'agit la première couche de la section. C'est bon. Maintenant, je vais maintenir la touche Alt enfoncée et contrôler ou sélectionner une option dans la commande sur Mac, puis faire glisser les images-clés vers la droite jusqu'à ce que la deuxième couche atteigne la position de l'indicateur de temps Voyons à quoi ça ressemble. Génial. Je trouve que ça a l'air génial. Maintenant, sauvegardons le projet avant de passer à autre chose. D'accord. Revenons maintenant à la composition principale et voyons ce que nous devons faire ensuite Après la partie de l'animation du flux de démonstration où nous glissons et déposons un nouveau fichier puis voyons ce fichier ajouté à la liste, nous devrions maintenant effectuer un petit zoom arrière pour voir l'intégralité de l'écran de l'interface utilisateur avec la liste des fichiers mise à jour, et cette animation de zoom arrière devrait commencer à la septième seconde. Entre la sixième et la septième, nous ne voulons aucun changement dans les mouvements de caméra, car c'est à ce moment que l'animation du fichier Dragon Drop aura lieu. Maintenant, à la septième seconde, nous devons créer des images-clés de position et d'échelle avec les valeurs actuelles Ensuite seulement, passons à la huitième et créons l'animation Zoom arrière. Pour cela, nous pouvons copier les deuxièmes images-clés à l'écran et les coller aux huit secondes De cette façon, nous avons maintenant l'écran de l'interface utilisateur entièrement affiché dans le cadre. Maintenant que nous avons créé nouvelles images-clés et copié et collé d'autres images-clés, nous devons nous assurer que le mouvement est toujours cohérent tout au long de l'animation Et comme vous pouvez le constater, il y a des parties où le mouvement n' est pas cohérent. Nous avons besoin que la vélocité de toutes les images-clés soit d'environ 85 % Mais comme vous pouvez le constater, dans certaines régions, ce n'est pas le cas. Je vous montre ceci parce que je veux que vous sachiez qu'ajuster la vélocité des images-clés avant de terminer l'animation initiale revient à travailler deux fois Tout au long de l' animation de la scène, nous avons créé des images-clés, puis nous les avons ajustées immédiatement à chaque fois Ici, nous terminons l'animation, et nous devons encore ajuster les images-clés Par conséquent, je suggère de commencer terminer la création des images-clés initiales pour l'ensemble de la scène, les laissant sous forme d'images-clés linéaires normales Ce n'est que lorsque vous avez terminé toute l'animation que vous devez commencer à les ajuster. C'est l'un des inconvénients de l'approche consistant à animer chaque partie sans suivre un ordre chronologique Ainsi, lorsque vous travaillerez sur votre prochain projet, faites le bon choix en matière de flux de travail et d'approche à suivre. D'accord. Cela dit, revenons au projet et recommençons à ajuster le mouvement de la caméra, mais cette fois pour toutes les images-clés à la fois, car nous voulons que le mouvement soit cohérent tout au long de l'animation Et nous le ferons en utilisant le panneau de vélocité des images clés. Comme nous ne pouvons pas ajuster différentes propriétés à la fois à l'aide du panneau de vélocité des images-clés, nous devons d'abord sélectionner toutes les images-clés de position et les ajuster Réglons la vélocité à 85 %. Faisons de même pour les images-clés de mise à l'échelle. Une fois cela fait, n' oublions pas ajuster les premières images-clés de cette animation, puisqu'il s'agit de l' animation d'introduction de cette scène Et comme nous voulons obtenir une bonne adaptation par rapport à la scène précédente, nous devons ajuster la vélocité des images-clés à cette partie à environ 95 %, car nous voulons le mouvement soit très rapide, afin que la transition de découpage fonctionne parfaitement Passons maintenant à la composition principale, intégrons la nouvelle scène à la chronologie et travaillons sur la transition depuis la scène précédente Mais avant cela, j'ai remarqué que nous n'avions pas réduit la durée de la scène précédente. Nous venons de le recadrer à partir de la composition principale. Cela dit, entrons dans la scène 7 et réduisons le flux de travail à la seconde 11 , soit 1 seconde après l'animation d'outtro Je préfère avoir 1 seconde d'espace libre au cas où j'aurais besoin de faire quelques petits ajustements temporels dans les scènes. C'est bon. Maintenant, intégrons la scène 8 à la chronologie et vérifions-nous que la transition Match Cut fonctionne. Pour cela, nous devons recadrer la scène huit du début au moment le plus rapide du mouvement d'introduction Commençons la scène 8 juste après scène 7 et voyons à quoi ressemble la transition. Après avoir regardé l' animation à quelques reprises, je ne trouve pas que le matchcut soit beau La principale raison en est la position de nos éléments dans les deux scènes. Dans notre cas, il s'agit des écrans de l' interface utilisateur de la scène sept et de l' écran de l'interface utilisateur de la scène huit. Voyons ce que nous pouvons faire pour améliorer un peu l' apparence de cette transition Match Cut. Essayons d'abord de modifier l'échelle et la position initiales de l' écran de l'interface utilisateur dans la scène huit. Essayons de le réduire légèrement et de le placer davantage au centre, afin que le mouvement ressemble davantage une simple animation de zoom arrière qu'au mouvement de zoom arrière que nous avons actuellement. Une fois la position réglée, assurez-vous que la vélocité n' est pas modifiée. D'accord ? Revenons maintenant à la composition principale et voyons à quoi elle ressemble OK, je pense que ça a l'air un peu mieux. Revenons encore à la scène 81 et essayons de réduire un peu plus la précomposition au début, puis de remplacer les images-clés de l'échelle suivante par un nombre inférieur, peut-être Trop petit. Essayons 90. Revenons encore une fois à la composition principale et voyons-la plusieurs fois pour voir à quoi elle ressemble Je n'aime toujours pas l'apparence de la coupe assortie. Dans ce cas, nous pouvons entièrement modifier le mouvement de la découpe en passant d'une animation Zoom arrière à une animation panoramique. Laissez-moi vous 23. Créer le titre final et l'outro de scène: Reviens. Dans cette leçon, nous allons commencer à travailler sur les scènes finales de ce projet. Nous allons commencer par créer la scène d'animation du titre. Pour accélérer les choses, nous pouvons utiliser l'animation de titre similaire que nous avons créée au début de la vidéo. Nous allons le dupliquer et ajuster l'animation qu'il contient. Et avant de faire tout cela, créons une animation d'outtro pour la scène précédente Passons à la scène huit et passons maintenant à la deuxième scène. Cette fois, nous pouvons faire en sorte que l'écran de l'interface utilisateur quitte le cadre par le côté gauche. Parce que l'animation de texte qui entrera dans la scène après celle-ci aura un mouvement de gauche à droite. Bientôt, tu comprendras ce que je veux dire. En attendant. Assurez-vous de régler la vélocité des deux dernières images-clés à environ 95 % Ensuite, recadrons la chronologie 1 seconde après l'animation du tro. Génial. Passons maintenant au milieu de l'animation tro et dans la composition principale, recadrons la composition jusqu'à présent Génial Maintenant, une fois la scène terminée, commençons à créer l' animation du titre pour la scène suivante. Pour cela, trouvons la première pré-composition d'animation de titre que nous avons créée C'est ici. C'est la première scène que nous avons créée. Maintenant, comme nous voulons avoir la même animation pour notre nouvelle précomposition, dupliquons d'abord cette pré-composition depuis le panneau des calques et amenons-la au bon moment Voyons à quoi ça ressemble. D'accord. Alors pourquoi continuer à lutter ? En difficulté. Alors pourquoi continuer à lutter ? Va jusqu'à un point. Génial. Nous devons maintenant apporter quelques modifications à l'animation du titre pour l' adapter au script et à la voix off Par conséquent, nous n'apporterons pas les modifications dans cette pré-composition. Nous devons maintenant trouver cette pré-composition dans le panneau du projet afin de pouvoir la dupliquer à partir de là Nous voulons le dupliquer depuis le panneau Projet car nous voulons avoir une toute nouvelle précomposition dans laquelle nous pouvons apporter des modifications sans affecter la première Une fois cela fait, maintenons l'option Alter enfoncée et faisons glisser la nouvelle précomposition sur la composition d'origine dans la chronologie pour passer de l'une à l'autre. De cette façon, nous avons enregistré toutes les images clés que nous avions créées sur la précomposition d'origine, mais nous avons maintenant une toute nouvelle précomposition Que nous pouvons apporter des modifications à l'intérieur sans affecter l' original. C'est bon. Cela étant dit, commençons par modifier le texte ici. Pour cela, ouvrons le script et copions le texte correspondant. Revenons au projet, collez le texte, et une fois que c'est fait, supprimons le mot en difficulté car ce mot doit être animé différemment. Nous allons l'animer comme le mot multiple. Et c'est ce que nous ferons dans une seconde. Pour l'instant, changeons le point d'exclamation que nous avons ici en point d'interrogation Génial Supprimons maintenant les couches de texte non pertinentes. Enfin, vérifions-nous que le masque que nous avons sur cette couche de texte correspond au texte actuel. Pour cela, il faut d'abord supprimer le masque actuel , puis en créer un nouveau. De cette façon, il s'adaptera automatiquement au texte actuel. Génial. Et maintenant, la prochaine chose que nous pouvons faire est ajuster la position du mot qui est divisé en plusieurs couches, et nous pouvons le faire facilement en déplaçant l'objet nul puisque toutes les lettres sont liées à celui-ci Mettons-le quelque part par ici pour le moment. D'accord. Maintenant, ajustons les lettres afin de trouver le mot approprié pour cette scène. Dans ce cas, il doit avoir du mal. Et comme nous savons que le mot difficulté comporte plus de lettres que plusieurs, il serait judicieux de dissocier les couches de lettres du zéro pour le moment, car nous ajouterons couches de lettres supplémentaires en une seconde, que nous ajusterons dans l'animation C'est bon. Ajustons maintenant les lettres, double-cliquez sur chaque lettre et modifiez-la en conséquence. C'est bon. Maintenant, dupliquez le dernier calque et déplacez-le d'une image vers l'avant pour conserver l'animation décalée. Remplacez-le ensuite par la lettre correspondante. Maintenant, dupliquons cette couche et répétons le même processus. Cette fois, remplacez la lettre par G. Awesome. Maintenant que nous avons plus de lettres dans ce mot, nous devons ajuster l' animation de position pour chacune d'entre elles. Pour le faire sans problème, commençons par faire démarrer toutes les couches exactement au même moment. Plus tard, nous les compenserons à nouveau. Pour l'instant, faisons en sorte que toutes les images-clés partent du même point dans le temps. Moi, il sera beaucoup plus facile d' ajuster leur animation de position. C'est bon. Maintenant, ajustons les images-clés de dernière position pour les nouvelles lettres Pour cela, nous devons d'abord nous tenir devant la dernière image-clé , puis ajuster la position Si vous n'arrivez pas à vous tenir debout sur l'image-clé, comme dans mon cas, ne vous inquiétez pas Il s'agit simplement d'un petit problème logiciel qui se produit souvent après le repositionnement des images-clés Dans ce cas, placez-vous le plus près possible l'image-clé et déplacez le calque Comme vous pouvez le constater, une nouvelle image-clé mise à jour a été créée, mais elle n'est pas alignée avec les autres images-clés . Ne t'inquiète pas pour ça. Assurez-vous simplement que vous n' avez pas d'images-clés à deux pour la position à ce stade. Pour l'instant, créons un nouveau guide et concentrons-nous sur l'alignement des nouvelles lettres avec le reste du texte Ne vous inquiétez pas si l'image-clé n' est pas alignée avec les autres images-clés Déplaçons ensuite la nouvelle lettre vers la droite pour réorganiser la position du reste des lettres En gros, ce que nous faisons maintenant, c'est ajuster les images-clés de dernière position pour les lettres Une fois cela fait, plaçons l'objet nul au centre de ce mot. Génial. Nous pouvons maintenant nous rapprocher du premier texte. Et maintenant, placons-nous au milieu de l'animation des lettres et ajustons également leur position à ce moment-là. C'est bon. Une fois cela fait, passons en revue l' animation et vérifions si tout va bien, comme vous pouvez le voir. Au cours du processus de repositionnement des images-clés de dernière position que j'ai créées, des images-clés inutiles Si cela vous est également arrivé, assurons-nous de supprimer les anciennes images-clés tout en laissant Génial. Donc, une fois que nous aurons terminé, assurons-nous qu'aucune couche n' sélectionnée et appuyons sur vous pour les fermer toutes. Créons maintenant le délai d'une image que nous avions précédemment pour cette partie de l'animation. Génial Nous pouvons donc maintenant nous tenir au point où toutes les lettres se trouvent à leur place finale, puis les sélectionner toutes et les associer à la valeur nulle. Et maintenant, nous aurons également le mouvement de rebond secondaire que nous avons créé pour le zéro. Nous pouvons nous débarrasser du guide maintenant. Passons maintenant à l'animation du point d' interrogation. Tout d'abord, nous pouvons retarder un peu cette animation dans la chronologie. Comme l'animation des lettres dure maintenant un peu plus longtemps, nous pouvons démarrer l' animation du point d'interrogation à partir de la deuxième seconde. D'accord, le timing semble bon, mais maintenant nous devons le déplacer pour qu'il soit placé à côté du texte. Pour cela, nous pouvons créer un nouvel objet nul, juste pour l'utiliser comme objet mobile pour les deux couches que nous avons ici. Je le fais au lieu de déplacer chaque couche une par une. D'accord ? Je pense que nous pouvons le placer quelque part par ici. Génial. Nous avons tout mis en place. Et maintenant, avant de poursuivre, ajustons la taille de cette composition à l'aide de l'outil de région d'intérêt Vous pouvez ouvrir les paramètres de composition et définir les dimensions sur des nombres arrondis. Nous ne sommes pas obligés de le faire, mais je préfère qu'il en soit ainsi. Le plus important est de s'assurer que les couches sont alignées au centre de la composition. Comme vous pouvez le voir dans mon cas, j'ai tout aligné. ce n'est pas le cas, vous pouvez utiliser la méthode de l'objet nul pour placer toutes les couches sur la valeur nulle et la déplacer afin d'ajuster la position de toutes les couches à la fois. C'est bon. Et maintenant, avant de passer à autre chose, faisons un dernier ajustement. Je vois que l'animation ici commence à partir de la deuxième sur dix images. Sélectionnons toutes les couches sauf le premier texte et faisons en sorte cette animation commence par le second. Génial Maintenant, je suis sûr que nous avons tout fait ici. Nous pourrions déplacer légèrement le premier texte vers la droite, et c'est tout. Revenons maintenant à la composition principale et voyons ce que nous avons, attention à la voix off Notre objectif est de nous assurer qu'il se synchronise parfaitement avec l'animation du texte Alors pourquoi continuer à lutter ? Rendez-vous sur onepoint.com et simplifiez votre journée de travail. Alors pourquoi continuer à lutter ? Rendez-vous sur onepoint.com et créez votre travail. Pourquoi continuer à se battre ? Va jusqu'à un point. Continuez à vous battre. Va jusqu'à un point. D'accord. Donc, après l'avoir regardé plusieurs fois, je constate que nous devons ajuster le timing. Mais avant cela, je vais supprimer le dernier cadre clé de position que j'ai ici. Ce petit mouvement n'est pas pertinent pour ce texte. C'était plus pertinent pour l'animation de texte précédente. Déplaçons maintenant dix images en arrière et commençons la scène à partir de ce moment. Génial Maintenant, cela signifie que nous devons ajuster le timing de l'animation tro pour la scène précédente. Par conséquent, en restant debout à ce stade, entrons dans la scène huit et assurons-nous que l'animation se termine déjà à ce moment-là. Pour ce faire, nous devons entrer dans la pré-composition de l'écran de l'interface utilisateur. Et tout d'abord, assurez-vous que l'animation outtro se termine à la position de l'indicateur de temps Je vais donc sélectionner toutes les images-clés des couches de fichiers et m' assurer que la dernière image-clé se termine ici Cela signifie que nous devons maintenant également réajuster le timing de la partie d'animation précédente Cela doit prendre fin à ce stade. Restons donc ici, puis déplaçons toutes les images clés de la partie d'animation précédente pour terminer ici. Génial Une fois cela fait, n' oublions pas la micro-animation qui se produit dans la précomposition contextuelle Cela doit commencer à partir de maintenant. Entrons donc dans la précomposition et déplaçons les images-clés ici. D'accord ? Maintenant que nous avons modifié le timing de la dernière partie de cette animation du flux de démonstration, cela signifie que nous devons également ajuster le timing des mouvements de caméra dans la scène principale. Nous devons synchroniser l'animation glisser-déposer l'animation extérieure du panneau contextuel de cette précomposition Cela signifie que l' animation glisser-déposer doit se terminer à ce moment où le panneau contextuel démarre l'animation d'outtro Restons donc ici , puis passons à la scène principale. Et maintenant, assurez-vous de voir toutes les images clés que nous avons ici. Maintenant, sélectionnez toutes les images clés de la dernière partie et amenez-les ici de manière à ce que l'écran de l'interface utilisateur soit déjà au centre du cadre. Comme vous pouvez le constater, nous avons ainsi tout parfaitement synchronisé, et c'est ainsi que vous pouvez réajuster le timing des animations de votre flux de démonstration Cela n'a rien d'extraordinaire ou de compliqué. Tout ce dont nous avons besoin, c'est d'un peu de concentration et de compréhension du début et de la fin de chacune des parties de notre animation . D'accord ? Alors maintenant, avant de revenir à la composition principale et de regarder à nouveau l'animation, je voudrais ajuster la position finale de la couche de fichier Je ne veux pas qu'il cache les objets qui se trouvent derrière lui. Je veux voir l'animation du dossier violet. Génial Maintenant, après avoir ajusté le timing dans cette pré-composition, passons au milieu de l'animation d'outtro Et pendant que vous êtes là, revenez à la composition principale et recadrez la huitième scène avant la composition jusqu' à présent, zoomons et veillons à ce qu'il n'y ait pas d'espace vide entre les scènes huit et neuf D'accord. Et maintenant, voyons à quoi cela ressemble. Un moyen. Alors pourquoi Keep continue de se battre ? Hé ! Alors pourquoi continuer à lutter ? À bien y réfléchir, je pense que nous n'avons pas besoin de créer une transition adaptée ici. Prolongeons la huitième phase de pré-composition de la scène pour obtenir une simple transition vers la gauche Je pense que c'est mieux dans ce cas. Nous pouvons entrer dans la scène huit et voir où se termine exactement l' animation Otro, puis recadrer la précomposition à ce point dans la composition principale La transition du tableau vers la gauche est bien meilleure. Nous pouvons commencer la scène 9 un peu plus tôt. Déplaçons-le de dix images en arrière et regardons cette partie plusieurs fois pour voir ce que l'on ressent. Alors pourquoi continuer à lutter ? En difficulté. Accédez à one point.com Alors pourquoi continuer à lutter ? Accédez à onepoint.com. Alors pourquoi continuer à lutter ? Rendez-vous sur onepoint.com et faites votre choix. Je trouve que ça a l'air génial. Et maintenant, je veux m' assurer que le mot « lutte » sera placé au centre du cadre. Pour cela, nous pouvons d'abord ouvrir la grille d'action sécurisée. Passons maintenant à l' image-clé de dernière position de cette précomposition et ajustons-la Le mot sera donc placé au centre. Génial Nous avons donc maintenant la lettre G qui touche presque le plafond du cadre à ce stade. Entrons dans la précomposition et ajustons l'animation de cette lettre Tout d'abord, sélectionnons cette couche et appuyons pour voir toutes les images-clés Essayons maintenant de nous placer au milieu de cette animation et d'ajuster la position de cette couche. Ne vous inquiétez pas si vous ne pouvez pas vous tenir exactement sur les images-clés. Ajustez simplement la position, puis nous supprimerons l'image-clé non pertinente. inquiétez pas non plus si vous ne parvenez pas à aligner exactement la nouvelle image-clé sur le reste des images-clés Cela ne sera pas visible dans l'animation. Génial Alors maintenant, revenons à la composition principale, et comme vous pouvez le voir, tout semble parfaitement correct Cela fait, nous pouvons maintenant enregistrer le projet pour sécuriser les modifications que nous avons apportées jusqu'à présent. Génial. Passons maintenant à la scène suivante. Pour voir ce que nous devons faire ensuite, nous pouvons accéder au tableau vidéo. Bien, nous devons maintenant créer la scène finale de ce projet. Il s'agit d'une scène d'appel à l'action très courante dans ce type de vidéos explicatives Habituellement, dans cette scène, nous devons présenter le logo et une animation d'appel à l'action, par exemple consulter notre site Web ou cliquer sur le lien ci-dessous. Bien entendu, il doit être synchronisé avec la voix off. Dans notre cas, notre appel à l'action consiste à promouvoir le site Web et à inciter le visiteur à le visiter. Cela dit, revenons à la composition principale et commençons à préparer la scène Mais d'abord, intégrons cette couche Illustrator dans le dossier Assets. D'accord. Et maintenant, appuyons sur Catrol ou Command N pour créer une nouvelle composition. Nous pouvons l'appeler scène dix. Vérifions-nous que la durée est de 2 minutes avant de cliquer sur OK. Bien entendu, plus tard, nous ajusterons la durée. Génial Commençons donc par concevoir la scène. Nous pouvons commencer par intégrer le logo à la scène. Pour cela, nous pouvons rechercher le logo, pré-composition que nous avons dans le projet, puis l'intégrer à la chronologie Une fois cela fait, assurons-nous que le logo correspond à la scène et réduisons-le légèrement. Comme vous pouvez le comprendre, nous avons besoin d' un espace pour le bouton d'appel à l'action qui doit être situé sous le logo. Génial Et maintenant, nous pouvons commencer à créer le bouton d' appel à l'action. Pour cela, nous pouvons utiliser l'une de nos précompositions de boutons que nous avons créées pendant le projet Dupliquons le dernier bouton avant la composition, puis ajustons le nom CTA est l'acronyme d'appel à l'action. Génial. Passons maintenant à la scène et ajustons le design et le texte à l'intérieur. Tout d'abord, nous allons remplacer le texte par le nom du site Web. Une fois cela fait, entrons dans les paramètres de composition et ajustons la largeur en fonction de la taille du bouton. D'accord. Positionnons maintenant les deux précompositions de manière à obtenir une composition agréable et équilibrée Nous pouvons baisser le bouton et également abaisser le logo. Génial. Une fois cela fait, nous pouvons commencer à animer la scène. Et l'animation principale qui doit se produire ici est l'introduction de la sphère, qui est notre curseur dans le projet, en cliquant sur le bouton Pour cela, cherchons la précomposition du curseur dans panneau du projet, puis glisser cette précomposition dans la scène. Passons maintenant à l'animation, nous pouvons lancer l'introduction du curseur depuis le haut de la scène Placez-le verticalement au centre. OK, c'est suffisant. Et maintenant, taguons cette pré-composition en jaune et commençons à l'animer. Pour cela, nous utiliserons la propriété position. Créons donc la première image-clé au début de la chronologie Maintenant, avançons d'une seconde et plaçons la précomposition ici sur le côté droit de la scène Ensuite, avançons d'une seconde et plaçons la précomposition quelque part dans la zone du bouton Nous pouvons l'aligner verticalement par rapport à la composition, puis zoomons et le placer un peu plus bas Génial Et maintenant, créons l'animation de clic pour le curseur, qui en sera également l'animation extérieure Pour cela, nous allons utiliser la propriété scale. Créez donc une image-clé ici. Déplaçons ensuite 20 images et mettons l'échelle à zéro. Génial. Maintenant, une fois que nous avons créé le mouvement initial, nous pouvons commencer à l'ajuster. Commençons par ajuster le tracé à l' aide de l'outil Vertex Nous voulons qu'il y ait un mouvement agréable et arrondi. Génial. Une fois que nous avons ajusté la trajectoire, passons maintenant au mouvement. Tout d'abord, facilitons la position des cadres clés. Ensuite, dans l'éditeur de graphes, fixons la vélocité d'introduction à 95 %, car nous voulons créer un découpage correspondant à la scène précédente Et maintenant, à ce stade, ralentissons cette sphère en déplaçant la poignée vers la droite. Je ne veux pas que cela s'arrête complètement à ce stade Je vais donc m'assurer de transformer cette image-clé en image-clé continue, puis de m'assurer que la vitesse à cette partie n'est pas nulle. Voyons à quoi ça ressemble. Génial. Ça a l'air sympa. Passons maintenant aux images clés de l'échelle. Pour attirer l'attention du spectateur sur cette zone, nous pouvons nous placer au milieu de l'animation à l'échelle et agrandir légèrement le curseur qu'il grandisse avant de disparaître Comme vous pouvez le constater, cela attire davantage l'attention sur le curseur à ce stade. D'accord. Et maintenant, simplifions-nous les images clés. Et cette fois, utilisez l'éditeur de graphes pour accélérer la croissance du curseur, le ralentir au milieu et le rendre plus rapide vers la fin. Génial Je trouve que ça a l'air génial, et nous pouvons maintenant revenir à la chronologie et regarder l'animation que nous avons créée jusqu'à présent pour voir ce que l'on ressent. D'accord. Je trouve que l' animation est très bonne. Mais à mon avis, nous n'avons pas besoin que l' animation du logo se fasse ici. Je veux que le logo soit statique dans la scène. Je voudrais profiter de cette occasion pour vous montrer comment vous pouvez figer vos précompositions animées. C'est très simple. abord, nous devons rester au point où le logo a déjà terminé l'animation, puis cliquer avec le bouton droit sur la précomposition, aller sur T et choisir Freeze frame Génial. Maintenant, je remarque que le logo ne semble pas exactement au centre du cadre, alors déplaçons-le un peu vers la gauche. C'est mieux Génial. Passons maintenant au timing de l' animation du clic dans la précomposition du bouton Pour l'instant, c' est trop tôt. Pour cela, fixons-nous au moment où le curseur crée l'animation du clic, puis entrons dans la précomposition du bouton et déplaçons les images-clés ici. Voyons à quoi ça ressemble. Je pense que cela peut commencer cinq images plus tôt, alors ajustons le chronométrage très rapidement. Génial. Et maintenant, je me sens beaucoup mieux. C'est pourquoi je suggère toujours de vérifier l'animation plusieurs fois pour voir comment le mouvement se sent. Bon, maintenant je vois que toutes les animations sont belles et agréables à regarder. Nous pouvons réduire le curseur avant composition et passer à l'étape suivante, qui consiste à ajouter la scène à la composition principale Tout d'abord, nous pouvons nous contenter de cinq secondes et réduire cette chronologie à ce stade. Une fois terminé, passons à la composition principale et intégrons la scène finale à la chronologie Génial. Et maintenant, commençons à travailler sur la transition. Tout d'abord, nous pouvons entrer dans la scène finale et voir où se trouve le milieu de l'animation d' introduction C'est ici. Passons à ce stade, puis dans la composition principale, recadrons cette précomposition à la position de l'indicateur de temps Maintenant, commençons cette précomposition juste après la précédente, puis ajustons la fin de la précomposition précédente Comme nous voulons créer une belle correspondance, nous pouvons terminer la scène au point où le curseur est sur le point de quitter la scène. Passons maintenant à la scène finale et voyons à quoi cela ressemble. Nous pouvons recadrer quelques images depuis le début de la scène finale pour obtenir un mouvement un peu plus continu. OK, ça a l'air sympa. Et maintenant, ajoutons une légère animation Zoom in pour la scène finale afin qu'elle ne paraisse pas trop statique. Nous pouvons créer la première image-clé ici. Après ça. Revenons à un moment précis, un peu après la fin de l'animation contenue dans cette précomposition. Cela devrait être un peu plus tard. Je pense que nous devrions allonger un peu la durée de la composition finale Alors faisons-le très rapidement. Faisons en sorte que ça dure 7 secondes. Maintenant, développons toutes les couches ici, puis revenons à la composition principale et développons la pré-composition Génial. Maintenant, nous pouvons nous tenir à 1 minute et 8 secondes et ajuster légèrement la pré-composition Essayons 110. Voyons maintenant ce que nous avons. Ça a l'air sympa, mais je n'aime pas la façon dont le curseur touche le logo dans la scène finale. Saisissons-le donc et ajustons le chemin de position du curseur. D'accord. Je pense que c'est bon. Revenons maintenant à la composition principale et voyons à quoi cela ressemble avec le zoom et l'animation Ça a l'air génial. Passons maintenant à la fin de l'animation et appuyons dessus pour terminer la zone de flux de travail ici. Maintenant, voyons le projet dans terminer la zone de flux de travail ici. Maintenant son intégralité depuis le début avec la voix off Gérer une grande équipe sur plusieurs projets n'est pas chose facile. Trop de tâches, trop de messages, et avant même de vous en rendre compte, vous êtes plongé dans le chaos à la recherche d' aide. A atteint One Point. La plateforme qui rend la gestion de projet si simple même votre chat pourrait le faire. Avec One Point, vous obtenez une vue d'ensemble parfaitement claire de tout ce sur quoi travaille votre équipe, tous vos projets, de toutes vos tâches, tout au même endroit. J'ai besoin d'une vue d'ensemble. Chaque projet inclut des tâches détaillées, des sous-tâches et un suivi de la progression en temps réel, afin que rien ne passe entre les mailles du filet Pour savoir qui est en retard, rendez-vous dans l'onglet de votre équipe pour voir l' activité de chacun en un coup d'œil. J'ai besoin de faire un suivi avec quelqu'un. Accédez au système de messagerie intégré où toutes vos conversations sont organisées par contact. Envoyez un rappel rapide ou partagez une mise à jour instantanément. Et oui, le partage de fichiers se fait sans effort. Téléchargez n'importe quel document et toute votre équipe y aura accès immédiatement. Alors pourquoi continuer à lutter ? Rendez-vous sur onepoint.com et simplifiez votre journée de travail dès aujourd'hui Gérer une grande équipe au sein de Mul. D'accord, ça a l'air très bien. Et surtout, l' animation se synchronise avec la voix off Maintenant que nous avons bien fait les deux choses les plus importantes, nous sommes prêts à passer à l'étape suivante, qui consiste à ajouter l' animation du curseur dans chaque scène. Ça va être super amusant, alors je te verrai dans le prochain. 24. Ajouter l'animation du curseur: Reviens. Dans cette leçon, nous allons commencer à ajouter l' animation du curseur à la scène correspondante. Notez que nous commençons à ajouter l'animation du curseur uniquement après avoir terminé l'animation complète et l'avoir synchronisée avec la voix off Et c'est parce que nous sommes maintenant sûrs que le moment de l'animation des clics dans le projet est parfaitement synchronisé avec la voix off Nous ne voulons pas impliquer l'animation du curseur lors l'animation initiale, car cela compliquerait les ajustements temporels au cours du processus Comme vous vous en souvenez peut-être, nous avons ajusté plusieurs fois certaines images-clés d'animation du flux de démonstration, et imaginez si nous devions également ajuster l' animation du curseur Cela ralentirait considérablement le processus. Par conséquent, je préfère imaginer l'animation du curseur pendant l'animation initiale de l'ensemble du projet, et ce n'est qu'une fois que j'ai terminé et que je suis sûr que le moment est bien j'ajouterai l'animation du curseur. C'est bon. Cela dit, commençons à travailler sur la première animation du curseur, qui, comme vous le savez peut-être déjà, doit se produire dans la scène quatre. Dans la deuxième partie de l'animation où nous voyons l' écran de l'interface utilisateur du projet pour la première fois. Entrons donc cette précomposition, puis ajoutons la précomposition du curseur que nous avons dans le projet Marquons cette pré-composition en jaune et commençons à créer l'animation du curseur Ainsi, nous pouvons voir un peu mieux notre curseur dans la scène. Nous pouvons y ajouter un trait blanc, juste pour le moment. Plus tard, nous allons concevoir le curseur comme nous le souhaitons. Pour l'instant, nous devons d' abord nous concentrer sur la création de l'animation. Je vais donc saisir et sélectionner la couche de forme. Ajoutons maintenant une couleur de trait et choisissons le noir. Pour la largeur, vous pouvez la laisser à deux, et maintenant nous pouvons clairement voir le curseur. Génial. Revenons maintenant à la composition principale et commençons à l'animer. D'après mon expérience, j'ai découvert que la meilleure façon de le faire est d' utiliser une méthode très simple. Laissez-moi vous montrer ce que je veux dire. C'est bon. Donc, tout d'abord, je ne me concentre pas sur la création de l'intro ou de l' outtro du curseur La première chose sur laquelle je me concentre est le timing. Le timing des animations de clic que nous avons dans le flux de démonstration, par exemple, à ce stade, nous avons l'animation de clic pour la boîte de projet. Nous pouvons entrer dans cette pré-composition et trouver le moment exact où cela se produit Dans ce cas, cela se produit en ce moment. Alors maintenant, nous pouvons rester ici et retourner à la composition principale. Ensuite, nous devons placer le curseur dans la position logique et créer une image-clé pour la propriété position à ce stade Ensuite, ne faites attention à rien d'autre dans la scène que endroit où se produit l' animation du deuxième clic. Comme vous pouvez le constater, dans notre cas, cela se produit en ce moment. Je vais donc placer le curseur sur la zone où se produit l' animation du clic. Maintenant, zoomons sur la chronologie et continuons à ajuster la position du curseur fonction des animations de clics que nous avons ici. La prochaine se passe ici. Amenons donc le curseur ici. Génial. Maintenant, avançons et voyons où se produit l'animation du clic suivant , puis plaçons le curseur à cet endroit. Génial Maintenant, je vois qu'il n'y a plus d'animations de clic dans cette scène Je peux donc commencer à créer l'animation atro pour le curseur. Et pour cela, nous pouvons passer 1 seconde après la dernière image-clé et faire sortir le curseur du cadre, comme nous le voulons Cette fois, faisons-le glisser vers la gauche. Génial. Pour l'instant, l'animation vous semble probablement très étrange, mais croyez-moi, bientôt, tout deviendra clair. Pour le moment, essayez de vous concentrer sur mon flux de travail. Nous avons donc d'abord créé les images-clés de position initiale en fonction de l'animation du clic Nous pouvons maintenant commencer à ajuster la trajectoire de position pour que le curseur se déplace de manière plus arrondie et naturelle. Pour cela, sélectionnons l'outil Vertex et traitons d'abord de ce point Cliquez ici une fois, et maintenant courbons le chemin. Passez maintenant à l'outil de sélection. Et maintenant, faisons légèrement glisser cette poignée vers le haut. Nous pouvons maintenir la touche Alt ou Option enfoncée pour nous assurer de ne déplacer qu'une seule poignée sans affecter la seconde. D'accord. Faisons maintenant de même pour le deuxième manche. Bon, maintenant nous avons presque fini d'ajuster le chemin. Et avant cela, créons l' animation d'introduction pour le curseur Pour cela, vous pouvez reculer d'une seconde par rapport aux images-clés de première position et faire glisser le curseur vers la droite pour le faire entrer dans la scène par le côté droit. Génial. Nous pouvons maintenant terminer le réglage du point de courbe sur cette trajectoire. Courbons également ce point pour que le curseur entre dans la scène avec un mouvement un peu plus sinueux À ce stade, j'aime généralement zoomer et vérifier l'animation du curseur pour voir si elle se synchronise avec l'animation du clic dans la scène J'ai remarqué que le curseur ne doit pas être placé ici pour le moment car c'est à ce moment qu'il doit rebondir sur la zone de tâches Cela signifie que nous devons placer le curseur quelque part autour de celui-ci avant d'atteindre ce point pour créer l'illusion du mouvement tactile. Revenons donc d'une seconde en arrière par rapport à la première image tactile et déplaçons le curseur quelque part par ici Une fois cela fait, revenons à l'outil Vertex et courbons également le nouveau point Ajustons la poignée pour qu'elle soit un peu plus courbée. Mouvement. Génial Maintenant, pour ce point, nous pouvons rendre le mouvement plus fluide en ajustant la poignée des premiers points, baissant et en la faisant glisser un peu plus vers la gauche. Génial. Comme vous pouvez le constater, nous avons maintenant un joli mouvement arrondi et incurvé pour l'animation du curseur Nous pouvons également courber le dernier point et ajuster la poignée pour obtenir un mouvement un peu plus arrondi pour l'animation d'outtro D'accord. Maintenant, une fois que nous avons créé l'animation initiale, créons un mouvement de clic pour le curseur afin de pouvoir synchroniser avec l'animation de clic que nous avons créée pour les panneaux. Bien entendu, nous pourrions créer une animation à grande échelle à tout moment. Lorsque nous avons un panneau d'interface utilisateur, cliquez sur l'animation, mais cela prendrait beaucoup de temps. Et au cas où nous aurions besoin d' ajuster le timing de l' animation par clic, il nous faudrait une éternité pour ajuster l'animation du clic du curseur. Par conséquent, je veux vous apprendre une astuce très intéressante pour synchroniser les clics de votre curseur avec ceux du panneau, afin que vous n'ayez pas besoin de chronométrer les deux manuellement. Lorsque j'ai créé ce projet, je savais qu'il existait un moyen de déclencher une animation dans une précomposition à l' aide d'une expression, mais je ne savais pas exactement comment cela fonctionnait, et je ne savais certainement pas quelle était l'expression ni à quelle propriété l'appliquer Dans ce cas, j'ai utilisé la puissance de l'IA pour générer l'expression , alors maintenant je veux vous apprendre à le faire. Vous pouvez regarder mon cours AI for motion, dans lequel nous avons appris à utiliser le GPT pour créer des expressions très utiles simplement en décrivant ce que nous voulons réaliser Il n'est pas nécessaire d'avoir de l'expérience avec les expressions ou de comprendre le codage. Je vous suggère vivement de suivre le cours AI for motion au cas où vous souhaiteriez améliorer votre flux de travail et tirer pleinement parti de l'IA dans After Effects. Je vais donc maintenant utiliser les mêmes techniques que celles de ce cours pour créer une configuration intéressante permettant d'automatiser mes animations de clics ici. C'est bon. Cela étant dit, revenons à l'action. Tout d'abord, avant de passer à Chat GPT, créons l' animation de clic pour le curseur Passons au début de la chronologie et créons une image-clé à échelle ici Supposons maintenant que cette animation dure dix images. Créez donc une autre image-clé ici. Placez-vous ensuite au milieu des images-clés et réduisons la forme Enfin, simplifions-nous les images-clés et ajustons le mouvement dans l'éditeur de graphes afin que le mouvement démarre rapidement Comme vous pouvez le constater, nous avons ainsi créé une jolie animation de clic pour le curseur. Génial. Maintenant, je veux déclencher cette animation dans ma scène principale. Aux moments pertinents où je dois le synchroniser avec l' animation par clic des panneaux de l'interface utilisateur. Mais disons que nous ne savons pas exactement comment procéder. C'est le moment idéal pour passer quelques minutes à voir si nous pouvons le faire en utilisant une expression. La première chose que j'aime faire est prendre une capture d'écran de ma scène en assurant que les couches et leurs noms sont clairement visibles sur la capture d'écran. Ensuite, j'aime souligner la couche dont je parlerai bientôt avec Chat GPT Tu n'es pas obligée de le faire. C'est bon. Ensuite, copions cette capture d'écran, puis accédons à Chat GPT et collons l' image dans une nouvelle discussion Cela fonctionne également parfaitement avec la version gratuite de Chat GPT OK. Maintenant, je commence juste à décrire ma situation, commençant par mentionner les logiciels que j'utilise. J'écris avec un anglais médiocre et beaucoup de fautes d'orthographe et grammaire, juste pour que vous puissiez comprendre que vous n' avez pas besoin d'un anglais parfait. L'objectif principal est de décrire la situation et d' expliquer votre objectif. Il est très important de mentionner les noms corrects des couches auxquelles vous faites référence. D'accord. Donc, une fois cela fait, nous pouvons appuyer sur Entrée et laisser l'IA faire son travail. Maintenant, avant d'appliquer l' expression au projet, j'adore lire l'explication fournie par Chat GPT Dans ce cas, je peux copier l'expression et l'utiliser. Mais après avoir lu les notes, je remarque que l' expression qu'elle m'a donnée doit être ajustée à l'intérieur. Je vois que pour l'activer, je dois ajuster certaines valeurs sous la ligne de texte de la durée du clic. Disons que je n'ai aucune idée de ce que cela signifie. Je veux juste une expression simple qui activera mon animation de clic sur le curseur que j'ai créée dans la pré-composition du curseur. Dans ce cas, avant de coller l'expression actuelle, je vais essayer d'expliquer à Chat GPT que je veux une expression qui fonctionne sans que je doive apporter des modifications au code Maintenant, nous avons une nouvelle expression. Nous pouvons lire l' explication et l'appliquer conformément aux instructions que Chat GPT nous a données Vous pouvez également trouver cette expression dans le dossier des actifs que vous avez téléchargé auprès de moi. Alors, copiez-la au cas où l'expression que vous avez créée ne fonctionnerait pas après l' avoir appliquée dans le projet. Mais d'abord, je veux que vous utilisiez l'expression que vous avez créée avant d'appliquer la mienne. Bien, revenons maintenant au projet et appliquons l'expression. Tout d'abord, comme l'a suggéré Chat GPT, nous devons activer la fonction de reprogrammation horaire pour le pré-com Ensuite, nous devons créer une expression pour la propriété time remap Alors passons simplement à côté de l' expression. Génial Cela fait, voyons maintenant si cela fonctionne. Voyons d'abord où devrait se trouver l' animation du premier clic puis passons à l' étape suivante suggérée par Chat GPT À ce stade, nous devons créer un nouveau marqueur sur la précomposition, vous pouvez utiliser le raccourci pour le faire D'accord. Maintenant, comme vous pouvez le constater, l'animation à l'échelle que nous avons créée dans la précomposition du curseur se produit désormais ici sans que nous déplacions les Cela signifie que l'expression fonctionne parfaitement. Nous pouvons donc maintenant commencer à créer de nouveaux marqueurs. À tout moment, nous voulons que l'animation du clic se produise. Mais avant cela, nous pouvons ajuster le mouvement de l'animation du curseur pour qu'elle se déplace de manière plus naturelle et non de manière linéaire comme elle se déplace actuellement. Nous avons besoin du curseur pour faire une pause pendant certaines images au moment où l'animation du clic se produit. Laissez-moi vous montrer ce que je veux dire. Ouvrons uniquement les images-clés de position, puis sélectionnons-les toutes et veillons à ce que la vélocité soit réglée sur 85 %, par exemple Ce faisant, le mouvement ralentit complètement points situés entre les images-clés C'est génial car le curseur sera désormais presque statique au moment de l' animation du clic sur le curseur. OK. Mais maintenant, il y a des moments où nous ne voulons pas que le curseur soit statique. Comme en ce moment, nous voulons qu'il continue lentement à bouger. Je vais vous montrer comment gérer ces moments. abord, nous devons nous assurer de sélectionner les images-clés de ce moment précis Ensuite, à l'aide du panneau de vélocité des images-clés, faites-en des images-clés continues Nous pouvons maintenant zoomer et augmenter légèrement ces images-clés, sorte que la vitesse à ce stade ne soit pas nulle Comme vous pouvez le constater, maintenant il ne s'arrête pas et continue de se déplacer lentement. Une fois cela fait, passons maintenant aux moments où l' animation touchante se produit , par exemple à ce moment-là. Pour créer l'illusion du mouvement tactile, nous devons accélérer le mouvement du curseur au moment du toucher. Et nous devons le faire revenir en arrière très rapidement pour créer ce mouvement rebondissant Voyons à quoi ça ressemble. Génial. Nous avons un joli mouvement tactile rebondissant Mais maintenant, comme vous le savez peut-être, nous devons également créer le mouvement tactile rebondissant pour les images-clés suivantes Essayons d'ajuster la vélocité des images-clés pour voir si nous pouvons faire les choses correctement Faisons glisser cette poignée vers la droite. J'essaie de faire en sorte que le curseur se déplace très rapidement sur ces deux points. Comme vous pouvez le constater, peu importe ce que je fais, je ne me sens pas bien. Le mouvement ne ressemble pas à une animation touchante. Alors laissez-moi vous montrer ce que nous devons faire pour que cela soit plus beau. Revenons maintenant à la chronologie et trouvons d' abord le domaine problématique que nous devons traiter. Nous parlons de l' animation qui se déroule ici. Ramenons maintenant ces quatre images-clés en images-clés linéaires Maintenez la commande du contrôleur enfoncée et cliquez une fois sur l'un d'eux. Ensuite, placons-nous au milieu de ces images-clés et créons une image-clé avec la valeur actuelle Ensuite, faisons de même dans la deuxième animation tactile. Enfin, avançons de cinq images et créons une image-clé également avant l'Outro Pour l'instant, vous ne comprenez peut-être pas pourquoi nous avons fait cela, mais bientôt tout sera clair. Pour l'instant, commençons à ajuster le mouvement. Sélectionnez toutes les images-clés de la dernière partie et modifiez-les facilement. Passons maintenant à l'éditeur de graphes et commençons à ajuster le mouvement. N'oubliez pas que nous voulons créer cette animation dynamique et touchante Faisons donc en sorte que le curseur se déplace rapidement avant le moment du toucher et rapidement après le moment du toucher. Génial. Nous voulons maintenant que le curseur passe en l'air pendant quelques images, et c'est là que nos nouvelles images-clés sont utiles, car nous pouvons désormais prolonger ce moment en utiles, car nous pouvons désormais prolonger ce moment déplaçant la poignée de cette image-clé vers Nous avons ensuite besoin que le curseur fasse ce mouvement tactile rebondissant, afin de pouvoir ajuster la vélocité à ce moment, comme nous l'avons fait pour le moment de toucher précédent Génial Alors maintenant, faisons de même pour le dernier moment touchant. Une fois cela fait, voyons à quoi cela ressemble. Génial. Comme vous pouvez le constater, nous obtenons maintenant une animation tactile plus visible. Et à mon avis, c' est beaucoup mieux que l'animation précédente que nous avons créée au début. D'accord. Donc maintenant, je ne veux pas que le curseur s' arrête complètement avant de quitter la scène Je vais donc sélectionner cette image-clé et assurer qu'il s'agit d'une image-clé continue, ce qui me permettra de l'afficher Maintenant, la vitesse ici ne sera pas nulle. Je peux également déplacer la poignée vers la gauche pour que le curseur sorte lentement et qu' il prenne de la vitesse vers la fin. Si vous aimez ce mouvement, vous pouvez l'appliquer aux moments de survol des parties tactiles de l'animation Nous pouvons sélectionner les moments de survol en même temps tout en maintenant la touche Shift enfoncée, puis utiliser le raccourci pour ouvrir panneau de vélocité des images-clés pour les deux Maintenant, faisons de ces images-clés des images-clés continues et veillons à les afficher. D'accord, j'adore son apparence. Quittons maintenant l'éditeur de graphes et voyons cette partie de l'animation, ainsi que le reste de la scène. Je trouve que ça a l'air génial. Nous sommes maintenant prêts à passer à la scène suivante où il doit y avoir une animation de curseur à l'intérieur. Passons donc à la composition principale et vérifions-la. Bien, la prochaine scène sur laquelle nous allons travailler est la scène 5. Avant cela, fermons toutes les pré-compositions ouvertes que nous avons ici Génial Maintenant, entrons scène et essayons de comprendre ce que nous devons faire ici. OK, donc je vois que le curseur devrait entrer dans la scène à peu près à ce moment-là, et nous devrions créer une animation par clic pour ouvrir le panneau des sous-tâches, puis créer une autre animation tactile pour vérifier certaines des sous-tâches de ce panneau Dans cet esprit, revenons à la scène précédente où nous avons créé l' animation du curseur et copions la précomposition du curseur à partir de la précomposition du curseur à partir de là, car l'expression est déjà appliquée à cette précomposition Bien, revenons maintenant à notre nouvelle scène actuelle, collons la précomposition du curseur et éliminons toutes les images-clés des marqueurs que nous avons créés Assurez-vous de ne pas supprimer la propriété de reprogrammation temporelle. Passons ensuite au début de la chronologie et appuyons sur le crochet gauche pour démarrer cette précomposition à partir d' ici. C'est bon. Et maintenant, commençons à l' animer. La première chose que nous allons faire est de trouver le moment où l'animation du premier clic se produit dans la scène. Cela se produit quelque part par ici. Au cas vous ne sauriez pas exactement où commence l'animation par clic, vous pouvez entrer dans la précomposition de l'interface utilisateur et savoir quand cela se Dans notre cas, c'est ce qui se passe ici. Alors, en restant ici, revenons à la scène principale. Maintenant, placez le curseur ici et marquez ce point en créant des images-clés de première position à ce moment-là Génial. Maintenant, nous pouvons soit continuer à animer la prochaine animation du curseur soit créer l'intro correspondante Cette fois, créons l'intro, puis continuons ajuster l'animation pour l' adapter à l'animation du flux de démonstration D'accord ? Revenons donc d'une seconde en arrière et sortons le curseur du cadre. Allons-y. Entrez dans la scène par le côté droit. Cool. Nous avons maintenant une animation d'introduction, et nous l'avons placée là où se produit l'animation des clics dans le flux de démonstration Ensuite, avançons d'une seconde et plaçons le curseur quelque part ici, car nous avons maintenant besoin quelques images pour que le panneau contextuel entre dans la scène. Génial Et maintenant, trouvons la position suivante que doit prendre le curseur. Dans ce cas, nous devons l'amener dans la zone de la première sous-tâche à ce stade. Alors faisons-le glisser ici. Voyons ensuite où la deuxième sous-tâche, l'animation des cases à cocher, est activée, puis plaçons le curseur à placer à côté de celle-ci Génial Maintenant, comme nous l'avons appris dans la scène précédente, nous pouvons nous placer au milieu de l'animation tactile et déplacer légèrement la sphère vers la gauche pour la faire planer dans le mouvement aérien Génial Ainsi, une fois que nous avons tous les moments où nous avons touché et cliqué, nous pouvons avancer d'une seconde et faire sortir le curseur du cadre. Sympa. Nous avons donc fini de créer le mouvement initial du curseur, et l'étape suivante consiste à commencer à l'ajuster. Nous pouvons commencer par courber les points pertinents, commençant par les moments où la sphère doit planer dans les airs Ensuite, nous pouvons arrondir l' outtro dans les points d'introduction. Passons maintenant à l'outil de sélection et commençons à ajuster les poignées des points arrondis pour obtenir un joli mouvement incurvé du curseur C'est bon. Une fois que c'est fait, trouvons le moment où l' animation du clic se produit et ajoutons un nouveau marqueur pour déclencher l'expression. Génial Nous avons donc maintenant terminé toutes les étapes importantes initiales et nous sommes prêts à commencer à améliorer le mouvement. Sélectionnons toutes les images-clés et simplifions-les facilement. Et maintenant, entrons dans l'éditeur de graphes et ajustons la vitesse du mouvement. Notre objectif est de ralentir le curseur, à ce stade, pendant une plus longue période étant donné que l' animation du clic se produit ici. De cette façon, le curseur se déplace très lentement pour plus d'images. Génial. Maintenant, à ce stade, j'ai l'habitude de vérifier le reste de l'animation de la scène et d'essayer de comprendre ce qui doit être ajusté ensuite. Dans ce cas, je sais que je dois créer cette animation tactile rebondissante pour la partie animation du sous-panneau des tâches Par conséquent, sélectionnons cette image-clé et faisons glisser la poignée gauche vers la droite que le curseur soit ultra rapide au moment où vous le touchez Ensuite, pour créer le mouvement rebondissant, nous devons le faire rapidement après le point de contact, de manière très similaire à ce que nous avons fait dans la scène précédente OK, maintenant faisons de même pour le deuxième moment émouvant. Génial. Maintenant, après avoir vérifié cette partie à quelques reprises, disons que nous avons décidé de faire le curseur reste dans la scène un peu plus longtemps. Je ne veux pas qu'il quitte la scène juste après le deuxième moment de contact. Pour cela, passons à la dernière image-clé et changeons position du curseur pour qu'il soit placé quelque part par ici Ajustons la courbe pour ce point. Génial. Maintenant, avançons d'une seconde dans le temps et déplaçons le curseur hors de la scène. Génial Et maintenant, avant de poursuivre, voyons d'abord à quoi ressemble l' animation que nous avons créée. D'accord. J'ai donc remarqué qu' à ce moment-là, le curseur s'arrête complètement, et je n'aime pas ça. Nous allons résoudre ce problème en convertissant cette image-clé en image-clé continue et en accélérant le mouvement à ce stade Génial. Alors maintenant, nous avons un peu mieux bougé. Mais j'ai remarqué que la première animation tactile ne me semblait pas correcte. Et c'est parce que nous avons énormément de temps entre les images-clés avant le point de contact et les images-clés du point de contact Par conséquent, nous pouvons trouver un moment précis avant le point de contact et déplacer légèrement le curseur pour créer une nouvelle image-clé ici Assurez-vous d' avoir toujours ce chemin arrondi. D'accord. Maintenant, après cela, nous pouvons entrer dans l'éditeur de graphes et avoir un peu plus de contrôle sur l'animation et la vélocité du premier contact. Nous pouvons accélérer le mouvement tactile en faisant glisser cette poignée vers la droite Passons maintenant à l'image-clé intermédiaire. abord, nous devons nous assurer que les mouvements entrant et sortant de ces images-clés sont connectés afin les contrôler tous les deux comme une seule unité, et nous pouvons le faire en convertissant cette image-clé en image-clé continue Nous pouvons maintenant décider quelle doit être la vitesse à ce stade. Voyons ce que nous avons. Ça a l'air génial. Passons maintenant au mouvement de survol entre les moments de contact Je ne veux pas que le curseur s'arrête complètement pour le moment Je vais donc m'assurer d'accélérer le mouvement entrant et sortant pour ces images-clés d' une unité également Génial C'est beaucoup mieux comme ça. Tout en suivant toutes ces étapes, j'ai essayé de vous montrer comment jouer avec les images-clés lorsque vous avez besoin que le mouvement corresponde à votre imagination C'est le processus du véritable motion design. Nous vérifions également l'animation et ajustons les images-clés jusqu'à ce que nous obtenions quelque chose qui nous plaît Ensuite, je vais vérifier le mouvement une fois de plus. Chaque fois que je le regarde, je remarque quelque chose de nouveau. Cette fois, je n'aime pas que l'animation s'arrête là. Ça ne me semble pas juste. Je vais donc faire en sorte que ce moment soit un mouvement plus continu. C'est bon. Cela étant dit, regardons maintenant l' ensemble de la scène du début à la fin et voyons à quoi cela ressemble. Ça a l'air génial, mais je pense que nous pouvons faire quelques derniers ajustements pour le rendre plus beau Je trouve que le mouvement d'introduction est trop rapide. Faisons en sorte que les premières images-clés démarrent une seconde plus tôt pour prolonger la durée de l'intro, ce qui la fera paraître plus ce qui la fera paraître Regardons-le encore une fois. J'ai remarqué que le mouvement rebondissant est trop fort au deuxième moment où on le touche Passons donc à l'éditeur de graphiques et simplifions-le un peu. D'accord, ça a l'air mieux. Et comme la dernière image clé de l'animation tactile se termine aux sept et dix secondes, commençons l'Otro à partir huit et dix secondes, juste pour qu'il dure exactement une seconde Très bien, avec ça, nous avons terminé la scène, et nous sommes prêts à passer à la suivante Revenons donc à la composition principale et trouvons la scène suivante à laquelle nous devons nous occuper. C'est bon. Je vois donc que nous avons deux scènes sur lesquelles travailler. Scènes sept et huit, les animations du curseur dans ces deux scènes sont un peu plus simples que les précédentes. Commençons donc. Nous allons commencer par la scène 7. Tout d'abord, entrons dans la scène et reprenons la composition du curseur par à la précédente. Maintenant, supprimons les images-clés de position que nous avons dessus, puis supprimons également le marqueur que nous avons créé Passons au début de la chronologie et appuyons sur le crochet gauche pour démarrer cette précomposition à partir d' ici. C'est bon. Voyons maintenant ce que nous avons ici. Je vois que l' animation du premier clic se produit ici. Passons donc à ce stade et plaçons le curseur quelque part autour de la deuxième zone de contact. Marquons maintenant ce point avec les images-clés de position. Euh, avant de passer à l'animation du flux de démonstration, passons au début de la chronologie et faisons glisser le curseur vers la droite hors du cadre pour créer l'animation d' introduction Génial. Nous pouvons maintenant avancer d' une seconde et déplacer le curseur quelque part ici afin qu'il n' interfère pas avec la transition qui se produit dans l' animation du flux de démonstration. C'est bon. Voyons maintenant où se produit le prochain clic ou s'il y a un moment de contact tout au long de l'animation. Comme vous pouvez le constater, le clic suivant se produit après plusieurs secondes, ce qui signifie que nous avons beaucoup de temps libre pour que le curseur fasse quelque chose. Dans ces cas, j'adore changer la position du curseur toutes les 1 seconde. Je le fais juste pour avoir une première idée du mouvement du curseur. Plus tard, je l' ajusterai si nécessaire. Alors faisons-le maintenant. Passons à nos dernières images-clés avançons d'une seconde et ramenons le curseur un peu plus près moment où le clic doit se produire dans la zone des boutons Ensuite, déplacez-vous encore une seconde et ramenez-le quelque part par ici. Continuons ainsi jusqu'à ce que nous atteignions le bouton. Puisque nous avons le texte ici, je vais m' assurer que le curseur n'entre pas en collision avec celui-ci C'est bon. Et maintenant, après avoir atteint le bouton, nous pouvons nous déplacer d'une seconde et faire sortir le curseur du cadre pour créer l' animation d'outtro correspondante Génial Une fois cela fait, nous pouvons passer à l'étape suivante. À ce stade, la meilleure chose à faire est d'ajuster le chemin, et nous pouvons le faire à l'aide de l'outil Vertex Donc, arrondissons d'abord tous les points pertinents, puis, à l'aide de l'outil de sélection, ajustons les poignées pour obtenir une belle trajectoire arrondie. Une fois cela fait, nous pouvons maintenant créer un marqueur au moment où le clic se produit. Nous avons le premier clic ici et nous en avons un autre pour le bouton. Je vais ajuster ces points très rapidement. OK. Alors maintenant, créons également un marqueur ici. Génial. Maintenant, sélectionnons toutes les images-clés et simplifions-les facilement. Après cela, nous pouvons commencer à ajuster le mouvement. Cette fois, réglons la vélocité de toutes les images-clés à 85 % et voyons à quoi cela ressemble OK, je trouve que ça a l'air sympa pour le moment, mais à mon avis, l'animation outtro ne convient pas Annulons la courbe du dernier point de trajectoire pour la faire sortir en ligne droite et voyons à quoi cela ressemblera. C'est beaucoup mieux, mais ça se passe trop vite, à mon avis. Assurons-nous donc que l'animation d'outtro dure 2 secondes et non une seule Oui, c'est bien mieux. Génial Maintenant, une fois que nous avons terminé toute l'animation initiale, essayons de faire quelques ajustements pour que le curseur se déplace de manière plus fluide. Je n'aime pas les pauses qui se produisent dans ces zones. La première chose que nous pouvons essayer est de supprimer ces images-clés. Ajustons ensuite les poignées des points pour créer un tracé agréable et sinueux. C'est bon. Ça a déjà l'air un peu mieux. Maintenant, sélectionnons les trois images-clés où se trouvent les moments de pause et ouvrons le panneau de vélocité des images-clés faire des images-clés continues. Une fois cela fait, passons à l'éditeur de graphiques et vérifions-nous que la vitesse à ces moments est supérieure à zéro. À ce stade, je regarde simplement l'animation et j' essaie d'ajuster la vélocité des images-clés pour obtenir un mouvement qui me convient À mon avis, au moment où le curseur survole le texte, cela se produit trop rapidement. Faisons donc en sorte que cette animation dure un peu plus longtemps. Regardons l'animation plusieurs fois et voyons ce que nous pouvons encore améliorer. Je n'aime pas la pause qui se produit ici, alors réglons ça très rapidement. OK, c'est mieux. Mais maintenant, je ne veux pas que le curseur se déplace rapidement avant d' atteindre le bouton Je vais donc ajuster les poignées de cette façon, afin que la vitesse entre ces deux images-clés ne soit pas aussi rapide Je vous montre ce processus afin que vous puissiez voir mon processus de réflexion et la façon dont je gère les ajustements dans l'animation. C'est bon, c'est fait. Nous avons presque terminé la scène. La seule chose qui me dérange c'est que le curseur touche le texte Pour résoudre ce problème, nous pouvons réduire légèrement le texte tout en nous assurant de respecter les directives de la grille d'action sécurisée. Génial Ça a l'air mieux. Nous pouvons maintenant ajuster légèrement le chemin afin que le curseur ne soit pas si proche de l'écran de l'interface utilisateur. Génial. Je pense donc que nous avons fini de travailler sur la scène parce que tout semble parfait. Sauvegardons donc le projet et passons au suivant. OK, donc pour la scène suivante, nous pouvons faire entrer le curseur dans la scène par le haut, ainsi nous aurons un beau mouvement continu par rapport à la scène précédente où le curseur a quitté la scène par le bas C'est bon. Dans cet esprit, entrons dans la scène huit et commençons à travailler. Tout d'abord, introduisons la précomposition du curseur ici. Nous pouvons le copier d'une des scènes précédentes. Maintenant, débarrassons-nous des images-clés de position et des marqueurs que nous avons dessus N'oubliez pas de placer la précomposition au début de la chronologie une fois que vous aurez terminé. D'accord. Et maintenant, commençons à l' animer. Comme d'habitude, nous allons d'abord nous concentrer sur la recherche de l'animation du premier clic. Cela se produit à partir de ce moment, nous avons l'animation du bouton publicitaire ici. Amenons donc le curseur ici et créons des images-clés de position D'accord. Passons maintenant au début de la chronologie et faisons sortir le curseur de la scène. Et comme il nous reste beaucoup de temps avant l'animation du clic, nous pouvons passer à la deuxième et placer le curseur ici pour avoir une introduction agréable et sinueuse Génial Et maintenant, comme le prochain clic ou l'animation tactile se produit plus tard dans la chronologie, nous pouvons nous déplacer 1 seconde après les dernières images-clés et déplacer le curseur quelque part par ici Ensuite, nous devons créer l' illusion que le curseur saisit le fichier JPG et le fait glisser dans le panneau contextuel Pour cela, nous devons d'abord nous assurer synchroniser l'animation du curseur avec les mouvements de la caméra. Dans notre cas, il s'agit de l'animation de position pour la pré-composition de l'écran de l'interface utilisateur. Nous devons nous tenir au moment où le bon mouvement de caméra panoramique prend fin et placer le curseur à l'emplacement du fichier Génial. Une fois cela fait, ne vous inquiétez pas du mouvement sinueux du fichier Nous le ferons plus tard. Pour l'instant, concentrons-nous sur la synchronisation du chronométrage des images-clés Maintenant, une fois que nous sommes revenus au centre, positionnons à nouveau le curseur à l'emplacement du fichier. Génial. Maintenant, avançons d'une seconde et abaissons légèrement le curseur pour qu'il reste ici pendant quelques images avant de quitter la scène Après cela, nous pouvons avancer une seconde de plus et sortir le curseur du cadre, disons, par le côté gauche cette fois. C'est bon. Maintenant, une fois l'animation initiale terminée , sélectionnons l'outil Vertex et commençons à ajuster le tracé Cliquons d'abord sur ce point. Génial. Ensuite, pour le point suivant, je vais laisser les choses telles quelles, car une animation par clic doit se produire ici. Ensuite, avançons et cliquons sur le troisième point. Génial Passons à autre chose. Cliquons maintenant ici pour arrondir ce point. Et pour l'instant, ne vous inquiétez pas si cela ne correspond pas à l'animation du fichier et que notre illusion ne fonctionne pas. Nous traiterons de cela dans une seconde. Pour l'instant, finissons d'ajuster le reste des points. Je vais cliquer ici sur le dernier point. Et maintenant, prenons l'outil de sélection et ajustons la poignée pour obtenir un joli mouvement arrondi en ce moment. Revenons ensuite à la partie faisant glisser l'animation du fichier et voyons ce que nous devons faire ici abord, assurons-nous que nous nous trouvons au milieu de l' animation du fichier glissant afin de pouvoir avoir une idée de l'endroit où le curseur doit être placé Et maintenant, nous devons faire correspondre l'animation du curseur à l'animation du fichier. Pour cela, il suffit de cliquer sur ce point et de sélectionner la bonne poignée. Maintenant, lorsque vous le déplacez, maintenez option Alter enfoncée pour le déplacer uniquement sans affecter le côté gauche. De cette façon, nous pouvons courber ce chemin pour l'adapter au mouvement du fichier. Et pour savoir à quoi doit ressembler exactement la courbe, nous devons voir la courbe du chemin de la couche de fichiers. Cliquons donc dessus pour voir son chemin. Créons maintenant un nouveau guide pour marquer le point le plus sinueux du chemin Ensuite, sélectionnons le curseur et ajustons la poignée de manière à ce qu'elle s'adapte au guide. Génial. Et maintenant, pour que l' illusion reste plus ré 25. Améliorer les visuels avec des effets et de la couleur: Reviens. Maintenant, une fois que nous avons fini de créer l'animation, nous pouvons commencer à ajouter de belles touches visuelles et des effets pour améliorer visuellement la vidéo. Commençons par colorier le curseur qui apparaît dans de nombreuses scènes de notre projet. Comme vous pouvez le constater, pour le moment, cela semble plutôt ennuyeux. Donc, pour commencer, nous pouvons le colorier avec des couleurs intéressantes. Et pour cela, nous utiliserons l' animation de fond en dégradé que nous avons créée au début du projet. Laissez-moi vous montrer ce que je veux dire. Tout d'abord, désactivons le trait noir. Trouvons ensuite le fichier d' arrière-plan du dégradé que nous avons rendu et ajoutons-le à la chronologie. Génial. Et maintenant, réduisons cette couche, mais pas trop. Nous en avons besoin pour couvrir la sphère que nous avons ici. Génial. Maintenant, une fois que c'est fait, nous pouvons utiliser la fonction Trackmat pour que la couche d'arrière-plan utilise le tapis alpha de la sphère. De cette façon, nous masquerons le fond dégradé en utilisant la forme de la sphère. Et maintenant, nous avons un joli curseur coloré qui est bien plus beau qu'une couleur statique. Génial. Cela fait, revenons à la composition principale et entrons dans l'une des scènes où nous avons une animation de curseur Passons à la scène huit. Une fois à l'intérieur, je veux que vous zoomiez sur le curseur pour le voir de près. Génial. Et maintenant, laissez-moi vous montrer une astuce simple pour ajouter de la profondeur au curseur. Cliquez avec le bouton droit de la souris sur la précomposition du curseur, accédez à Styles de calque, sélectionnez et ajoutez un effet d'ombre interne Ensuite, avant de commencer à ajuster l'effet, il serait judicieux de réduire ce précom pour être sûr travailler sur la forme finale de ce précom OK. Et maintenant, nous pouvons choisir une belle couleur vive pour l'ombre intérieure. Passons au jaune pour le moment. Ensuite, pour qu'il se mélange mieux avec les couleurs du curseur, nous pouvons régler le mode de fusion à l'écran Comme vous pouvez le constater, cela semble un peu mieux. Ensuite, nous pouvons ramener l'opacité à 100 et jouer avec l'angle Dans ce cas, je veux que cette ombre intérieure soit entièrement visible sur le curseur, et pas seulement sous un angle. Pour cela, nous pouvons définir la distance à zéro, puis jouer avec la propriété size. Génial. Comme vous pouvez le constater, nous avons maintenant un peu l'apparence en trois D de notre curseur, et maintenant je ne veux pas que vous fassiez quoi que ce soit, écoutez-moi. Je vous ferai savoir quand vous devez revenir à l'action. Et c'est parce que je veux vous montrer comment créer correctement cet effet pour le reste des scènes avec une animation de curseur à l'intérieur. C'est bon. La chose la plus évidente que nous pouvons faire est donc de copier les styles de couche à partir de cette précomposition et de commencer à les coller sur le reste des précompositions du curseur Cela dit, une fois que je serai satisfait de l' apparence de l'effet, je retournerai à la composition principale et trouverai la scène suivante avec l'animation du curseur pour y coller l'effet Je vois que je l'ai dans la première scène, donc je vais le saisir, puis sélectionner la précomposition du curseur et coller l'effet Ensuite, je passerai à la scène suivante, puis je la saisirai pour coller l'effet dans la précomposition du curseur qu'elle contient. C'est assez simple. Mais que se passe-t-il si je souhaite modifier l'apparence de cet effet ? Dans ce cas, je devrais saisir chaque précomposition et le faire manuellement pour toutes les précompositions de curseur de chaque scène. Comme vous le savez peut-être, cela prendra beaucoup de temps. Surtout si j' ai plus de deux ou trois curseurs à régler Par conséquent, je souhaite vous apprendre une meilleure façon copier et coller vos effets lorsque vous en avez besoin dans plusieurs scènes et lorsque vous souhaitez contrôler l'effet de tous à partir d'une seule couche. Je vais donc annuler mon action et revenir à la situation initiale. Maintenant, tu peux revenir en arrière et me suivre. C'est bon. Dans ce cas, je vais d'abord m'assurer de créer l'effet dans la scène où la précomposition du curseur apparaît en premier dans le projet Bientôt, j'expliquerai pourquoi. Pour l'instant, supprimons l'effet de cette précomposition, puis passons à la composition principale pour voir où le curseur apparaît pour la première fois Dans notre cas, c'est dans la première scène. Saisissons-le et collons l'effet sur la précomposition du curseur. C'est bon. Supposons que nous venions de terminer la création de l'effet et que nous sachions qu'il doit apparaître dans les scènes suivantes du projet. Nous allons donc sélectionner l'effet. Et maintenant, au lieu d' utiliser la copie normale, nous pouvons accéder à Modifier et utiliser la fonction de copie avec liens de propriétés relatifs. Génial. Passons maintenant à la scène huit, sélectionnez la précomposition du curseur et collez l'effet En utilisant cette fonction, toutes les propriétés de l'effet sont désormais apparentées aux propriétés de l' effet, c'est-à-dire, dans notre cas, le curseur précomposé dès la première scène Cela signifie que maintenant, si je dois redessiner l'effet, je vais passer à ma première scène, y ajuster les propriétés, et elles seront ajustées automatiquement dans le reste des scènes Comme vous pouvez le constater, le design a également changé dans la scène. Même si les valeurs ici ne semblent pas avoir été modifiées, vous pouvez clairement voir que cela fonctionne toujours parfaitement. D'accord. Maintenant, ramenons le design à la normale , puis continuons à coller l'effet pour le reste des scènes. Passons à la scène deux et collons-la ici. Si vous ouvrez les propriétés de l' effet, vous les verrez en rouge, ce qui signifie qu'elles sont toutes parentées l'aide d'expressions correspondant à l' effet dans la première scène Maintenant, si vous devez redéfinir l'apparence de l'effet, il est facile de vous rappeler de passer à la première scène et d'y apporter les modifications C'est pourquoi je préfère utiliser cette fonction de copie unique dès la première scène dans laquelle la couche avec l'effet apparaît dans le projet. C'est bon. Cela étant dit, finissons de coller l'effet pour le reste des scènes. Cela étant dit, finissons de coller l'effet pour le reste des scènes Nous pouvons déplacer cette précomposition vers la droite pour obtenir l' ordre chronologique De cette façon, je peux voir où j'ai déjà collé l'effet. Très bien, une fois que nous en aurons terminé, sauvegardons le projet pour garantir les progrès que nous avons réalisés jusqu'à présent Génial. Et avec cela, nous avons fini d'ajuster le design du curseur. Profitons maintenant de cette opportunité pour améliorer l'apparence du bouton d'appel à l'action que nous avons dans la scène finale. Je vais vous montrer comment, en utilisant les effets de base, vous pouvez créer un look impressionnant pour vos boutons ou même pour les précompositions complètes de l'écran de l'interface utilisateur abord, allons dans le panneau Effets et préréglages, recherchons l'effet CC Light Sweep et appliquons-le au bouton Généralement, cet effet est utilisé pour créer un joli effet brillant pour les logos ou les couches de texte Mais dans notre cas, nous l'utiliserons pour créer un effet de bord cool et brillant. Laissez-moi vous montrer ce que je veux dire. Tout d'abord, alignons l'effet au centre du bouton. Passons ensuite à la forme linéaire de l'effet. Ensuite, ajustons la largeur pour l'adapter à la forme du bouton. Je trouve que 70 ans, c'est bien. Ensuite, pour la fluidité, nous pouvons le régler sur, disons, dix Ensuite, pour la couleur, essayez de choisir des couleurs vives. Allons-y avec une couleur jaune vif ou orange. C'est bon. Vous pouvez désormais jouer avec les propriétés d'intensité et d' épaisseur des arêtes jusqu'à obtenir l'apparence que vous souhaitez. Une fois cela fait, nous pouvons aller au début de la chronologie et animer la direction Mais au lieu de créer des images-clés, nous pouvons utiliser une expression simple pour la faire pivoter automatiquement Ouvrons donc la zone d'expression pour cette propriété et écrivons une expression temporelle simple à l'intérieur. Astérisque T 100. Désormais, cette propriété sera automatiquement animée. Voyons à quoi ça ressemble. Ça a l'air super, mais je préfère ne voir que les bords brillants sans voir de brillance au centre du bouton. Pour cela, nous pouvons régler l'intensité du balayage à zéro. Génial. Une fois que nous sommes satisfaits des résultats, nous pouvons maintenant enregistrer le projet et passer à l'étape suivante pour améliorer un peu l'apparence de cet effet Pour cela, nous pouvons utiliser l'effet de lueur. Trouvons-le donc dans l'onglet Effets et appliquons-le à la précomposition Maintenant, avant de poursuivre, je tiens à mentionner que l' ordre des effets dans le panneau Effets affectera l'apparence de l' objet auquel nous avons affaire. Dans cet esprit, ramenons la lueur en dessous de la zone de balayage et ajustons certaines propriétés pour la rendre un peu plus brillante. À ce stade, la meilleure façon d'obtenir un bel effet est simplement de modifier certaines propriétés et valeurs de l'effet jusqu'à ce que nous obtenions quelque chose qui nous plaît En effet, l' apparence de l'effet change en fonction de la couleur du bouton et des valeurs de l'effet de balayage n'y a pas de valeurs spécifiques utilisant l'effet de lueur qui s'adapteront à toutes les couleurs et à tous les designs. Par conséquent, je vous suggère de jouer avec les propriétés et de voir ce que vous aimez et ce qui correspond le mieux à votre projet. D'accord. Maintenant, une fois la conception des boutons terminée, nous pouvons enregistrer le projet et passer à l'étape suivante. À ce stade, nous pouvons revenir à la composition principale et commencer à ajouter des arrière-plans pour les scènes sans aucun arrière-plan à l'intérieur Nous pouvons commencer par la première scène. Alors saisissons-le et commençons à travailler. Tout d'abord, je vois que nous avons une couche de texte que nous utilisons comme référence que nous pouvons supprimer dès maintenant. Génial. Et maintenant, avant d'ajouter l'arrière-plan, profitons de cette opportunité pour organiser notre panel de projets. Je vois qu'il y a quelques précompositions que nous pouvons déplacer dans le dossier des précompositions D'accord. Maintenant, trouvons le fond dégradé que nous avons créé pour le projet et ajoutons-le à la scène. Comme vous l'avez peut-être déjà compris, ce ne sera pas une bonne idée car la couche d'arrière-plan est trop petite pour cette grande scène. Si nous voyons cela dans la composition principale, nous pouvons clairement voir que cela ne semble pas beau La bonne nouvelle est que nous pouvons résoudre ce problème en redimensionnant simplement la couche pour l'adapter aux dimensions de la scène. Et avant cela, je préfère utiliser la couche d' arrière-plan que nous avons dans les scènes d'animation du titre, car contient quelques effets qui rendent les dégradés un peu plus beaux que le calque d'origine Revenons donc d'abord à la première scène et supprimons la couche d'arrière-plan ici. Ensuite, trouvons la première animation du titre et entrons dans cette précomposition pour copier la couche d'arrière-plan à partir de là Une fois terminé, revenons à la première scène et collons le calque. Génial. Maintenant, nous allons placer cette couche en dessous toutes les couches et l'aligner au centre de la composition de cette façon L'effet sera plus beau lorsque nous l'animerons. Nous pouvons maintenant redimensionner cette précomposition, mais avant cela, supprimons toutes les images-clés de mise à l'échelle Ensuite, adaptons cette précomposition jusqu'à ce qu'elle couvre l'ensemble de la scène N'ayez pas peur de le redimensionner, car nous avons un effet de flou Box rapide sur ce calque, qui signifie que les dégradés resteront beaux, même si nous le redimensionnons Génial. Nous pouvons maintenant jouer avec la position de la couche d'arrière-plan pour voir quelle zone de couleur convient le mieux à cette scène. À mon avis, la partie inférieure du fond dégradé est très belle, je vais donc la laisser comme ça. Ceci fait, passons à la scène suivante. Passons maintenant à la scène deux et collons également le fond dégradé ici. Et avant de passer à autre chose, je voudrais rendre cette scène un peu plus sombre, car elle parle de certains problèmes, comme beaucoup de messages et de tâches. Il peut donc être judicieux d'adapter cette scène au concept du texte en assombrissant les vibrations Alors maintenant, je vais vous montrer quelques façons de le faire en utilisant des effets simples. Pour la première méthode, je ne veux pas que tu le fasses avec moi car nous ne l' utiliserons pas. Nous utiliserons le second. Donc pour le moment, regardez et écoutez. Bientôt, je vous dirai quand vous devez passer à l'action. C'est bon. Donc, pour la première méthode, nous pouvons utiliser l'effet d'inversion puis jouer avec les canaux Comme vous pouvez le constater, chaque option ici crée un aspect très différent qui peut être très beau avec les couleurs de votre dégradé. Vous pouvez combiner cet effet avec le réglage de la propriété de teinte principale de l'effet de teinte et de saturation et voir si vous pouvez obtenir quelque chose qui vous plaît. Bien, je vais supprimer l'effet d'inversion, et maintenant revenons au travail ensemble Parfois, nous voulons avoir un contrôle total sur les couleurs de notre dégradé. Et pour cela, nous pouvons utiliser l'effet triton. Appliquons-le donc d'abord au calque, puis accédons au panneau du projet et apportons la palette de couleurs à la scène pour échantillonner les couleurs. Génial. Maintenant, vous pouvez mieux contrôler les couleurs. Mais si vous voulez encore plus de contrôle, vous pouvez régler la propriété de la tonalité sur Penton Cela vous permettra de contrôler la roue chromatique complète que vous avez dans le dégradé. Nous pouvons maintenant sélectionner les couleurs les plus sombres de la palette de couleurs ou même décider que nous voulons la scène d'ambiance la plus foncée soit principalement composée des couleurs violettes que nous avons dans la palette de couleurs À ce stade, j'essaie juste de goûter aux couleurs violettes et de voir ce qui me convient le mieux. Vous pouvez également sélectionner la couleur de votre choix manuellement. Par exemple, je choisis maintenant la couleur blanche pour cette zone de couleur spécifique et le fond dégradé. Une fois que les résultats sont bons, nous pouvons maintenant supprimer la palette de couleurs, puis placer le fond dégradé sous toutes les couches. Ça a l'air sympa. Mais je pense que la scène devrait être un peu plus sombre. Pour cela, nous pouvons ajouter l'effet de courbes , puis jouer avec les canaux RGB pour assombrir le dégradé. Comme vous pouvez le constater, ça a l'air très joli. Passons maintenant à la composition principale et voyons à quoi cela ressemble par rapport à la scène précédente À mon avis, ça a l'air génial. Et nous pouvons maintenant également ajouter ce fond dégradé foncé à la scène suivante. Et pour cela, revenons à la scène deux et copions le fond dégradé à partir d'ici. Passons ensuite à la scène trois et collons-la ici. Amenons maintenant cette couche dessous de toutes les couches présentes. Je trouve que ça a l'air bien. Génial. Revenons maintenant à la composition principale et voyons ce que nous devons faire ensuite Nous avons déjà un bon arrière-plan pour la quatrième scène, et je pense que nous n'avons rien à changer ici. Comme vous le remarquerez peut-être, nous avons ici de jolis motifs, fonction des arrière-plans dégradés que nous avons dans les différents types de scènes du projet. Pour les scènes de titre, nous avons le dégradé de teinte d'arrière-plan amélioré pour les scènes évoquant des problèmes Nous avons un fond dégradé foncé. Pour les scènes d'écran de l'interface utilisateur, nous avons l'arrière-plan dégradé normal. C'est une bonne méthode à suivre pour vos prochains projets. Pour le rendre un peu plus intéressant, vous pouvez diviser le script en parties principales et ajouter un arrière-plan spécifique pour chaque partie, comme nous le faisons actuellement. Cela dit, suivons notre schéma et ajoutons un arrière-plan normal pour la scène 5, puisqu'il s'agit d'une scène avec une animation d'écran d'interface utilisateur. Pour cela, nous pouvons entrer dans la scène quatre et copier le fond dégradé que nous y avons. Pour revenir à la scène 5, collons-le ici et placez-le sous toutes les couches. Génial. Et maintenant, avant de continuer à ajouter les arrière-plans pertinents pour les scènes suivantes, profitons de cette opportunité pour améliorer l'apparence de cette scène ici. Laissez-moi vous montrer ce que je veux dire. Entrons d'abord les tâches avant la composition. Ce que je n'aime pas ici, c'est l'apparence de l'ombre lorsque le panneau des sous-tâches apparaît. L'ombre semble gris foncé, ce qui, à mon avis, ne correspond pas au design général du projet. Pour résoudre ce problème, il suffit d' y ajouter l'effet de remplissage , puis de choisir une autre couleur. Passons au blanc et voyons quoi cela ressemble avec le reste de la scène. Cela semble correct, mais cela se fond trop dans le panneau des sous-tâches Restons ici et goûtons ensuite à la couleur violette que nous avons. Comme vous pouvez le constater, cela semble beaucoup mieux. Copions maintenant l' effet et collons-le dans l'autre scène où se trouve la couche d'ombre. Je ne me souviens pas où c'était. Revenons donc à la composition principale et trouvons-la. Le voici dans la scène huit. Passons à la scène, puis à la pré-composition de l'écran de l'interface utilisateur. Une fois ici, sélectionnons le calque d'ombre et collons l'effet. Génial. Maintenant que c'est fait, revenons à la composition principale et passons en revue les scènes suivantes où nous devons ajouter un arrière-plan dégradé OK, je vois que les scènes 6 et 7 n' ont pas d'arrière-plan. Passons d'abord à la scène 5 et copions le fond dégradé à partir d'ici. Passons ensuite à la scène sept et collons la couche. Maintenant, placez la couche en dessous de toutes les couches, et voyons à quoi cela ressemble. OK, ça a l'air super. Mais je n'aime pas l'animation de dissolution de l'écran principal de l'interface utilisateur. Profitons donc de cette opportunité pour le rendre plus beau. Tout d'abord, saisissons les messages avant la composition et trouvons la couche appropriée. C'est ici. C'est la précomposition que nous avons ici sous toutes les couches. Et maintenant, pour améliorer l'animation de dissolution, nous pouvons ajouter une animation légèrement floue pendant la dissolution Pour cela, ouvrons d'abord les images-clés cette couche et plaçons-nous ici au début de l'animation Ajoutons-y ensuite l'effet de flou Fast Box et créons une image-clé pour le rayon de flou avec une valeur nulle à ce stade Ensuite, avançons un peu jusqu'au point où le calque est toujours visible et réglons le flou sur une valeur plus élevée D'accord. Passons maintenant cette image-clé à la fin de l'animation Ensuite, simplifiez facilement les images-clés et voyez à quoi cela ressemble. Génial. Je pense que ça a l'air beaucoup mieux maintenant. Revenons donc à la composition principale et trouvons la scène suivante dans laquelle nous devons ajouter un arrière-plan dégradé D'accord. La scène suivante est la scène 8. Saisissons-le et ajoutons-y le fond dégradé. À part cela, je ne pense pas que nous ayons besoin de faire des ajustements ici. Revenons à la composition principale et voyons à quoi cela ressemble par rapport à la scène précédente Je viens de remarquer que la couche d'arrière-plan contient l'animation d'introduction que nous avons créée pour la scène à partir de laquelle nous l'avons copiée Dans cette scène, nous n'avons pas besoin cette animation d'introduction, alors supprimons-la Sélectionnez la couche et appuyez pour voir les images-clés. Maintenant, supprimez d'abord les premières images-clés, puis les secondes De cette façon, le masque restera tel qu'il apparaît après les deuxièmes images-clés, ce que nous voulons Pour être honnête, nous pouvons supprimer complètement le masque, mais laissez-le pour le moment, puis revenons au reste des scènes avec cette couche d' arrière-plan dégradé pour supprimer également l' animation d'introduction qui s'y trouve C'est la scène où nous avons besoin de l'animation d'introduction, alors laissons les choses telles quelles Ici, tout semble aller bien. Ici aussi, tout a l'air bien. La première scène semble également correcte. C'est bon. Une fois que c'est fait, passons à scène 9 et ajoutons un arrière-plan dégradé. Et comme cette scène ressemble à la première scène, passons à la première scène et copions le fond dégradé que nous avons là. Bien, revenons à la scène 9, collons la couche ici et définissons l'échelle sur 100 Alignons-le ensuite au centre de la composition et placons-le en dessous de toutes les couches Génial. Revenons maintenant à la composition principale et voyons à quoi cela ressemble par rapport à la scène précédente Comme vous pouvez le constater, nous avons une situation étrange avec les arrière-plans dégradés. Je voulais vous montrer cette situation que vous sachiez comment y faire face. Les scènes huit et neuf sont essentiellement une scène continue. C'est parce que nous avons décidé de ne pas avoir d' allumette entre eux. Nous effectuons un déplacement régulier vers le mouvement de la caméra vers la gauche. Par conséquent, pour résoudre ce problème, il suffit de supprimer les couches d'arrière-plan des deux scènes et d'en coller une dans la composition principale sous ces deux scènes Maintenant, nous pouvons d'abord entrer dans la scène 9 et couper la couche d'arrière-plan à partir d'ici. Passons ensuite à la scène huit et supprimons la couche d' arrière-plan à partir de là. Une fois terminé, passons à la composition principale et collons la couche d'arrière-plan ici Passons maintenant au début de la scène huit et prenons le dégradé de fond pour commencer à partir d'ici. Enfin, plaçons la couche sous les deux scènes et voyons à quoi elle ressemble. D'accord. Ça a l'air génial. Mais j'ai remarqué que cet arrière-plan n'est pas beau dans la scène finale. Cela se produit parce que nous avons un effet de lueur sur la précomposition des boutons Les objets lumineux ont généralement une meilleure apparence sur des arrière-plans plus sombres. Par conséquent, dans notre cas, ce serait une bonne idée d' apporter ici notre version du fond sombre que nous avons créé pour les deuxième et troisième scènes. Alors faisons-le dès maintenant. Passons à la deuxième scène et copions l' arrière-plan à partir de là. Pour revenir à la scène finale, collons le calque et placons-le en dessous de tous les calques. Comme vous pouvez le constater, cela semble déjà beaucoup mieux. Développons la couche d'arrière-plan, et nous pouvons également fermer ces précompositions Génial. Revenons maintenant à la composition principale et voyons à quoi elle ressemble OK, je trouve que ça a l'air génial. C'est ainsi que nous avons fini d'ajuster l'apparence et le design des scènes. Regardons maintenant l'animation depuis le début pour voir si nous avons oublié quelque chose. Gérer une grande équipe chargée de plusieurs projets n'est pas chose facile. Trop de tâches, trop de messages, et avant même de vous en rendre compte, vous êtes plongé dans le chaos à la recherche d' aide. Rencontrez One Point. La plateforme qui rend la gestion de projet si simple même votre chat pourrait le faire. un seul point, vous obtenez une vue d'ensemble parfaitement claire de tout ce sur quoi travaille votre équipe, tous vos projets, de toutes vos tâches, tout au même endroit. J'ai besoin d'une vue d'ensemble. Chaque projet inclut des tâches détaillées, des sous-tâches et un suivi de la progression en temps réel. Donc rien ne passe entre les mailles, les fissures, les fissures Oh. Vous voulez savoir qui est à la traîne ? Juste. Pour votre équipe, touchez L'activité de tout le monde en un coup d'œil. Oui, comme d'habitude, nous avons raté quelque chose. Dans notre cas, nous devons ajouter un arrière-plan dégradé dans la scène six. Alors faisons-le très rapidement. Passons à la scène 5 pour copier l'arrière-plan à partir de là. Génial. Et maintenant, trouvons la scène six et saisissons-la pour coller la couche. C'est ici. Entrons maintenant dans la scène et collons le fond dégradé ici. Et revenons à la composition principale pour continuer à vérifier l'animation J'ai besoin de faire un suivi avec quelqu'un. Accédez au système de messagerie intégré où toutes vos conversations sont organisées par contact. Envoyez un rappel rapide ou partagez une mise à jour instantanément. Et oui, le partage de fichiers se fait sans effort. À ce moment, j'ai remarqué que le curseur quittait la scène trop tôt. Cela gâche la transition entre le match cut. Passons donc à la scène sept et faisons en sorte que le curseur reste un peu plus longtemps avant de quitter la scène Tout d'abord, ouvrons les images-clés de la pré-composition de l'écran de l'interface utilisateur et les images-clés du curseur afin de pouvoir les chronométrer entre elles. Le curseur commence à quitter la scène à partir de ce moment Passons à neuf secondes, disons, et amenons la sphère ici Maintenant, avançons d'une seconde et plaçons la dernière image-clé ici Génial. Maintenant, il correspond à l'affichage de l'écran de l'interface utilisateur, et la dernière chose à faire est de nous assurer que la vélocité n'est pas modifiée pour l'animation du curseur Je vois que cela a changé. Dans ce cas, veillons à régler la vélocité de l'animation de sortie du curseur à 95 % pour obtenir un effet d'accrochage extrême. Voyons à quoi ça ressemble. D'accord. Je pense que cela devrait fonctionner. Revenons maintenant à la composition principale et vérifions la transition Ou partagez une mise à jour instantanément. Et oui, le partage de fichiers se fait sans effort. Téléchargez n'importe quel document, et toute votre équipe y aura immédiatement accès. Alors pourquoi continuer à lutter ? Rendez-vous sur le site one point.com et simplifiez votre journée de travail dès Ça a l'air sympa, mais maintenant je remarque que le curseur de la scène finale est trop bas lorsqu' il appuie sur le bouton. Je pense que nous devrions en parler un peu en ce moment. Passons donc à la scène finale , puis ouvrons les images-clés sur le curseur avant la composition Passons maintenant aux images-clés de dernière position et ajustons la position du curseur à ce moment-là. Parlez-en un peu. Nous pouvons le placer au centre du bouton. Voyons à quoi ça ressemble. Génial. Je pense que ça a l'air beaucoup mieux maintenant. Génial. Avec cela, nous pouvons maintenant revenir à la composition principale et enregistrer le projet avant de passer à l'étape suivante Cette fois, je veux que nous améliorions l'apparence des panneaux ouvrants du projet. Laissez-moi vous montrer ce que je veux dire. Commençons par le panneau contextuel de la scène 8. Une fois que nous sommes là, trouvons le panneau contextuel, précompons-y et ajoutons-y un effet d' ombre Réglez maintenant l'opacité sur 100, puis la distance sur cinq. Réglons ensuite la douceur sur une valeur plus élevée. Je trouve que 80, c'est bien. Je pense que nous devrions mettre la distance à zéro. Génial. Et maintenant, pour que cette ombre se mélange mieux avec le dessin, nous pouvons échantillonner la couleur violette, et si elle semble trop claire, nous pouvons entrer dans le panneau de couleurs et choisir une couleur légèrement plus foncée. C'est une bonne astuce que j'utilise toujours pour améliorer l'apparence de mes ombres dans les projets. C'est bon. Et maintenant, si vous devez appliquer cette ombre à de nombreux panneaux, vous devez la copier à l'aide de la fonction de copie avec liens relatifs. Dans notre cas, copions-le de la manière habituelle, car nous n'avons qu'un seul autre panneau contextuel dans le projet auquel appliquer cet effet. Copions l' effet, puis accédons à la composition principale pour trouver cette scène Le voici depuis la scène 5. Transformons-le, puis entrons dans l'écran de précomposition de l'interface utilisateur et collons l'effet. Ça a l'air génial. Génial. Nous avons donc terminé la première phase d'ajout de la touche finale au projet, et nous pouvons aller plus loin et ajouter des touches finales supplémentaires qui rendront le projet encore plus beau. Et nous pouvons commencer par nous assurer que toutes les scènes visibles ici dans la composition principale sont de la meilleure qualité possible Pour ce faire, nous devons réduire les précompositions que nous avons dans la Comme vous vous en souvenez peut-être, nous avons déjà annulé la première scène avant la composition. Passons maintenant à la deuxième scène. Et avant de réduire la précomposition, nous pouvons d' abord entrer dans la scène et vérifier que les couches des précompositions qu'elle contient sont également réduites Dans ce cas, nous avons tout ce qu'il faut. Revenons donc à la composition principale et réduisons la précomposition de scène. Génial. Passons maintenant lentement à la chronologie pour voir que la fonction de réduction n'a rien changé à l'animation ni à l' apparence de cette scène. Tout semble parfait. Passons maintenant à la scène trois. Regardons attentivement l'animation pour voir s' il y a des changements. Ça a l'air génial. Passons maintenant à la scène quatre. Comme vous pouvez le constater, après avoir réduit cette précomposition, nous constatons de légers changements, nous constatons de légers changements, notamment au niveau de l'angle de prise de vue Cela se produit parce qu' à l'intérieur de cette scène, nous avons une couche de caméra que nous n'avons pas dans la composition principale en dehors de cette scène, la précomposition Une fois cette précomposition réduite, After Effects agit désormais comme si les trois couches en D de cette composition se trouvaient dans la chronologie de la composition principale Mais il ignore la caméra qui se trouve à l'intérieur , car il utilise désormais la caméra par défaut créée automatiquement dans After Effects lorsqu'une scène comporte trois calques en D. Dans notre cas, il s'agit des trois couches D à l'intérieur de la précomposition de la scène 3 Et comme chronologiquement, la composition principale est la première précomposition, After Effects utilise l'appareil photo de la première composition de l' Dans notre cas, la composition principale et non la caméra à l'intérieur de la scène trois pré-comp non la caméra à l'intérieur de la scène trois pré-comp C'est ainsi que fonctionne After Effects. Dans ce type de situation, lorsque vous avez trois couches en D et des caméras impliquées dans le projet, il est préférable de ne pas réduire cette précomposition spécifique C'est totalement bon. Vous obtiendrez toujours la meilleure qualité de votre scène. Cela dit, passons à la prochaine précomposition. D'accord, nous pouvons certainement réduire les précompositions de l' animation du titre, puisqu'il n'y a pas d'animations à trois couches D ni de caméras Passons maintenant à la scène 5. Nous pouvons également réduire cette précomposition sans nous inquiéter, car il n' y a pas trois couches D ni trois caméras dans cette scène Mais nous devons entrer en scène pour vérifier que toutes les précompositions et couches qu'elles contiennent sont également réduites Je vois que nous n'avons pas réussi à réduire le curseur. Faisons-le très rapidement, puis revenons à la composition principale et vérifions à quoi ressemble cette scène après l'avoir réduite. Hum, ça a l'air d'aller bien. Nous pouvons maintenant passer autre chose et réduire ce titre Animation precomp C'est bon. Passons maintenant à la scène suivante. Dans ce cas, même si nous avons les trois couches D animation se produit dans la scène, nous avons tout de même fait correctement sans distorsion de la caméra Et c'est parce que l'animation de scènes en trois D ne se produit pas directement dans cette précomposition de scène Cela se passe dans la précomposition de l'écran de l'interface utilisateur. Donc, si nous réduisons cette précomposition, nous voyons la distorsion de la caméra Et c'est exactement pour les mêmes raisons que j'ai expliquées plus tôt. Désormais, la scène 5 affiche les trois couches D à l'intérieur de la précomposition de l'écran de l'interface utilisateur, mais utilise la caméra par défaut de cette chronologie de scène Il ignore la caméra que nous avons dans la précomposition de l'écran de l'interface utilisateur Par conséquent, ne réduisons pas cette précomposition ici. Pourquoi si nous réduisons la cinquième scène avant la composition dans la chronologie, rien ne se passera La chronologie de la composition principale ne voit pas la caméra située à l'intérieur de la chronologie de l'écran de l'interface utilisateur Je vais continuer sans le détruire. Passons à autre chose. Nous pouvons réduire cette scène d'animation du titre. accord ? Passons maintenant à la scène 7. Passons au moment où nous pouvons voir l'animation de dissolution , puis réduire cette précomposition pour voir si elle apporte des modifications. Tout a l'air bien. Mais avant de passer à autre chose, entrons dans la scène et vérifions-nous que toutes les précompositions et les couches présentes sont réduites Bien, revenons maintenant à la composition principale et examinons attentivement le reste de l'animation. Ça a l'air sympa. Passons maintenant à la scène huit. Réduisons-le et observons le reste de l'animation ici attentivement le reste de l'animation ici pour voir si modifications inutiles apparaissent après l'avoir réduit Tout a l'air parfait. Nous pouvons maintenant passer à la scène suivante. Réduisons la scène 9 et voyons à quoi cela ressemble. Ça a l'air bien, et nous pouvons maintenant passer à la scène finale et voir à quoi elle ressemble. Génial. Tout a l'air parfait. Maintenant, une fois que nous avons terminé , en regroupant toutes les scènes pertinentes, apportons quelques petites modifications et ajoutons quelques derniers détails pour améliorer l'apparence du projet Et nous pouvons commencer par redimensionner l'arrière-plan de la scène finale. Je n'aime pas la couleur vive de la partie inférieure. Entrons donc dans la scène et agrandissons la couche d'arrière-plan ici. Essayons 120. Je pense que ça a l'air mieux maintenant. Passons à la composition principale et voyons à quoi cela ressemble. Ça a l'air très bien. Sauvegardons le projet avant de passer à autre chose. Bon, à ce stade du projet, ce que j'aime habituellement faire c'est revoir toutes les scènes une par une et réfléchir à ce que je peux ajouter ou améliorer. Par exemple, ici, dans la scène trois, je pense que l'arrière-plan n'est pas beau. Passons à cette pré-composition et essayons d'abord faire pivoter l' arrière-plan de 180 degrés pour que la zone lumineuse soit en haut De cette façon, nous aurons un aperçu plus continu de la scène précédente. C'est un exemple de petit ajustement que nous pouvons faire pour améliorer un peu l' apparence de l'animation. Mais il y a aussi d'autres choses un peu plus sérieuses que nous pouvons faire pour améliorer l'apparence de l' animation. Par exemple, dans la deuxième scène, toute cette séquence semble très statique, à mon avis. Nous pouvons facilement améliorer cette scène en ajoutant une animation Zoom avant ou Zoom arrière. Laissez-moi vous montrer ce que je veux dire. Passons au début de cette scène et ouvrons la propriété scale. Maintenant, créez une image-clé ici. Ouvrons maintenant la position et faisons de même. Appuyons maintenant sur vous pour afficher toutes les images-clés et passer au moment où le curseur touche la zone de tâches puis redimensionnons cette précomposition et la positionnons Cela ressemble donc à une animation Zoom in. Génial. Une fois cela fait, créons maintenant une animation Zoom arrière au moment où le curseur passe en l'air Pour savoir exactement quand cela se produit, nous pouvons entrer dans la scène et ouvrir les images-clés du curseur Nous pouvons maintenant trouver le moment du survol et, debout, revenir à la composition principale et ajuster l'échelle et les images-clés de position pour obtenir l' illusion de mouvement de la caméra Zoom arrière Ou peut-être qu'au lieu de zoomer en arrière, nous pouvons créer une autre animation Zoom in Essayons ça. Nous pouvons régler l'échelle à 260. Positionnons maintenant la pré-composition de manière à ce que le curseur soit centré horizontalement Nous pouvons utiliser la grille d'action sécurisée pour Okay, ça a l'air suffisant. Ensuite, revenons à la scène et images-clés du curseur suivantes , là où il touche la bulle du message Revenons maintenant à 26. Touches finales, musique et animations de texte ations: À l'arrière. Après avoir effectué la majorité des ajustements apportés à l'animation et à la conception des scènes, il est temps de passer à l' étape finale et d'apporter les dernières touches à ce projet, comme l'animation des couches de texte et des scènes, l' ajout de musique et l' amélioration de l'apparence de certaines scènes à l' aide d'éléments de conception supplémentaires À mon avis, c'est le moment le plus amusant où le projet est terminé à 95 %, et maintenant nous nous amusons à apporter les dernières touches. Cela dit, commençons par traiter de toutes les couches de texte présentes dans les scènes d'animation du flux de démonstration, commençant par la scène quatre. Entrons donc dans la scène. Et tout d'abord, trouvez la couche de texte à animer. Une fois que nous l'avons trouvée, gagnons du temps en copiant l'animation de texte que nous avons faite pour la couche de texte de la première scène. Comme vous pouvez le constater, nous avons ici une jolie animation de texte révélateur que nous avons créée, et nous l'avons fait à l'aide d'un animateur Ouvrons donc le calque et sélectionnons cet animateur pour le copier Génial. Une fois cela fait, revenons à la scène quatre et collons-la dans la couche de texte que nous avons ici. Tout d'abord, placez-vous au début de cette couche, puis collez l'animateur Ainsi, l'animation de cet animateur démarrera dès le début de la couche de texte D'accord. Maintenant, ouvrons l'animateur et ajustons la valeur de la propriété de position que nous avons dans le sélecteur de plage Réglons-le sur 80. Génial Et maintenant, placons-nous quelque part après l'animation et créons un nouveau masque pour cette couche de texte. Sympa. Nous avons donc créé l'animation de texte révélateur pour cette couche de texte. Ouvrons maintenant les images-clés et veillons à ce que l'animation se termine à la dixième seconde Nous devons maintenant créer une animation Outro pour ce texte Pour simplifier les choses, passons à la seconde 11 et utilisons la propriété position pour faire sortir cette couche du cadre par le haut. Allons maintenant assouplir les images-clés et faire en sorte que l'animation commence à se déplacer lentement et gagne en vitesse vers la fin Génial Nous pouvons maintenant nous occuper de la deuxième couche de texte que nous avons dans la scène. Pour cela, nous pouvons maintenant copier l'animateur que nous avons sur le premier calque de texte et le coller sur le second Ensuite, restons ici et créons un nouveau masque. Une fois cela fait, trouvons maintenant un bon moment où nous pouvons créer l' animation d'outtro pour cette couche de texte Je pense que nous pouvons commencer à partir de 16 secondes, et c'est parce que l'animation extérieure de la caméra commence à partir de là Nous pouvons y associer l' animation extérieure du texte. Créons donc les images-clés de première position pour la deuxième couche de texte ici, puis passons à la deuxième 17 et sortons-les du cadre par le haut Enfin, ajustons le mouvement. Et maintenant, avant de passer à autre chose, voyons l'animation que nous avons créée. Pour nous faciliter la vie, isolons uniquement les deux couches de texte et vérifions l'animation. Génial Je trouve que cela semble génial, et maintenant nous pouvons enregistrer le projet et passer à la scène suivante , la scène 5. Mettons la scène 5 ici avant la scène 6, et maintenant placons-nous au début de la couche de texte et collons l'animateur Ensuite, une fois l' animation terminée , créons un nouveau masque. Et maintenant, nous devons créer un Outro. Donc, si la couche de texte se termine à la deuxième quatrième et à la dixième image, je vais me placer aux deuxième, trois et dix images et je vais me placer aux deuxième, trois et dix images et créer l'image-clé de première position ici Passons maintenant à la fin de la couche et sortons cette couche de texte de la scène par le bas cette fois. Ajustons maintenant le mouvement et voyons à quoi cela ressemble. Je pense que cette fois, la motion devrait démarrer rapidement. Ajustons donc la vélocité des images-clés. Génial C'est mieux Passons maintenant à la deuxième couche de texte que nous avons ici. Cette fois, étant donné que l'animation outtro de la scène se produit à partir de la huitième seconde, commençons également l'animation outtro de la deuxième couche de texte à partir d' la deuxième couche de texte à partir d' ici pour la faire correspondre OK, ça a l'air sympa, et nous sommes prêts à passer à la scène 6. Passons d'abord devant l'animateur. Maintenant, restons là et utilisons le raccourci Shift in pour créer le masque. Je pense que l'écran de l'interface utilisateur est trop proche du texte. Essayons de résoudre ce problème. Pour cela, nous devons saisir la précomposition des contacts, et maintenant nous pouvons soit ajuster l'animation nulle, soit ajuster l'animation de la caméra Commençons par l'appareil photo. abord, nous devons nous concentrer sur le point clé du moment problématique que nous vivons. Maintenant, reculons légèrement la caméra. Je pense que nous pouvons le déplacer encore plus. Déplaçons-le également un peu vers le bas. Bien, maintenant, en restant ici, revenons à la scène principale et commençons à créer l' animation d' outtro pour le texte à partir de ce moment afin de le faire correspondre à l' animation d'outtro de la caméra Enfin, ajustons le mouvement et voyons à quoi cela ressemble. Génial. Maintenant, sauvegardons le projet et passons à la scène sept. Ici, nous pouvons faire quelque chose intéressant pour la première couche de texte. Comme l'écran de l'interface utilisateur couvre l'ensemble du cadre, nous pouvons placer le calque de texte en dessous dans le panneau des calques et ainsi créer une animation révélatrice pour ce texte au début de la scène. Comme vous pouvez le constater, ça a l'air très joli. C'est bon. Créons maintenant une animation d'outtro pour ce texte. Nous pouvons créer l'image-clé de première position ici, puis reculer d'une seconde et créer la même image-clé ici également Nous pouvons maintenant revenir à la deuxième image-clé et déplacer le texte hors du cadre par le haut Maintenant, ajustons le mouvement, puis passons à la couche de texte suivante. Pour celui-ci, nous devons créer l'animation d'introduction que nous avons créée pour le reste des couches de texte du projet Alors faisons-le très rapidement. C'est bon. Et maintenant, pour l'Otro, nous n'avons rien à faire puisque l'écran de l'interface utilisateur couvre cette couche de texte Il ne nous reste plus qu'à nous occuper de la dernière couche de texte. Créons donc d'abord l'animation de révélation pour l'intro Une fois cela fait, créons maintenant l'Outro. Cela devrait commencer à partir des neuf secondes. Étendons la couche de texte avant d'animer la position de l'Outro D'accord. Et maintenant, créons l'animation Otro pour Génial Passons maintenant à la scène huit et voyons s'il y a une couche de texte que nous devons animer ici. Comme vous pouvez le constater, nous n' avons aucune couche de texte ici. Passons donc à la scène 9 pour vérifier s'il y en a. Il n'y a rien ici. Passons à la scène finale pour nous assurer qu'il n'y a pas non plus de couche de texte dedans. D'accord. Une fois cela fait, nous avons fini de créer l' animation du texte pour les scènes, et nous pouvons maintenant enregistrer le projet pour garantir les progrès réalisés. Maintenant, à ce stade du processus, j'aime souvent revérifier mes scènes et voir si je peux apporter des ajustements supplémentaires, ce soit dans l'animation ou dans la conception des scènes, par exemple dans la scène 5 J'ai remarqué que l'animation qui apparaît peut durer un peu plus longtemps Je veux que cela se termine juste avant le début de la couche de texte C'est parce que j' essaie de faire en sorte que mes scènes aient toujours l'air en mouvement. Essayez de créer le moins de moments statiques possible. C'est le secret d'une bonne animation en motion design. Cela dit, entrons dans les tâches de pré-composition et ouvrons maintenant toutes les images-clés des boîtes de tâches Passons maintenant à la cinquième place. Sélectionnez ensuite toutes les images-clés. Ensuite, maintenez la touche Alt ou Option enfoncée et déplacez les dernières images-clés Génial. Revenons maintenant à la scène principale et voyons à quoi cela ressemble. Oups, ce n'est pas la bonne scène. Nous avons besoin de la scène 5. OK, voyons à quoi ressemble l'animation maintenant. À mon avis, après ce petit changement, la motion se sent beaucoup mieux. Cela étant fait, passons maintenant à la scène quatre et revoyons ce que nous pouvons améliorer ou ajouter ici Dans cette scène, j'adorerais augmenter l' effet de profondeur de champ que nous avons créé ici. Passons à ces images-clés et réduisons le niveau de flou à un nombre plus élevé. C'est trop Pour être honnête, je n' aime pas ce à quoi ça ressemble. Ramenons-le à 300. Essayons peut-être d'augmenter le niveau de flou pour la dernière partie de l'animation de cette scène où nous voyons les tâches Essayons aussi 300 ici. 300, c'est mieux, mais je pense quand même que c'est trop. Essayons 200. Oui, 200, ça a l'air parfait. Je vous montre ce processus afin que vous puissiez également vous habituer à apporter quelques derniers ajustements à vos projets avant le rendu de l'animation. J'adore faire ça parce qu' il y a toujours quelque chose que nous pouvons faire pour améliorer un peu plus l' animation. C'est pourquoi la phase des touches finales est ma préférée. C'est bon. Cela dit, passons maintenant à autre chose et, cette fois, essayons d'améliorer la scène trois. Voyons ce que nous avons ici. D'accord. Je pense que la première chose que j'adorerais faire ici est de prolonger un peu la durée de l' animation de saisie. Passons à la deuxième étape et apportons la dernière image-clé ici Profitons maintenant de cette opportunité pour passer à la scène sept, où nous avons une autre animation de saisie de texte et faisons que cette animation dure plus longtemps ici également. Ouvrons d'abord les images-clés de cette couche. Passons maintenant aux sept et dix images suivantes et déplaçons la dernière image-clé ici Génial Maintenant, une fois que c'est fait, passons à la scène deux et voyons ce que nous pouvons y faire pour améliorer le mouvement ou le design de cette scène. Bien, maintenant que l'objectif principal de cette scène est de montrer le chaos que représente le fait d'avoir beaucoup de messages et de tâches à traiter, il peut être judicieux d'ajouter des boîtes de tâches et des bulles de message supplémentaires pour correspondre au concept de cette scène. Et nous le ferons bientôt. Avant cela, j' adorerais que la couleur de fond de cette scène ne soit pas foncée. Je veux que la scène 3 soit la plus foncée, pour qu'elle ressemble à une sorte d'océan profond. Puisqu'à ce moment-là, la voix off dit : «  Tu es en train de sombrer dans le chaos Cela dit, supprimons d' abord les courbes des effets de toner de la couche d'arrière-plan. Génial. Ajoutons maintenant des boîtes de tâches et des bulles de message supplémentaires à la scène. Mais au lieu de les dupliquer ici, je voudrais vous montrer une autre méthode qui pourrait être un peu plus utile pour nous dans ce projet De cette façon, vous pouvez apprendre une nouvelle astuce et l'appliquer à vos projets si vous le souhaitez. C'est bon. Alors, d'abord, appuyez sur Catrol ou Command end pour créer une nouvelle composition Appelons-le deux BG. Parce que c'est la scène deux, puis ajoutez BG à la fin, car cela fera partie de l'arrière-plan de cette scène. Maintenant, assurez-vous que les dimensions sont correctes, puis réglez la durée sur 2 minutes. D'accord. Revenons maintenant à la deuxième scène et sélectionnons les tâches et les messages précompilés que nous avons ici Maintenant, copiez-les et collez-les dans notre nouvelle composition. Ensuite, appuyez et supprimez toutes les images-clés que nous avons ici, et nous allons maintenant commencer à les dupliquer pour créer cette Mais avant cela, nous devons nous assurer de ne pas placer de nouveaux doublons dans ces zones Où, dans la scène principale, ces quatre précompositions sont positionnées. Pour cela, vérifions-nous qu' aucune couche n'est sélectionnée et créons un rectangle pour marquer la zone des messages. Ensuite, marquons également la zone des tâches. Une fois cela fait, nous pouvons maintenant réduire l'opacité de la couche de forme et la verrouiller pour qu'elle ne nous gêne pas Ce faisant, nous savons maintenant que c'est dans ces zones nous ne devons pas placer les nouveaux doublons que nous créerons en une seconde Nous pouvons donc d'abord déplacer les précompositions actuelles hors de ces zones, puis commencer à les dupliquer pour créer Je vais accélérer un peu ce processus. C'est bon. Donc, une fois cela fait, nous pouvons annuler la fonction d'effondrement pour toutes les pré-compositions, puisque nous prévoyons d'utiliser cette composition dans le cadre de la couche d'arrière-plan Nous n'avons pas besoin de tous les avoir de très haute qualité. Je fais cela pour accélérer un peu mon temps de rendu. D'accord. Désactivons maintenant la couche de guidage que nous avons créée ici, puis étendons les couches pour qu'elles durent jusqu'à la fin de la chronologie. Génial. Ajoutons maintenant un nouveau calque de réglage dans la scène et ajoutons-y le flou Fast Box pour rendre cette composition floue Cela sera plus beau dans la scène principale de cette façon. Bientôt, tu comprendras ce que je veux dire par là. Pour l'instant, revenons à la composition de la scène principale, puis intégrons la nouvelle précomposition d' arrière-plan nous venons de créer à Placez-le au-dessus de la couche d'arrière-plan dégradée. Je pense que nous devrions ajuster le flou. Pour cela, entrons dans la précomposition et supprimons l'effet de flou Fast Box de la couche de réglage Nous pouvons supprimer la couche de réglage ici. Revenons maintenant à la scène principale et collons l'effet sur la précomposition De cette façon, il nous sera plus facile de contrôler l'effet. Je voulais vous montrer ceci pour que vous sachiez qu' il est parfois préférable d'utiliser un effet sur la précomposition plutôt que d'utiliser des calques de réglage Et c'était un excellent exemple de cette situation. Et maintenant, pour qu'elle se fond encore davantage dans la scène, nous pouvons choisir un mode de fusion différent pour cette précomposition Au lieu de choisir manuellement le bon mode de fusion, nous pouvons utiliser le raccourci pour basculer entre les différents modes de fusion Maintenez la touche Shift enfoncée et appuyez sur la touche plus ou moins. C'est bon. Donc, après avoir vérifié tous les modes de fusion, je pense que la superposition est la meilleure solution dans notre Et maintenant, si nous revenons à la composition principale pour voir à quoi cela ressemble avec le mouvement de caméra que nous avons créé ici, pour cette scène, nous aurons un look super cool Nous avons le chaos, mais la scène semble tout de même très équilibrée et propre. Génial. Maintenant que nous avons ajusté les visuels du projet et que toutes les animations sont parfaitement synchronisées avec la voix off, nous pouvons passer à l'étape suivante, qui consiste à ajouter de la musique Pour cela, rendez-vous dans le dossier des actifs que vous avez téléchargé pour moi. Vous trouverez ici la musique que j'ai trouvée pour ce projet. J'ai trouvé ce morceau dans la bibliothèque audio de YouTube, qui est open source. Cela signifie que 99 % des titres que vous y trouverez peuvent être utilisés gratuitement sans problèmes de droits d'auteur ou de redevances Vous pouvez les utiliser à des fins commerciales. Lorsque je recherche un titre, je filtre généralement d' abord la liste en fonction de l'ambiance qui convient. Dans ce cas, je pense que le funky s' adaptera au rythme de mon animation Bien entendu, c'est une bonne idée de choisir trois chansons et de donner au client la possibilité de choisir. Lorsque je cherche la bonne musique, j'essaie de trouver un morceau qui comporte une sorte de section de compilation au début. La musique devrait commencer par une sorte d' intro qui ajoutera plus d'intérêt à l'animation À ce stade, j'écoute simplement tous les morceaux que je vois sur la première page, et après avoir trouvé le bon, il est très important de vérifier qu'il comporte l'icône YouTube. Cela signifie qu'il est gratuit pour n'importe quel usage sans que nous ayons besoin d'ajouter des crédits pour le créateur de la chanson. Ce n'est qu'alors que vous pourrez le télécharger sans vous soucier des revendications de droits d'auteur ? Bien, revenons au projet. Faisons maintenant glisser le morceau vers notre chronologie et voyons s'il correspond à l'ambiance Mais avant cela, passons au panneau de projet et organisons-le un peu. Nous pouvons placer la piste dans le dossier Assets, et nous pouvons également placer cette précomposition dans le dossier PreComs dans le Génial. Et maintenant écoutons-le. Gérer une grande équipe chargée de plusieurs projets n'est pas chose facile. Trop de tâches, trop de messages. Et avant même de vous en rendre compte, vous êtes en train de sombrer dans le chaos. Comme vous l'avez peut-être remarqué, le volume de la piste est trop élevé. Par conséquent, nous devons l'ajuster pour l'adapter à la voix off. Pour cela, appuyez sur la touche. Nous pouvons maintenant voir les niveaux audio. Réglons-le sur -25 et écoutons-le encore une fois. Gérer une grande équipe chargée de plusieurs projets n'est pas chose facile. Trop de tâches, trop de messages, et avant même de vous en rendre compte, vous êtes plongé dans le chaos à la recherche d'aide J'ai atteint un point. La plateforme qui rend la gestion de projet si simple même votre chat pourrait le faire. Avec un point, tu obtiens un clap de cristal. Dash. OK, c'est mieux. Mais je pense que nous pouvons le régler à -20, afin que le volume du morceau soit un peu plus élevé. Gérer une grande équipe chargée de plusieurs projets n'est pas chose facile. Trop de tâches, trop de messages, et avant même de vous en rendre compte, vous êtes plongé dans le chaos à la recherche d' aide. J'ai atteint un point. La plateforme qui rend la gestion de projet si simple même votre chat pourrait le faire. un seul point, vous obtenez une vue d'ensemble parfaitement claire de tout ce que votre équipe travaille sur tous vos projets. G. Génial. C'est parfait cela fait, fermons toutes les pré-compositions que nous avons ici et, juste après, allons dans le panneau Projet pour les organiser avant le rendu L'organisation est très importante, non seulement pour vous, mais aussi pour une personne qui pourrait travailler avec vous sur ce projet. Peut-être travaillerez-vous avec un autre indépendant ou peut-être travaillerez-vous dans une entreprise avec un autre collègue Quoi qu'il en soit, le fait d'avoir un projet bien organisé vous positionnera sous un très bon jour professionnel. Cela dit, ouvrons le dossier de précomposition et commençons par l'organiser Voyons ce que nous avons dans le dossier d'écran. Tout semble bon ici. Voyons ce que nous avons dans le dossier des panneaux. Ici, j'adorerais ajuster les noms des précoms. Au lieu de S one, remplacons-le par l'écran 1. Et c'est parce que j'ai remarqué que les précompositions de tous les autres panneaux commencent par le nom complet de l'écran Génial. Et maintenant, faisons de même pour le reste des précompositions ici. Une fois cela fait, allons maintenant dans le dossier des précompositions et sélectionnons tous les panneaux d'écran et les précompositions d'actifs que nous avons créés pour les placer dans Ainsi, dans le dossier des précoms, nous n'avons que les précompositions générales que nous avons utilisées Vous pouvez aller plus loin et créer un nouveau dossier dans le dossier pre-cooms pour les principaux titres, mais nous n'en avons pas beaucoup, donc je vais le garder tel quel Génial Maintenant, ouvrons le dossier des actifs et voyons s'il y a quelque chose que nous pouvons organiser ici. D'accord. Je pense que tout va bien ici, et maintenant nous sommes prêts à rendre le projet. Et pour obtenir la meilleure qualité en termes de couleurs pour notre fichier de rendu final, nous pouvons entrer les paramètres du projet à partir de là et modifier la profondeur de bits à 16 ou 32 bits. Si vous utilisez des effets de luminescence dans le projet, l'utilisation de 32 bits peut affecter l'apparence de ces scènes, alors faites attention. Notez que plus vous choisissez de bits par canal, plus les temps de rendu seront lents, car After Effects devra désormais afficher une plus grande gamme de couleurs. D'accord. Activons maintenant la fonction de flou cinétique ici dans la timeline principale Pour obtenir le flou cinétique, nous l'activons dans le précom Et maintenant, faisons une dernière chose avant de rendre le projet : il s'agit de le purger Nous réduirons ainsi le risque d' erreurs logicielles inattendues lors du rendu. Génial. Une fois tout cela fait, assurons-nous de sélectionner la composition principale dans le panneau du projet, puis de passer à la composition et d'ajouter cette chronologie à la file d'attente de rendu Ici, choisissons de le rendre en 40 mégabits par seconde, car cela nous donnera une qualité légèrement supérieure pour le fichier final Si vous ne le voyez pas ici, cliquez simplement sur Module de sortie, puis dans le format, choisissez Ht 264. Ensuite, allez dans Options de format et définissez les paramètres de débit comme indiqué ici C'est bon. Et maintenant, choisissons où afficher le fichier. Je le publierai dans le dossier final. N'oubliez pas de modifier le nom du fichier. Appelons-le SAS Project Version 01. Génial Et maintenant, appuyons sur le bouton de rendu et attendons quelques minutes. Je vais accélérer ce processus. Et maintenant, regardons l' animation plusieurs fois pour avoir une vision claire si nous devons ajuster ou corriger quelque chose. Gérer une grande équipe chargée de plusieurs projets n'est pas chose facile. Gérer une grande équipe chargée de plusieurs projets n'est pas chose facile. Trop de tâches, trop de messages, et avant même de vous en rendre compte, vous êtes plongé dans le chaos à la recherche d' aide. Rencontrez One Point. La plateforme qui rend la gestion de projet si simple même votre chat pourrait le faire. Avec One Point, vous obtenez une vue d'ensemble parfaitement claire de tout ce sur quoi travaille votre équipe, tous vos projets, de toutes vos tâches, tout au même endroit. J'ai besoin d'une vue d'ensemble. Chaque projet inclut des tâches détaillées, des sous-tâches et un suivi de la progression en temps réel, afin que rien ne passe entre les mailles du filet Pour savoir qui est en retard, rendez-vous dans l'onglet de votre équipe pour voir l' activité de chacun en un coup d'œil. J'ai besoin de faire un suivi avec quelqu'un. Accédez au système de messagerie intégré où toutes vos conversations sont organisées par contact. Envoyez un rappel rapide ou partagez une mise à jour instantanément. Et oui, le partage de fichiers se fait sans effort. Téléchargez n'importe quel document, et toute votre équipe y aura immédiatement accès. Alors pourquoi continuer à lutter ? Rendez-vous sur onepoint.com et simplifiez votre journée de travail dès aujourd'hui Gérer une grande équipe chargée de plusieurs projets n'est pas chose facile. Trop de tâches, trop de messages, et avant même de vous en rendre compte, vous êtes plongé dans le chaos à la recherche d'aide A atteint One Point. La plateforme qui rend la gestion de projet si simple même votre chat pourrait le faire. Avec One Point, vous obtenez une vue d'ensemble parfaitement claire de tout ce sur quoi travaille votre équipe, tous vos projets, de toutes vos tâches, tout au même endroit. J'ai besoin d'une vue d'ensemble. Chaque projet inclut des tâches détaillées, des sous-tâches et un suivi de la progression en temps réel, afin que rien ne passe entre les mailles du filet Pour savoir qui est en retard, rendez-vous dans l'onglet de votre équipe pour voir l' activité de chacun en un coup d'œil. J'ai besoin de faire un suivi avec quelqu'un. Accédez au système de messagerie intégré où toutes vos conversations sont organisées par contact. Envoyez un rappel rapide ou partagez une mise à jour instantanément. Et oui, le partage de fichiers se fait sans effort. Téléchargez n'importe quel document, et toute votre équipe y aura immédiatement accès. Donc, plusieurs projets WAS, c'est bien. Donc, après avoir regardé l' animation à quelques reprises, j'ai un petit ajustement à faire. Dans la scène finale, l'animation d'introduction de l'objet curseur entre dans la scène par le centre, et je trouve que cela ne semble pas beau Entrons donc dans la scène, puis ajustons la position du curseur au début de la scène. Assurez-vous que vous vous trouvez à la première position des images-clés , puis déplacez-les Déplaçons-le vers la droite. vous ne vous trouvez pas exactement sur les images-clés, vous pouvez créer des images-clés supplémentaires , comme je l'ai fait dans mon Maintenant, je vais supprimer la première image-clé et y placer la nouvelle . Voyons à quoi ça ressemble. OK, je pense que ça a l'air un peu mieux maintenant. Revenons maintenant à la composition principale et entrons dans la troisième scène, car j'ai également remarqué qu' il y a un moment où le curseur s'arrête complètement et que je n'ai pas aimé Cela se passe ici après l'animation d'introduction. Si nous entrons dans l'éditeur de graphes, nous verrons que la vitesse à ce stade est nulle. Nous allons donc résoudre ce problème très rapidement en convertissant cette image-clé en image-clé continue, puis en accélérant en convertissant cette image-clé en image-clé continue, puis en accélérant ce moment. Je pense que c'est mieux maintenant. Voyons cela avec le reste de la scène. Génial. Je trouve que ça a l'air génial maintenant. D'accord. Maintenant, une fois que nous sommes satisfaits du mouvement, nous pouvons à nouveau effectuer le rendu de la composition principale Mais avant cela, je voudrais profiter de cette opportunité pour vous montrer comment ajouter des photos de profil d'avatar réalistes dans le projet Comme je ne voulais pas perdre de temps là-dessus pour toutes les scènes nécessitant une photo de profil d'avatar, j'ai veillé à ce qu' il y ait au moins une scène juste pour vous montrer le processus qui la sous-tend. Vous vous souvenez peut-être que pendant le processus de préparation dans Illustrator, lorsque nous avons préparé la scène 6, j'ai remarqué que dans cette scène spécifique, je laisserais les icônes du profil de l'avatar sous forme couches distinctes, car nous les utiliserons plus tard dans le projet. Alors maintenant, c'est exactement ce que je veux que nous fassions. Nous allons maintenant apprendre comment ajouter de vraies photos de profil d'avatar dans la conception du panneau d'interface utilisateur. Ouvrons le dossier des actifs que vous avez téléchargé pour moi et trouvons les portraits du nom du fichier PSD Maintenant, je veux vous montrer à quel point j'aime préparer mes avatars pour l'animation Tout d'abord, je me rends sur le site Freepick car vous pouvez y trouver gratuitement beaucoup de choses utiles Maintenant, dans la barre de recherche, je vais rechercher des portraits. Ensuite, je vais m'assurer de ne voir que les options gratuites. Et maintenant, je vérifie les options que je vois ici. Je choisirai ensuite quelque chose qui me plaît tout en assurant qu'il existe de nombreuses autres options similaires à celle-ci. C'est important parce que nous voulons avoir un design cohérent, regardez dans notre projet. D'accord ? Donc, dans ce cas, j'adore cette photo. Je vais donc cliquer dessus. Et puis, si vous le souhaitez, vous pouvez déjà le préparer pour animation directement dans Free Pick. Vous pouvez vous débarrasser de l'arrière-plan ou choisir un autre format. Dans mon cas, comme je sais que j'en aurai besoin d'un grand nombre je préfère les avoir prêts à être animés dans un seul fichier. Nous pouvons utiliser Photoshop pour cela, mais nous y reviendrons plus tard. Pour l'instant, je continue simplement à télécharger le reste des avatars. Dans ce cas, il me faut sept d'entre eux au total. Alors maintenant, je vais d'abord créer un nouveau dossier dans lequel je vais enregistrer tous les avatars que j'ai téléchargés à partir d'ici Je vais accélérer ce processus pour le moment. C'est bon. Donc, une fois que j'ai fini de télécharger toutes les images, je vais ouvrir Photoshop et créer un nouveau document. Nous pouvons utiliser les préréglages d'art et d' illustration pour cela, car un format carré est déjà préparé pour nous L'avantage d'avoir toutes les images dans un seul fichier est qu'elles auront toutes la même taille. Cela nous simplifiera la vie dans After Effects lorsque nous en aurons besoin. Bientôt, tu comprendras ce que je veux dire. OK, alors maintenant je vais apporter toutes les images à l'intérieur. Ensuite, pendant qu' ils sont tous sélectionnés, j'appuierai sur Ctrl ou Commande T pour les agrandir. Une fois cela fait, je vais maintenant vérifier qu'ils sont tous positionnés au centre. C'est également l'un des avantages de toutes les regrouper dans un seul fichier Photoshop, car si vous avez des images de dimensions différentes, vous pouvez toutes les ajuster pour qu'elles aient les mêmes dimensions ici dans ce fichier en redimensionnant certaines d' entre elles ou en les déplaçant de gauche à droite si nécessaire. C'est bon. Maintenant, une fois que je me suis assuré que toutes les images sont alignées, je peux supprimer la couche d'arrière-plan et enregistrer ce fichier dans mon dossier de ressources. Je vais m'assurer de l'enregistrer en tant que fichier PSD, puis de cliquer sur Enregistrer Génial. Revenons donc à notre projet. Faisons d'abord glisser le fichier PSD dans le panneau du projet. Maintenant, dans le type d'importation, nous allons choisir la composition et conserver les tailles des calques, car nous avons besoin que tous les calques soient séparés comme dans le document Photoshop original. Ici, le choix n'a pas d'importance puisque nous n'avons utilisé aucun effet ni style de calque dans le document Photoshop original. Bien, avant de commencer à travailler, introduisons le nouveau dossier contenant toutes les images dans le dossier des actifs. Maintenant, sélectionnons la pré-composition des portraits qui a été créée automatiquement une fois que nous avons inséré le fichier PSD et arrêtons de fonctionner pendant une seconde, car je voudrais mentionner quelque chose d'important Comme vous l'avez peut-être remarqué, lorsque nous importons un fichier PSD dans After Effects, nous obtenons une précomposition contenant les images Et aussi un dossier contenant les images. Maintenant, je veux expliquer ce qui s'est exactement passé lorsque nous avons choisi d'importer le fichier PSD en tant que composition en conservant la taille de la couche After Effects a créé une précomposition aux dimensions du document carré que nous avons créé dans Photoshop Mais les images contenues dans cette précomposition seront de la même taille que leurs dimensions d' origine C'est ce que signifie conserver la taille de la couche. After Effects ne recadre pas les images au format carré. Par conséquent, si vous entrez dans la précomposition, vous remarquerez que toutes les images ne sont pas au format carré Elles apparaissent également de cette façon dans le dossier des images. Je voulais vous montrer ceci afin que vous puissiez comprendre le véritable sens de la conservation de la taille de la couche. Dans notre cas, cela n'a pas vraiment d'importance car même si toutes les images ne sont pas recadrées au format carré, nous pouvons toujours travailler avec elles puisqu' elles ont toutes plus ou moins la même taille Mais dans les projets où vous avez besoin qu'ils soient tous de la même taille, vous devez les importer uniquement sous forme de composition. D'accord. Cela étant appris, faisons glisser cette précomposition vers le dossier des précompositions pour conserver un projet propre, puis ouvrons le dossier des portraits que nous venons de faire glisser vers le dossier Assets et commençons à ajouter les images dans le design du Comme vous pouvez le constater, il sera ainsi plus facile de choisir les images d'avatar. D'accord. Maintenant, sélectionnons toutes les précompositions de contact dans la chronologie et double-cliquons dessus pour les ouvrir toutes en même temps Génial. Et maintenant, commençons par le premier contact. Tout d'abord, nous devons trouver l'image d'un homme, puisque le nom que nous avons ici est un nom d'homme. Utilisons celui-ci. Faites-le glisser sur la chronologie, puis redimensionnez-le pour l'adapter au design. Faisons-le maintenant glisser vers la zone de l'icône de l'avatar. Nous pouvons le réduire un peu plus. Génial. Nous allons maintenant utiliser la forme de la couche d'icônes Avatar comme masque pour l'image, et nous allons le faire en utilisant la fonction Track Matt. Il suffit de faire en sorte que l'image utilise l'alpha de la couche d'icônes Avatar. Maintenant que nous savons que cette précomposition est animée dans un espace tridimensionnel, nous devons également convertir nous devons également convertir l'image en couche 3D Génial Nous pouvons donc maintenant zoomer et ajuster davantage la position et l' échelle si nécessaire. C'est bon. Maintenant, pour répéter ce processus plus rapidement, copions la couche d'image que nous avons ici, puis passons à la précomposition de contact suivante et collons-la Maintenant, ajustons la position, puis faisons en sorte que cette couche utilise la couche d' icônes Avatar comme masque. Trouvons ensuite une autre image d'homme et passons de l'une à l'autre. Ainsi, pendant que la couche d'image est sélectionnée dans la chronologie, faisons glisser cette image dessus tout en maintenant la touche Alt ou option enfoncée. Enfin, ajustons la position et l'échelle si nécessaire. Génial Et maintenant, répétons ce processus pour le prochain contact préalable. abord, nous devons coller la première image copiée , puis la remplacer par la nouvelle, comme nous l' avons fait il y a quelques secondes. OK, répétons donc ce processus pour le reste des précompositions de contact Je vais accélérer ce processus pour le moment. Assurez-vous simplement que l'image correspond au OK au , Une fois que nous aurons terminé, nous pourrons maintenir la touche Controller Command W enfoncée pour fermer les précompositions de contact Comme vous pouvez le voir, nous avons maintenant une scène sympa avec les vraies photos de profil d'Avatar. Et maintenant, vous savez comment le faire dans vos futurs projets. Sauvegardons maintenant le projet pour garantir les progrès que nous avons réalisés jusqu'à présent. Cela fait, nous avons terminé de créer l'intégralité de la vidéo explicative SAS Nous sommes maintenant prêts à rendre la version finale. Sélectionnons donc la composition principale puis envoyons-la dans la file d'attente de rendu Conservons les mêmes paramètres de rendu et remplaçons l'ancien fichier par le nouveau. Attendons maintenant que le rendu soit terminé. Une fois terminé, vous aurez un projet impressionnant à mettre en valeur dans votre portefeuille et à partager avec vos futurs clients. Cela dit, vous pouvez désormais fermer Illustrator s'il est ouvert. Nous pouvons également fermer le fichier Figma et les fichiers PDF que nous avons utilisés pour le projet J'espère que vous avez apprécié celui-ci et que vous avez appris beaucoup de nouvelles choses intéressantes. La principale chose que j'aimerais que vous retienne de ce cours est que la création d'une pièce de motion design est un processus de création étape par étape. Essayez de toujours avancer étape et faites confiance au processus. Merci beaucoup d'avoir regardé. Je te verrai dans le prochain.