zone de défilement

Faites défiler un texte, une image... horizontalement ou verticalement !

La zone de défilement est un pilier de votre création : elle vous permet de créer et d’afficher une zone plus grande que la zone visible. Votre utilisateur n’a qu’à “scroller” (horizontalement ou verticalement) avec son doigt pour faire défiler la zone et accéder à l’ensemble du contenu.

Cette zone peut inclure n’importe quel type d’objet (texte, image, composants) dans n’importe quelle dimension.

 

Principales utilisations

defilement-1.gif

Insérer une zone de défilement

Cliquez sur Composants et insérez la Zone de défilement. Double-cliquez sur la zone visible ou cliquez sur EDITER LA ZONE DE DEFILEMENT pour ajouter du contenu.

Choisissez parmi les propriétés suivantes :

propriétés défilement

  • Editer la zone de défilement : pour éditer le contenu ou créer des marqueurs, c’est-à-dire marquer des positions spécifiques dans la zone auxquelles vous pourrez ensuite associer des actions particulières
  • Interaction utilisateur : cette option permet de prendre en compte les interactivités définies sur et dans le composant. Par défaut, cette option est toujours cochée.
  • Défilement : vous pouvez choisir un défilement vertical ou défilement horizontal selon vos besoins. Par défaut, le défilement vertical est sélectionné.
  • Options : vous pouvez choisir d'empêcher le défilement utilisateur, de cacher la barre de défilement, d’enlever le rebond en fin du défilement ou bien d’ajouter un ralentissement.
  • Taille du contenu : pour paramétrer la taille de la zone qui contient le contenu et en ajuster la hauteur et la largeur. La zone visible est quant à elle paramétrable à partir de la barre d’outils.
  • Position par défaut : pour sélectionner la position qui sera affichée au chargement de l’écran (sur la base des marqueurs prédéfinis). Si vous ne définissez rien et que vous retournez sur cet écran, votre écran conservera la dernière position affichée.

 

Interagir avec la zone de défilement

 

Déclencher une action

Votre zone de défilement peut déclencher une action. Sélectionnez votre composant et ouvrez la fenêtre Interactivités. Cliquez sur + AJOUTER ACTION pour accéder à la liste des déclencheurs standards :

  • Simple tap
  • Double tap
  • Touche
  • Relâche
  • Glisse vers le haut/bas/droite/gauche
  • Survol entrant/sortant

Et des déclencheurs spécifiques :

  • Démarrage du défilement
  • Fin du défilement

 

Créer des marqueurs de position

 

Si vous souhaitez déclencher une action à une position x de la zone ou déplacer votre zone jusqu'à la position y, vous devez créer des marqueurs.

Pour créer un marqueur, rendez-vous dans la fenêtre Propriétés du composant et cliquez sur EDITER. Créez un nouveau marqueur depuis la fenêtre Edition.

 Astuce : une fois ces marqueurs définis, vous avez accès à l'option le magnétisme, symbolisée par un aimant. Si vous l’activez, vous imposez l’arrêt du défilement sur ces marqueurs et vos utilisateurs ne pourront donc plus défiler en une seule fois l’ensemble de la zone. Cela vous permet de structurer/chapitrer votre zone de défilement pour que vos utilisateurs visualisent bien les différentes informations.

L'icône de la punaise vous permet de définir un marqueur par défaut.

Ouvrez la fenêtre Interactivités, sélectionnez votre composant et cliquez sur + AJOUTER ACTION pour retrouver ce temps dans la liste des déclencheurs.

Si vous choisissez l'action Agir sur un composant, vous aurez accès à ces nouvelles possibilités :

  • Changer position
  • Position suivante
  • Position précédente

 

Synchroniser une zone de défilement

 

Vous pouvez synchroniser votre zone avec un autre composant (Minuteur, Séquence...) et choisir de synchroniser :

  • Positions en x
  • Positions en y
  • Marqueurs

Ces paramètres sont accessibles depuis la fenêtre Propriétés du composant Synchronisation.

 

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

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

Simple d'utilisation ∗ Gratuit ∗ Pas d'installation

COMMENCEZ MAINTENANT !