Animations interactives dans Rive : guide pour débutants sur la machine d'État | Yaya Gadon | Skillshare

Vitesse de lecture


1.0x


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

Animations interactives dans Rive : guide pour débutants sur la machine d'État

teacher avatar Yaya Gadon, Motion Designer

Regardez ce cours et des milliers d'autres

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

Regardez ce cours et des milliers d'autres

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

Leçons de ce cours

    • 1.

      Introduction

      1:23

    • 2.

      Comprendre l'interface de Rive

      3:08

    • 3.

      Introduction à la machine d'État

      1:09

    • 4.

      Mettre de l'ordre dans l'arborescence

      4:24

    • 5.

      Configurer des états avec des calendriers

      6:27

    • 6.

      Aller plus en profondeur : transitions + auditeurs ers

      10:53

    • 7.

      Projet de cours interactif

      3:36

    • 8.

      Partager votre travail

      2:37

    • 9.

      Réflexions finales et prochaines étapes

      1:20

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

Généré par la communauté

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

269

apprenants

19

projets

À propos de ce cours

Aperçu du cours : 

Vous avez toujours voulu créer des animations qui réagissent aux clics, au survol ou au clic ? Dans ce cours destiné aux débutants, je vous montrerai comment utiliser la machine d'État de Rive pour ajouter de l'interactivité à vos conceptions, sans codage !

Nous commencerons par les bases, en apprenant à naviguer dans l'interface de Rive et à préparer un design en vue d'une animation. Nous nous plongerons ensuite dans la machine d'état, où vous découvrirez comment faire en sorte que les animations varient en fonction des entrées de l'utilisateur. À la fin du cours, vous aurez construit votre propre animation interactive et acquis les compétences nécessaires pour donner vie à vos conceptions !

Ce cours est parfait pour les animateurs, les concepteurs d'animations, les concepteurs d'IU/UX ou toute personne intéressée par l'animation interactive. Aucune expérience préalable avec Rive n'est nécessaire – juste une passion pour la créativité !

Ce que vous allez apprendre :

• Comment naviguer sur Rive et configurer votre premier projet
• Les bases de l'animation dans Rive
• Comment fonctionne la machine d'État et pourquoi elle est si puissante
• Comment créer des animations qui répondent aux interactions des utilisateurs
• Comment exporter et partager vos projets

Pourquoi vous devriez suivre ce cours :

Les animations interactives sont essentielles pour créer des expériences utilisateur attrayantes sur les sites Web, les applications et les jeux. En apprenant la machine à l'état de Rive, vous serez à même de concevoir des animations qui sont non seulement visuellement attrayantes, mais aussi réactives et interactives, ce qui vous permettra de démarquer votre travail dans le paysage de la conception numérique.

Créez un compte sur Rive : rive.app/login/

Vous aurez besoin des éléments suivants : :

• Un ordinateur avec Rive installé (gratuit sur rive.app)
• Une connexion Internet
• Des fichiers de conception prédéfinis (fournis dans les ressources du cours)

Commençons !

Rejoignez-moi dans ce cours amusant et pratique et créons ensemble quelque chose d'incroyable !

Rencontrez votre enseignant·e

Teacher Profile Image

Yaya Gadon

Motion Designer

Enseignant·e

Hello friends!

My name is Yaya and I'm a motion designer living in London with my partner and our little cute dog named Woohoo.

I love going for walks in nature, cooking delicious foods, playing music, dance, and party with friends in the weekends.

Obsessed with motion, armed with animation tools, and inspired by the real world - I enjoy injecting life, playfulness and energy into designs, characters, and brands as a whole.

Excited to create content and share my knowledge here on Skillshare:))

Voir le profil complet

Level: Beginner

Notes attribuées au cours

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

Pourquoi s'inscrire à Skillshare ?

Suivez des cours Skillshare Original primés

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

Votre abonnement soutient les enseignants Skillshare

Apprenez, où que vous soyez

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

Transcription

1. Introduction: Bienvenue à tous et merci de vous joindre à moi. Je m'appelle Yaya Dans ce cours, nous allons nous concentrer sur la machine à états RIV et créer des animations interactives RIV transforme les visuels statiques en animations interactives sur lesquelles les utilisateurs ont vraiment envie de jouer et sur lesquelles ils peuvent cliquer Cela change totalement la donne pour le Web, les applications et les jeux. Si vous êtes un animateur, un motion designer, un concepteur de produits et que vous souhaitez ajouter l'interactivité à votre travail, vous êtes au bon endroit Un peu plus sur moi, je suis un motion designer indépendant avec plus de dix ans d' expérience auprès de clients du monde entier. La plupart du temps, j'ai utilisé des outils traditionnels tels qu' After Effects et Cinema 40. Mais quand j'ai découvert Drive, ai vraiment eu l'impression de retomber amoureux du motion design. C'est un outil tellement amusant et passionnant. Depuis, j'ai passé beaucoup de temps à apprendre les tenants et les aboutissants du VR, et je suis très heureuse partager ce que j'ai appris avec vous. J'ai créé ce tissu pour rendre cette courbe d'apprentissage un peu moins intimidante et plus amusante Une fois que vous avez cliqué, c'est un outil puissant à avoir dans votre conversation. Bien, commençons. Tout d'abord, assurez-vous que RV est installé et créez un compte. Vous trouverez le lien dans la description du cours. 2. Comprendre l’interface de Rive: Maintenant que tout est prêt, nous allons faire un tour d'horizon de l'interface de Re. Juste un avertissement. Le camping-car est mis à jour assez souvent. Les choses peuvent donc sembler différentes sur votre écran, mais ne vous inquiétez pas. Les fonctionnalités et les outils sont toujours là, mais peut-être dans un endroit légèrement différent. vous familiarisant avec l'interface, votre flux de travail dans RIV sera beaucoup plus efficace Prenez le temps d' explorer chaque section, et une fois que vous serez prêt, nous passerons à l' animation à l'aide de la machine à steak Dans la section d'accueil, vous pouvez voir vos fichiers récents, des liens vers des didacticiels utiles et des exemples communautaires où vous pouvez explorer les projets d'autres artistes la communauté et voir ce que font les gens. Ici, vous pouvez rechercher vos fichiers par nom, et ici, vous avez vos fichiers personnels. Si vous le souhaitez, vous pouvez organiser vos fichiers en projets comme je l'ai fait ici pour ce cours Skillshare Vous pouvez cliquer avec le bouton droit de la souris pour créer un nouveau dossier ou un nouveau fichier ou cliquer sur les icônes en haut à droite. En haut, nous avons la barre d'outils. Ici, nous pouvons personnaliser notre fichier, exporter et créer des liens de partage, créer des plans de travail, des mises en page et des groupes, concevoir des outils tels que des stylos et des formes, des limites, du texte Hiérarchie et panneau des actifs. Sur le côté gauche, il y a le panneau de hiérarchie. Cela affiche tous les objets, ressources, contrôles et animations de votre fichier, en indiquant leurs relations parent-enfant et leur ordre de rendu. L'onglet des ressources est l'endroit où nous pouvons voir toutes les ressources présentes dans ce projet spécifique et où nous pouvons importer des ressources telles que des images, des ladifils et des fichiers audio À droite, nous avons l'inspecteur. Ce panneau vous permet d'ajuster les propriétés de l'objet sélectionné, mettant à jour de manière dynamique en fonction votre sélection et du mode actuel. La zone centrale est la scène, une toile infinie où vous pouvez placer des plans de travail contenant tous vos graphismes Jusqu'à présent, nous étions en mode design. Mais si on clique ici, on passe en mode animation. C'est là que nous configurons nos machines d'État et nos chronologies. Sur la chronologie, vous pouvez créer des animations, accéder aux commandes de lecture et définir des images-clés pour vos objets En mode State Machine, la chronologie est remplacée par le graphe State Machine, ce qui vous permet de connecter visuellement animations et de définir une logique de transition. 3. Introduction à la machine à état: Bien, parlons de la machine de l'État. C'est ce qui fait que les animations répondent aux actions des utilisateurs. Considérez-le comme un ensemble de règles qui indiquent rimes quand et comment effectuer la transition entre les États Voici un exemple. Nous avons un état où le commutateur est sur la gauche, puis un autre où le commutateur est sur la droite et change de couleur. Dans la machine à états, nous pouvons utiliser des entrées et des écouteurs pour configurer interactions et utiliser des transitions pour créer le flux entre les états Ensuite, lorsque nous jouons, nous pouvons tester nos interactions ici. Nous allons maintenant recréer ensemble cette animation interactive Téléchargez le fichier de ressources, faites glisser le fichier point rev dans RIV, puis suivez mes étapes 4. Mettez de l'ordre dans la hiérarchie: Avec RIV, il est essentiel d'organiser vos couches et votre hiérarchie avant de passer en mode animation. Si vous commencez à ajouter des images-clés , puis que vous revenez en mode design et que vous modifiez des éléments, vos animations risquent de se casser et vous obtiendrez des résultats indésirables Restons donc en mode design et organisons les choses rapidement. Si vous devez travailler avec des fichiers SVG, vous pouvez accéder au panneau Ressources, cliquer sur le bouton Plus sous Images, sélectionner votre fichier SVG et cliquer sur Télécharger Je peux le faire glisser sur la scène ou cliquer avec le bouton droit de la souris sur Générer le plan de travail. Dans la hiérarchie, nous pouvons voir notre design, et dans ce groupe, je peux voir tous mes objets. Avant de faire quoi que ce soit d'autre, nous devons organiser la hiérarchie en groupes et renommer toutes les couches Cela nous facilitera grandement la vie lorsque nous animerons plus tard. J'utiliserai l' icône Masquer l'affichage pour identifier la couche que je suis en train de modifier. Je vais y aller du bas vers le haut. Il s'agit de la couche d'arrière-plan, et j'aime bien la supprimer car Rave a déjà ajouté couleur de remplissage au plan de travail ici. Je vais donc le remplacer par du blanc, mais sachez simplement que vous pouvez le supprimer complètement si vous voulez avoir un tableau transparent. J'aimerais souligner les icônes sur la gauche ici. Celui-ci nous indique qu'il s'agit d'une couche de forme personnalisée avec un chemin personnalisé, alors que les icônes de rectangle et d' ellipse nous indiquent qu'il s'agit formes procédurales dotées paramètres supplémentaires tels que le coin arrondi et l'origine Vous pouvez toujours le convertir en chemin personnalisé en cliquant sur Entrée, mais attention, vous ne pouvez pas le reconvertir en une forme procédurale. Maintenant, je veux te donner une règle stricte et je veux que tu ne jures que par elle. Regroupez toujours, toujours, toujours vos objets. Fais-moi toujours confiance. Cela vous évitera bien des tracas par la suite et vous donnera beaucoup de flexibilité lors de l'animation Génial. Regroupons et renommons tout Le point vert sert uniquement de référence, je vais donc le regrouper et le déplacer vers le haut plus tard, je vais juste le supprimer. a encore une chose que je veux que vous fassiez toujours, c'est de créer un groupe racine. Toujours. Ce groupe ne sera pas animé, mais il vous permettra de repositionner et de redimensionner l'ensemble de l'animation sans rien casser Et je veux que ce groupe soit au centre du plan de travail. J'ai maintenant ce groupe principal avec le point d'ancrage dans le coin supérieur gauche. Je vais donc d'abord le dissocier en utilisant le raccourci Shift Command G. Ensuite, le meilleur moyen de créer un groupe racine en plein centre est de créer un groupe de couches vide Vous pouvez utiliser le raccourci G et cliquer n'importe où dans le plan de travail. Alignez ensuite au centre à l'aide de l'outil d'alignement et faites-y glisser toutes les autres couches. Je vais renommer ce groupe. Ensuite, j'aimerais créer un autre groupe au cas où, et c'est tout. La hiérarchie est organisée et nous sommes prêts à passer en mode animation. 5. Configurer des états avec des calendriers: Très bien, attachez votre ceinture. Nous passons en mode animation et configurons les chronologies et la machine à états Maintenant, je vais présenter quelques nouveaux concepts ici, alors ne vous inquiétez pas si les choses ne marchent pas tout de suite. Je vous recommande de regarder cette leçon entier une seule fois juste pour avoir une idée de la façon dont tout fonctionne et pour vraiment en tenir compte. Puis revenez, revenez en arrière, faites une pause quand vous en avez besoin et suivez à votre propre rythme Tu l'as. Passez en mode animation. Par défaut, nous avons une machine à états et une chronologie. Mon plan est de créer deux chronologies, une pour chaque état, une pour l'état actif et une autre pour l'état inactif Accédez ensuite au graphe de la machine à états et connectez-les à l'aide de transitions pour créer l'animation. Je vais passer à la première chronologie et la renommer State One Il est donc clair que cette chronologie représente l'un de nos états d'animation. Je peux cliquer avec le bouton droit de la souris et le dupliquer, puis le renommer à l'état deux Nous devons maintenant indiquer à Rive les propriétés que nous voulons animer. Dans ce cas, je sais que je veux que le point se déplace le long de l'axe X. Pour ce faire, je vais ajouter une image-clé. Je vais cliquer sur la petite icône en forme de losange à côté de la valeur de la position. Une fois qu'il devient bleu, cela signifie qu'une image-clé a été ajoutée Vous le verrez également apparaître dans la chronologie ci-dessous. Si j'agrandis la couche, je peux voir exactement ce qui est animé. Il s'agit de la position de la couche de points, l'axe X et de sa valeur actuelle. Faisons maintenant la même chose dans le deuxième état. Mais cette fois, au lieu de cliquer sur le losange, je vais simplement faire glisser la flèche de l'axe X vers la droite. RIV ajoute automatiquement une image-clé lorsque vous ajustez un objet comportant un losange à côté Je vais taper -63,5 pour la position, car c'est la valeur symétrique opposée à celle de l' état 1 Pour le tester, faisons des allers-retours entre l'état un et l'état deux. Ouais, ça a l'air bien. Le changement de position fonctionne parfaitement. Maintenant, faisons la même chose avec les couleurs. Cliquez sur la couche de points située au-dessus dans l'inspecteur, vous verrez les couleurs utilisées dans ce groupe. Nous pouvons ajouter des images-clés à chacune d'elles, comme nous l'avons fait avec position Passez maintenant à l'état deux et cette fois, sélectionnez à la fois la couche de points et la couche de référence. De cette façon, nous pouvons récupérer les valeurs de couleur des deux couches à la fois. Dans l'inspecteur, sous les couleurs sélectionnées, copiez et collez simplement les valeurs hexadécimales Si je vous indique la chronologie, je peux rapidement révéler toutes les propriétés à l'aide d'images-clés, et vous verrez que les nuances de jaune mises à jour apparaissent désormais dans l'état deux Passons d'un état à l'autre. Génial. La transition de couleur fonctionne. Nous sommes maintenant prêts à le connecter à la machine de l'État. Par défaut, RIV nous fournit une machine à états avec une chronologie déjà connectée Si je clique sur Jouer, vous verrez que cette chronologie ne se joue qu' une seule fois, rien d'extraordinaire pour l'instant. Maintenant, glissons l'état 2 et connectons l'état 1 à celui-ci. Cela crée une transition entre les deux États. Mais si nous y jouons maintenant, vous remarquerez qu'il passe immédiatement de l'état 1 à l'état 2 Cela se produit parce que nous n'avons pas indiqué à Rive quand effectuer cette transition. Nous devons donc maintenant définir une condition pour contrôler le moment où la transition se produit. Avant de pouvoir ajouter des conditions à nos transitions, nous devons configurer certaines entrées. Vous trouverez le panneau de saisie juste ici. RIV nous fournit trois types d'entrées. Nombre, booléen et déclencheur. Commençons par le déclencheur. Lorsque je clique pour en ajouter une, vous verrez qu'elle fonctionne comme une entrée ponctuelle. Parfait pour des choses comme un clic, où vous voulez simplement que quelque chose se produise une fois, puis que vous le réinitialisiez. Nous pouvons maintenant revenir à la transition, et dans l'inspecteur, nous pouvons ajouter notre déclencheur comme condition. Voici donc la logique maintenant. Nous entrons ici dans la machine étatique. Il joue à l'état 1, puis attend que le déclencheur se déclenche avant de passer à l' état 2. Nous allons le tester. Appuyez sur Play, cliquez sur le déclencheur, et cela fonctionne. Mais si je clique à nouveau sur le déclencheur, rien ne se passe. Et c'est parce que nous n'avons pas mis en place de transition pour revenir de l'état deux à l'état un. Pour résoudre ce problème, créons une transition revenant de l'état deux à l'état un. Une fois que vous les avez connectés, vous verrez une petite flèche pointant vers l'état 1. Il suffit maintenant d'ajouter le même déclencheur comme condition pour cette nouvelle transition. Et nous l'avons fait. Maintenant, chaque fois que nous cliquons, la machine à états continue de basculer entre les deux 6. Aller plus en profondeur : transitions + auditeurs ers: Maintenant que nous avons les transitions de base entre les états, passons à la vitesse supérieure. Rendons nos transitions un peu plus intéressantes. heure actuelle, le passage de l'état un à l'état deux se fait instantanément. Il n'y a aucune sensation de mouvement. Lorsque nous sélectionnerons la transition, vous remarquerez que nous avons quelques paramètres avec lesquels nous pouvons jouer. Commençons par la durée. Il est actuellement réglé à zéro milliseconde. Modifions-le donc à 500 millisecondes. Maintenant, lorsque nous jouons l'animation et que nous appuyons sur la gâchette, nous obtenons un véritable mouvement. Le point glisse de gauche à droite le long de l'axe X pendant une demi-seconde. Ensuite, nous pouvons affiner la sensation de la transition en ajustant l'interpolation l'aide du graphique ci-dessous Ce graphique représente la durée totale de 0 à 500 millisecondes, et la courbe montre comment la transition passe de l' état 1 à l'état 2 au cours de heure actuelle, la courbe est parfaitement linéaire , c'est pourquoi le mouvement semble un peu rigide ou robotique. Mais si nous choisissons cette option cubique ici, nous obtenons cette belle ligne courbe Maintenant, le mouvement s'atténue, devient linéaire au milieu et s'atténue à nouveau à la fin Ce type d'animation s' appelle l'assouplissement. Remarquez à quel point c'est plus doux maintenant. C'est plus naturel car dans le monde réel, objets ont du poids et de la masse. Ils ne démarrent pas et ne s'arrêtent pas instantanément. Ils mettent un moment pour accélérer et un autre pour ralentir. Vous pouvez également affiner la courbe en ajustant les poignées. Par exemple, nous pouvons créer un assouplissement plus long. L'animation démarre donc rapidement, puis ralentit progressivement. Vous voyez comment cela change la sensation ? Je vous encourage vivement à jouer avec le graphique, essayer différentes formes de courbes et à voir quel type de mouvement vous pouvez créer. En fonction de votre projet, vous voudrez peut-être quelque chose de rapide, fluide ou de plus spectaculaire Pour l'instant, restons-en à l'option cubique. Il s'agit d'une valeur par défaut solide qui fonctionne bien dans la plupart des cas. Oh, en guise de petit conseil, vous pouvez également copier-coller courbe d'assouplissement de votre costume si vous souhaitez la réutiliser dans d'autres transitions. Passons maintenant à un aspect très important du travail avec RIV, à savoir l' ajout d'interactivité Jusqu'à présent, nous avons déclenché l'animation manuellement en cliquant sur l'entrée. Mais c'est juste pour tester. Ce que nous voulons vraiment, c'est que l'utilisateur interagisse directement avec le bouton du plan de travail. Alors, comment y parvenir ? C'est là qu'interviennent les auditeurs. Ouvrons le panneau des auditeurs et cliquons sur l'icône plus pour en créer un nouveau Vous verrez que l'inspecteur nous donne maintenant un champ cible. Cliquez dessus et RIV vous demandera de sélectionner un élément sur le Canvas Dans ce cas, nous voulons que la face du bouton soit la cible interactive. Vous pouvez également le sélectionner dans la hiérarchie. Maintenant que nous avons défini l'objectif, l'inspecteur demande quelles mesures voulons-nous attendre ? Il y a quelques options ici, mais pour notre bouton, nous allons choisir de cliquer. Alors maintenant, chaque fois que l'utilisateur clique sur le bouton, nous voulons déclencher une entrée. OK, petit résumé de ce que nous avons fait. Nous avons créé un écouteur, défini une cible, choisi l'interaction et l' avons liée à une entrée qui contrôle l'animation Nous allons le tester. Appuyez sur Play, passez au-dessus de la face du bouton et cliquez. Sympa. Cela fonctionne. Et si on clique ailleurs, rien ne se passe. C'est parce que l' interaction est uniquement liée à la cible de l' auditeur Dans notre cas, le visage du bouton. Je vais renommer cet écouteur en Face Click juste pour que les choses restent organisées Je pense que nous sommes maintenant prêts à ajouter une autre couche d' interaction, un effet de survol Ce sera similaire à ce que nous venons de faire en un clic, nous allons donc le parcourir un peu plus rapidement. Nous allons commencer par créer deux nouvelles chronologies pour définir les états du survol. Passez le curseur sur Activé et Désactivé. Faites glisser la State Machine vers le haut juste pour garder les choses en ordre Commençons par le survol. Lorsque l'utilisateur passe le pointeur sur le bouton, je veux que le visage soit un peu plus lumineux Je vais donc sélectionner la couche faciale et augmenter la luminosité dans les paramètres de couleur jusqu'à 100 % N'oubliez pas que Rive a besoin de voir les images-clés dans les deux états. Assurez-vous donc d'ajouter des images-clés à la couleur de la couche de face dans chaque chronologie Faisons-le un test rapide. Passez le pointeur sur activé, survolez-le sur désactivé. Parfait. Nous avons maintenant deux états de fonctionnement pour l'interaction avec le survol Maintenant, vous vous demandez peut-être comment combiner cela avec l'animation de clic existante ? Pour cela, nous devons ajouter une nouvelle couche à notre machine d'état. À l'heure actuelle, tout fonctionne sur la première couche. Je vais donc le renommer en quelque chose comme cliquer sur désactiver pour garder les choses organisées L'avantage de la machine RV State, c'est qu'elle vous permet empiler plusieurs couches d' interactions les unes sur les autres. Allons-y et ajoutons une nouvelle couche uniquement pour l'interaction avec le survol Faisons maintenant glisser les deux chronologies du survol dans le graphique et associons-les par des transitions. Nous voulons que l'animation commence par le survol, puis passe au survol lorsque l'utilisateur le survole et revienne au survol lorsqu' il éloigne le curseur Voici donc la logique. Lorsque le curseur entre dans le bouton, nous passons au survol activé, et lorsque le curseur sort, nous revenons au survol Pour contrôler cette interaction, nous devons ajouter une nouvelle entrée. Et pour Hover, le harcèlement est le choix idéal. C'est simple. Cela peut être vrai ou faux. Cela fonctionne très bien pour quelque chose comme en dehors des États. Maintenant, nous pouvons utiliser ce bullian comme condition. Pour la transition entre le survol activé et le survol activé, réglez-le de manière à ce qu'il se déclenche lorsque le bullian Et pour le retour en arrière, réglez-le pour qu'il disparaisse lorsque le lingot est faux Faisons-le un test rapide. Cliquez pour définir l'intimidateur comme vrai, nous activons Hover. Cliquez à nouveau pour le configurer sur Forcer, et nous revenons à Hover off. Sympa. Cela fonctionne exactement comme prévu. Ajoutons maintenant un peu de peaufinage, comme nous l'avons fait avec l'interaction par clic. Je vais régler la durée sur 150 millisecondes et appliquer une interpolation cubique pour un mouvement plus fluide Rejouons-le. Ouais, ça fait du bien. La dernière étape consiste à faire en sorte que cette interaction avec le pointeur de la souris fonctionne réellement sur le plan de travail Pour cela, nous aurons besoin de deux auditeurs. L'un pour détecter le moment où le curseur entre dans le bouton, l'autre pour le sortir Je les appellerai hover Enter et hover exit, juste pour que les choses soient claires Bien, configurons les deux écouteurs. Pour le premier, définissez la cible sur face, choisissez le pointeur Enter et définissez la saisie du lingot sur true Ensuite, pour le deuxième auditeur, utilisez la même cible, mais cette fois, choisissez la sortie du pointeur et configurez l'intimidateur pour qu'il le force Juste pour récapituler ce que nous avons fait, nous écoutons le moment où le curseur appuie sur le bouton, ce qui donne à l'intimidateur la valeur true, déclenchant ainsi le survol Et lorsque le curseur sort, le harcèlement passe à faux, qui nous amène à revenir à la case départ . Nous allons le tester. Appuyez sur Play, passez la souris sur le bouton. Passez la souris dessus. Éloignez le curseur. Déplacez le pointeur. Parfait. C'est notre interaction avec le survol qui fonctionne Et voici le côté cool. Si vous cliquez sur le bouton, l'interaction activation/désactivation fonctionne également. Nous avons donc maintenant combiné plusieurs niveaux d' interactivité dans une seule animation Allez-y et essayez-le vous-même. Découvrez si vous pouvez ajouter des interactions avec le pointeur de la souris à vos designs. Vous avez maintenant tout ce dont vous avez besoin pour créer votre première animation interactive. Ses fonctionnalités vont au-delà de ce que nous étudions pour ce cours, mais elles sont basées sur ces principes fondamentaux, ces états, ces transitions, ces entrées et ces auditeurs Il est donc temps pour vous de prendre ces principes fondamentaux et de les mettre en pratique. J'ai hâte de le voir. 7. Projet de cours interactif: OK, maintenant c'est l'heure de s'entraîner. C'est bien de regarder les leçons, mais si vous voulez vraiment vous améliorer, vous devez vous y atteler. Essayer des choses, faire des bêtises, trouver des solutions, c'est là que se produit le véritable apprentissage C'est le seul moyen de renforcer confiance et de vraiment comprendre comment tout cela fonctionne. Donc, pour ce projet de classe, choisissez l'un des modèles dans les fichiers de ressources et essayez de créer votre propre animation interactive à partir de zéro. Voici un aperçu complet du processus, du début à la fin. Il s'agit d'un bref résumé qui vous aidera à tirer meilleur parti de ce que nous avons appris jusqu'à présent Assurez-vous d'organiser votre hiérarchie, regrouper vos objets et de renommer les couches Créez deux états. Ajoutez des transitions. Ajoutez des entrées. Ajoutez des conditions aux transitions. Ajoutez des écouteurs et définissez les modifications d'entrée. Ajoutez une interaction avec le survol. Je suis retourné en mode création et j'ai ajouté un nouveau dégradé de remplissage à utiliser comme surlignage Utilisez un message d'intimidation. Ajoutez deux écouteurs pour vrai et faux. Et c'est fait. Bonne chance. Je vous verrai dans la prochaine leçon pour vous montrer comment partager votre travail. 8. Partager votre travail: Vous venez donc de créer votre première animation interactive. Bravo. Il est maintenant temps de le partager avec nous dans la galerie de projets. Commençons par une image de couverture. Voici comment créer un RIV. Cliquez sur Ajouter au rendu Q. Choisissez le mode de conception. Sélectionnez le format PNG et cliquez sur Démarrer. Une fois que c'est fait, allez dans l'onglet complet et téléchargez votre image. Vous pouvez télécharger ce fichier PNG comme image de couverture, choisir l'échelle de votre image et cliquer sur Soumettre. Ajoutez un titre de projet et quelques mots dans la description. Nous avons donc deux options pour partager notre travail ici. Première option, forfait payant. Si vous êtes abonné au forfait payant de RV, cliquez sur Générer un lien de partage. Copiez ensuite le code d'intégration à partir d'ici. Ensuite, collez ce code dans la description. C'est un excellent moyen de montrer votre animation interactive en action et de permettre à l'utilisateur d' interagir avec elle en temps réel. Deuxième option, le plan gratuit. Si vous utilisez la version gratuite de RIV, vous ne pouvez pas créer de lien de partage Donc, si vous souhaitez afficher des éléments tels que les interactions entre le pointeur ou le clic, vous pouvez utiliser un outil d'enregistrement d'écran tel que Jiffy Capture sur Mac ou PC Vous pouvez enregistrer votre écran et convertir en JIF sur le site Web de Jiffy Ouvrez simplement votre animation dans RIV Start Jiffy capture et positionnez le cadre d'enregistrement sur votre Assurez-vous d'activer le curseur de capture dans les paramètres afin que vos interactions soient visibles. Souvenez-vous ensuite de vos interactions et exportez-les au format Jif. Ensuite, glissez et déposez votre Jif ou collez votre code d'intégration. Lorsque vous avez terminé, cliquez sur Publier et votre travail sera affiché dans la galerie. C'est ça. J'ai hâte de voir ce que tu as créé. Le partage de votre travail est un grand pas en avant, alors ne l'omettez pas. 9. Réflexions finales et prochaines étapes: OK. Félicitations. C'est toi qui l'as fait. Vous avez terminé le cours et avez appris les bases des animations interactives à l' aide de la machine RV State. Vous devriez désormais être à l'aise pour créer des états d'animation, configurer des transitions et utiliser des interactions telles que clic et le survol pour donner vie à vos créations C'est une étape importante, surtout si c'est la première fois que vous travaillez avec RV. Bien entendu, comme tout outil créatif, la clé de la maîtrise de la VR réside dans la pratique Plus vous expérimentez et construisez, plus vous devenez confiant. Alors continuez. Une bonne prochaine étape consiste à explorer le marché de Rives. Vous pouvez voir ce que les autres construisent. Et si quelque chose attire votre attention, vous pouvez cliquer sur le bouton de remix. Il s'ouvrira dans l'éditeur, et vous pourrez regarder sous le capot et inverser la façon dont les choses ont été construites. Honnêtement, j'ai beaucoup appris en voyant comment d'autres concepteurs résolvent des problèmes dans leurs fichiers. Merci beaucoup de m'avoir rejoint dans ce cours. J'espère que vous vous êtes amusé et que vous avez hâte de continuer à créer. N'ayez pas peur de jouer, casser des choses, d'essayer des idées bizarres. C'est de là que viennent toutes les bonnes choses. Continuez à animer, je vous verrai la prochaine fois.