Les cavalry pour débutants : Comment animer des interfaces utilisateur de logiciels/sites web/applications comme un pro | Ken Mbesa | Skillshare

Vitesse de lecture


1.0x


  • 0.5x
  • 0.75x
  • 1 x (normale)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Les cavalry pour débutants : Comment animer des interfaces utilisateur de logiciels/sites web/applications comme un pro

teacher avatar Ken Mbesa, Web Designer | 3D Artist

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Leçons de ce cours

    • 1.

      Intro

      3:04

    • 2.

      Aperçu de la cavalerie

      4:34

    • 3.

      point

      3:19

    • 4.

      Concevoir un bouton

      10:54

    • 5.

      Concevoir un curseur de souris

      5:03

    • 6.

      Animer le curseur

      7:28

    • 7.

      Animer le clic sur le bouton

      5:36

    • 8.

      Concevoir une carte de profil d'utilisateur

      2:43

    • 9.

      Concevoir une carte de profil d'utilisateur

      6:49

    • 10.

      Concevoir une carte de profil d'utilisateur

      16:11

    • 11.

      Concevoir une carte de message

      9:32

    • 12.

      Concevoir une carte de message

      5:42

    • 13.

      Concevoir une carte de message

      4:20

    • 14.

      Design News Headline

      6:58

    • 15.

      Curseur de souris

      0:42

    • 16.

      Animer le curseur

      15:07

    • 17.

      Animez la caméra

      11:16

    • 18.

      Animer la carte de profil d'utilisateur

      7:51

    • 19.

      Animer la carte de message

      6:07

    • 20.

      Animer le titre de l'actualité é

      5:49

    • 21.

      Ajouter des effets sonores

      12:10

    • 22.

      Exportez

      4:05

    • 23.

      Étapes suivantes

      1:46

  • --
  • Niveau débutant
  • Niveau intermédiaire
  • Niveau avancé
  • Tous niveaux

Généré par la communauté

Le niveau est déterminé par l'opinion majoritaire des apprenants qui ont évalué ce cours. La recommandation de l'enseignant est affichée jusqu'à ce qu'au moins 5 réponses d'apprenants soient collectées.

6

apprenants

--

À propos de ce cours

Avez-vous déjà regardé une publicité YouTube pour une application moderne ou un produit SaaS en vous demandant comment ces animations d'interface utilisateur fluides et cinématographiques étaient réalisées ? Ce cours est votre réponse.

Dans ce cours adapté aux débutants, vous apprendrez à animer des logiciels et des éléments d'interface utilisateur de sites web à l'aide de Cavalry, un puissant outil de motion graphics construit autour des données et de l'automatisation. 

Nous allons commencer à partir de zéro et créer progressivement une scène entièrement animée avec des boutons, des curseurs de souris, des transitions de cartes, des effets de survol, des mouvements de caméra et un surligneur de actualité, le type d’animation que vous voyez quotidiennement dans les publicités de produits haut de gamme.

Vous apprendrez comment le cavalerie pense aux points de pivot et à la coordination de l'espace. C'est très important pour rendre chaque animation dans l'outil prévisible et contrôlable. 

Ensuite, vous vous familiariserez d'abord avec les outils de la cavalerie en :

  • Concevoir un bouton simple 
  • Créer un curseur de souris qui se déplace le long d'un tracé incurvé, comme une vraie souris moves
  • Animer le curseur de la souris en cliquant sur le bouton, avec une réaction satisfaisante au clic.

Nous passerons ensuite à la scène complète, où vous allez : : 

  • Concevez une carte de profil utilisateur et une carte message et animez-les à l'aide d'effets survolants sur des boutons, de réactions en termes de clic et de mouvements de caméra qui poussent dans l'action et déplaçent de manière cinématographique d'un écran à l'autre. 
  • Enfin, vous animerez un titre d'actualité avec un effet de mise en évidence

À la fin du cours, vous aurez une scène d'interface utilisateur animée complète que vous pourrez ajouter à votre portfolio, utiliser dans vos propres vidéos de produits ou offrir à un client.

Rencontrez votre enseignant·e

Teacher Profile Image

Ken Mbesa

Web Designer | 3D Artist

Enseignant·e

My name is Ken.

I'm a web designer, creative educator, and digital entrepreneur with over a decade of experience in visual design (Web Design, Graphic Design, and Video Editing).

Over the years, I've helped thousands of everyday creatives, small business owners, and aspiring freelancers take control of their digital presence by teaching practical, no-fluff web design skills using tools like WordPress, Elementor, Forminator, and WooCommerce, with no coding required.

My goal is to keep things beginner-friendly, practical, and focused on helping you get real-world results. If you're building your first website or launching a fully functional online store, I'll walk you through the process step-by-step with clarity and confidence.

Beyond web design, I'm a... Voir le profil complet

Level: Beginner

Notes attribuées au cours

Les attentes sont-elles satisfaites ?
    Dépassées !
  • 0%
  • Oui
  • 0%
  • En partie
  • 0%
  • Pas vraiment
  • 0%

Pourquoi s'inscrire à Skillshare ?

Suivez des cours Skillshare Original primés

Chaque cours comprend de courtes leçons et des travaux pratiques

Votre abonnement soutient les enseignants Skillshare

Apprenez, où que vous soyez

Suivez des cours où que vous soyez avec l'application Skillshare. Suivez-les en streaming ou téléchargez-les pour les regarder dans l'avion, dans le métro ou tout autre endroit où vous aimez apprendre.

Transcription

1. Intro: Si vous avez déjà regardé une publicité pour un logiciel, une application ou une plateforme SAS comme Base 44 Weeks, Canva, Figma, vous avez probablement remarqué Toutes leurs animations sont très fluides, cinématiques, et chaque décision, chaque action semble intentionnelle Les animations donnent au produit un aspect cool. Un bouton est cliqué et autre élément de l'interface utilisateur réagit lorsque la vue pivote, toutes sortes d' éléments de l'interface utilisateur réagissant aux interactions pour montrer ce que le logiciel peut faire en un coup d'œil Alors, comment s'y prennent-ils ? Comment créent-ils ces animations ? Ce que la plupart des gens ne réalisent pas, c'est que ce type d'animation n'a pas besoin d'une énorme équipe de personnes. Ne nécessite pas Adobe After Effects ni des années d'expérience en motion design. Cela nécessite de connaître le bon outil et la bonne approche qui vous permettront de créer très rapidement des animations complexes en deux dimensions. Et c'est l'outil que je vais vous apprendre aujourd'hui. Dans ce cours, nous allons créer une de ces animations à partir de zéro l'aide d'un outil gratuit de conception et d'animation en deux appelé Cavalry. Laissez-moi vous montrer ce que nous allons faire. Pour vous familiariser avec les outils que Cavalry a à offrir, nous allons commencer par un simple bouton d'abonnement. Nous allons utiliser les outils de forme natifs de la cavalerie, puis nous allons ajouter une icône de notification, lui donner une ombre, puis animer le curseur de la souris qui se déplace le long d'une trajectoire incurvée et clique sur le bouton avec une réaction visuelle qui semble réelle Ensuite, nous passerons au niveau suivant où nous allons concevoir deux cartes d'interface utilisateur, une carte de profil utilisateur et une carte de message. Ensuite, nous allons concevoir un titre d'actualité qui ressemble à l'un de ces titres de CNBC ou Bloomberg que vous voyez dans leurs documentaires, puis nous allons animer Il s'agit d'un projet relativement simple mais élégant qui vous présentera certains des outils les plus couramment utilisés dans Cavalry. Chaque technique s'appuie sur celle qui la précède, et à la fin, vous aurez une interface utilisateur que vous présenterez à des clients potentiels et les compétences nécessaires pour créer des animations intéressantes pour votre propre produit SAS ou logiciel. Je m'appelle Ken et j' enseigne le design UI UX. Conception Web et modélisation en trois dimensions sur Skillshare et YouTube C'est la cavalerie pour débutants, la méthode pratique. Es-tu prêt ? Si tu es prêt, allons-y. 2. Aperçu de la cavalerie: Juste pour avoir un bref aperçu de ce que nous examinons avant de commencer. Si vous avez déjà utilisé un logiciel de montage vidéo, vous comprenez probablement déjà l'essentiel de ce dont nous allons parler ici. Donc, bien sûr, c' est le plan de travail, et voici votre scène C'est ici que vous allez ajouter des éléments et les animer. Au fur et à mesure que vous ajoutez des éléments, ils apparaissent ici dans la fenêtre de scène, où ils apparaissent sous forme de couches. Ce sont des couches. Et voici la chronologie. C'est ici que vous gérez les couleurs. Donc, si vous avez sélectionné un objet, vous pouvez changer sa couleur ici. Mais j'utilise rarement ce côté. Je passe simplement aux attributs car lorsque vous avez sélectionné quelque chose ici, ses attributs apparaissent ici et vous pouvez modifier de très nombreux aspects. Par exemple, nous pouvons accéder à la couleur du champ et simplement cliquer dessus et la modifier ici. Il s'agit de l'élément sélectionné. Ce ne sont que des raccourcis que l'équipe de cavalerie a placés ici pour les fonctionnalités couramment utilisées, les déformateurs couramment utilisés et d'autres Ils ont donc pensé à les rendre accessibles à l'utilisateur ici même. Ce sont donc des raccourcis, et nous allons voir comment utiliser certains d'entre eux pendant que nous travaillons sur notre projet. Enfin, vous avez déjà remarqué que pour dessiner ces rectangles, j'ai sélectionné cet outil rectangulaire et j'ai commencé à dessiner Voici les différentes formes que vous pouvez dessiner. Et, bien sûr, en classe, nous verrons comment utiliser certaines de ces formes pour dessiner les composants de notre interface utilisateur. Il ne s'agit donc que d'un bref aperçu de ce que vous devez savoir sur l'interface utilisateur. L'autre chose que je veux que nous examinions est savoir comment créer un nouveau dossier de projet. Donc, chaque fois que vous voulez démarrer un nouveau projet, un nouveau projet Cavalry, vous voulez vous assurer que ce projet se trouve dans son propre dossier afin que tout ce sur quoi vous travaillez, tout ce que vous importez, tout ce que vous enregistrez ici dans le projet soient contenus dans un seul dossier. Donc, la façon de le faire est d'aller ici ce menu déroulant, disons créer. Je vais passer à mes deux projets D, et ici, je vais créer un nouveau dossier. Je vais l'appeler Nom du projet. Choisissez ensuite le dossier. Comme vous pouvez le constater, c'est déjà mis en évidence ici. Vous pouvez également simplement double-cliquer, y accéder, puis choisir. Maintenant, ce nom est devenu le nom du projet. Il s'agit d'une scène dans le dossier des noms de projet. Si nous cliquons dessus, permettez-moi de le fermer. Si je le revois, il est écrit « description du projet ». Il décrit chaque dossier créé dans le dossier que nous venons de créer. Nous avons créé un dossier de scènes, des dossiers de rendu. Un dossier de ressources et tous ces autres dossiers. Si je le ferme et que je dis Control S, remarque maintenant, il est automatiquement placé dans le dossier des scènes. Il s'agit du dossier de projet que nous venons de créer. Si je monte, comme vous pouvez le voir, nous avons un dossier de scènes. Automatiquement, nous pouvons y enregistrer la scène. Nous pouvons avoir différentes scènes. Si je dis Control N pour le nouveau, Control N et Control S pour le sauvegarder. Nous pouvons enregistrer une deuxième scène dans ce dossier de projet. Nous pouvons donc enregistrer plusieurs scènes si nous voulons différentes scènes ou précompositions pour une scène globale Je peux donc donner un nom à ce projet et l'enregistrer. Nous avons maintenant deux scènes dans ce dossier de projet. C'est tout pour le moment. Il s'agissait simplement d'une brève introduction et d'un aperçu de l'interface utilisateur de Cavalry et de la façon de créer un dossier de projet. Dans la leçon suivante, nous allons parler du point de pivot, qui est très important. À bientôt. 3. point: Nous allons parler de ce que l' on appelle le point pivot car il est très important pour l'animation, et nous sommes toujours dans le dossier d'exemple de projet que nous avons créé. Nous ne regardons donc qu'un exemple. Nous allons créer un nouveau dossier de projet dans la leçon suivante. Donc, pour le moment, je veux ajouter un rectangle. Je vais donc simplement sélectionner le rectangle et y dessiner quelque chose, puis en dessiner un autre. Si je sélectionne l' outil de sélection, comme vous pouvez le voir, le rectangle a ce Gizmo en son centre Si je sélectionne celui-ci, il a également le Gizmo en son centre localement Mais si je les sélectionne tous les deux, en maintenant la touche Maj enfoncée et en les sélectionnant, Ctrl G. Maintenant, comme vous pouvez le voir, le point de pivot se trouve au milieu. C'est bon. Si j'annule ce contrôle Z, si je sélectionne ce rectangle le place ici et que je sélectionne les deux, contrôle G, vous remarquerez que le point de pivot est toujours au centre de l'écran. Donc, si nous essayons d' animer ce groupe, peut-être en le faisant pivoter, il tournera autour du centre du plan de travail, alors que nous voulons peut-être qu'il pivote juste ici, au centre des deux Cela signifie que nous devons faire très attention à l'endroit où nous plaçons ce point pivot lorsque nous dessinons ou concevons les éléments de notre interface utilisateur. Bien sûr, comme vous pouvez le voir, lorsque nous avons sélectionné un groupe ou même une forme quelconque, il y a un attribut pivot. Et vous pouvez le déplacer, par exemple, si je le déplace dans le X, comme vous pouvez le voir, nous le déplaçons. Si je sélectionne un groupe, nous pouvons également déplacer son pivot. Et remarquez que ce sont les formes ou le groupe qui se déplacent par rapport au point de pivot. Le point de pivot reste au centre. Cela nous amène à la conclusion que je voulais que vous obteniez. Lorsque nous dessinons un élément d'interface utilisateur, je vous conseille de le dessiner ici au centre, car si vous le dessinez dessinant différents éléments en dessinant différents éléments sur le plan de travail puis en les regroupant, le point de pivot ira au centre et vous devrez déplacer manuellement ce groupe vers le centre, de la même manière que nous l'avons fait pour ce groupe Il est donc toujours préférable de dessiner ce groupe ici, ajouter simplement les éléments que vous créez, et vous les concevrez par rapport au gadget situé au centre Et lorsque vous les regroupez tous et que vous les déplacez, ils bougeront tous avec le gadget déjà au centre Nous verrons comment procéder lorsque nous commencerons à dessiner. Il ne s'agissait donc que d'un bref aperçu des points de pivot, et nous devons en tenir compte. 4. Concevoir un bouton: Dessinons un bouton. Avant cela, allons-y et créons un tout nouveau projet car il s'agit désormais d'un projet sérieux. Je vais donc aller ici dans ce menu déroulant, créer, puis monter dans le dossier parent, et je vais créer un nouveau dossier. Appelez-le bouton. Entrez, puis choisissez. Très bien, nous avons donc ce dossier de boutons et il a créé tous ces dossiers. Alors maintenant, nous ne voulons pas enregistrer cela. Je vais juste dire Control N , puis supprimer parce que nous voulons créer une nouvelle scène Control N est une nouvelle scène, pas un nouveau projet. Donc, jetez cette scène. Nous pouvons contrôler S, et il sera enregistré dans le dossier des scènes du dossier des boutons. Et le nom est button point cv. Nous y voilà donc. Nous avons un dossier de boutons et une scène de CV à points de boutons. Maintenant, je veux passer à magnific.com, officiellement nommé FreePeek De nos jours, ils l'appellent Magnific et je voudrais passer aux actifs boursiers Ce sont des vecteurs. Je souhaite rechercher Subscribe. Très bien, j'avais cherché un joli bouton d'abonnement. La couleur doit être rouge. Il y en a une que j' aime beaucoup, mais celle-ci. J'aime bien celui-ci, mais oui, allons-y et créons celui-ci. Je vais donc simplement télécharger l'image JPEG, ou vous pouvez simplement prendre une capture d'écran. Allons-y. Maintenant, de retour dans Cavalry, je vais double-cliquer dessus. Et allez dans le dossier Téléchargements, et voici le bouton que nous venons de télécharger. Alors voilà. Je vais juste le déposer ici. C'est trop grand. Je peux donc maintenir la touche Maj cliquer sur ce carré ici et le tirer vers l'intérieur pour le réduire. Peut-être de cette taille. Zoomez maintenant avec la molette de la souris et voici l'image. Je vais donc le verrouiller pour qu'il ne soit pas sélectionnable. Parce que ce que nous voulons faire a été ajouté au centre du plan de travail. Donc, si je maintenais la touche Alt enfoncée, si je veux dessiner un rectangle ici, je peux sélectionner l' outil rectangle, dessiner et faire. Mais si je veux le dessiner en plein milieu du plan de travail, je vais le maintenir enfoncé et simplement cliquer dessus Cela ajoutera un rectangle dans l'origine du monde, 0,00 dans le X et le Y, comme vous pouvez le voir dans les attributs, position du rectangle X zéro, Y zéro. Maintenant, nous avons également le type primitif ici, sous les attributs du rectangle et sous les attributs de toute autre forme ici, si j'ajoute une ellipse et que j'y dessine l'ellipse L'ellipse est sélectionnée ici. Vous pouvez voir que nous avons le type primitif ici. Cette section vous permet simplement de changer la forme que vous venez dessiner en n'importe quelle autre forme ici si vous changez d'avis. Je peux donc changer d'avis et dire que je ne veux pas que ce soit une ellipse. Je voulais que ce soit un rectangle, pour pouvoir venir ici et dire rectangle. C'est ainsi que cela devient un rectangle. Je peux venir ici avec l'outil de sélection, le sélectionner et dire : je voulais que ce soit une ellipse, et maintenant c'est une ellipse Cette section sur les types primitifs vous permet d'affecter la forme que vous venez de percer en tant que primitive. Alors laisse-moi juste annuler tout ça et je m'en tiens à ça. Donc, si nous voulons augmenter la taille de ce rectangle dans le X, nous allons utiliser la largeur ici, largeur du rectangle de taille primitive. Et ce que cela nous permet de faire c'est que si nous passons au rayon d' angle, nous pouvons augmenter le rayon d' angle de cette façon. Maintenant, si j'annule ce contrôle Z, vous auriez peut-être été tenté de supposer à l'origine que si vous voulez augmenter la largeur de ce rectangle, passer à l' échelle X et Valla Mais si nous augmentons le rayon d'angle, il semble étiré. Gardez donc cela à l'esprit. Je vais donc le refaire, puis augmenter ce rayon jusqu'à ce point, peut-être 200 juste pour arrondir le tout. En fait, nous pouvons simplement mettre cela de côté et le voir toujours. Nous n'en avons donc pas besoin parce que nous n' essayons pas de le retracer. Je vais donc le sélectionner, le déverrouiller, le faire glisser sur le côté, puis zoomer. Maintenant que nous l'avons, vous pouvez contrôler D pour le dupliquer. Maintenant, nous en avons un autre plus petit comme celui-ci, réduisez la largeur et la hauteur. Nous pouvons changer la couleur juste pour la différencier. C'est bon. Maintenant, sélectionnons simplement celui-ci externe. peux aller au remplissage, sélectionner, et je vais lui donner cette couleur rouge foncé Sélectionnez ensuite ce plus petit, allez sur le terrain. Donnons-lui un rouge vif. Et passons au trait du plus petit , activons le trait. Et rendons-le également rouge, mais légèrement plus foncé. AVC. Qu'en est-il de là-bas ? Non. Oui, j'aime bien ça. Maintenant, je vais cliquer sur Hold on At car tout est au centre ici. Et cliquez sur T. Maintenant, comme vous pouvez le voir, le Gizmo est décalé par rapport au texte. Nous voulons le texte. Passons aux attributs du texte car il est sélectionné ici. Passons à l'alignement vertical. Maintenant, il est aligné au centre par rapport au Gizmo. Alignons-le également au centre comme ça. Et maintenant, changeons cela pour nous abonner. Nous pouvons lui donner cette couleur. Ce n'est pas blanc, ça ressemble à de la crème éclatante. J'adore ça. Maintenant, si vous voulez ajouter cette cloche, nous pouvons accéder à I had opened up svgple.com Vous pouvez venir ici et rechercher une cloche ou une notification. Vous avez d'abord pensé à Alright. Alors laissez-moi simplement sélectionner ceci. Vous pouvez modifier la couleur avant télécharger, sélectionnez-la. Si nous voulons que ce soit cette couleur. Laissez-moi sélectionner ceci. Accédez au remplissage, sélectionnez cette copie, allez ici, collez-la. Supposons ensuite exporter un SVG. Alors maintenant, allons-y. Nous avons le SVG. Je peux juste le glisser-déposer ici. Voilà, ou double-cliquez dessus et accédez au téléchargement et cliquez dessus. Nous avons donc ici l'ondulation du SVG. Je vais le déposer ici en tant que couche d'actifs. Si je le sélectionne, je peux le maintenir enfoncé déplacer et réduire la taille, pousser sur le côté comme ça. Mets-le sur le côté. Je crois que j'aime bien ça. Ou est-ce trop grand ? Un changement. Vous devez également sélectionner cette option, je souhaite réduire la hauteur. Alors celui-ci aussi, réduis la hauteur. Je l'agite juste avec mon œil pour juger de la taille. Je crois que j'adore cette taille. Alors maintenant, nous allons simplement le supprimer. Et maintenant, nous avons un bouton. Contrôlez S pour l'enregistrer, et notre bouton est prêt. Dans la leçon suivante, voyons comment concevoir un curseur de souris. À bientôt. 5. Concevoir un curseur de souris: Il est maintenant temps de concevoir un curseur de souris. Maintenant, je sais ce que tu penses. Hé, Ken, pourquoi ne pas simplement aller ici sur SVG Repo et chercher le curseur de la souris Curseur de souris. Nous en avons tellement. Ou simplement un curseur. Nous en avons tellement. Et c'est vrai, et nous voulons en dessiner un qui ressemble à ceci. Et si nous faisons cela c'est parce que je cherche une raison pour que nous apprenions à utiliser le stylo ici. Donc, tout d'abord, regroupons-les dans un bouton. Je les ai donc tous sélectionnés, contrôlez G, sélectionnez le groupe, entrez. Bouton. Maintenant, si je sélectionne le groupe et que je le fais glisser, comme vous pouvez le voir, le point de pivot est toujours en son centre. Donc, si j'anime la rotation, elle se produira exactement au centre, comme nous le souhaitons Maintenant, nous voudrions peut-être que cela se produise à un autre endroit. Nous pouvons déplacer le point de pivot. Permettez-moi de l'annuler et de le laisser au centre, mais je vais le cacher. Maintenant, ajoutons un rectangle au centre. Alors dehors, maintenez la touche enfoncée et cliquez. Nous y voilà. Zoomez. Ajoutons une ligne. Maintenez le bouton enfoncé et cliquez. Nous y voilà. Maintenant, pendant que la ligne est sélectionnée, je vais appuyer sur Ctrl D, pour la dupliquer. Maintenant, nous avons une ligne et une ligne, et je vais faire pivoter la première ligne de 90 degrés. C'est bon. Maintenant, je vais sélectionner à nouveau cette ligne, Ctrl D, et simplement la faire glisser vers le haut, peut-être à cet endroit, quelque part en bas. Il n'est pas nécessaire que ce soit précis, car ce que nous voulons, c'est pouvoir sélectionner cet outil maintenant, l'outil stylo, et nous assurer que la capture est activée, afin que vous puissiez claquer sur les coins comme ça, puis sur cette ligne comme ça, puis sur cet autre coin, puis sur cet endroit juste là, et enfin juste là Alors maintenant, tous les autres peuvent partir. Les autres n'étaient que des directives. Nous avons maintenant un beau et beau curseur de souris. L'autre chose que nous voulons faire, c'est passer à l'action. Et pour le style de jointure, disons rond. Très bien, passons à la couleur de remplissage et modifions-la pour qu'elle soit plus claire Et le trait peut être un peu plus brillant. Passons à la rotation. Forme, rotation, disons 20 degrés. Si vous regardez le curseur de notre souris et le curseur que nous venons de percer, la rotation est presque la même. 20 degrés. Alors maintenant, sélectionnons-le. Réduisons la taille. Donc, échelle. Si je réduis cette échelle, cela réduira l'échelle X. Mais si je tiens le coup, je vais réduire à la fois X et Y. Je veux que ce soit petit En fait, faisons-le simplement glisser sur le côté comme ça. Démasquons ensuite le bouton. Voici le curseur de la souris. Nous y voilà. Réduisons-le donc. Tiens le coup. Oui, c'est une bonne taille maintenant. J'adore ça. Je pense que c'est le bon endroit pour mettre fin à tout cela. Dans la leçon suivante, nous allons voir comment animer cette configuration. Le curseur de la souris va entrer et cliquer sur le bouton. Comment s'y prend-on ? Voyons comment procéder sous peu. 6. Animer le curseur: Dans cette leçon, nous allons animer le curseur de la souris, puis dans la leçon suivante, nous allons animer le bouton. Allons-y et faisons-le. En sélectionnant le curseur, permettez-moi appuyer sur Entrée ici et de l'appeler curseur. Si vous êtes débutant, vous pouvez animer un curseur en le faisant glisser Laisse-moi juste le faire glisser sur le côté comme ça. Passons ensuite à la position, puis animons-la et définissons une image clé pour ces deux-là dès le début Et puis peut-être que jusqu'à ce moment-là, vous l'apportez directement. Alors maintenant, si je joue. C'est une malédiction pour les souris. Animation. Mais le problème, c'est que si vous me regardez déplacer le curseur de la souris sur l'écran, vous ne déplacez jamais le curseur de votre souris en ligne super droite. Il semble toujours incurvé si vous travaillez naturellement Nous voulons donc déplacer le curseur de la souris de manière incurvée. Alors, comment faites-vous cela ? Nous utilisons un chemin. Permettez-moi donc de supprimer ces images clés, revenir au tout début. Maintenant, ce que nous voulons faire, c'est prendre le virage et tracer le chemin que le curseur de la souris doit suivre. Donc, si je clique dessus et peut-être qu' il y a Escape. Peut-être que je peux double-cliquer dessus, puis le transférer à cet endroit. Puis V. Maintenant, nous avons un chemin. mettre la souris sur le chemin ? Nous utilisons un détecteur de trajectoire pour trouver le chemin. Donc je vais juste aller ici et dire Pathfinder. Entrez. Et sur les attributs pathfinders, vous remarquerez ici que nous avons une forme de saisie Ce champ demande dans le pathfinder, ce champ demande : Où est le chemin ? Montre-moi le chemin. Très bien, alors nous allons vous montrer le chemin. Je vais donc simplement faire glisser notre rasage modifiable ici, qui est le chemin Permettez-moi d'entrer et de le renommer en path. Maintenant, ce chemin est ce que nous devons fournir à ce champ qui demande Où est le chemin. Je vais donc le faire glisser dans cette forme de saisie. Comme vous pouvez le voir maintenant, il est écrit chemin, le nom que nous avons donné à notre chemin. Maintenant, le Pathfinder connaît le chemin que nous voulons emprunter. Nous voulons donc indiquer à ce curseur dans l'attribut position  : « Hé, tu sais quoi ? Suivez ce chemin fourni par le Pathfinder. Nous voulons donc accéder au Pathfinder , le faire glisser et le connecter à la position Nous déterminons donc la position du curseur de la souris. Au lieu de définir manuellement ces positions nous-mêmes, nous vous conseillons de vous positionner, le curseur de votre souris, en fonction l' endroit où le chemin vous indique le chemin que vous indique le pathfinder Alors connecte-toi au Pathfinder, comme ça. Et comme vous pouvez le voir, la souris a sauté là où le pathfinder lui a indiqué le chemin Maintenant, sur le curseur, nous ne pouvons rien animer car maintenant il est piloté par le pathfinder, ce qui signifie que pour animer le curseur de la souris, nous devons animer un attribut du pathfinder, à savoir le nous ne pouvons rien animer car maintenant il est piloté par le pathfinder, ce qui signifie que pour animer le curseur de la souris, nous devons animer un attribut du pathfinder, à savoir le voyage. Parce que vous pouvez le voir, mais maintenant il suit cette voie. Il suffit donc de passer à la première image-clé, zéro, juste là Créons maintenant une image-clé. Et ensuite, laisse-moi jouer. C'est là que je veux que la souris se dirige. Augmentons donc ce chiffre jusqu'à cet endroit, 99,5. Et maintenant, une autre image clé a été ajoutée automatiquement. Alors maintenant, c'est comme ça que ça se passe. Nous pouvons maintenant ajouter le chemin, le chemin lui-même. Il est masqué, mais la souris sait où se trouve le chemin. Donc, si je le joue, mais que je remarque maintenant qu'il arrive de manière très linéaire Il n'a pas ce sens de l' animation, cette élasticité. Nous devons ajouter cette élasticité qui améliore l'apparence des animations. Nous devons donc passer de l'éditeur de temps à l'éditeur de graphiques, maintenir la touche Shift enfoncée et réduire la hauteur, puis maintenir la touche Ctrl enfoncée pour zoomer. Sélectionnez les deux, maintenez la enfoncée et cliquez sur l'une d'elles pour transformer en courbe de Bézier C'était une courbe linéaire. Maintenant, c'est une courbe de Bézier. Donc, une fois les deux sélectionnés, je peux maintenir la touche Shift enfoncée pour les obliger à se déplacer en ligne droite Mais ce que nous voulons faire, c'est créer cette forme en S comme ça. Cela signifie donc que l'animation démarrera lentement, augmentera soudainement, puis ralentira lentement comme ça. Alors voyons voir ça. Si je joue, tu peux le voir ? Revenons donc à l'éditeur de temps. Jouons-y. Ça me plaît. Permettez-moi de réduire le temps Control K met pour ouvrir l'éditeur de composition si je m'échappe. Nous pouvons également accéder ici à la composition, aux paramètres de composition. Nous pouvons le réduire à 20, plage d'images 20. Nous avons donc un calendrier plus court. Alors joue ça. Je pense donc que c'est un mouvement très naturel du curseur de la souris. Dans la leçon suivante, nous allons voir comment animer le bouton lorsque vous cliquez dessus, car pour le moment, vous ne pouvez pas savoir si vous avez cliqué car pour le moment, vous ne pouvez pas savoir si vous avez sur le bouton Je te verrai bientôt. N'allez nulle part. 7. Animer le clic sur le bouton: Ouvrez, tout le monde. Bon retour. Il est donc temps d' animer le bouton lui-même. Alors laisse-moi juste jouer pour voir où je veux qu'il s'anime. Donc ici, juste ici. Nous devons donc augmenter la durée du projet, peut-être jusqu'à 60 ans. Ça fait 60. Maintenez le bouton enfoncé pour l'étendre et le contracter. Alors maintenant, laisse-moi rejouer. Juste là. Je veux donc sélectionner le bouton lui-même, le groupe de boutons. N'oubliez pas que c'est un groupe avec de nombreuses choses. Nous animons le groupe lui-même. Et ce que je veux faire, c'est animer la position Y. Je vais donc y ajouter une image-clé. Et le cadre clé sera ajouté ici. Donc, si je joue, je veux copier cette copie et la coller juste là parce qu'au milieu, elle va se déplacer un peu vers le bas. Donc, sur l'axe Y, disons 15. Il va donc commencer à la position normale et finir à la position normale, mais au milieu, il descend un peu dans l'axe Y. Jouons juste à ça. Permettez-moi de tous les sélectionner et de les reculer un peu. Comme ça. Nous y voilà. Alors maintenant, une dernière chose pour ajouter peu de réalisme est d' aller dans l'éditeur de graphes, et de faire le même traitement que nous avons donné aux autres images clés. Maintenez donc la touche Shift enfoncée pour réduire la hauteur, puis sélectionnez-les toutes. Tenez bon. Maintenez la touche Maj enfoncée, puis cliquez et faites glisser le pointeur pour former cette courbe en S. D'accord. Encore une chose. Allons ici. Et je veux que nous allions à Pixa Bay. Effets sonores Pixel Bay. Parce que nous voulons ajouter ce son de clic. J'en avais téléchargé un, mais je ne me souviens pas où il se trouve. Alors explorez. Non, passons simplement aux effets sonores. Ensuite, je vais rechercher Click. Comme vous pouvez le voir, j'avais recherché Click plus tôt. C'est ça ? D'accord, je vais juste télécharger le premier. Mais choisissez celui que vous préférez. Nous y voilà. Donc je vais juste le glisser ici. Et maintenant, voici Universal Field Computer Mouse Click. Je vais donc le glisser-déposer quelque part ici. C'est où ? Nous y voilà. Maintenant, je vais le faire glisser et le placer juste dessous de l'endroit où le clic se produit. Jouons-y depuis le début. Juste comme ça. J'aime bien les résultats, mais ce n'est que le début. Bien entendu, il s'agit d'un exemple et d'un point de départ pour ce que nous allons faire dans les leçons à venir. Je voulais que nous nous familiarisions avec les composants d'animation. J'espère que vous avez maintenant la confiance nécessaire pour passer aux leçons suivantes, où nous allons commencer par concevoir une carte de profil utilisateur. Je te verrai bientôt. Et encore une chose, au cas où vous voudriez régler le volume de votre audio, comme tous les autres éléments ici, son possède des attributs, et l'un des attributs ici est le volume. Vous pouvez donc le réduire aux niveaux que vous souhaitez. J'ai l'habitude de passer à moins 20 pour les choses que je veux garder subtiles. Laisse-moi juste jouer ça. Juste comme ça. Il suffit donc de jouer avec les attributs et de voir ce que vous souhaitez modifier pour améliorer le son du clic. Je pense donc que c'est le bon endroit pour y mettre fin. Dans la leçon suivante, concevons une carte de profil utilisateur. À bientôt. 8. Concevoir une carte de profil d'utilisateur: Maintenant que nous en avons fini avec ce bouton, parce que nous l' utilisions comme exemple, il est temps de créer un tout nouveau projet. Je vais donc juste aller ici, créer, accéder à mes deux dossiers de projets D. Je vais également fournir ce dossier de projet si vous souhaitez l'examiner. Mais pour l'instant, je vais juste le créer ici. Animation de l'application, de l'interface utilisateur, car nous allons contenir ici tous les composants de l'interface utilisateur que nous allons animer pour le reste de la classe Alors entrez, choisissez et, bien sûr, cela fait partie d'un autre projet, donc je vais juste dire Control N pour une nouvelle scène. Et maintenant, nous pouvons enregistrer cette première scène sous forme de carte de profil utilisateur. Permettez-moi de recopier ce nom ici. Carte de profil utilisateur. Sauvegardez ça. La première chose à faire est donc, bien sûr, d'apporter de l'inspiration si nous avons déjà l'interface utilisateur. Bien entendu, si vous animez une interface utilisateur, vous la basez sur une application, un logiciel ou un site Web réels. Nous avons donc besoin d' une capture d'écran de celle-ci Nous avons donc besoin d' une capture d'écran de Je vais donc double-cliquer dessus. J'ai téléchargé certains éléments de l'interface utilisateur. De Magnific. Permettez-moi de le rechercher très rapidement et de revenir. Très bien, nous sommes de retour. Maintenant, je vais aller dans le dossier du projet. Il s'agit de notre dossier de projet, et bien sûr, ce sont les dossiers qui ont été créés. L'un des dossiers créés automatiquement était celui des actifs. Je vais aller ici et coller l'interface utilisateur que je veux que nous utilisions. Ensuite, je vais double-cliquer. Oh, attendez, nous sommes déjà là. Permettez-moi donc de passer aux deux projets D. Assets, voici l'interface utilisateur que je voulais que nous utilisions. Je vais donc le glisser-déposer ici, maintenir la Shift enfoncée et la faire glisser. Les éléments que nous voulons sont donc ceci et cette interface utilisateur de message, et nous allons également créer ce titre d'actualité Maintenant que nous l'avons ici, laissez-moi simplement le faire glisser et le mettre sur le côté ici afin que nous puissions l'observer pendant que nous le dessinons ici. 9. Concevoir une carte de profil d'utilisateur: C'est bon. Maintenant, maintenez la touche Alt enfoncée et cliquez sur le rectangle. Augmentons les hauteurs. Et la largeur. Disons 750 par 550 ? Disons d'ici 600. Oui, comme ça. Et n'oubliez pas que c' est juste au milieu. Il se trouve au centre du plan de travail. Et c'est ce que nous voulons. Très bien maintenant, cela interfère. Alors laissez-moi simplement le sélectionner. Alors, tiens bon. Oui, comme ça. Zoomez. Maintenant, nous voulons le sélectionner et passer au rayon d'angle. Plissez le rayon d'angle jusqu'à ce point, changez la couleur Et comme vous pouvez le voir, nous avons un fond violet. Cliquez donc sur cette forme d'arrière-plan. L'arrière-plan est une forme comme toutes les autres formes, double-cliquez dessus, et vous pouvez le faire glisser et le placer à l'arrière ou simplement utiliser les raccourcis habituels d'Adobe Illustrator. Support gauche Control Shift pour le renvoyer à l'arrière. Un autre raccourci est V pour l'outil de sélection ou A pour la sélection directe, appelée Modifier la forme 2. Tous les raccourcis que vous avez utilisés pour travailler se trouvent donc ici. C'est donc à l'arrière. Maintenant, alors qu'elle est toujours sélectionnée, passons à la couleur de remplissage et changez-la en cette couleur violacée J'aime le violet. C'est bleuté aussi. Ou nous pouvons simplement utiliser l'outil Eyedropper pour l' échantillonner au lieu de perdre trop Nous y voilà. Donc, en zoomant, je vais le sélectionner et utiliser l'outil Eyedropper pour gagner du temps et le Créons maintenant ce texte de profil utilisateur. Je vais donc simplement sélectionner l'outil de texte et cliquer sur Profil utilisateur. Profil de l'utilisateur. Sélectionnez l'outil de sélection. Maintenez la touche Maj enfoncée, cliquez dessus et redimensionnez-le. Maintenant, nous pouvons entrer ici, et j'aime bien l'aligner sur le Gizmo comme ça Peut-être ce point. Nous pouvons également le rendre audacieux. Je le veux noir. C'est plus épais que gras. Et la nôtre est un peu plus grande. Nous pouvons donc continuer à le redimensionner de cette façon ou simplement utiliser la taille de police au lieu de l'échelle, mais cela n'a pas d'importance pour ce que nous voulons Ensuite, nous voulons créer ce menu. Je vais donc maintenir la touche Alt enfoncée et cliquer également sur l'ellipse et je vais cliquer sur le duplicateur pour en créer une duplication Je vais accéder au duplicateur sélectionné automatiquement, passer au linéaire et passer au linéaire et augmenter la taille pour l' espacer comme ça Ensuite, nous pouvons réduire la taille de ce truc. Juste comme ça. Et nous pouvons le changer en vertical. fait, si nous cliquons de côté, cela n'est pas verrouillé. Alors laissez-moi le verrouiller, l'arrière-plan. Maintenant, nous devons espacer cela. Laisse-moi zoomer. Par rapport à celui-ci, nous devons l'espacer. Donc, pendant qu'il est toujours sélectionné , augmentez la taille. Oui, j'aime bien. Mais les cercles sont encore plus grands. Nous pouvons donc également simplement sélectionner l'ellipse elle-même et la réduire en maintenant la taille enfoncée pour réduire la taille de chaque forme individuelle Passons au duplicateur. Placez-le là. Maintenant, nous devons nous organiser très rapidement. Qu'est-ce que c'est ? Voici la carte. Entrez, fond de carte ou carte BG. Le texte est le profil de l'utilisateur. Le texte, l'ellipse. Eh bien, c'est la forme d'ellipse du menu en pointillés, juste pour que nous puissions savoir de quoi il s'agit C'est la forme originale que nous avons dessinée que nous avons maintenant dupliquée avec le duplicateur Ce duplicateur peut donc être renommé en duplicateur de menu en pointillé Nous pouvons donc savoir de quoi il s'agit d'un duplicateur. Et nous pouvons toujours simplement le transmettre au duplicateur, car c'est ce qui est dupliqué par le duplicateur Il peut donc s'agir d'un enfant du duplicateur. Quoi d'autre ? Je pense que pour le moment, c'est suffisant. Nous pouvons également les regrouper tous dans un groupe de profils d'utilisateurs, mais nous le ferons plus tard. Créons donc cet Adam Sally. Maintenez cette option enfoncée pendant que vous la sélectionnez, ces textes ou n'importe quelle forme, maintenez enfoncée et tirez pour les dupliquer Je vais donc double-cliquer dessus et sur Adam Savaging. Nous y voilà. Je vais augmenter la taille. Ouais. 10. Concevoir une carte de profil d'utilisateur: Maintenant, pour l'Avata, vous pouvez revenir sur notre site Web ici Pour SVG Repo, recherchez Avatar. Ou si vous avez une image de profil utilisateur, utilisez-la. Utilisez donc Avatar. Comme vous pouvez le voir, celui que j' ai choisi dans mon exemple est le suivant. Je vais donc simplement sélectionner ceci. Pas besoin de modifier le vecteur, alors téléchargez-le et je pourrai le glisser-déposer dedans. Ensuite, je peux le glisser-déposer dedans en tant que couche d'actifs. Et pendant qu'elle est sélectionnée, maintenez la touche Shift A enfoncée pour réduire la taille. Voyons voir, c'est une bonne comparaison. C'est bon. Maintenant, créons les étoiles, la critique cinq étoiles. Je vais donc maintenir la touche Alt enfoncée, cliquer dessus et le placer là. Maintenez la touche Alt Shift enfoncée, comme ça. Vous pouvez le faire glisser et le placer juste là. C'est bon. Avant cela, nous allons d' abord le dupliquer. duplicateurs fonctionnent mieux lorsque vous commencez à l'origine mondiale 0,00 C'est donc ce que nous aurions dû faire, dupliquez-le comme ça. Passez ensuite au linéaire, augmentez ce chiffre à cinq. Et augmentons la taille pour les espacer, les espacer complètement. Réduisons ensuite la taille du duplicateur lui-même. Nous ne faisons que le regarder. Nous n'essayons pas d'être parfaits ou exactement comme ça. Nous ne faisons qu'apprendre les concepts. En utilisant la souris juste là. Nous pouvons les espacer davantage, donc augmentez la taille. Et nous pouvons déplacer le point de pivot à cette fin. Si nous voulions animer les étoiles de ce côté, nous déplacerions le point de pivot vers le début comme ça Et puis, si nous réalisons une animation, ce sera par rapport à ce point pivot, quel que soit le type d'animation. Maintenant, avec cela, je pense que nous avons un bon nombre d'étoiles. On peut aller changer de couleur. C'est donc l'Avatar. C'est une forme d'étoile. So Home, classement cinq étoiles. Forme. Et voici le cinq étoiles, le duplicateur de notation Nous pouvons donc le placer en dessous de cela. Cela n'a aucune importance . Nous sommes juste en train de l'organiser pour que je puisse le résoudre, car c'est ce qui nous intéresse vraiment en ce moment. Mais si vous souhaitez apporter des modifications très précises à l'étoile elle-même, nous pouvons le faire Par exemple, nous pouvons passer au remplissage et changer la couleur en violet. Je l'ai presque réussi dès le premier coup, alors j'ai juste sélectionné cette couleur En fait, revenons en arrière et remplissons la couleur. Non, on avait ça. Utilisons simplement le compte-gouttes pour les yeux. Copiez ça. Allons nous évader. Pourquoi ça ne va pas disparaître ? C'est bon. Maintenant, allons-y et activons-le. Zoomons. Si nous passons au style de joint et disons rond, augmentons ainsi la taille de la bordure. Collez ensuite la couleur violette dedans pour la rendre plus arrondie. Maintenant, ce que nous devons faire c'est réduire encore la taille du duplicateur, en maintenant enfoncé comme ça Ça me plaît. Maintenant, en maintenant enfoncé, je peux le faire glisser. Bien entendu, nous pouvons en réduire la taille et la remplacer par des doubles cliques ordinaires et mon adresse e-mail à email.com cette option sélectionnée, je vais à nouveau faire glisser Alt et faire glisser Alt. Double-cliquez sur Entrez le numéro de téléphone plus 25407001, deux, trois, quatre, cinq, six Double-cliquez sur Mombasa Road, Nairobi . Route de Mombasa ne nous reste plus qu'à rechercher des icônes provenant de cet endroit, de SBG Repo, d'un e-mail ou d'un courrier J'aime bien ça, mais nous voulons changer la couleur pour ce violet. Je vais donc sélectionner ceci. Non, sélectionnez cette forme elle-même, allez ici, sélectionnez ce code couleur, entrez ici, modifiez, collez la couleur là-bas, puis exportez le SVG Faites glisser le SVG et placez-le ici. C'est ici. Déposons-le simplement là en tant que couche d'actifs. Sélectionnez-le. Maintenez la touche enfoncée, tout le temps. Nous y voilà. Faisons de même pour le téléphone et la localisation. Smartphone. Exportez le format SVG. Déposons-le ici. Couche d'actifs, sélectionnez-la. Pour une raison ou une autre. Oh, attendez. Je l' ai déposé au mauvais endroit. Désolée pour ça. J'aurais dû le mettre en dehors de l'e-mail. Mais il se trouve dans l'e-mail, donc je vais le faire glisser vers l'extérieur comme ça. Très bien, maintenant Quelle est la taille de cet e-mail ? 0,047. Donc 0,047 et 0,047 Oui, on s'en rapproche. Emplacement. Allez le déposer juste en dessous. Il y a une couche d'actifs. Oui, ce n'est pas dans ces icônes. Au quart de travail, 0,470 0,047. 0,047. Comme vous pouvez le constater, la conception n'importe quelle interface utilisateur dans Cavalry est très facile avec ces outils de type Adobe Illustrator. C'est très simple si vous utilisez déjà des outils de conception graphique. Démontons-les. C'est bon. Nous y sommes donc presque. Dessinons les boutons, augmentons la largeur. I Avant de le déplacer, finissons d'abord le texte et le reste. Augmentez donc le rayon d' angle à 30. Maintenez la touche enfoncée, puis cliquez pour ajouter du texte. Alignons-le verticalement par rapport au centre et alignons-le horizontalement. Donne-lui cette couleur. Maintenant, donnons-lui du blanc. Réduisez la taille. Double-cliquez. Suivez. Je pense que la taille de police est toujours grande. Oui, disons 24, sélection 2. Tant qu'elle est toujours sélectionnée, maintenez la touche Shift enfoncée pour les sélectionner toutes les deux et les placer à cet endroit. Pendant qu'ils sont toujours sélectionnés, maintenez la touche enfoncée. D'accord, pourquoi ça ne marche pas ? Est-ce parce qu' ils ne forment pas un groupe ? J'essaie de les dupliquer. Quoi qu'il en soit, sélectionnez le rectangle. À la traînée. Sélectionnez le texte. À la traînée. Pourquoi est-ce que je le sélectionne ? Laisse-moi juste le verrouiller. Maintenant, voyons voir. Oui, comme ça. À la traînée. Double-cliquez dessus. Un message. Je vais sélectionner ceci. Allons sentir. Lâchez deux dans les yeux et sélectionnez-le. Sélectionnez le second, passez à la couleur, éclaircissez-le. Nous pouvons lui donner un dégradé, mais je veux que les choses restent simples pour le moment. Nous allons sélectionner le texte, passer à la couleur et l'assombrir. Pas noir mais foncé. Et nous y voilà. Je pense que nous avons une belle carte. Je veux sélectionner ces deux options, maintenir la touche Shift enfoncée pour sélectionner toutes les deux , puis les appuyer vers le bas. Et je pense que nous avons une interface utilisateur sympa. Avant de poursuivre, je souhaite les sélectionner et contrôler G pour les regrouper. Et maintenant, comme vous pouvez le constater, nous devrions avoir fini de les créer au milieu, mais pas de problème, nous pouvons déplacer les points de pivot. Où se trouve donc le point de pivot sur l'axe Y. Et maintenant, déplaçons le point de pivot lui-même, car ce que nous animons, c'est le point de pivot Sélectionnez ceci et ce contrôle G. Déplaçons également le point de pivot. Et déplaçons-le à nouveau vers le bas. Maintenant, sélectionnez-les tous y compris cet arrière-plan de carte. Contrôle G. Maintenant, nous pouvons déplacer cette carte dans son ensemble et animer sous forme de carte Mais si nous animons tout ce qui se trouve à l'intérieur du groupe, il s'agit en fait d'un groupe Permettez-moi de le saisir et de le renommer en carte de profil utilisateur. Maintenant, tout ce qui se trouve dans la carte de profil utilisateur est tout ce que nous avions. Nous avions donc maintenant ce groupe appelé la carte-message, Enter. Bouton de message et ce deuxième groupe ici, entrez. Bouton Suivre. Nous pouvons également désormais animer les boutons au sein du groupe. Il est donc toujours bon d'avoir ce point pivot juste là. Maintenant, le point de pivot de ces autres boutons n'a pas vraiment importance car nous allons animer les boutons et la carte Il s'agit déjà d'un duplicateur, nous allons donc l'animer en tant que Je pense donc que c'est un bon endroit pour terminer cette leçon. Il s'agissait d'apprendre à concevoir quelque chose de plus complexe qu'un bouton. Dans la leçon suivante, vous allez concevoir la carte de message car, souvenez-vous, nous avons dit que nous avions plusieurs choses à concevoir. C'est la prochaine chose que nous allons concevoir. En fait, il s'agit d'un exercice pour vous. Suivez les mêmes principes que ceux que nous avons suivis pour concevoir ceci. Je te verrai bientôt. 11. Concevoir une carte de message: Il est maintenant temps de concevoir la carte de message ou la carte de discussion, cette carte ici. Maintenant, nous l'avons déjà créé et il a son Gizmo en plein milieu Alors pourquoi ne pas simplement le dupliquer ? Je vais donc le réduire , carte de profil utilisateur, puis Control D, et il va créer un duplicata appelé carte de profil utilisateur avec tout ce qu'il contient. Mais nous n'avons pas besoin de tout car comme vous pouvez le constater, la référence ici ne comporte aucun bouton. Alors pourquoi ne pas supprimer ? Tout d'abord, laissez-moi sélectionner la première carte. Je vais masquer la carte d'origine, puis la sélectionner et entrer. Alors appelle-ça la carte de message. Développez-le, réduisez tout cela. Nous voulons nous en débarrasser. En fait, nous allons utiliser ces deux bulles parce que nous pouvons les utiliser comme l'une des bulles de discussion et comme telle autre. En sélectionnant cette première bulle de discussion, et cette autre, entrez. Chapeau Bubble Two. Nous pouvons supprimer tous ces autres détails. Voyons à quoi ça ressemble. Nous pourrions utiliser «   Supprimons toutes ces icônes ». Supprimez l'avatar, ou il possède l'avatar. Nous sélectionnons donc l'Avatar et le déplaçons vers le haut. Maintenez la touche Shift enfoncée pour vous déplacer en ligne droite. Maintenez la touche Shift vers l'extérieur enfoncée pour le redimensionner. Profil de l'utilisateur. Tant que l'option est toujours sélectionnée, maintenez la touche enfoncée et faites glisser le pointeur. Double-cliquez dessus. Contrôle A, sélectionnez tout. En ligne, je crois que c'est écrit en ligne. C'est audacieux. Nous voulons qu'il soit régulier et qu'il en réduise la taille. Et poussons-le vers le bas. Maintenez la touche Ctrl enfoncée pour vous déplacer par petits incréments, puis appuyez dessus. Voyons voir. Supprimez cette note de cinq étoiles. Card BG va bien. En fait, nous devons l'étiqueter. Entrez. Nom d'utilisateur Et ici, il est censé lire Adam Savaging comme nom d'utilisateur Alors voici le texte en ligne. Il doit également s'agir du texte du nom d'utilisateur. Texte en ligne. J'ai déjà lu en ligne. Passons maintenant à l'Avatar. Ensuite, nous avons le menu en pointillés. C'est bon. Chat Bubble One. Je peux le trouver ici. Maintenant, remarquez si nous l'agrandissons. Oh, c'est Hat Bubble 2. Si nous l'étendons, si nous passons à la forme rectangulaire sur le rayon d'angle, nous pouvons passer de tous à individuels et ici les changer à 20. 20 et 20. Cela crée une sorte de bulle vocale. En le sélectionnant à nouveau, nous pouvons augmenter la hauteur, sélectionner le texte et fournir le texte que nous voulons. Je vais voir si je peux trouver un texte ici. Alors copiez-le, collez-le dedans. Maintenant, il s'agit d'un texte unique, donc je vais simplement le supprimer et à la place, je vais sélectionner un outil de texte, cliquer ici et faire glisser le pointeur pour créer une zone de texte dans laquelle je peux maintenant coller tout mon texte. C'est où ? Pourquoi est-ce monté là-haut ? Alors revenons ici encore une fois. Texte. Coller. Oui, c'est censé être collé ici Je vais donc simplement supprimer du texte. Nous voulons juste un peu. Alignons-le à gauche et changeons la couleur du champ en blanc. Appuyez dessus manuellement avec les touches fléchées, et voilà, nous avons une bulle de dialogue. Maintenant, au lieu de perdre du temps avec cet autre contrôle, supprimons-le puis sélectionnons ce contrôle Oh, attends. Le texte que nous venons d' ajouter devrait se trouver dans deuxième bulle de discussion pour former ce groupe. Maintenant, si nous contrôlons cette bulle 2, elle va former une nouvelle bulle comme celle-ci. Développons-le. La forme. Ici, c'est censé être cinq et ça 20. Ensuite, la couleur de fond, nous pouvons l'échantillonner, échantillonnons-le. Fais-le aussi. Juste là. Sélectionnez le texte, changez la couleur en gris foncé, pas en noir, en gris foncé. C'est une jolie bulle vocale. D'accord, vous pouvez modifier le texte pour dire autre chose ou simplement le laisser tel quel Laisse-moi juste changer ça. Maintenant, je peux à nouveau sélectionner la bulle vocale 2, déplacer D, puis la tirer vers le bas, puis la bulle vocale 3. Contrôlez D, puis tirez-le vers le bas. Contrôle S. Maintenant, nous pouvons ajouter «   laissez-moi sélectionner ceci », Contrôle D », et le faire glisser vers le bas. Et retirons-le, développons-le, supprimons le texte. Sélectionnez le rectangle. Nous voulons créer la zone de saisie, cette zone de texte. En sélectionnant le rectangle, passez également à celui-ci 20. Passons à la couleur de remplissage et rendons-la plus foncée. Donnez-lui peut-être une bordure , mais très pâle aussi. Non, il fait trop sombre. Donc, tout d'abord, légèrement plus léger. Très bien, mon projet est suspendu. Bon, maintenant, mon projet est suspendu. Permettez-moi de le redémarrer, et je reviendrai bientôt. 12. Concevoir une carte de message: Et bon retour. Maintenant, je devais redémarrer Cavalry après le gel, alors laissez-moi simplement appuyer sur Control O pour rouvrir notre scène. Et nous avons nommé cette scène « carte de profil utilisateur ». Mais nous avons déjà vu que nous sommes déjà créer même la carte de message ici. Nous allons donc simplement changer ce nom en animation de l' interface utilisateur de l'application , car il contiendra toutes les cartes. Nous n'allons pas créer chaque carte sous forme scène individuelle, mais c'est possible. Alors laissez-moi simplement cliquer dessus. Permettez-moi de développer cette bulle 5, et nous voulons dupliquer cet arrière-plan. Je vais donc le sélectionner Contrôle D. Je vais changer la couleur du trait. Vers une teinte très pâle mais légèrement plus foncée. Toujours léger. Je veux donc y retourner . J'aime bien ça. Donc, en le sélectionnant, appuyons-le vers le bas avec les touches fléchées. Passons de cette forme de bulle vocale à tous les rayons d'angle soient 30 pour que tous les rayons d'angle soient arrondis, comme ça Maintenant, une chose que je veux que nous fassions à ce stade, si je le fais glisser sur le côté, c'est de sélectionner le rectangle de la carte, la carte BG, et nous voulons y appliquer une ombre portée. Comment appliquer un drop shadow ? Une ombre projetée est un effet, et les filtres sont ce que nous appelons des effets dans Cavalry. Si vous souhaitez appliquer une ombre, un flou, tous ces types d' effets, vous devez utiliser un filtre Je vais donc cliquer sur PAS sur la carte BG. Et en ce qui concerne les filtres, je vais passer à Drop Shadow. Comme vous pouvez le voir, nous avons maintenant une ombre portée, et elle est ajoutée juste là . Je vais donc la sélectionner. Tout ce que vous ajoutez dans Cavalry ressemble à un nœud. C'est pourquoi il apparaît ici individuellement. Dans After Effects, lorsque vous appliquez un effet, il n'apparaît même pas sous forme couche, car il ne s'agit pas d'un nœud, mais d'un nœud ici. Nous pouvons donc jouer avec l'opacité avec l'ombre. Peut le rendre moins visible. Nous pouvons l'étaler. Maintenons simplement la touche Alt enfoncée, ou non, pour voir où cela va nous mener. Quantité floue, peut l'estomper. Oui, j'aime bien. Flouse-le. Réduisons l'Alpha. Peut-être que dans le X, nous pouvons déplacer le côté positif. Nous y voilà. Maintenant, l'avantage du fait que les effets, les filtres et les déformateurs sont des nœuds individuels c'est que vous pouvez les réutiliser Nous pouvons utiliser cette même ombre pour l' arrière-plan de la carte de profil utilisateur. Je peux juste le retirer et le placer à l'extérieur de chacun d'eux. Nous avons maintenant la carte de message et la carte de profil utilisateur. Permettez-moi de sélectionner la carte de message et de la mettre sur le côté comme ça. Cachez ensuite la carte de profil utilisateur que nous avons sélectionnée. Il avait son propre arrière-plan, la carte BG. Nous pouvons donc venir ici pour déposer cette ombre et la faire glisser dans la carte BG. Filtres. Oui, exactement comme ça. Ou laissez-moi simplement annuler cela. Une fois la carte BG sélectionnée, nous pouvons revenir à l'ombre projetée. Et parce que l'ombre projetée, comme vous l'avez déjà vu, est un filtre. Et si on voulait ajouter une ombre à cette carte BG, on la sélectionnerait et on passerait aux filtres. Nous pouvons simplement accéder à ce filtre qui a déjà été ajouté et le faire glisser dans ce champ de filtres de cette carte. Juste comme ça, et ça montre déjà l'effet de l'ombre projetée. Alors c'est tout. Je pense que nous sommes prêts à passer à l'étape suivante, qui consiste à concevoir le titre de l'actualité avant de commencer l'animation Je te verrai donc bientôt. 13. Concevoir une carte de message: Une chose dont je viens de me souvenir, c'est au lieu d'une bulle de texte, ce peuvent être ces boutons de chargement qui indiquent que quelqu'un est en train de taper. Alors pourquoi ne pas entrer dans cette carte de message. Et c'est la bulle de discussion numéro 5. Et en fait, nous avons encore une partie de cette zone de texte ici. Placez-le dans la carte de message et en dehors la bulle de discussion pour que la bulle de discussion soit exactement cela. Mais maintenant, nous voulons supprimer ce texte. Et nous voulons dupliquer ce menu en pointillés et le placer ici Donc carte de message, menu en pointillé, contrôle D pour le dupliquer Je vais appeler cet effet de saisie de texte en pointillés Enter effet de saisie de texte en pointillés Duplicateur d'effets Enter. Maintenant, nous pouvons le faire glisser vers le bas. Et comme il s'agit d'un duplicateur, n'oubliez pas qu'il possède cette distribution que nous pouvons changer de direction et que nous pouvons passer à l' horizontale Maintenant, il se trouve derrière cette bulle vocale. Placez-le donc au-dessus de cette bulle de dialogue. Juste au-dessus, juste en dessous de la forme d'un rectangle. Exactement en face de ça. Maintenant, c'est la bulle vocale numéro 5. Donc, si je sélectionne le rectangle, réduisons la largeur et la hauteur. Et mettons-le sur le côté. Maintenez la touche Shift enfoncée pour vous déplacer afin contraindre en ligne droite Je vais sélectionner un duplicateur en pointillés. Je pense que nous devrions agrandir légèrement l'échelle de ces cercles , maintenant enfoncés, mais aussi en augmentant la taille ici pour les espacer. Je pense que l' échelle de forme est trop grande. Alors peut-être 1,8. Non, c'est trop gros. Et c'est trop gros aussi. Alors 800 peut-être. Et cela peut être une heure et demie demie le sélectionner à nouveau. Je pense que c'est une bonne taille. Maintenant, bien sûr, nous allons l' animer, mais pour le moment, je veux tout de même réduire l' intensité de cette couleur foncée Alors maintenant, permettez-moi d'étendre l'effet de saisie en pointillés sélectionner l'ellipse elle-même et de passer à la couleur du champ Nous voulons réduire l'opacité des couleurs des champs, réduire l'Alpha Peut-être à cet endroit. Nous allons l' animer. Ne t'inquiète pas. Mais pour le moment, je pense que c'est le bon endroit pour mettre fin à tout cela. Dans la leçon suivante, créons le titre de l'actualité avant de passer à l'animation Je te verrai donc bientôt. 14. Design News Headline: Il est maintenant temps de concevoir le titre de l'actualité. Maintenant, nous en avons déjà terminé avec cette capture d'écran, donc je vais simplement la supprimer, sélectionner les deux et maintenir Shift enfoncée pour réduire la taille. Et je vais les y placer. Pas de problème Cela n'a pas vraiment d'importance. Alors maintenant, réduis ça. Nous avons donc deux cartes. Nous avons une ombre qu'ils partagent, et nous avons un arrière-plan. Nous voulons cacher ces deux-là. Contrôlez S pour enregistrer cela. Nous voulons maintenant créer un titre d' actualité ici, suivant les mêmes principes pour nous assurer que le Gizmo se trouve juste au milieu Je vais donc simplement choisir l'outil de texte et le faire glisser pour créer une zone de texte. Et j'ai un exemple de titre ici, cinq compétences technologiques les plus demandées en ce moment Passons à l'outil de sélection. Je vais augmenter la taille. Passons à une autre police. Celui du leader. Audacieux. Vous pouvez choisir la police de votre choix. Réduisons l'interligne. Je pense que c'est terminé. Nous pouvons toujours changer la police d'écriture. Voyons voir ce qu'il en est de Monster Axe. Mais je veux du noir. Très épais Oui, quelque chose comme ça. Si je double-clique dessus, nous pouvons le faire glisser pour augmenter la largeur. Je pense que j'aime bien cette forme maintenant. Revenez donc à la sélection deux. Tant qu'il est toujours sélectionné, je vais faire glisser et double-cliquer dessus, Ctrl A , et je vais taper un sous-sujet ou un sous-titre plus petit Copiez ça. D'accord, c'est trop grand, alors réduisons cette taille Je veux juste une phrase. Quelque chose comme ça. En maintenant la touche Shift enfoncée, je peux la faire glisser en ligne droite vers le bas. Et tant qu'il est toujours sélectionné, je peux le faire glisser à nouveau pour dupliquer et double-cliquer dessus, Contrôle A, date, peut-être une colonne, un outil de sélection. Et la zone de texte est trop grande, alors faites un zoom arrière. En fait, voici ce que je veux faire, c'est le supprimer , le sélectionner et cliquer pour créer un manuel d'une seule ligne au lieu d'un manuel de paragraphes Alors maintenant, changeons cela en date et en colonne. Le billet de blog a été écrit , faites glisser deux fois dessus. Quelle date ? 29 mai 2026 Et pour cela, nous allons utiliser le standard. Pour celui-ci, nous allons également utiliser le standard. Maintenant, laissez-le en gras. Je vais faire glisser la date. Écrit en faisant glisser la touche Alt, en maintenant la touche Maj enfoncée pour se déplacer en ligne droite. D'accord, je n'ai pas pu le faire. Disons, Michelle Lin ou quelque chose comme ça. Je ne veux pas que ce soit noir, alors mettons-le en gras. Audacieux. Je les sélectionne tous dès maintenant. Nous pouvons le grouper et l'appeler News headline Nous pouvons également déplacer son point de pivot si nous n'aimons pas où il se trouve, peut-être que nous le voulons là. Maintenant, une autre chose que nous pouvons ajouter, ce sont les points forts, cinq principales compétences techniques. Oui, disons celui-ci. Et tant que c'est toujours sélectionné, je vais faire glisser le pointeur « forte demande », sélectionner ce côté et tirer. Nous voulons donc le surligneur. Pendant qu'ils sont encore sélectionnés, je vais passer à opacité et réduire l' opacité à peut-être 70 Et maintenant, voici les effets de frappe ou de surligneur que nous allons animer au-dessus du texte Réduisons donc cela. Supposons que vous utilisiez un marqueur qui ne couvre pas la totalité du texte. Mais nous allons animer ce texte, animer ces En fait, remplacons-le par un surligneur vert. Ou quelle que soit la couleur que vous souhaitez utiliser. C'est tout pour le moment. Je pense que c'est le bon endroit pour y mettre fin. Je voulais que nous créions le titre des actualités et que nous n'oubliions pas d' ajouter ces formes au groupe des titres des actualités afin que lorsque vous déplacez le groupe, vous déplacez tout Lorsque vous animez le groupe, vous animez tout. Contrôles. 15. Curseur de souris: Avant de passer à l'animation, nous aurons besoin d'un curseur de souris. Et comme il s'agit d'un nouveau projet, nous n'avons pas le curseur de souris que nous avons créé précédemment. Nous pouvons maintenant importer le curseur de la souris en tant que précomposition ou ressource précomposée et commencer à l'utiliser, mais nous n'avons pas le temps de commencer à parler de précompositions Nous allons donc devoir créer à nouveau un curseur de souris, mais cela dépend de vous. C'est ton exercice. Créez un curseur de souris en suivant les étapes que nous avons suivies précédemment dans les leçons sur les boutons et créez un joli curseur de souris que nous pourrons utiliser dans notre animation. Je te verrai dans la prochaine leçon. 16. Animer le curseur: Alors maintenant, comme vous pouvez le voir, j'ai déjà créé mon propre curseur de souris, et il est temps de commencer l'animation. Alors permettez-moi de cacher le titre de l'actualité. Et comme vous pouvez le constater, c'est ce que nous avons. Je veux le rendre plus petit. Je vais donc le sélectionner et le maintenir enfoncé, je vais déplacer parce que nous voulons tout adapter sur cet écran, puis tout animer. Je veux donc le pousser jusqu'au coin de la rue. Et je veux dévoiler les deux autres. Nous pouvons le placer ici. En fait, mettons-les vers le haut et sur le côté. Sélectionnons-les tous, sauf le curseur de la souris, et réduisons simplement la taille comme vous le souhaitez. Nous voulons que chacun d'eux dispose de suffisamment d'espace pour tenir dans l'écran de cette manière sans que l'autre ne soit visible. Nous voulons donc ceci quelque part ici et cela quelque part ici. Nous allons bientôt mettre de l'ordre dans l'arrangement. Nous voulions simplement créer un endroit approximatif où la souris puisse déplacer d'un endroit à l'autre de manière animée. Maintenant, cela devrait être le contraire comme ça. Nous voulons maintenant réfléchir au parcours du curseur de la souris. Comment va-t-il se déplacer et pendant combien de temps à chaque point donné ? C'est donc notre travail maintenant. Bien entendu, la première étape consiste à créer le chemin que la souris va suivre du début à la fin, puis nous allons chronométrer chaque partie où elle interagit avec un élément Alors, disons, laisse-moi choisir le crampon. Nous voulons que le curseur de la souris vienne ici il passe ensuite le curseur sur le nombre d' étoiles et qu'il clique dessus Cela va commencer comme un profil utilisateur non classé avec juste les étoiles ayant un contour. Ensuite, lorsque vous cliquez dessus, ils auront une couleur de champ Ensuite, la souris va descendre ici jusqu'au bouton du message et cliquer dessus. Alors, va ici. Nous allons voir ces trois boutons animés, puis passer à cet endroit. Le chemin que nous voulons suivre est donc similaire à celui-ci. Il n'est pas nécessaire que ce soit comme ça. Peut-être jusqu'à cet endroit, puis vous hésitez un peu, puis vous cliquez sur le score de cinq étoiles, puis vous passez au bouton du message, mais nous voulons que ce soit un mouvement incurvé. Ensuite, nous pouvons simplement continuer cette courbe. Le curseur de la souris peut se déplacer à cet endroit. Ensuite, après y être restés un moment, nous pouvons naviguer jusqu'à ce point. Alors évadez-vous. C'est donc le chemin que le curseur de la souris va emprunter. Bien, allons-y et renommons le curseur de la souris, la forme, la saisie, le curseur de la souris et le chemin En fait, oui, appelons-le simplement Path et sélectionnons également le curseur de la souris et Control G. Maintenant, nous les avons en groupe, et je voudrais appuyer sur Entrée et les appeler curseur. Donc, si nous développons, nous avons le curseur de la souris et le chemin dans un seul groupe. Maintenant, nous allons également créer et ajouter un Pathfinder. N'oubliez pas que nous avons besoin d'un éclaireur. Ici, et le Pathfinder nous demande : Où est le chemin que vous voulez emprunter ? Voici donc le chemin. Nous traçons donc ce chemin jusqu'ici. Il connaît maintenant ce chemin et l'attribut de position du curseur de la souris doit être piloté par le pathfinder Faisons maintenant glisser le pathfinder dans la position du curseur de la souris Maintenant que nous n'en sommes qu' au tout début, nous pouvons définir un cadre clé pour le voyage des éclaireurs Et jouons simplement à ceci pour voir où nous voulons que le curseur de la souris atteigne tel point, peut-être à cet endroit. ce moment-là, le curseur de la souris devrait avoir atteint cet endroit. Et comme vous pouvez le constater, une image-clé a été créée automatiquement Maintenant, en même temps, nous voulons modifier ce chemin afin que le curseur de la souris ne soit pas trop haut. Le curseur de la souris est trop haut au-dessus du nombre d'étoiles. Nous pouvons donc passer à la sélection directe et modifier le chemin. Nous pouvons donc sélectionner ce point, maintenir la touche Maj enfoncée, sélectionner ce point ou simplement sélectionner ce point et le placer là bas. Nous voulons qu'il pointe là. Mais en même temps, je souhaite également sélectionner ce curseur et en réduire la taille. C'est trop gros. Ceci est vérifié pour s'assurer que les deux sont contraints de fonctionner ensemble. Et si je passe à nouveau à l'outil de sélection directe, sélectionnez ce point. Juste là. Ce ne sont donc que de petits ajustements que vous vous demanderiez comment faire. J'essaie juste de te montrer comment faire. Maintenant, à ce stade, nous ne voulons pas que le curseur de la souris soit là. Je voudrais le reculer un peu. Si nous passons au Pathfinder, comme vous pouvez le voir, nous sommes sur l'image-clé verte Cela signifie que nous sommes sur l'image-clé et que nous pouvons modifier la valeur de l' image-clé Nous pouvons y retourner. Nous voulons qu'il soit là. Alors, pendant un moment, nous voulons nous attarder ici. Peut-être que d'ici là, allons-y. Je peux donc le copier et le coller ici. Cela signifie que cette valeur est copiée à cet endroit et qu'elle y restera avant toute autre action. Alors maintenant, passons peut-être à cet endroit et continuons peut-être jusqu'à ce point. Cela suppose donc que vous cliquez sur le score de cinq étoiles. Donc ça arrive comme ça, retarde, puis se déplace et clique sur le score de cinq étoiles. Nous voulons maintenant copier cette dernière image-clé parce que nous voulons qu'elle y reste un moment et qu'elle y soit collée Ces deux valeurs sont donc les mêmes ici. Il y restera donc après avoir cliqué dessus. Retardez un instant. Ensuite, à partir de là, nous pouvons commencer à descendre. Voyons donc combien de temps je veux que cela dure en descendant de là jusqu'à cet endroit. Donc, quand il atteindra 160, il devrait être à 36 points disons 55 45. Oui, juste là. Donc ça va se passer comme ça. Retardez là-bas. Vérifiez le nombre d'étoiles, puis cliquez sur le bouton de message avant. Très bien maintenant, allons-y un instant car nous voulons retarder le moment où nous cliquons dessus Donc ça va y arriver, puis attendre. C'est là que nous allons cliquer dessus, puis commencer à nous déplacer. Nous allons donc cliquer dessus à 200 peut-être. Nous disons donc simplement que cette valeur est la même que cette valeur. Ainsi, entre ce point et ce point, le curseur de la souris ne doit pas changer de position. Mais ensuite, on pourra commencer à bouger. Nous passons maintenant à ce point. Nous devons donc augmenter le temps passé ici. Passons donc aux paramètres de composition. Faisons en sorte qu'il y en ait 1 000. 1 000. Maintenez la touche arrière pour effectuer un zoom arrière. Et maintenant, comme vous pouvez le constater, nous avons plus d'espace. Je peux tous les sélectionner, les déplacer jusqu'à la fin et les maintenir enfoncés pour zoomer. Là-bas, pour voir le point culminant à la fin, et maintenant, tirez vers la fin. Juste là. Donc maintenant, nous disons qu'une fois qu'il y est, nous cliquons, puis il commence à bouger. Passons donc au Pathfinder et continuons. Peut-être à cet endroit. Copions cette valeur et laissons-la s'y attarder pendant une seconde. Ensuite, collez avant passer enfin au texte du titre de l'actualité Ajoutons donc une image-clé pour le titre de l'actualité. Juste là. Sauvegardez ça. Donc, si je maintenais la touche arrière enfoncée et que je fais un zoom arrière avec la molette de ma souris, reviens au début. Zoomez ici. Cliquez sur ce message de la souris, déplacez-vous là, voyez les trois boutons. Exactement Disons, jusqu'à 450. Donc, contrôlez K pour faire apparaître les paramètres de composition 450 ou peut-être même 400. Exactement Évasion. Allons-y. Prends ça. Très bien maintenant, jouons sans. Cachons le chemin. Où se trouve le chemin ? Cachons-le. Jouons à ça. Exactement J'adore ça. Passons à 360, Control K. Il nous reste encore trop de temps. 360. Oui, Escape. Très bien, Control S. Maintenant, il ne nous reste plus qu'à sélectionner. Passons à l'éditeur de graphes. Et nous voulons passer au Pathfinder. N'oubliez pas que c'est ce que nous avons fait pour animer le voyage. Nous voulons venir ici, maintenir la touche Maj enfoncée pour réduire la hauteur, les sélectionner toutes, maintenir la touche enfoncée, cliquer sur l'une d'elles, et zoomons dessus. Maintenez la touche Shift enfoncée et créons un bel ensemble de courbes en S partout. Cela signifie donc que le curseur de la souris se déplacera dans de meilleures animations. Voyons juste ce qui se passe ici. Allons-y Ouais Exactement Il est donc touché lentement puis rapidement puis lentement. C'est bon. Nous avons pas mal de choses à animer. Nous n'avons pas non plus animé le classement des cinq étoiles. Quand on clique dessus, il devrait se comporter d'une manière ou d'une autre. Lorsque le curseur de la souris passe au-dessus de ce bouton violet, il doit afficher des effets de survol. Il faut qu'elle réagisse. Et puis, quand il arrive ici, il doit également survoler Tous ces effets, nous avons besoin de ces réactions. Mais avant cela, animons d' abord la caméra Je te verrai dans la prochaine leçon. 17. Animez la caméra: Il est maintenant temps d' animer la caméra. Voyons donc comment procéder. Tout d'abord, je voudrais réduire le pathfinder ici et réduire le curseur. Qu'est-ce qu'on a d'autre ? Permettez-moi simplement de faire glisser l'ombre vers le bas pour que nous ayons toutes les formes ci-dessus ici et ces autres aides là-bas Donc, en ce moment, nous animons la caméra. Donc je veux dire plus appareil photo. Maintenant, nous avons un appareil photo. Et pour que l'appareil photo fonctionne, nous devons tout convertir ici en 2,5 D. Cochons donc toutes ces cases. Non, oui, y compris l'arrière-plan car nous voulons également que l'arrière-plan bouge avec tout lorsque nous déplaçons la caméra. Maintenant, voici la caméra. C'est ce que nous avons sélectionné, et nous pouvons faire bouger les choses. Ainsi, par exemple, nous ne voulons pas regarder. Je veux une forme libre, c' est le type que je veux. Dans les prochaines leçons ou dans les prochains cours, je vous montrerai comment utiliser ces autres types, mais pour le moment, nous allons utiliser de la mousse gratuite. Cela nous permet simplement de nous déplacer et de naviguer très facilement de cette façon. Et vous remarquerez que c' est maintenant la caméra qui bouge. Supposons que nous tenions la caméra et que nous nous déplaçons dans le monde. Le monde ne bouge pas. Nous déménageons. C'est la caméra qui voit ce qu'elle voit et nous animons ce qu'elle regarde Nous ne voulons donc pas de cette couleur blanche. Nous devons donc passer à l'arrière-plan et augmenter sa taille. Alors, redimensionnez-le. Je vais vérifier et augmenter la taille. C'est bon Maintenant, je veux nous voir, parce que c' est du 2,5 D, passons à la caméra. C'est 2,5 D. Nous pouvons zoomer sur l'axe Z comme ceci et le déplacer comme ça. Zoomez comme ça et comme ça. Peut-être jusqu'à cet endroit. Maintenant, nous n'en sommes qu'au tout début, nous pouvons donc définir une image-clé ici Donc, avec la caméra sélectionnée, et bien sûr, nous voulons nous assurer que tous ces trois éléments, si je tiens enfoncé, nous avons défini une image-clé pour le X, le Y et le Z. Ainsi, les axes X, Y et Z savent que nous commençons ici à ce stade C'est pourquoi nous avons les images-clés. Maintenant, avançons un peu. Maintenant, comme vous pouvez le voir, la souris est arrivée . Maintenant c'est juste là. Cela nous permet de copier ces images-clés, copier et de les coller afin de pouvoir zoomer lorsque nous les déplaçons pour cliquer sur le score de cinq étoiles Donc, tout d'abord, à ce stade, c'est juste là. En fait, avançons un peu, juste là. Je veux donc faire glisser ces images clés juste là. En fait, reculons un peu. Maintenant, nous devons nous déplacer pour zoomer à ce stade. Donc, dans l'axe Z, passons à l'axe Z. Axe X et axe Y. Un peu sur l'axe X. Maintenez la touche de contrôle enfoncée pour vous déplacer par petits incréments. Et maintenant, nous voulons rester ici un moment. Je vais sélectionner cette copie, puis avancer un peu, jusqu'au moment où nous cliquons dessus. Maintenant, nous supposons que c'est le moment où nous cliquons dessus, collez-le. Pendant tout le temps, saisissez les valeurs ici qui seront les mêmes jusque-là, donc nous n'allons pas nous déplacer autour de la caméra. Jouons-y et voyons. Donc, d'ici à ici, nous déplaçons la souris pour cliquer dessus. Nous devons retarder la caméra jusqu'à cet endroit. Alors permettez-moi de cliquer sur ce copier-coller ici. Cela signifie que nous allons attendre ce moment avant de commencer à déménager. Alors maintenant, partons. Donc, dans l'axe Z et dans l'axe Y, encore une fois l'axe Z. Axe Y. Je pense que c'est un bon endroit. Dis ça, Control. Je vais également copier l'axe X et coller là, car il sera également animé dans le futur dans le reste de la chronologie. Nous voulons donc qu'il sache également qu'il est censé conserver sa position et sa valeur d'axe jusqu'à ce qu'il soit modifié. Alors maintenant, nous allons également nous attarder un instant. Jusqu'à ce que le curseur de la souris se déplace, car à un moment donné vous allez cliquer sur le bouton Disons donc qu'on va cliquer dessus à ce moment-là. ce moment-là, il aurait dû conserver la même position. Collons ces mêmes positions ici. Et lorsque vous cliquez dessus, nous passons maintenant à l'autre endroit, sur l'autre carte Donc, en fait, allons-les plus loin. Contrôlez S pour enregistrer. Revenons en arrière et rejouons-y depuis le début. Mmm, hum. Retardez, cliquez, puis déplacez-vous. Alors maintenant, nous commençons à déménager ici. Nous commençons à avancer à partir de là, et le temps que nous en là, nous verrons ce que nous avons. Le temps que nous en soyons arrivés là, nous l'avons fait et zoomons également légèrement sur le Z. Exactement, comme ça. Après avoir tardé un moment, le bouton est cliqué Ensuite, nous suivons la direction que prend le curseur de la souris. Nous y arrivons avant cela. Retardons ensuite un instant, copions-le jusqu'à ce qu' il soit temps de le déplacer. Alors collons-le juste là avant de passer au titre. Alors contrôlez S, puis jouons-y. Message cliqué. Nous allons ici pour voir l'effet de saisie des messages. À partir de là, partons et voyons ce que nous avons. Déplaçons le Z et zoomons. X. Je pense que c'est un bon endroit. Nous l'avons donc maintenant. Nous sommes restés ici un moment, puis nous sommes passés au titre de l'actualité, et c'est là que nous nous détendons Ou devons-nous agir lentement ? Et si on allait plus vite ? Oui, plus vite c'est mieux. Très bien, déplaçons-le là-bas. Très bien, alors jouons-y depuis le début. Joue ça. Cliquez sur le message de démarrage Adam Savaging. Nous pouvons les voir répondre. Alors lis ça. C'est là que nous allons animer cet effet de surligneur Faisons encore une chose importante. Comme vous pouvez le constater, l'animation semble très terne et linéaire. Nous voulons lui donner cette sensation d'animation souple et élastique. Donc, cet assouplissement rebondissant. Donc, comme d'habitude, sélectionnons-les tous Shift enfoncée pour réduire la hauteur . Sélectionnez-les tous. Maintenez la touche enfoncée et cliquez sur l'une d' entre elles pour la transformer en courbes de Bézier Maintenez la touche Shift enfoncée. Et créons de jolies courbes comme ça. Formes en S. Très bien, revenons au chronomètre et jouons-y depuis le début et C. Oui. Exactement Ça a l'air très professionnel. J'adore ça. Maintenant, imaginez que nous ajoutions de la musique et des effets sonores. Ça va être épique. Dans la leçon suivante, nous allons voir comment animer maintenant ces autres éléments Je te verrai bientôt. 18. Animer la carte de profil d'utilisateur: Il est maintenant temps d' animer les réactions du clic ou du survol du curseur de la souris Nous allons donc commencer par la carte de profil utilisateur, qui est la suivante. Et la première chose que nous voyons ici, c'est que le curseur de la souris arrive ici et se rapproche du nombre d'étoiles. Animons donc le nombre d'étoiles. C'est dans la carte de profil de l'utilisateur. Duplicateur 5 étoiles. Maintenant, ce que nous voulons faire, c'est dupliquer ce duplicateur d'évaluation à cinq étoiles, car nous en voulons un qui n'a pas de remplissage et un autre qui en a un Laisse-moi te montrer. Donc, une fois cette option sélectionnée, et n'oubliez pas, nous avons placé les cinq étoiles, l'étoile elle-même, la forme de l'étoile à l'intérieur du duplicateur, juste pour pouvoir les déplacer en une seule Nous voulons donc sélectionner le duplicateur à cinq étoiles et le contrôle D. avons maintenant deux Je vais le saisir et dire, remplir et le sélectionner, entrer et dire « trait ». Ce sera celui qui aura l'accident vasculaire cérébral. Je vais développer cela accéder au champ ici et désactiver ce remplissage. Je n'ai qu'un accident vasculaire cérébral. Il ne nous reste plus qu'à suivre la chronologie. Avant que le curseur de la souris n' atteigne le nombre d'étoiles. Alors ici, sélectionnons celle qui vous convient, revenons au tout début et sélectionnons cette poignée. Et en gros, ce que nous disons, c'est qu'à partir de ce moment, jusqu'à présent, il suffit de montrer ce coup de cinq étoiles. Mais quand nous en arrivons là, introduisez celui qui vous plaît. Nous n'avons donc vraiment rien animé. Nous venons de déplacer l'un d'entre eux plus loin dans le futur. Cela produit donc l' effet que lorsque nous le survolons, il change de couleur Je veux maintenir la touche Alt enfoncée, zoomer ici avec la molette de la souris, sélectionner cette option. C'est là que tout doit commencer. Très bien, prenons ça comme ça. Très bien, maintenez la touche Alt enfoncée et la souris pour effectuer un zoom arrière. Alors jouons-y et voyons voir. Comme ça. J'adore ça. Maintenant, la prochaine chose que nous allons faire ici est d'en arriver là. Lorsque le pointeur de souris atteint ce bouton violet, la couleur devrait changer. Il s'agit donc du bouton « Suivre » dans le profil utilisateur. C'est ici. Développez donc ce bouton de suivi. Pour la forme rectangulaire. Nous savons que c'est à ce moment que nous voulons changer de couleur. Donc, un rectangle. Couleur de remplissage. Nous allons maintenir le bouton enfoncé et cliquer dessus. À ce stade, nous disons que la couleur de ce rectangle devrait être cette couleur pour le moment. Mais maintenant, revenons légèrement en arrière. En fait, nous le voulons, je le veux juste là. C'est là que nous voulons que ce soit cette couleur. Mais lorsqu'il passe à l' image suivante dans le bouton lui-même, il doit être d'une couleur différente. Et avant cela, commençons par gérer une fois que le curseur de la souris a quitté le bouton. Il est donc toujours dans le bouton, toujours dans le bouton, à l'extérieur du bouton. Donc, à ce moment-là, ce devrait également être cette couleur, la couleur normale, en pâte. Mais maintenant, entre les deux, ça devrait être d'une couleur différente. Alors de quelle couleur ? Donnons-lui un violet plus foncé. Automatiquement, certaines images clés ont été introduites. Donc, à ce stade, violet, violet clair, foncé, puis à nouveau clair. Alors jouons-y et voyons voir. Cela produit donc cet effet de survol. J'adore ça. Nous voulons faire de même pour le bouton de message. Donc, juste avant ce point, laissez-moi réduire et développer le bouton de message, le rectangle ici. Donc, à ce stade, nous disons que nous voulons que la couleur de ce rectangle soit cette couleur. Et lorsque nous arrivons à ce point où le curseur de la souris pointe sur le bouton, définissons une autre image-clé Donc, en maintenant enfoncée, nous allons définir une autre image-clé, mais nous allons l' assombrir légèrement Comme ça. Et, bien sûr, après cela, lorsque le curseur de la souris quitte le bouton, il doit revenir à la couleur. Donc, copions-le. Et avançons légèrement. Cela va y retarder. Disons qu'à ce moment-là, à ce moment-là, collez. Nous avons donc cet effet de survol, cet effet de survol. Et quand il sera là-bas, donnons-lui également cette animation de position. Réduisez ce rectangle, sélectionnez le bouton du message dans son ensemble et animons la position à cet endroit Donc, en revenant ici, nous cliquons dessus à ce moment-là. Alors, juste là, développons cela. Copiez-le, collez-le. Maintenant, entre les deux, appuyez dessus. Donc comme ça. Ensuite, nous commençons à bouger. Alors allons-y. Jouez. Exactement. Ici, nous voulons animer les points, et c'est ce que nous allons faire dans la prochaine leçon Je te verrai bientôt. 19. Animer la carte de message: Il est maintenant temps de voir comment animer Laisse-moi juste apporter l'écran Laisse-moi juste appuyer sur F pour le remplir. Ensuite, nous voulons voir comment animer ces trois points ici Voici donc la carte de message. Je vais l'étendre. Et je pense que ces trois points ont été regroupés avec ça. J'ai oublié de les séparer parce que je le cherchais et je l'ai trouvé ici. Et pourtant, ce rectangle en forme de six est une texteria. Je vais donc le mettre dans la bulle 5 parce que c' est la bulle 5, que je devrais appeler effet de saisie en pointillés parce que ce n'est pas une bulle vocale Maintenant, si nous l'étendons, nous trouverons le duplicateur que nous recherchions Ce duplicateur comporte trois points. Nous voulons donc animer ces trois points, et l'attribut spécifique que nous voulons animer est l'opacité, de sorte qu'à cette seconde, le premier point soit plus clair que le second et le troisième le La seconde suivante, le point suivant est plus clair ou plus pâle et continue le long de la chronologie Nous voulons donc alterner l'opacité. Alors, comment s'y prendre ? un bon moyen d'alterner oscillateur est un bon moyen d'alterner des valeurs ou des données dans Cavalry Un oscillateur est un déformateur, et nous allons voir comment l'utiliser Mais si nous voulons appliquer un déformateur à chaque élément d'un duplicateur ou un groupe dupliqué de cette manière, nous devons y accéder via le déformateur submsh Une fois le duplicateur sélectionné, je vais accéder aux déformateurs et sélectionner le déformateur submsh sélectionner le déformateur submsh Je vais donc maintenant sélectionner le sous-maillage, et voici ce que nous avons. Le sous-maillage est un déformateur qui sélectionne simplement chaque élément d'un duplicateur et ce que vous avez demandé au duplicateur de Donc, si nous avons un groupe de points, le sous-maillage sélectionne le premier élément du duplicateur et fait ce que vous lui avez demandé de faire Ensuite, il recommence, sélectionne le deuxième élément dans le duplicateur et applique ce que vous lui avez demandé d' Ensuite, il passe au troisième élément du duplicateur et applique ce que vous lui avez demandé d'appliquer Donc, avec le submsh sélectionné, nous allons passer à la couleur du champ Et que demandons-nous aux sous-marins de faire pour chaque objet ? Il s'agit du champ Alpha. Alpha est une question d'opacité. Nous voulons dire à cela qu'il faut ajouter un oscillateur. Donc ici, je vais dire oscillateur. Maintenant, je vais sélectionner le sous-maillage et faire glisser l'oscillateur dans le canal Alpha Maintenant, je vais passer à l'oscillateur. Et si nous jouons à ce jeu, vous verrez qu'il se passe quelque chose, mais que cela va trop vite. Peux-tu les voir ? Nous voulons donc tout d'abord augmenter également la valeur maximale et la valeur minimale. Nous ne voulons pas qu'il fasse trop sombre. Maintenant qu'il oscille, le plus bas qu'il puisse atteindre est de 21 en termes d'opacité, Comme vous pouvez le voir maintenant, il oscille de 21 à 48. Si je peux donner 70 ou 80, il fera plus sombre sur le côté supérieur. Comme ça. Maintenant, l'avantage des déformateurs, c'est qu'il n'est pas nécessaire de les cadrer au clavier. Elles se produisent automatiquement, comme vous pouvez le voir, nous n'avons ajouté aucune image-clé, mais c'est de l'animation Mais le problème, c'est que si on y joue, ça se passe trop vite. Il clignote et il semble que tous les points clignotent en même temps Ce que nous voulons faire, c'est ajouter un décalage ici. Maintenant, si on y joue, mais ils bougent vite. Passons donc à la fréquence et disons 0,1. Essayons ça. Joue ça. OK, c'est trop lent. 0,3. 0,4. Oui, comme ça. On peut même dire 0,5. Nous y voilà. C'est la seule chose que nous étions censés animer sur la carte de message La prochaine chose que nous allons faire dans la leçon suivante est animer ces effets de surligneur Je te verrai donc bientôt. 20. Animer le titre de l'actualité é: Dans cette leçon, nous voulons voir comment animer cet effet de surligneur Voici donc le titre de l'actualité. Je vais développer cela. Et ce sont les deux dernières formes que nous avons dessinées. Je vais donc appuyer sur Entrée et le renommer Highlighter per Enter, haut plus clair, plus bas pour pouvoir faire la distinction entre les deux Maintenant, nous voulons sélectionner ce surligneur, haut d'abord, et je veux y ajouter un déformateur d'alignement Et ce que cela fait, c'est qu'avant de l'ajouter, si je dis surligneur en haut et que je passe à l'échelle de taille, nous pouvons animer ces champs Nous pouvons animer l'échelle. Mais le problème, c'est qu'il va toujours grandir à partir du centre, mais nous voulons qu'il grandisse de ce côté vers la droite, la même manière que vous surlignez une phrase. Alors, comment faites-vous cela ? Nous voulons aligner cela. Nous voulons utiliser ce que l'on appelle un déformateur d'alignement pour dire grandir de ce côté » ou se comporter comme on va se comporter de ce côté Une fois ce surligneur sélectionné, je vais passer à l'alignement des déformateurs L'alignement va être ajouté ici. Donc, comme toujours, je peux simplement ajouter ce surligneur à l'alignement Et ou je peux ajouter cet alignement au surligneur. Maintenant que cela s'aligne ici, je peux l'utiliser pour pousser les choses vers la gauche ou vers la droite. Maintenant, si j'appuie dessus comme ça et que je sélectionne le surligneur lui-même, redimensionner vers le haut ou vers le bas dans le X signifie que nous redimensionnons maintenant de ce côté Ce que je peux faire maintenant, c'est le positionner ici même dans les cinq compétences techniques à partir de là, augmenter l'échelle jusqu'au bout. Je veux donc voir d'où je vais le jouer. Je vais donc y jouer. Il va donc s'animer et une fois arrivé à ce point, il va attendre une seconde, puis commencer à dessiner à partir de là Je veux donc placer une image-clé ici sur le surligneur Alors, redimensionnez, tout d'abord, définissez un cadre clé. Et pour ce qui est de l'échelle, je voudrais en fait me laisser utiliser la touche fléchée vers le bas jusqu'à ce qu'elle disparaisse. Donc, à ce stade, l' échelle du X est nulle. Maintenant, si je joue, à ce moment-là, je voulais avoir dessiné le surligneur dans son intégralité Alors dessinons-le. Donc, d'ici à là, ça va dessiner ça. Voyons voir, joue. Exactement. Ensuite, à partir de là, nous devons faire de même pour ce deuxième surligneur Je vais sélectionner la partie inférieure, puis passer à l' alignement des déformateurs. Où est l'alignement ? Je vais le mettre sous le surligneur qu'il est en train d'aligner pour pouvoir simplement le réduire et l'étendre Mais maintenant, sélectionnons l'alignement et poussons celui-ci jusqu'au bout. Sélectionnez maintenant le surligneur lui-même. Nous devons donc le positionner ici. Et maintenant, nous ne pouvons saisir que la balance. Donc, image-toi la balance. Zéro à ce moment-là. Et puis, à ce moment-là, un. Exactement. Donc, ce que nous devons faire, c'est également étendre cela. Appuyez sur le bouton Ctrl enfoncé, sélectionnez-le, passez à l'éditeur de graphes, déplacez le curseur, faites défiler la page vers le bas, sélectionnez-les. Maintenez la touche Shift enfoncée. Allons-y. Maintenez la touche Shift enfoncée pour réduire la hauteur, puis zoomez. Maintenant, revenons ici, jouons et voyons ce qui se passe. C'est du rap, mon ami. Il ne reste plus que les effets sonores. Nous voulons de la musique de fond des sons de clics et tout ça. C'est ce que nous allons faire dans la prochaine leçon. 21. Ajouter des effets sonores: Il est maintenant temps d'ajouter du son à notre projet. Je voudrais donc revenir sur notre site Web préféré pour les ressources, s'appelle Pixel Bay. En plus des effets sonores, ils proposent également de la musique gratuite. Je vais donc choisir la musique. Et vous pouvez choisir le type de son que vous souhaitez. Disons donc de la technologie ambiante. Maintenant, allez-y, choisissez une bande son ici et téléchargez-la. Maintenant, il y a une chose que j'aime faire, c'est regarder ça. J'aime télécharger uniquement les ressources dotées de ce bouclier d'identification de contenu, et ce n'est pas pour rien. Si je l'ouvre dans un nouvel onglet, l' ID de contenu est enregistré. Et si je dis «   téléchargez-le gratuitement », je vais pouvoir télécharger un certificat de licence. J'ai donc le rythme. J'ai donc l'instrument et la licence. Si j'ouvre la licence, elle est là. Il s'agit de la licence qu'il vous sera demandé de fournir sur YouTube. Si vous publiez votre vidéo et qu'il existe un avis d'identification du contenu, vous sera demandé de prouver que vous êtes autorisé à utiliser ce son. Voici donc ce que vous allez fournir. Il y a un endroit que vous allez coller. C'est très simple, très facile, quelques minutes. Il existe de très nombreux autres instruments ici sans une telle licence, et leur utilisation est totalement gratuite Le problème, c'est que parfois vous pouvez l'utiliser et que vous ne serez peut-être pas signalé pour quoi que ce soit Mais dans le futur, il se peut que vous vous réveilliez un matin et que vous vous rendiez compte qu' un avis de violation de l'identifiant de contenu été publié sur la base de cet instrument, et qu'il n'y a aucune licence à télécharger. Vous devez donc afficher cette vidéo vers le bas ou trouver des moyens de supprimer la section où la chanson est jouée. Évitez donc d'utiliser des instruments sans identifiant de contenu. Revenons aux effets sonores. Et je veux rechercher si nous avons déjà téléchargé un clic Sound. Nous voulons également télécharger un ssh, quelques sons ssh. exemple, OK, mon volume est bas, alors laisse-moi juste jouer ça. Ouais. Recherchez donc les sons qui se produiront au fur et à mesure que les choses bougeront dans la vidéo. Ce sont ces choses qui font que le son est génial. Je reviendrai pour vous montrer ce que j'ai pu télécharger. À bientôt. Comme vous pouvez le voir, j'ai pu télécharger quelques effets sonores et un instrumental de fond. Je vais donc simplement les faire glisser dans ce dossier. Et maintenant, ils vont être importés en tant que groupe. Si je l'élargis, tous mes sons sont regroupés dans un seul groupe. Commençons donc par le son principal. Oh, attendez. C'est dans un autre endroit. Permettez-moi de double-cliquer dessus. Permettez-moi de le réduire et de double-cliquer dessus. C'est donc la chanson que je veux utiliser comme fond sonore. Je vais le traîner là-dedans. Et je vais le faire glisser en dessous l'arrière-plan, en dehors de l' arrière-plan, mais en dessous. Je veux que le boom commence ici. Non, juste ici. Oui, comme ça. Maintenant, nous avons besoin d'un clic de souris ici. En fait, nous avons besoin d'un clic de souris ici lorsque nous attribuons une note de cinq étoiles. Alors plaçons-le juste là. Puis contrôlez D pour le dupliquer. Avancez. Juste là, nous avons également besoin de cet endroit. Alors jouons-y. C'est bon. Ajoutons un swoosh Oui, comme ça. Vérifiez ceci. Nous pouvons en avoir un plus lent ici. C'était cet autre fils. Prenez votre temps pour le rendre parfait. Oui, voyons voir ça. Nous allons régler le volume. Ne t'inquiète pas. Ouais. Bien maintenant, alors que nous dérivons d' ici à là, il nous en faut un autre Dupliquons simplement ceci et plaçons-le ici. Donc, pour le moment, nous n' essayons pas d'être parfaits. Contrôlez D une fois de plus pour finaliser ici. Nous y voilà. Enfin, les points forts sont sonores. C'est où ? Est-ce que c'est au début ? Ouais. Contrôle D. Très bien. Maintenant, je vais devoir augmenter le volume de mon haut-parleur pour réguler le son pendant un moment. Alors donne-moi juste un moment. Je veux équilibrer le son. Cette traduction est donc trop forte. Négatif 16. Disons moins dix. Il devrait donc également être négatif de 20. Oh, ça devrait être moins dix, moins 20, moins dix, moins 20, moins 20, probablement moins 20, et ces moins 15 chacun. Bien, commençons par la discussion. Disons également moins 20. Tu vois, non, je pense toujours à moins 20, moins 30. C'est encore trop fort. Ouais. J'ai donc joué avec le volume de chaque son, et je pense que j'aime ce que nous avons actuellement. Ce n'est pas parfait, mais c'est bien mieux. Alors, prenez votre temps et jouez avec le réglage du volume ici. Travaillez sur les points négatifs, plupart du temps parce que tout ce qui est positif, proche de 1 ou plus , est trop fort. Comme vous pouvez le voir, la plupart des miens ici sont moins 20, moins 16, moins dix, moins 20, dans les dizaines négatifs. Donc Control S. Je vais le dire, et nous en avons maintenant terminé avec le son. Maintenant que nous avons terminé le design et l'animation complets, il est temps d'exporter notre vidéo. Comment s'y prend-on ? Découvrons-le dans la prochaine leçon. À bientôt. 22. Exportez: Le projet est presque terminé, mais nous devons l'exporter pour le partager avec les gens. Comment s'y prend-on ? Donc, la première chose à faire est de nous assurer que notre espace colorimétrique est réglé sur au moins pour moi. Ce qui fonctionne, c'est l'espace de travail couleur Rec seven oh nine. Maintenant, si vous l'activez et que remplacez par une autre valeur ici, vous risquez de ne pas obtenir les résultats escomptés. Tout d'abord, simplement parce que nous avons activé la gestion des couleurs, toutes nos couleurs ont changé ici. C'était violet. Maintenant c'est bleu. Je n'ai donc pas beaucoup joué avec la gestion des couleurs dans Cavalry. Je ne joue avec le logiciel que depuis moins d'un mois. C'est donc quelque chose sur lequel je suis ici pour en savoir plus. Donc, ce que j'ai trouvé qui fonctionne pour moi, c'est désactiver cela. Réglez ce Non, allez ici et réglez-le sur Rec seven oh nine, désactivez-le. Accédez ensuite au gestionnaire de rendu. allons donc sélectionner la composition actuelle, et nous verrons tous les paramètres par défaut. Je ne change pas grand-chose ici, peut-être le nom de l'animation de l'interface utilisateur de la composition. Et le dossier de rendu automatique est le dossier de rendu créé automatiquement qui a été créé lorsque nous avons créé l'animation de l'interface utilisateur, les rendus Souviens-toi de ça. Rien d'autre ici ? Bien entendu, avant le rendu, vous pouvez toujours accéder aux paramètres de composition et modifier la plage d'images, mais cela changera également l'emplacement vos images clés, car votre trajectoire et tout ce que vous avez créé sont basés sur cette taille de la chronologie. Si vous étendez la chronologie, cela signifie que toutes ces images clés ne sont plus exactement là où elles se trouvaient. Ils sont légèrement décalés. Quoi qu'il en soit, allons-y et exportons ou rendons. Je pense que nous sommes bons. Je vais donc simplement appuyer sur Entrée. Passons au format. À l'heure actuelle, le format est P quatre. C'est ce que je vais exporter. Appuyons sur Render. Il s'agit en fait du dossier de destination. Nous pouvons l'ouvrir. Maintenant que c'est fait, ouvrons le dossier de destination, et voici notre vidéo. Jouons-y et voici ce que nous avons. Laisse-moi juste augmenter le volume. Oh, ça passe sur mon deuxième écran. Laisse-moi juste l'apporter ici. C'est bon. D'accord. J'ai très hâte de jouer. Allons-y. Allons-y. Commençons un jeu, mec. J'adore ça. Nous y voilà donc. Je pense que c'est le bon endroit pour terminer cette leçon. J'ai encore quelques réflexions finales et les prochaines étapes que je recommanderais de suivre. Rendez-vous donc dans la prochaine et dernière leçon. N'allez nulle part. 23. Étapes suivantes: Et voici la fin de votre première animation de cavalerie. Vous êtes passé d'une composition vierge à une scène d'interface utilisateur entièrement animée avec un curseur qui se déplace comme une vraie souris, boutons qui réagissent aux clics, des effets de survol, une caméra filmée entre les différentes cartes et éléments de l'interface utilisateur, un indicateur de saisie et un titre d'actualité avec des effets de surlignage Je tiens donc à vous féliciter d' être arrivés aussi loin. Vous avez maintenant les compétences nécessaires pour créer vos propres animations à l' avenir. Si vous créez une application , un logiciel ou un site Web codé ou conçu par Vibe , vous pouvez désormais en faire la promotion avec belles vidéos animées, gracieuseté de D'autres cours seront bientôt disponibles. J'ai l'intention d'approfondir les animations basées sur les données, les animations graphiques pour YouTube et, à terme, l'animation complète des produits. Si vous souhaitez être prévenu lorsque je lance un nouveau cours sur Cavalry, suivez-moi ici sur Skillshare et restez Skillshare et Si ce cours vous plaît, dites-moi ce que vous en pensez. Qu'est-ce qui vous a plu ? Et j'espère que vous voulez que j'aborde dans le prochain cours. Vous ne le savez peut-être pas, mais votre commentaire est le meilleur moyen de me faire savoir comment je m' en sors en tant que professeur de cavalerie, et cela aide également les autres étudiants savoir si ce cours peut les aider. Alors laissez un avis et dites-moi ce que vous en pensez. m'appelle Ken, et je veux juste te remercier d'être resté avec moi de la toute première leçon à la toute dernière. Maintenant, sortez et animez quelque chose de génial. Je te verrai au prochain cours. Paix.