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.
Click / Tap : lors d’un clic sur l’élément sélectionné.
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.
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:
X : change la position de l'élément cible dans un sens horizontal
Y : change la position de l'élément cible dans un sens vertical
Current position +X : ajout à l'horizontal - chaque clic ajoute la valeur de déplacement
Current position +Y : même paramètre que précédent, mais à la verticale
Width : change la largeur de l'élément cible
Height : Change la hauteur de l'élément cible
Background color : Change la couleur de fond de l'élément cible (excepté pour la vidéo et l'audio)
Rotation : permet la rotation de l'élément cible
Opacity : changement de l'opacité de l'élément cible
Scale : Change les proportions de l'élément cible (choisir une valeur de 1.5 pour un élargissement de 50% par exemple)
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.
Dispatch roll-over : déclenche une action "roll-over" d'un autre bouton
Dispatch clic : déclenche une action "clic" d'un autre bouton
Dispatch roll-out : déclenche une action "roll-out" d'une autre bouton
Specific parameters of the video and sound
Play : déclenche la lecture de l'audio/vidéo
Pause : déclenche la mise en pause de l'audio/vidéo
Play/Pause : une première interaction déclenche la lecture, une seconde la pause, etc.
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.
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.