Remarque :

Aucune nouvelle fonctionnalité n’est plus ajoutée à Adobe Muse et le support prendra fin le 26 mars 2020. Pour plus d’informations et pour obtenir de l’aide, reportez-vous à la page de fin de service Adobe Muse.

Améliorations dans Adobe Muse CC 2015.1 / Février 2016

Vous pouvez rendre votre création plus intéressante et attrayante en appliquant des transitions vers différents objets de votre page web. Vous pouvez également définir, dans chaque objet, le délai d’expiration, la durée et les options de temporisation pour chaque transition d’état.

Les changements d’effets Biseau et Lueur entre les différents états sont pris en charge dans la transition d’état.

Présentation des différents états d’objet

L’état d’un objet détermine son aspect lorsqu’un utilisateur interagit avec lui. Ces interactions peuvent être des survols de souris (ou survols), des clics, etc. Lorsque le visiteur interagit avec un objet, cela signifie que ce dernier passe de l’état par défaut ou normal à un autre état. A cette fin, Adobe Muse ajoute des transitions fluides pour ce type d’interaction.

Dans Adobe Muse, vous pouvez appliquer des états à différents types d’objet, notamment le texte, les conteneurs de widget (de tous les types de widget), les images, les hyperliens, les boutons, etc. Les états peuvent présenter des styles graphiques, des styles de paragraphe, des styles de caractère, etc.

Les différents états d’un objet dans Adobe Muse

Adobe Muse propose les états suivants, qui vous permettent de modifier le style et l’apparence d’un objet en fonction de l’interaction utilisateur. 

  • Normal : l’état Normal détermine l’apparence par défaut d’un objet au chargement de la page web. Il permet de définir l’état de l’objet lorsqu’il n’y a aucune interaction. Un objet passe de l’état Normal à d’autres états.
  • Clic : l’état Clic détermine l’apparence d’un objet lorsque le visiteur clique dessus, sans relâcher le bouton de la souris. 
  • Survol : l’état Survol vous permet de modifier l’apparence d’un objet lorsque vous le survolez avec le pointeur de la souris. L’état Survol est une des façons les plus simples de distinguer un objet interactif d’un objet qui ne l’est pas sur une page web.
  • Actif : l’état Actif détermine l’apparence d’un objet lorsqu’il est actif, et que le visiteur a déjà cliqué dessus. Par exemple, lorsqu’un bouton est activé ou qu’un menu est sélectionné.
    Lorsqu’un objet passe à l’état Actif, cela indique que l’objet est en cours d’utilisation. Les états Actif peuvent également être définis pour tous les types d’objet, notamment les hyperliens.

Affecter des états aux objets

Tous les objets disposent de quatre états par défaut. Toutefois, Adobe Muse vous permet de personnaliser chacun de ces états individuellement à l’aide du panneau Etats.

Remarque :

Lorsque vous utilisez des états, il est important de conserver la trace de vos sélections à l’aide de l’indicateur de sélection. Cela est dû au fait qu’Adobe Muse vous permet de modifier l’état Normal d’un objet, par défaut. Ainsi, même si vous modifiez l’état Actif de l’objet A, sélectionnez l’objet B, puis resélectionnez l’objet A, il reprend l’état Normal. Par conséquent, il est important que vous choisissiez explicitement l’état que vous souhaitez modifier dans le panneau Etats avant de définir le style de l’objet, à chaque fois.

Par défaut, les modifications apportées à un objet sont enregistrées sous l’état Normal. Toutefois, Muse vous permet de sélectionner un autre état dans le panneau Etats et de définir le style de l’objet pour personnaliser davantage un état. Vous pouvez vous concentrer sur le comportement de l’objet pour chaque type d’interaction en modifiant séparément chaque état.

Pour personnaliser ou modifier l’état d’un objet, procédez comme suit :

  1. Ouvrez le panneau Etats en cliquant sur Fenêtre > Etats.
  2. Sélectionnez l’objet que vous souhaitez modifier.
  3. Sélectionnez l’Etat que vous souhaitez modifier et continuez à définir le style de l’objet.
  4. Dans le panneau Etats, sélectionnez Transition et sélectionnez l’option Fondu. Définissez les options Délai, Durée et Vitesse pour la transition. Lorsque vous sélectionnez Transition, l’objet passe d’un état à l’autre en fonction de vos paramètres.
Lorsque vous définissez le style d’un objet, vous pouvez également sélectionner un état dans la liste déroulante de l’indicateur de sélection.

Affectation des états des widgets et des conteneurs de widget

  1. Fermez le navigateur et revenez à Adobe Muse.

  2. Cliquez une fois sur le widget pour sélectionner l’ensemble du menu. Cliquez à nouveau sur le bouton aliments pour sélectionner l’élément de menu aliments. Si vous cliquez une troisième fois par inadvertance et que l’indicateur de sélection affiche le mot Etiquette, appuyez une fois sur la touche Echap pour monter d’un niveau dans la hiérarchie, de sorte que le mot Elément de menu s’affiche.

    Dès lors que l’option Modifier ensemble est activée dans le panneau Options, toutes les modifications apportées à l’aspect de cet élément de menu aliments sont appliquées à tous les boutons du widget Menu horizontal. Les modifications sont ainsi effectuées beaucoup plus rapidement. Sauf si l’application de différents styles à chaque bouton est nécessaire, conservez le paramètre par défaut de l’option Modifier ensemble activé.

    Indicateur de sélection défini sur l’élément de menu
  3. Ouvrez le panneau Etats en sélectionnant l’onglet correspondant ou en choisissant Fenêtre > Etats.

    Ce panneau permet de modifier les différentes manières dont le graphisme du bouton s’affiche, en fonction de l’activité du curseur du visiteur. Vous remarquerez qu’il y a plusieurs cases grises qui définissent l’aspect de chaque état.

    Lorsque vous avez prévisualisé le site, vous avez observé que l’état Normal fait référence à la façon dont le menu s’affiche au chargement de la page, lorsque le curseur du visiteur n’interagit pas avec le menu. Si le visiteur survole un bouton avec le curseur de la souris, les styles appliqués à l’état Survol s’affichent. Si le visiteur appuie sur le bouton, les styles appliqués à l’état Clic s’affichent. Enfin, si le visiteur parcourt cette page du site (par exemple, s’il a cliqué sur l’élément de menu A propos et qu’il est en train de consulter cette page) le bouton prend l’aspect correspondant à l’état Actif. Ce dernier état est facultatif, mais il est très utile dans certains cas : les visiteurs peuvent voir un aperçu de la page qu’ils sont en train de consulter.

    Etats d’un bouton
  4. Dans le panneau Etats, cliquez sur chaque élément de la liste : Normal, Survol, Clic et Actif. Vous remarquerez que lorsque vous cliquez sur chacun des états du panneau, le widget de menu sur la page se met à jour pour afficher l’aspect par défaut de chaque état.

  5. Cliquez à nouveau sur l’état Normal. L’élément de menu Page d’accueil étant sélectionné, utilisez l’option Nuance de couleur de fond pour choisir une couleur différente, telle que le rouge. Lorsque vous définissez une couleur de fond différente, tous les éléments de menu mettent à jour leur état Normal car l’option Modifier ensemble est activée.

    Options d’état de bouton
    Lorsque vous mettez à jour la couleur de fond pour l’un des états de bouton, les autres sont automatiquement mis à jour lorsque l’option Modifier ensemble est activée.

  6. Sélectionnez Transition, puis sélectionnez l’option Fondu. La transition de l’objet d’un état à l’autre apparaît ou disparaît, en fonction de vos paramètres.

    Vous pouvez définir les options suivantes lorsque vous sélectionnez l’option de transition d’un état à un autre :

    Délai : délai du passage d’un état à un autre, en secondes.

    Durée : durée de la transition.

    Vitesse : avec cette option, vous pouvez rendre la transition linéaire ou accélérer puis décélérer la transition vers l’état suivant. Vous pouvez également sélectionner les options Accélération, Décélération ou Accélération/Décélération. La transition accélère ou décélère, en fonction de vos paramètres.

  7. Choisissez Fichier > Prévisualiser le site dans le navigateur, et observez la personnalisation de l’état Normal du bouton. Lorsque le menu se charge pour la première fois, chaque bouton, à l’exception de celui décrivant la page en cours, apparaît en rouge. Lorsque vous survolez un bouton, celui-ci prend par défaut la couleur grise de survol, créant ainsi un effet de survol.

  8. Pour cet exemple, sélectionnez chacun des états dans le panneau Etats (ou sélectionnez chaque état en utilisant le menu Etats situé à côté de l’indicateur de sélection dans le panneau de configuration) et définissez la couleur de fond sur aucun (couleur blanche avec une ligne diagonale rouge). Ce paramètre supprime réellement les boutons d’élément de menu d’arrière-plan du mode, de sorte que les boutons de menu sont transparents et que la conception de l’arrière-plan apparaît à travers.

Au moment de la rédaction de ce manuel, le conteneur externe du widget Menu horizontal est transparent par défaut. Cependant, si vous le souhaitez, vous pouvez utiliser l’option Sélecteur de couleurs de fond pour définir la couleur de fond, tout comme les conteneurs de boutons d’élément de menu. Plus tard, lorsque vous créerez vos propres sites, vous pourrez faire des essais en définissant une couleur de fond pour l’ensemble du widget, et en définissant une autre couleur de fond pour les conteneurs de boutons. Vous pouvez également essayer d’ajouter une image d’arrière-plan pour créer des boutons.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne