L’interaction dans RacontR va vous permettre de créer des boutons et surtout d’animer vos pages, créer des transitions, mais aussi d’interagir avec vos images, sons et vidéos.

Voici les différentes possibilités de RacontR que nous allons aborder :

  • Les différents types d’interactions
  • La fenêtre des interactions
  • Liste des paramètres
  • Paramètres spécifiques Scène


Les différents types d’interactions

En navigation classique avec une souris, nous avons trois types d’interactions : le click, le roll-out et le roll-over.
En navigation tablette nous en avons sept : Tap, Swipe left, Swipe right, Swipe top, Swipe bottom, Pinch in et Pinch out.

  1. Click / Tap : lors d’un clic sur l’élément sélectionné.
  2. Roll over / roll out. Roll Over : lors d’un roll-over de l’élément sélectionné, c’est-à-dire lorsque le curseur de la souris survole l’élément. Roll Out : C’est-à-dire lorsque le curseur de la souris sort de l’élément.
  3. Scroll in / Scroll out : ajoutez des actions sur la scène au scroll (défilement) de celle-ci.


La fenêtre des interactions

Pour appliquer des interactions à un objet (images, sons, textes, rectangles ou vidéos), commencez par choisir le type d’interaction souhaitée. Ici nous avons choisi les interactions de « Click / Tap ». 

    1. Une fenêtre s’ouvre. C’est dans cette box que vous allez paramétrer vos interactions.
    2. Ajoutez une action
:Vous êtes dans la fenêtre des interactions Click/Tap.
    3. 4. Cible et Paramètres
: choisissez le paramètre d’animation de l’élément cible qui sera actionné par l’interaction (cf : liste des paramètres disponibles ci-dessous).
    5. Valeur
: selon le paramètre choisi, changez sa valeur. L’interaction déclenchera le changement de valeur de l’élément, de sa valeur sur la scène à la valeur que vous aurez renseigné dans cette fenêtre
    6. Durée
: choisissez la durée d'exécution de l’interaction
    7. Délai
: choisissez le délai d'exécution de l’interaction.
    8. Effet
: appliquez un effet à l’interaction (interaction linéaire, avec accélération, avec élan, avec décélération, élastique, avec rebond).
    9. Retour : si vous cochez cette case, une deuxième interaction (un deuxième clic, un roll-out dans le cas d’un survol) rendra à l’élément cible son paramètre d’origine (c’est a dire avant action ).
    10. Supprimer
: vous pouvez supprimer un effet en cliquant sur la croix
    11. Appliquer
: appliquez les interactions


Liste des paramètres

Paramètres communs à tous les médias:

  1. X : change la position de l'élément cible dans un sens horizontal
  2. Y : change la position de l'élément cible dans un sens vertical
  3. Current position +X :  ajout à l'horizontal - chaque clic ajoute la valeur de déplacement 
  4. Current position +Y :  même paramètre que précédent, mais à la verticale
  5. Width :  change la largeur de l'élément cible
  6. Height : Change la hauteur de l'élément cible
  7. Background color : Change la couleur de fond de l'élément cible (excepté pour la vidéo et l'audio)
  8. Rotation : permet la rotation de l'élément cible
  9. Opacity : changement de l'opacité de l'élément cible
  10. Scale : Change les proportions de l'élément cible (choisir une valeur de 1.5 pour un élargissement de 50% par exemple)
  11. Depth : Change the order of the target element in the layers stack. Therefore can be used to move an object in the foreground to give it value 1 change l'ordre de l'élément cible dans la couche des calques. Ce paramètre peut donc être utilisé pour avancer un objet en premier plan avec la valeur 1, par exemple.
  12. Dispatch roll-over : déclenche une action "roll-over" d'un autre bouton
  13. Dispatch clic : déclenche une action "clic" d'un autre bouton
  14. Dispatch roll-out : déclenche une action "roll-out" d'une autre bouton

Specific parameters of the video and sound

  1. Play : déclenche la lecture de l'audio/vidéo
  2. Pause : déclenche la mise en pause de l'audio/vidéo
  3. Play/Pause : une première interaction déclenche la lecture, une seconde la pause, etc.
  4. Seek to : permet d'installer des points de lectures spécifiques dans une vidéo/audio. Très utile dans le cas de vidéos/sons contenant des chapitres.


Paramètres spécifiques à la scène

Enfin, vous pouvez animer une scène de votre page grâce au paramètre "scroll". Vous pouvez construire une grande page, plus grande que la fenêtre dans laquelle vous montrerez votre projet. Ainsi, avec le scroll, vous pouvez vous déplacer à l'intérieur de cette page et donner l'impression que la page bouge devant l'utilisateur.

  1. Choisissez d'appliquer à la "scene"

Ensuite, le type de mouvement sur cette scène :

    2. Horizontal Scroll : la scène rejoint la coordonnée/valeur X de l'élément cible             Vertical Scroll : la scène rejoint la coordonnée/valeur Y de l'élément cible                   Scroll dual axis : la scène rejoint les coordonnées/valeurs X et Y de l'élément             cible

    3. Assignez une valeur. Ici, notre valeur est une cible. Nous pouvons utiliser une        image comme une cible "hotlink", ainsi l'écran sera positionné en haut à gauche.

Did this answer your question?