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.