thumb_ressources_grand-21.png

Réalisez vos animations à l'aide des états ! Pour animer un objet, créez l'état initial et l'état final de votre objet : la transition se fait automatiquement !

Découvrez les états pour mieux construire vos projets et réaliser des animations. Il en existe dans les écrans, les avant-plans, les arrière-plans et dans certains composants : la Pop-Up et le Multi-état. Ils s’utilisent partout de la même façon et conservent les mêmes caractéristiques.

Un état est une scène particulière, une sorte de photographie à un instant "t". Il existe deux sortes d'état : les états vierges et les états liés. A l'inverse de l'état vierge, l'état lié conserve toutes les caractéristiques de l’état de référence et un lien avec cet autre état, ce qui permet de réaliser des animations.

 

Créer un état 

  1. Rendez-vous dans la fenêtre Écrans à gauche
  2. Sélectionnez l'état. Pour s'assurer que l'état est bien sélectionné, le bouton vert doit indiquer + AJOUTER ÉTAT. S'il est écrit + AJOUTER ÉCRAN, c'est que le niveau du dessus est sélectionné.

    creer-un-etat-1.gif

     

  3. Pour créer un état vierge, cliquez sur le bouton + AJOUTER ÉTAT. Un nouvel état s'ajoute, il est vide.
  4. Pour créer un état lié : cliquez sur le bouton orange CRÉER UN NOUVEL ÉTAT LIÉ À L'ÉTAT SÉLECTIONNÉ. Le nouvel état apparaît, la ligne du dessous indique son lien avec le précédent état.

    creer-un-etat-2.gif

 

Les états liés

Quand vous créez un état (2) basé sur un autre état (1), l’état (1) est dupliqué. Par défaut toute les modifications sur l'état (1) sont automatiquement appliquées à l'état (2), il agit comme un parent. Il existe trois liens entre ces deux états :

  • Taille & Position
  • Propriétés
  • Interactivités

L'état (2) est l'enfant, vous pouvez à tout moment modifier ces caractéristiques sans impacter l'état (1) et c'est ainsi que vous créez des animations. Rétablissez à tout moment les caractéristiques originales depuis la fenêtre Objets, icône lien.

creer-un-etat-3.gif

Attention : si vous importez un nouvel objet ou que vous coupez l'objet, les liens sont rompus et l'objet est considéré comme totalement indépendant. Aucune animation ne sera possible.

 

Réaliser une animation

Pour réaliser l'animation d'un objet, il faut simplement créer son état initial et son état final : la transition se fait automatiquement. Par exemple pour déplacer un objet, créez un premier état de la position 1 et un deuxième état de la position 2.

 Note : vous pouvez animer tous les objets (images, formes, composants..). Seul le grossissement du texte n'est pas géré.

Effet d'apparition

  1. Insérez un objet et dans la barre d'outils, choisissez une opacité à 0%
  2. Sélectionnez l'état dans la fenêtre Ecrans
  3. Cliquez sur le bouton orange pour créer un nouvel état lié
  4. Dans ce deuxième état, sélectionnez votre objet et mettez l'opacité à 100%
  5. Choisissez un déclencheur (tap sur l'objet, affichage de l'état...) et l'action Changer d'état

Effet de disparition

  1. Insérez un objet et dans la barre d'outils, choisissez une opacité à 100%
  2. Sélectionnez l'état dans la fenêtre Ecrans
  3. Cliquez sur le bouton orange pour créer un nouvel état lié
  4. Dans ce deuxième état, sélectionnez votre objet et mettez l'opacité à 0%
  5. Choisissez un déclencheur (tap sur l'objet, affichage de l'état...) et l'action Changer d'état

Effet de clignotement

  1. Insérez un objet et dans la fenêtre Propriétés, choisissez une couleur claire
  2. Sélectionnez l'état dans la fenêtre Ecrans
  3. Cliquez sur le bouton orange pour créer un nouvel état lié
  4. Dans ce deuxième état, sélectionnez votre objet et modifiez pour une couleur foncée
  5. Sélectionnez votre état (1) et ouvrez la fenêtre Interactivités
  6. Choisissez le déclencheur Affichage de l'état et l'action Changer d'état (2)
  7. Sélectionnez votre état (2) et ouvrez la fenêtre Interactivités
  8. Choisissez le déclencheur Affichage de l'état et l'action Changer d'état (1)

Effet de déplacement

  1. Insérez un objet et placez-le à l'emplacement initial
  2. Sélectionnez l'état dans la fenêtre Ecrans
  3. Cliquez sur le bouton orange pour créer un nouvel état lié
  4. Dans ce deuxième état, glissez votre objet vers l'emplacement final
  5. Choisissez un déclencheur (tap sur l'objet, affichage de l'état...) et l'action Changer d'état

Effet de grossissement

  1. Insérez un objet et choisissez la taille initiale
  2. Sélectionnez l'état dans la fenêtre Ecrans
  3. Cliquez sur le bouton orange pour créer un nouvel état lié
  4. Dans ce deuxième état, agrandissez l'objet jusqu'à sa taille finale
  5. Choisissez un déclencheur (tap sur l'objet, affichage de l'état...) et l'action Changer d'état

 

 

Mettre un état par défaut

L'ordre des états est défini par leur ordre dans la liste et l'état 1 est affiché par défaut.

Si vous ne créez pas d'interactivité pour passer d'un état à un autre, seul l'état par défaut est affiché.

Pour définir un état par défaut, attribuez-lui l’icône par défaut (icône punaise) dans la fenêtre Écrans ou rendez-vous dans la fenêtre Propriétés.

 

Supprimer un état

Pour supprimer un état, cliquez sur la poubelle de la fenêtre Ecrans. Attention aux relations parent/enfant pour ne pas supprimer une animation. 

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 1 sur 1

Créez votre contenu interactif dès aujourd'hui

Simple d'utilisation ∗ Gratuit ∗ Pas d'installation

COMMENCEZ MAINTENANT !