Dans ce tutoriel, nous allons apprendre à créer quelques actions très simplement à l’aide de RacontR. L’interactivité est le cœur de l’outil, elle permet de simuler de l’interaction et de rendre vivants vos médias.
Voici les différentes possibilités de RacontR que nous allons aborder :
Préparer sa scène
Ajoutez une action au clic de la souris (ou au tap de la tablette)
Ajoutez une action au survol de la souris
Préparer la scène
Pour notre exemple, nous avons importé deux images : « A » (le carré bleu) et « B », le carré noir.
C’est à partir de ces deux médias que nous allons travailler.
L’objectif est de comprendre comment créer des actions très simplement entre différents éléments sur RacontR.
Ajoutez une action au clic de la souris (ou au tap de la tablette)
Choisissez l’élément qui sera cliquable et qui va générer de l’action.
Nous allons donc configurer les actions qui auront lieu au « clic » ou au « tap » de « A ».
Ici, nous allons appliquer une action sur « A » qui changera l’opacité de « B » à 20%.
Cliquez sur « A », puis, dans le panneau d’action (la petite main), sélectionnez Click / Tap (ajout d'une action au click/tap sur « A »).
Créez votre action : ici, nous appliquons sur « B » un paramètre d’opacité de 20%, d’une durée de 0,6 secondes avec une action de retour (la case « back » cochée permet de répéter l’action dans le sens inverse).
Une fois votre action créée, pensez à valider ("apply").
Ajoutez une action au survol de la souris
Le principe est le même que pour ajouter une action au clic :
Cliquez sur l’élément de votre scène auquel vous voulez ajouter une action de survol (ici, l’élément « B »), puis dans les paramètres, sélectionnez « Roll-Over ».
Dans notre cas, nous allons appliquer sur l’élément « B » (donc sur lui-même) une action de « rotation » de -4%, d’une durée de 6ms, avec un effet de retour. Nous appliquons également une action sur « A », d’échelle, d’une valeur de 1.04x, d’une durée de 6ms, avec un effet de retour.
Vous pouvez ajouter également des actions au roll-out (lorsque la souris n’est pas sur l’élément).
Vous n’avez plus qu’à valider et lancez votre aperçu !
Vous pouvez désormais imaginer pleins de façons de créer de l’action sur vos médias : opacité, positionnement, échelle, rotation et bien plus encore !
