Multi-état

Le composant Multi-État permet de gérer des animations sur des objets individuels ou des ensembles d’objets.

Il est idéal pour créer des effets interactifs tels que des boutons avec différents états (normal, survol, cliqué), des effets d’apparition ou de transformation d’éléments visuels. Pour des animations plus globales qui affectent l’ensemble de l’écran, il est préférable d’utiliser les états d’écran ou les avant-plans.

Dans l’exemple ci-dessus, le composant Multi-état comprend 2 états :

Un premier état dans lequel le contenu de la bulle est présente, mais non visible (opacité à 0%),
Et un deuxième état lié au premier dans lequel ce contenu devient visible (opacité à 100%). C’est au clic sur le bouton que le multi-état passe d’un état à un autre.

Il est indispensable de maîtriser les transitions et les états liés pour créer des animations grâce au composant Multi-état. Nous vous invitons à consulter cet article au préalable : Transitions.

Cas d’utilisation

Boutons interactifs : créez des boutons avec des états visuels différents (normal, survolé, cliqué).
Effets d’apparition/disparition : animez des objets pour les faire apparaître ou disparaître en douceur.
Transitions d’éléments : gérez des changements de forme, de taille ou de couleur d’un objet.

Mise en place du composant

Insertion du composant

Cliquez sur Composants et choisissez le Multi-état.
Placez le composant à l’endroit de votre choix.
Double-cliquez sur la zone du composant pour éditer le contenu : un premier état est automatiquement créé.
Vous pouvez insérer tout type de contenu à l’intérieur : images, formes, texte et même des composants.

Vous pouvez également utiliser l’option Convertir en Multi-État disponible via le menu de l’application (Mise en page > Convertir en Multi-état) pour transformer un groupe d’éléments existants en un composant Multi-État.

Ajout de nouveaux états

Pour créer des effets d’apparition et de transition, il est nécessaire de créer de nouveaux états. Si vous souhaitez une transition entre deux états, ceux-ci doivent être liés.

Pour ajouter un nouvel état :

Vous devez être à l’intérieur de ce composant
Rendez-vous dans la zone d’édition du composant, à gauche de l’écran.
Cliquez sur le bouton + pour ajouter un nouvel état lié et sur la flèche déroulante, pour choisir entre un nouvel état lié ou indépendant.

Vous pouvez créer un nombre illimité d’états et naviguer entre vos états depuis la fenêtre de gauche.

Caractéristiques du composant

État par défaut

Dans les propriétés, vous pouvez sélectionner un état par défaut, c’est-à-dire l’état qui sera automatiquement affiché au chargement du composant.

Si vous ne définissez rien et que l’utilisateur retourne sur cet écran, le composant se trouvera sur le dernier état affiché.

Événements déclencheurs

Pour déclencher une action depuis le composant Multi-état, sélectionnez ce composant et ouvrez la fenêtre Actions.

En plus des déclencheurs standards (Tape clic, Survol entrant, Touche…), vous pouvez déclencher une action à l’affichage de chaque état. C’est ainsi que vous pouvez changer automatiquement l’état sans action de l’utilisateur.

Actions interactives

Pour agir sur ce composant, sélectionnez un déclencheur (par exemple un bouton) et sélectionnez l’action Agir sur un composant.

Sélectionnez le composant Multi-état et vous avez le choix parmi les actions suivantes :

Sélectionner un état : sélectionnez un état dans la liste
État suivant : vous avez la possibilité de définir un intervalle et d’activer le Mode boucle
État précédent : vous avez la possibilité de définir un intervalle et d’activer le Mode boucle
État aléatoire