Rive 101 - 7.1 State Machine Overview

Summary

La machine d'état permet d'ajouter de l'interactivité aux fichiers Ry. En mode d'animation, on accède à la machine d'état via le bouton ou la touche Tab. Par défaut, elle comprend un état d'entrée vert, un état 'any' bleu et un état de sortie rouge. L'état d'entrée détermine le point de départ. Les animations sont connectées à ces états et peuvent être modifiées, supprimées ou déplacées. On peut également faire des zooms et se déplacer dans le graphique pour une meilleure visualisation.

Takeaways

• 😀 La machine à états permet d'ajouter de l'interactivité aux fichiers Ry.
• 🔄 Passer en mode d'animation en cliquant sur le bouton ou en appuyant sur la touche Tab.
• 📊 En mode d'animation, la machine à états graphique se trouve où se trouve habituellement la ligne de temps.
• 📋 Par défaut, on a une machine à états et une ligne de temps, qui est automatiquement ajoutée à la machine à états.
• ▶️ En jouant la machine à états, l'animation connectée à l'état d'entrée commence à jouer.
• 🔑 Les clés dans la ligne de temps permettent de déplacer le carré rouge d'un côté à l'autre.
• 🌐 L'animation est représentée par un nœud bleu et un indicateur de progression nous montre combien de l'animation est jouée.
• 🟢🔵🔴 Il y a trois états principaux : Entry (vert), Any (bleu) et Exit (rouge), qui seront traités dans une autre vidéo.
• 🔄 L'état d'entrée détermine l'état de départ de la machine à états.
• 🤖 On peut déplacer les états sur le graphique, aligner les nœuds et désactiver le snap pour un mouvement libre.
• 🗑️ Les états non par défaut peuvent être supprimés en les sélectionnant et en appuyant sur la touche Suppr.
• 🖱️ On peut panoramiquer et zoomer sur le graphique en utilisant les boutons correspondants et la touche espace.
• 🎥 Utiliser la touche F pour recentrer la vue du graphe si elle est trop éloignée.

Q & A

Qu'est-ce qu'une machine à états dans le contexte du script?

Une machine à états permet d'ajouter de l'interactivité aux fichiers Ry en accédant à la machine à états.

Comment activer le mode d'animation dans le script?

Vous pouvez activer le mode d'animation en cliquant sur le bouton de bascule en haut ou en appuyant sur la touche Tab.

Où se trouve le graphique de la machine à états?

Le graphique de la machine à états se trouve où la ligne de temps serait normalement présente.

Quels sont les états par défaut dans la machine à états?

Par défaut, il y a une machine à états nommée 'State Machine One' et un 'Timeline One'.

Que se passe-t-il lorsque l'on joue la machine à états?

Lorsque vous jouez la machine à états, la première animation connectée à l'état d'entrée commence à jouer.

Quels sont les états visibles sur le graphique de la machine à états?

Sur le graphique, il y a trois états : un état vert appelé 'entry', un état bleu appelé 'any state' et un état rouge appelé 'exit'.

Quel est le but de l'état d'entrée dans la machine à états?

L'état d'entrée indique à la machine à états dans quel état elle doit commencer.

Comment la machine à états détermine-t-elle l'état de départ?

La machine à états détermine l'état de départ en connectant les autres états avec une ligne orientée.

Comment faire pour déplacer les états sur le graphique?

Vous pouvez déplacer les états en cliquant dessus et en les faisant glisser sur le graphique.

Pouvez-vous désactiver le.snappage des états sur le graphique?

Oui, vous pouvez désactiver le snappage pour pouvoir déplacer librement les nœuds.

Comment faire pour supprimer les états non par défaut?

Vous pouvez supprimer les états non par défaut en les sélectionnant et en appuyant sur la touche Suppr.

Comment faire pour recentrer la vue du graphique?

Vous pouvez recentrer la vue du graphique en utilisant la touche F.

Outlines

00:00

🔄 Introduction auStateMachine

Le paragraphe explique comment activer le mode 'animate' pour interagir avec les fichiers Ry et accéder au state machine. Il décrit le fonctionnement de la machine d'état en mode animation, où l'on peut voir un graphique de la machine d'état en bas de l'écran et une liste d'animations à gauche. Lorsque l'on joue la machine d'état, l'animation associée à l'état d'entrée commence à jouer. Il est également expliqué comment les animations sont représentées sur le graphique et comment elles sont liées à l'état d'entrée. Le paragraphe se concentre sur l'état d'entrée, qui détermine l'état de départ de la machine d'état, et montre comment connecter les états avec des lignes pour définir l'ordre de progression. Enfin, il explique comment déplacer les états sur le graphique, désactiver le snap, supprimer les états non par défaut et comment naviguer dans la vue du graphique.

Keywords

💡state machine

La 'machine à états' est un concept clé en informatique qui permet de gérer les changements d'état d'un système de manière prévisible et ordonnée. Dans le contexte du script, cela fait référence à un outil qui ajoute de l'interactivité aux fichiers Ry, permettant de contrôler la façon dont les animations sont exécutées. L'exemple donné dans le script montre comment la machine à états peut être utilisée pour démarrer une animation dès que l'état d'entrée est atteint.

💡animate mode

Le 'mode d'animation' est un mode spécifique dans lequel vous pouvez travailler sur les animations d'un objet ou d'une scène. Dans le script, le mode d'animation est activé en appuyant sur la touche Tab, ce qui permet d'accéder à la machine à états et de commencer à travailler sur les animations.

💡timeline

Le 'timeline' est une représentation chronologique des événements dans une animation. Dans le script, Timeline One est mentionné comme un élément qui est connecté à la machine à états et contient des clés qui déplacent un carré rouge d'un côté à l'autre de l'écran.

💡entry state

L'état d'entrée est le point de départ d'une machine à états. Dans le script, il est expliqué que l'état d'entrée détermine à partir de quel état la machine à états commencera à fonctionner, et comment il est connecté à d'autres états par des lignes avec des flèches.

💡animation

Une 'animation' est une séquence d'images qui donnent l'illusion de mouvement. Dans le script, l'animation est utilisée pour déplacer un carré rouge et est représentée par un nœud bleu dans la machine à états, avec un indicateur de progression qui montre à quel point l'animation a été jouée.

💡play button

Le 'bouton lecture' est un contrôle qui permet de démarrer ou d'arrêter la lecture d'une animation ou d'une séquence. Dans le script, l'activation du bouton lecture fait démarrer la machine à états, qui commence à jouer l'animation connectée à l'état d'entrée.

💡states

Dans le contexte de la machine à états, les 'états' représentent les différentes conditions ou phases que le système peut connaître. Le script mentionne plusieurs états comme l'état d'entrée (vert), l'état any (bleu) et l'état de sortie (rouge), et explique comment ils peuvent être modifiés ou supprimés.

💡graph

Le 'graph' est une représentation visuelle des états et des transitions entre eux dans une machine à états. Dans le script, il est expliqué comment les états peuvent être déplacés sur le graph pour organiser la machine à états, et comment le graph peut être panoramiqué et zoomé.

💡snapping

Le 'snap' est une fonctionnalité qui permet de positionner des éléments de manière précise sur un canevas ou un graph. Dans le script, le snap est mentionné comme une fonctionnalité qui aide à aligner les nœuds sur le graph de la machine à états, mais qui peut aussi être désactivé pour un mouvement plus libre.

💡interaction

L''interaction' fait référence à la manière dont un utilisateur peut interagir avec un système ou une interface. Dans le script, il est mentionné que les vidéos suivantes expliqueront comment créer des interactions, ce qui suggère que la machine à états est utilisée pour contrôler les interactions utilisateur dans les animations.

Highlights

State machine enables interactivity in Ry files.

Access state machine in animate mode by pressing Tab.

Default state machine and timeline are visible in animate mode.

Animations list shows the first animation connected to the entry state.

Animation plays from the entry state upon activating the state machine.

Timeline one contains keyframes moving the Red Square.

Animation is represented by a blue node in the state machine graph.

Progression meter shows how much of the animation is played.

Three states are identified: entry (green), any (blue), and exit (red).

Entry state determines the starting point of the state machine.

Connecting other states to the entry state sets the starting point.

States can be moved and aligned using the graph's snapping feature.

Snapping can be turned off for free movement of nodes.

Non-default states can be deleted using the delete key.

Graph view can be panned by holding the space bar.

Graph view can be centered using the F key.

Zoom in and out with plus and minus buttons.

Future videos will cover creating interactions with the state machine.

Transcripts

the state machine is what allows us to

add interactivity to Ry files to access

the state machine will need to be in

animate mode we can do that by hitting

this toggle up here or by pressing the

Tab

Key when we get to animate mode you can

see that our state machine graph is down

here where the time line would normally

be if you look at the animations list on

the left side you'll see that by default

we have state machine one and we also

have timeline one which is just below it

now this timeline is already um added to

our state machine which you can see out

on the

graph now if we hit the play button to

activate our state machine you'll see

that the first animation that's

connected to the entry State we'll start

playing if we go into timeline one you

can see that we have a few Keys here

that move the Red Square from the left

side to the

other now if we go back to the state

machine and we hit play again you'll see

that once again this animation is

playing you'll see that the animation is

represented by this blue node here and

you can also see that it's being filled

now this is a progression meter showing

us how much of the animation is being

played in addition to timeline one being

on the graph you'll notice that there's

three other states the first one is this

green one called entry the blue state is

the any state and the exit state is in

red we'll focus on these two states in

another video Let's Start by focusing on

the entry State the purpose of the entry

state is to tell our state machine which

state it should start in we can tell our

state machine which state to start in by

connecting our other states with one of

these little lines here with the arrow

in this case we only have one line and

when we hit the play button button

will'll go from the entry State it'll

Follow The Line into timeline one let's

talk about working with states on the

state machine now we can move these

states around by clicking on them and

dragging them around the

graph you'll notice that as we drag them

around the little red lines for the

snapping pop up and we can use that to

align our nodes now we can also turn

snapping off which will disable this and

we'll be able to move those nodes around

freely now we can delete all the non

default states by selecting them and

hitting the delete key we can undo this

by either using command Z or control Z

on Windows we can Pan the graph view

around by holding down space bar and

you'll notice that the cursor changes to

a hand and then we can click to drag our

graph view

around additionally we can rightclick

and move the graph as

well just like on the stage we we can

zoom in and out with the plus button to

zoom in and the minus button to zoom

out now let's say for example that our

graph view is a little too far away we

can Center it by using the F

key now that we have a bit of knowledge

about where the state machine is how to

move the panel around in the following

videos we'll start learning how to

create

interactions