Ajout d’effets de défilement sur vos sites web Adobe Muse

Le panneau Effets de défilement contient quatre onglets différents permettant de contrôler le mouvement, l’opacité, les widgets de diaporama et le contenu Adobe Edge Animate en fonction de la manière dont le visiteur fait défiler une page. Lorsque les effets de défilement sont appliqués en association les uns avec les autres, et lorsque certains éléments sont également épinglés, définis sur une largeur de 100 % et/ou placés au-dessus et en dessous les uns des autres à l’aide du panneau Calques, vous pouvez créer de nombreux effets intéressants.

L’interface du panneau Effets de défilement est similaire à celle du panneau Effets de défilement pour le Fond du navigateur et le Remplissage de l’arrière-plan. Pour appliquer des effets de défilement à un élément de page à l’aide de l’onglet Mouvement du panneau Effets de défilement, procédez comme suit :

1. Dans Muse, passez en mode Conception et sélectionnez Page >Propriétés de la page. 
2. Définissez la hauteur minimale sur 2000 pixels minimum, pour vous assurer que la page sera suffisamment longue pour pouvoir défiler. 
3. Cliquez sur OK pour enregistrer les modifications et fermez la boîte de dialogue Propriétés de la page.
4. En mode Conception, dessinez un rectangle ou un bloc de texte sur la page.
5. Utilisez l’onglet Fond du menu Fond pour ajouter une image d’arrière-plan mosaïque ou non mosaïque. Ou sélectionnez simplement une couleur de remplissage unie ou dégradée.
6. Choisissez Fenêtre > Effets de défilement pour ouvrir le panneau Effets de défilement.
   

7. Activation des effets de défilement : dans le panneau Effets de défilement, l’onglet Mouvement (à l’extrême gauche) s’affiche. Lorsque l’élément est sélectionné sur la page, activez la case à cocher Mouvement.
   
   CONSEIL : notez que lorsque la case Mouvement est activée, une poignée en T est ajoutée à l’élément qui s’étend au delà du bord supérieur. La poignée en T indique la position clé de l’effet de défilement qui est appliqué à l’élément. L’effet de défilement commence lorsqu’un visiteur atteint la position clé lors du défilement.
   
   Par défaut, la poignée en T apparaît au-dessus de l’élément. Vous pouvez toutefois cliquer dessus et la faire glisser pour l’étirer vers le haut, la faire glisser vers le bas pour l’aligner sur le bord supérieur de l’élément ou la faire glisser vers le bas au-dessous de l’élément.
   
   
8. Positionnement de la poignée en T pour définir la position clé : faites glisser la poignée en T pour définir la position clé. Vous pouvez ainsi configurer le mouvement qui survient avant et après l’instant où la page consultée atteint le haut de la poignée en T.
   
   Vous pouvez également saisir une valeur numérique dans le champ Position clé situé au milieu du panneau Effets de défilement lorsque l’onglet Mouvement est actif. Dans l'image ci-dessus, la position clé est définie sur 200 pixels. 
   
   L’emplacement de la poignée en T représente la position clé de l’élément. Lorsque le visiteur fait défiler la page verticalement, les paramètres de la section Mouvement initial sont appliqués de façon à ce que la position de l’élément corresponde à son emplacement, comme illustré en mode Conception.
   
   Lorsque le visiteur fait défiler la page ou clique sur un lien d’ancrage pour accéder directement à une partie de la page située au-delà de la position clé de l’élément, les paramètres de la section Mouvement final sont appliqués.
   
   La section Mouvement initial contient une série de flèches verticales et horizontales et des options de vitesse.
   
   
9. Définition de la direction verticale du mouvement initial : sélectionnez une direction verticale (vers le haut ou vers le bas) en cliquant sur l’un des boutons verticaux. Entrez une valeur de vitesse dans le champ en regard des flèches verticales pour définir la vitesse à laquelle le mouvement se produira en fonction de la vitesse de défilement de la page. Si vous entrez 0, l’élément ne se déplacera pas verticalement. Vous pouvez également saisir un pourcentage en utilisant une virgule. Par exemple, si vous saisissez 0,5, l’élément se déplace verticalement à une vitesse deux fois plus lente que la vitesse de défilement de la page.
   
   
10. Définition de la direction horizontale du mouvement initial : définissez la direction horizontale de défilement de l’élément (vers la gauche ou vers la droite) en cliquant sur la flèche vers la gauche ou vers la droite pour définir la direction dans laquelle l’élément se déplacera avant d’atteindre la position clé. Dans le champ situé à droite des flèches horizontales, définissez la valeur de la vitesse correspondant à la direction horizontale. Si vous ne souhaitez pas que l’élément se déplace dans une direction horizontale, définissez le champ de la vitesse horizontale initiale sur 0.
    
    
11. Répétez les étapes 7 et 8 pour définir la direction et les vitesses de déplacement dans la section Mouvement final.

Dans l’exemple illustré ci-dessous, la position clé est définie sur 500 pixels. Lorsque le navigateur commence à faire défiler la page, l’élément se déplace vers le bas, à sa position, à une vitesse égale à 1 fois la vitesse de défilement de la page, autrement dit à la même vitesse. L’élément parvient à sa position lorsque la page atteint la position clé. Dès que la page dépasse la position clé, l’élément se déplace vers la droite à une vitesse 2 fois plus élevée que la vitesse de défilement de la page.

12. Sélectionnez Aperçu ou choisissez Fichier > Prévisualiser la page dans le navigateur pour tester les effets de défilement. Faites défiler la page vers le bas, puis vers le haut pour voir l’élément se déplacer.
13. Une fois le test terminé, revenez à Muse ou cliquez sur le bouton Conception pour poursuivre l’édition de la page.

Dans cette section, vous allez découvrir comment modifier la visibilité d’une page, en changeant l’affichage d’un élément en fonction des interactions du visiteur lorsqu’il la fait défiler. Vous pouvez en effet afficher et masquer un contenu pour faire en sorte que les éléments semblent apparaître ou disparaître en fondu lorsque le visiteur fait défiler la page vers le bas jusqu’à une nouvelle section. Pour appliquer des effets de défilement qui affectent la transparence d’un élément de page à l’aide de l’onglet Opacité du panneau Effets de défilement, procédez comme suit :

1. Lors de la modification d’une page en mode Conception, vérifiez que la valeur de pixels définie dans le champ Hauteur min. des Propriétés de la page est supérieure à la hauteur moyenne de la plupart des moniteurs, comme 2 000 pixels. Vous pouvez aussi ajouter du contenu à la page pour vous assurer que la page sera suffisamment longue pour pouvoir défiler.
2. En mode Conception, dessinez un rectangle ou un bloc de texte sur la page.
3. Utilisez l’onglet Fond du menu Fond (ou utilisez le panneau Fond) pour ajouter une image d’arrière-plan mosaïque ou non mosaïque à l’élément de page sélectionné, ou définissez une couleur de remplissage unie ou dégradée. (Ou si vous préférez, ajoutez un widget de diaporama ou placez un fichier OAM Adobe Edge Animate sur la page.)
4. Lorsque l’élément est sélectionné, cliquez sur l’onglet Opacité (deuxième onglet à partir de la gauche) du panneau Effets de défilement, puis activez la case à cocher Opacité.
   

Lorsque l’option Opacité est activée, un autre type de poignée apparaît sur l’élément. Comme avec la poignée en T utilisée pour définir la position clé dans l’onglet Mouvement, vous pouvez cliquer et faire glisser cette poignée pour qu’elle apparaisse au-dessus de l’élément, la faire glisser vers le bas pour l’aligner sur le bord supérieur (ou au-dessus d’une partie de l’élément) ou encore la faire glisser vers le bas au-dessous de l’élément. La poignée Opacité est constituée de trois parties qui peuvent être déplacées indépendamment les unes des autres pour définir les valeurs Position clé, Position de fondu 1 et Position de fondu 2.

5. Cliquez sur la partie carrée centrale de la poignée et faites-la glisser pour définir la position clé. Dans l’exemple illustré ci-dessous, la position clé est définie sur 150 pixels.

6. Cliquez sur la partie circulaire supérieure de la poignée et faites-la glisser pour la placer à l’emplacement souhaité. Dans l’exemple ci-dessous, la position de fondu 1 est définie sur 100 pixels.
   

7. Cliquez sur la partie circulaire inférieure de la poignée et faites-la glisser pour la placer à l’emplacement souhaité. Dans l’exemple ci-dessous, la position de fondu 2 est définie sur 200 pixels.

Dans cet exemple, l’élément est complètement transparent au début, puis devient plus opaque jusqu’à devenir entièrement opaque (la valeur d’opacité correspondant à la position clé est actuellement définie sur 100 %) lorsque la page atteint la position clé. Dès que la page dépasse la position clé, l’élément redevient progressivement transparent, pour disparaître en fondu lorsque la page va au-delà de 200 pixels .

8. Sélectionnez Aperçu ou choisissez Fichier > Prévisualiser la page dans le navigateur pour tester les effets de défilement. Faites défiler la page vers le bas, puis vers le haut pour voir l’évolution de l’opacité de l’élément au fur et à mesure du défilement de la page.
9. Une fois le test terminé, revenez à Muse ou cliquez sur le bouton Conception pour poursuivre l’édition de la page.
   

Le mouvement de défilement permet également très souvent de combiner l’interaction de défilement avec l’affichage des images dans un diaporama. Vous pouvez ajouter un widget de diaporama sur la page puis utiliser l’onglet Diaporama du panneau Effets de défilement pour appliquer les effets de défilement, comme l’affichage automatique d’une nouvelle image dans le diaporama, chaque fois que le visiteur fait défiler la page jusqu’à un emplacement spécifique.

Cliquez sur l’onglet Diaporama (troisième onglet à partir de la gauche) pour vérifier les paramètres de cette section.

Cette partie de l’interface du mouvement de défilement est fréquemment utilisée pour épingler un widget de diaporama sur une page. En règle générale, le widget de diaporama est configuré (à l’aide du menu Options) pour afficher uniquement le plus grand conteneur de diaporama, tout en masquant les vignettes ainsi que les boutons Suivant et Précédent.

Un diaporama plein écran est particulièrement adapté à cet effet, même si le type de widget de diaporama que vous choisirez finalement d’ajouter dépendra de la conception du site.

Pour appliquer les effets de défilement à un widget de diaporama, procédez comme suit :

1. Mettez à jour le champ Hauteur min. de la boîte de dialogue Propriétés de la page afin que la page soit suffisamment longue pour pouvoir défiler. Vous pouvez également ajouter du contenu pour créer une page plus longue.
2. Faites glisser le widget de diaporama de la bibliothèque de widgets vers la page. Utilisez le menu Options pour configurer les options du diaporama. (Lorsque vous appliquez des effets de défilement aux widgets de diaporama, les options Suivant, Précédent et Vignettes sont généralement désactivées.)
3. Ajoutez des images au widget de diaporama en cliquant sur le dossier placé en regard de la section Images dans le menu Options. Parcourez le dossier et sélectionnez les images à ajouter depuis votre ordinateur pour compléter la galerie d’images.
4. Utilisez l’interface Epingler du panneau de configuration pour épingler le diaporama à sa position actuelle dans la fenêtre du navigateur. Lorsque le diaporama est sélectionné, cliquez sur l’une des six positions d’épinglage.
   

Après avoir ajouté et configuré le diaporama épinglé, vous pouvez ajouter des effets de défilement.

Dans l’onglet Diaporama du panneau Effets de défilement, activez la case à cocher Diaporama lorsque le widget de diaporama est sélectionné.

Notez que dès que l’option Diaporama est activée, la poignée de la position clé est ajoutée au diaporama en mode Conception. Si vous voulez mettre à jour les valeurs de la position clé de défilement, vous pouvez faire glisser les côtés gauche et droite de la poignée ou saisir des valeurs numériques dans le champ Positions clés de défilement. Vous pouvez également cliquer sur les flèches vers le haut et vers le bas du panneau Effets de défilement pour augmenter ou réduire la valeur numérique.

L’onglet Diaporama du panneau Effets de défilement est une interface à deux boutons offrant deux méthodes de contrôle différentes de la lecture des images d’un diaporama. Vous pouvez définir le diaporama pour qu’il soit automatiquement lu ou pour qu’il avance de manière incrémentielle d’image en image en fonction du défilement de la page.

La première méthode consiste à définir la position clé souhaitée puis à activer la case à cocher Lecture automatique.

Lorsque le visiteur fait défiler la page au-delà de la position clé (ou lorsque le visiteur clique sur un lien dans une balise d’ancrage et accède directement au bas de la page, au-delà de la position clé), la lecture du diaporama débute. La fonction de lecture automatique continue à afficher les images en boucle jusqu’à ce que la page soit repositionnée au-dessus de la position clé ou que le visiteur quitte la page.

Dans l’exemple illustré sur l’image ci-dessous, le diaporama débute lorsque la page défile jusqu’à 100 pixels (ou n’importe où en dessous de ce paramètre de position clé). Si le visiteur revient vers le haut de la page, le diaporama s’arrête lorsque la page dépasse la position clé (99 pixels ou moins).

La deuxième méthode permettant de contrôler le widget de diaporama consiste à définir la position clé et à activer le bouton radio Changer de diapositive tous les. Dans ce flux de travaux, vous définissez également le nombre de pixels dans le champ situé au-dessous du bouton radio, pour indiquer la fréquence à laquelle les images du diaporama avanceront en fonction de la distance parcourue par la page lorsque le visiteur la fait défiler.

Par exemple, vous pouvez épingler un widget de diaporama sur une page plus longue, de sorte qu’il reste à un emplacement fixe lorsque les autres contenus de la page défilent. En définissant une valeur numérique pour l’option Changer de diapositive tous les :, vous pouvez configurer le diaporama pour qu’il passe à l’image suivante chaque fois que la page défile vers le bas du nombre de pixels spécifié.

Dans l’image ci-dessus, la position clé est définie sur 200. Lorsque le visiteur fait défiler la page au-delà de 200 pixels à partir du haut, l’image suivante s’affiche dans le diaporama chaque fois que le visiteur fait défiler la page de 30 pixels supplémentaires.

Adobe Edge Animate est un outil de conception intuitif qui vous permet de créer des animations Web basées sur HTML5. L’interface Edge Animate vous permet de créer des compositions à l’aide de symboles et d’éléments graphiques de mouvement en boucle. Les animations créées à l’aide d’Adobe Edge Animate peuvent être exportées sous forme de fichiers OAM, puis placées sur les pages de vos sites Muse. Les animations créées dans Edge Animate sont lues dans un navigateur sans nécessiter de plug-in.

Lorsque vous créez des animations dans Adobe Edge Animate, vous faites glisser des éléments dans la zone de création et gérez leurs mouvements à l’aide d’un montage. Outre la possibilité d’ajouter des éléments au montage principal, directement, vous pouvez également créer des éléments imbriqués avec des sous-éléments qui sont lus à partir de leurs propres montages internes. Pour en savoir plus sur l’utilisation d’Adobe Edge Animate, consultez la page produit relative à Adobe Edge Animate. Visionnez également les didacticiels vidéo relatifs à Adobe Edge Animate sur Adobe TV.

Pour utiliser la fonction de mouvement de défilement Adobe Edge Animate, la première étape consiste à créer une composition dans ce but. Les effets de défilement peuvent être appliqués aux fichiers OAM afin d’affecter les animations placées sur le montage principal. En concevant stratégiquement l’animation afin que seuls les éléments que vous souhaitez déplacer lors du défilement de la page soient sur le montage principal (et en plaçant tous les autres éléments de l’animation dans des montages de symbole imbriqués), vous pouvez créer des animations interactives. Lorsque les visiteurs font défiler la page, les paramètres d’effets de défilement contrôlent uniquement la lecture des éléments animés sur le montage principal.

Pour plus d’informations sur la création d’animations à ajouter à un site Adobe Muse, voir Contenu Adobe Edge Animate.

Pour utiliser l’onglet Diaporama du panneau Effets de défilement, procédez comme suit :

1. Exportez le fichier OAM Adobe Edge Animate et enregistrez-le dans le dossier de votre site.
2. Lancez Muse et double-cliquez sur une page pour l’ouvrir en mode Conception. Vérifiez que la page est suffisamment longue pour permettre le défilement en mettant à jour les paramètres de hauteur minimale dans la boîte de dialogue Propriétés de la page ou en ajoutant du contenu à la page pour la rallonger.
3. Choisissez Fichier  > Importer, puis recherchez et sélectionnez le fichier OAM dans le dossier du site.
4. Ouvrez le panneau Effets de défilement. Cliquez sur l’onglet Adobe Edge Animate (quatrième onglet à partir de la gauche) pour vérifier les paramètres de cette section.
5. Alors que le fichier OAM est sélectionné, activez la case à cocher Edge Animate.

Dans l'image ci-dessus, la position clé est définie sur 50 pixels. Vous pouvez faire glisser la poignée en T ou saisir une autre valeur dans le champ Position clé pour l’affiner.

Après avoir défini la position clé, vous pouvez contrôler la lecture de l’animation à l’aide de deux options :

• Lecture automatique : lorsque cette option est sélectionnée, l’animation du montage principal démarre dès que le navigateur atteint la position clé, quel que soit le nombre d’images du montage principal. L’animation se poursuit jusqu’à ce que le visiteur fasse défiler la page au-dessus de la position clé.
• Changer de diapositive tous les : lorsque cette option est sélectionnée, l’animation du montage principal avance d’une image chaque fois que le visiteur fait défiler la page au-delà d’un nombre de pixels spécifié. Par exemple, si vous créez une page d’une hauteur de 3 000 pixels et que vous saisissez le numéro 10, l’animation du montage principal est diffusée à une vitesse d’une image tous les 10 pixels parcourus sur la page. Si le visiteur fait défiler la page plus rapidement, la vitesse de diffusion de l’animation s’accroît.
  

6. Après avoir choisi les paramètres dans l’onglet Edge Animate du panneau Effets de défilement, sélectionnez Fichier > Prévisualiser la page dans le navigateur (ou cliquez sur le bouton Aperçu). Testez la page en la faisant défiler vers le haut et vers le bas pour voir comment le contenu de l’animation Edge Animate (qui a été ajouté au montage principal) est lu.
7. Si vous devez y apporter des modifications, revenez à Muse (ou cliquez sur le bouton Conception) et mettez à jour les paramètres du panneau Effets de défilement.