Ajouter des groupes d’écrans

Un groupe d’écrans est un conteneur de mise en page comportant plusieurs écrans permettant d’organiser le contenu et les widgets sur des pages déroulantes. Chaque écran possède une scène principale et peut également comporter un volet déroulant, selon le modèle de groupe d’écrans. Lorsque vous faites défiler un groupe d’écrans, ce dernier occupe la totalité de la hauteur de l’écran. Si un groupe d’écrans inclut des volets déroulants, lorsque les utilisateurs font défiler le contenu d’un volet, la scène principale reste en place et revient uniquement une fois que l’utilisateur a fait défiler le dernier volet. Si un groupe d’écrans n’inclut aucun volet, la scène principale reste en place jusqu’à ce que le défilement de l’écran occupe la totalité de la hauteur de l’écran.

Exemples

Utilisez un groupe d’écrans pour prendre en charge les exigences de conception d’application, telles que les suivantes :

• Vous disposez de plusieurs images et chaque image requiert un long paragraphe de description ; vous souhaitez donc faire défiler son contenu tout en conservant l’image à la même position. Vous pouvez ajouter un groupe d’écrans avec un volet déroulant à une page déroulante, placer l’image sur la scène principale de l’écran et la description correspondante dans le volet déroulant de l’écran.
• Vous souhaitez afficher le contenu avec un effet de retournement de page plutôt qu’avec l’effet poussoir par défaut des pages déroulantes. Vous pouvez utiliser un modèle donné pour différents effets de transition entre chaque écran du groupe d’écrans.

Remarques sur l'utilisation

Pour ajouter un groupe d’écrans à une page déroulante, cliquez sur le bouton Insert screen group (Insérer un groupe d’écrans) dans la zone d’affichage et sélectionnez un modèle de groupe d’écrans. Lorsqu’un groupe d’écrans est ajouté à la page, une barre de défilement distincte apparaît dans la zone d’affichage du groupe d’écrans.

Si un groupe d’écrans comporte des volets déroulants, la hauteur du volet augmente automatiquement en fonction de son contenu. Vous pouvez insérer des widgets dans un volet en faisant glisser un widget à l’intérieur du volet ou en cliquant sur le bouton d’ajout.

Actuellement, les groupes d’écrans ne peuvent être ajoutés que pour les grandes tailles d’écran, et non pour les tailles d’écran moyennes et petites. Vous pouvez déplacer le groupe d’écrans entier vers la liste en attente pour personnaliser les mises en page de différents écrans.

Paramètres

Les groupes d’écrans incluent les paramètres de configuration suivants :

• Screen (Écran) : ajoutez plusieurs écrans, les uns après les autres, ou dupliquez des écrans existants si vous souhaitez qu’ils utilisent le même arrière-plan ou la même mise en page.
• Gérez les écrans du groupe à l’aide des options suivantes : Rename (Renommer), Duplicate (Dupliquer) et Delete (Supprimer). Faites glisser les écrans pour modifier l’ordre de défilement dans le groupe d’écrans. Cliquez sur un écran pour accéder aux paramètres de la scène principale et du volet déroulant (le cas échéant) et les modifier.
  • Main stage (Scène principale) : modifiez l’arrière-plan de la scène principale en choisissant une couleur de remplissage ou une image.
  • Volet déroulant
    • Mode : sélectionnez le mode Docked (Ancré) ou Floating (Flottant) pour obtenir des mises en page différentes.
    • Size (Taille) : définissez la largeur du volet. Vous pouvez aussi faire glisser le bord du volet sur la zone d’affichage pour le redimensionner.
    • Position : alignez les volets ancrés à gauche ou à droite, et centrez ou alignez les volets flottants à gauche ou à droite. Pour les volets flottants, définissez le décalage horizontal en pixels pour ajuster l’emplacement du volet en fonction de son alignement.
    • Gap (Écart) : spécifiez l’espace entre les widgets imbriqués (en pixels).
    • Padding (Marge de remplissage) : ajoutez une marge de remplissage autour du bord intérieur du volet.
    • Background (Arrière-plan) : modifiez l’arrière-plan du volet déroulant en sélectionnant une couleur de remplissage ou une image.

    Conseil :

    Lorsque l’on modifie le contenu dans un groupe d’écrans, les volets flottants comportent un bouton Hide in design view (Masquer en vue de conception) sur lequel il est possible de cliquer pour réduire temporairement le volet de façon à voir la scène principale qui se trouve derrière. Cliquez sur le bouton Show in design view (Afficher en vue de conception) dans l’angle inférieur droit de la scène principale pour afficher à nouveau le volet. Le fait de masquer le volet ne modifie pas l’aspect du groupe d’écrans en vue dynamique ou en aperçu.

Modèles

Outre la mise en page du widget, les modèles de groupe d’écrans possèdent d’autres paramètres prédéfinis, comme l’effet de transition, l’espacement entre les volets et le moment de déclenchement de l’écran suivant. Lorsque vous sélectionnez un groupe d’écrans dans la bibliothèque, survolez la fiche du modèle pour afficher un aperçu animé.

Les modèles prédéfinis suivants sont disponibles dans les groupes d’écrans configurables :

• Cascade est un modèle à plusieurs écrans comportant des volets déroulants. Les volets défilent les uns après les autres et les scènes principales se fondent dans la suivante. Les écrans basculent immédiatement une fois que volet suivant apparaît à partir du bas.
• Index est un modèle comportant des volets ancrés ; il possède le même effet de transition que le modèle Cascade. Lorsque le volet suivant revient en bas, l’écran passe au suivant.
• Flyer (Brochure) est un modèle à écran unique conçu spécifiquement pour une carte et des géosignets. Au fur et à mesure que l’utilisateur fait défiler le volet, la carte de la scène principale accède automatiquement à l’emplacement du géosignet (via le paramètre Bookmark widget (Widget Géosignet), Active on loading (Actif au chargement)).
• Stream (Continu) est un modèle à plusieurs écrans comportant des volets flottants. Il existe un effet parallaxe entre le volet de l’écran sélectionné et celui de l’écran non sélectionné. Lorsque le volet suivant passe en haut, l’écran se fond dans le suivant.
• Guide est un modèle possédant un effet parallaxe, pour lequel l’écran passe au suivant lorsque le volet suivant passe à un emplacement inférieur.
• Showcase (Galerie) est un modèle à plusieurs écrans comportant des volets flottants centraux. Lorsque l’utilisateur a fait défiler le volet en cours, la scène principale passe au volet suivant avec un effet de transition de couverture.
• Slideshow (Diaporama) est un modèle à plusieurs écrans comportant des volets ancrés. Lorsque l’utilisateur a fait défiler le volet en cours, la scène principale passe au volet suivant avec un effet de transition de poussoir.
• Portfolio (Portefeuille) est un modèle à plusieurs écrans comportant uniquement la scène principale, avec un effet de transition de couverture.