Créer des actions sur la scène

Apprendre à créer des ancres, animations timeline ou boutons fullscreen sur vos pages

Greg avatar
Written by Greg
Updated over a week ago

Avec cette méthode, apprenez comment créer rapidement des ancres sur votre scène, jouer avec la timeline ou mettre en place un bouton de plein écran

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

  • Utiliser la fonction “scroll-to (ancre)”

  • Créer un bouton de plein écran

  • Créer un bouton timeline

Utiliser la fonction « scroll-to » (ancre)

  1. Premièrement, définissez une taille de scène. Ici, nous allons utiliser un format vertical qui marchera aussi au scroll.

Une fois vos médias importés dans la librairie, nous pouvons les importer sur la scène.

    2. Ici, nous utiliserons deux calques « hotlink » et « hotlink 2 » pour notre exemple.

    3. Ajoutez une action « click/tap » sur votre première ancre (ici « hotlink 1 »).

Astuce : Cette méthode fonctionne avec tous les types de contenus : vidéos, images, calques d’action, boutons…


Désormais, positionnons nos blocs de texte sur la scène dans le rendu souhaité. Ici, hotlink1 ira plus bas dans mon projet, au niveau de hotlink2.

Ajoutez une action au clic/tap sur hotlink1 : l’objectif est de permettre au clic de hotlink1 (qui nous permettra de naviguer) d’aller automatiquement à la fin du chapitre (hauteur de hotlink2).

Appliquez l’action sur la scène avec comme paramètre « scroll vertical ». Choisissez « hotlink2 » comme valeur, puis validez. (illustration ci-dessous)

Et voilà ! Vous venez de créer un scroll vertical sur la scène, au clic de hotlink 1, elle se déplacera jusqu’au hotlink2 !

Paramètres et valeurs de la scène dans l’onglet d’action :

  • Dans l’onglet paramètres, en choisissant le scroll vertical, la scène se déplacera de haut en bas ou de bas en haut.

  • En choisissant le scroll horizontal, la scène se déplacera de gauche à droite ou de droite à gauche.

  • Enfin, le scroll double axe, vous permettra de réaliser des déplacements verticaux.

Dans l’onglet « valeur », vous retrouverez tous vos calques, permettant ainsi de se rendre à celui sélectionné. Vous pouvez également choisir « min » ou « max », ce qui aura pour effet de vous placer au début de la scène, ou à la fin.

Créer un bouton de plein écran

Pour créer un bouton de plein écran :

  1. Ajoutez une action au « clic/tap » sur un élément.

  2. Appliquez sur la scène, puis choisissez « plein écran » dans les paramètres.


Créer un bouton sur la timeline

Pour créer un bouton play sur la timeline :

  1. Ajoutez une action « clic/tap » sur un élément

  2. Appliquez sur la scène, puis choisissez un paramètres de timeline : lecture, pause, lecture/pause, aller-à…

Did this answer your question?