Découvrez comment créer des sites web Adobe Muse interactifs et sophistiqués avec des animations et des effets de défilement créés avec Adobe Edge Animate.

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.

Adobe Edge Animate est un outil d’interaction web qui vous permet d’intégrer du contenu animé aux sites web, en utilisant des normes web comme HTML5. Vous pouvez utiliser l’interface intuitive de montage dans Animate pour construire visuellement de superbes animations HTML5 qui s’exécutent lors de leur affichage dans tous les navigateurs modernes.

Préparation d’animations dans Animate

Avant d’animer un contenu dans Muse, vous pouvez effectuer certaines modifications pour préparer le fichier Animate, et rendre l’incorporation dans Muse transparente. Procédez comme suit :

  1. Démarrez Animate. La fenêtre Prise en main s’affiche.

  2. Cliquez sur Ouvrir le fichier, puis parcourez l’arborescence pour sélectionner le fichier d’exemple de projet doté de l’extension de fichier .an, que vous avez téléchargé. Vous pouvez, si vous préférez, ouvrir un fichier Animate que vous avez créé.

    Adobe Muse vous permet d’intégrer des animations Edge Animate.
    Cliquez sur le lien Ouvrir le fichier dans la fenêtre Prise en main.

  3. Cliquez sur Ouvrir pour ouvrir le fichier .an et fermer la boîte de dialogue Ouvrir. Le projet s’affiche dans l’espace de travail Animate.

    Le projet s’affiche
    Le projet Animate s’affiche sur la scène.

    Vous pouvez faire en sorte que vos animations créées avec Animate soient lues automatiquement (lecture automatique) ou qu’il faille cliquer sur une image statique pour lancer l’animation après son chargement. L’exemple SkyScraper est défini en lecture automatique et ne requiert aucune intervention de l’utilisateur. Toutefois, lorsque la lecture automatique est désactivée, une image statique s’affiche sur la page, jusqu’à ce que l’animation soit activée. Pour voir un exemple d’animation qui n’est pas définie en lecture automatique, visitez la vitrine d’Animate.

    Remarque :

    pour vérifier qu’une animation se lance instantanément, sélectionnez la scène, puis activez ou désactivez la case à cocher de lecture automatique dans le panneau Propriétés.

    Option de lecture automatique
    Activez la lecture automatique en sélectionnant la propriété Lecture auto.

  4. Cliquez sur l’image d’arrière-plan pour la sélectionner sur la scène. Une fois l’image sélectionnée, un cadre de sélection bleu apparaît et le panneau Propriétés à gauche affiche les propriétés de l’image (appelée Image2 dans cet exemple). Appuyez sur la touche Retour arrière (Windows) ou Suppression (Mac) pour supprimer le fichier d’image de l’arrière-plan.

    Cadre de sélection bleu
    Sélectionnez l’image d’arrière-plan et supprimez-la.

  5. Alors que la scène est toujours sélectionnée, cliquez sur la pastille de couleur correspondant à la scène dans le panneau Propriétés et sélectionnez l’option Transparent.

    Option Transparent
    Définissez la propriété Arrière-plan de la scène sur Transparent.

    Remarque :

    le contenu créé sur la scène affiche un arrière-plan blanc ; l’arrière-plan transparent ne sera visible sur la scène que lorsque vous exporterez ou prévisualiserez l’animation.

  6. Sélectionnez Fichier > Enregistrer pour enregistrer les dernières modifications.

  7. Choisissez Fichier > Paramètres de publication pour ouvrir la boîte de dialogue Paramètres de publication.

  8. Dans la colonne Publier la cible à gauche, désélectionnez la case web et sélectionnez l’option Package de déploiement Animate.

  9. Cliquez sur Enregistrer pour enregistrer vos modifications et fermer la boîte de dialogue Paramètres de publication.

  10. Sélectionnez Fichier > Publier pour publier le projet.

  11. Quittez Animate. A l’aide de l’Explorateur (Windows) ou du Finder (Mac), localisez le dossier du projet Animate sur votre disque dur. Après la publication du projet, vous trouverez un dossier nommé Animate Package. Le fichier .OAM se trouvant dans ce dossier est utilisé pour ajouter un contenu Animate à votre site Muse.

  12. Copiez le fichier .OAM et enregistrez-le dans le dossier contenant toutes les autres images et ressources de site pour votre site web, sur votre poste de travail. Une fois l’animation publiée et le fichier enregistré dans le dossier de votre site, passez à la section suivante pour importer le contenu Animate sur une page.

Importation d’animations créées à l’aide d’Animate dans une page web Muse

Pour ajouter l’animation à une page de votre site web Muse, procédez comme suit :

  1. Lancez Adobe Muse et ouvrez le site à modifier.

  2. Dans la vue Plan, double-cliquez sur le nom de la page à laquelle vous souhaitez ajouter l’animation.

  3. Choisissez Fichier > Importer..., puis parcourez l’arborescence pour sélectionner le fichier .OAM dans le dossier de votre site.

  4. Cliquez une fois sur la page pour importer l’animation.

    Remarque :

    contrairement à l’importation d’images, vous ne pouvez pas cliquer et faire glisser une animation Animate pour la redimensionner. Si vous souhaitez importer le contenu dans un autre format, mettez à jour le projet Edge et republiez le fichier .OAM.

  5. Utilisez l’outil de sélection pour positionner l’animation sur la page, à l’emplacement souhaité. Notez que, bien que l’arrière-plan de l’animation semble être opaque dans Muse, l’arrière-plan est transparent lors de la prévisualisation ou de la publication de la page.

  6. Choisissez Fichier > Prévisualiser la page dans le navigateur pour vous assurer que l’animation s’affiche comme prévu. Si vous souhaitez effectuer des modifications, revenez dans Muse et repositionnez les éléments de la page. En examinant le panneau Ressources, vous noterez que le fichier .OAM est désormais répertorié comme une ressource. Le lien des animations créées à l’aide d’Edge Animate peut être réédité et ces animations peuvent être mises à jour comme toute autre ressource de site.

    Par exemple, si vous revenez dans Animate, vous pouvez ouvrir le projet et le modifier. Ensuite, lorsque vous republiez le fichier .OAM et remplacez la version dans le dossier de votre site, le panneau Ressources affiche l’icône de lien périmé. Cela indique que le fichier d’origine a été modifié depuis l’importation de la ressource sur une page.

    Pour mettre à jour le fichier que vous avez importé, cliquez avec le bouton droit de la souris sur le nom du fichier .OAM dans le panneau Ressources et choisissez l’option Rééditer le lien.

    L’option Rééditer le lien permet de mettre à jour la ressource importée afin qu’elle corresponde au fichier source modifié. Cette option est un moyen plus simple de mettre rapidement à jour l’animation, plutôt que de supprimer et de remplacer manuellement les fichiers.

  7. Cliquez sur le lien de publication dans le panneau de configuration. Sélectionnez les options de votre choix, puis cliquez sur OK pour publier les mises à jour du site.

Pour en savoir plus sur la conception de contenu web et d’animations en HTML5 avec Adobe Edge Animate, consultez les ressources Adobe Edge Animate. Pour plus de conseils sur l’utilisation de Muse, consultez la page Aide et tutoriels de Muse pour consulter des tutoriels ou la pages des événements Muse pour participer en direct à des webinaires et consulter des tutoriels vidéo enregistrés.

Incorporation de contenu multimédia pour ajouter une animation au site

  1. Dans la vue Plan, double-cliquez sur la vignette MasterFlash pour l’ouvrir en vue Conception. Notez que puisque que vous avez précédemment dupliqué le gabarit A-Master, l’image statique du logo est toujours présente. Le recours à l’image statique est utile pour que l’emplacement gardé corresponde au rectangle d’animation. Veillez cependant à bien supprimer cette image statique du logo une fois que vous aurez incorporé l’élément multimédia.

  2. Choisissez Fichier > Importer. Dans la boîte de dialogue d’importation, naviguez jusqu’au dossier Kevins_Koffee_Kart et sélectionnez le fichier nommé logo.swf.

  3. Placez ce fichier SWF dans le coin supérieur gauche en prenant soin de faire correspondre l’emplacement du fichier image existant.

  4. Une fois que vous avez aligné la nouvelle fenêtre SWF que vous avez importée avec le logo statique, supprimez celui-ci en le sélectionnant et en appuyant sur la touche Suppr.

  5. Pour voir comment le site entier s’affiche une fois les nouvelles modifications apportées à la page d’accueil, choisissez Fichier > Prévisualiser le site dans le navigateur pour tester l’affichage du logo sur différentes pages. Sans publier le site, vous pouvez travailler localement sur votre ordinateur, puis prévisualiser le site dans un navigateur et cliquer sur toutes les pages dans la navigation du site. Vous remarquerez que l’animation (fichier SWF) s’affiche une fois, puis s’arrête sur la page d’accueil. Si vous cliquez sur d’autres pages, seul le logo statique s’affiche.

    Remarque :

    si vous choisissez la commande Fichier > Prévisualiser la page dans le navigateur, la nouvelle fenêtre du navigateur se charge plus rapidement pour afficher la page d’accueil, mais le navigateur ne prévisualise que la page active (la page d’accueil). Choisissez cette option si vous souhaitez vérifier une seule page du site et non le site web entier.

Ajout d’effets de défilement aux animations

Adobe Muse vous permet d’ajouter à vos pages web des animations créées à l’aide d’Adobe Edge Animate. Pour utiliser les effets de défilement d’Adobe Edge Animate, vous devez d’abord créer une animation spécialement conçue pour ça.

Adobe Muse vous permet d’ajouter des effets de défilement aux fichiers OAM, sur les animations du montage principal. En concevant l’animation de sorte que seuls les éléments que vous souhaitez déplacer lors du défilement de la page soient sur le montage principal, vous pouvez créer des animations interactives. Il est implicite que les autres éléments doivent être importés dans des montages imbriqués. 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 les effets de défilement dans Adobe Muse, voir Effets de défilement.

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

  1. Exportez le fichier OAM depuis Animate et enregistrez-le dans le dossier de votre site. Pour plus d’informations sur l’exportation de fichiers d’animation (OAM) à partir d’Animate, voir Importation d’animations dans Adobe Muse.
  2. Lancez Muse et double-cliquez sur une page pour l’ouvrir en mode Conception. Assurez-vous que la page soit suffisamment longue pour pouvoir défiler en mettant à jour les paramètres de hauteur minimale dans la boîte de dialogue Propriétés de la page.
  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é, sélectionnez la case à cocher Edge Animate.
Panneau Effets de défilement
Configurez l’animation Edge Animate pour qu’elle débute lorsque la page atteint un emplacement spécifique ou pour que les images changent chaque fois que la page consultée parcourt une distance spécifique (en pixels).

Dans l’image ci-dessus, la position clé est définie sur 700 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 3000 pixels et que vous saisissez le numéro 10, l’animation du montage principal avance d’une image pour chaque défilement de page de 10 pixels. Si le visiteur fait défiler la page plus rapidement, la vitesse de diffusion de l’animation s’accroît.

Remarque :

les paramètres d’effet de défilement n’affectent pas les objets animés qui sont imbriqués ou liés à partir du montage principal dans la composition Animate. Par conséquent, vous pouvez choisir d’avoir un arrière-plan statique ou des éléments imbriqués qui bouclent en continu et se déplacent de manière cohérente, quelle que soit l’interaction du visiteur lorsqu’il fait défiler la page.

  1. 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.
  2. 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.

Exemple

Cet exemple illustre comment contrôler des fichiers OAM exportés depuis Adobe Edge Animate à l’aide des effets de défilement. Dans cet exemple, la page est remplie d’un dégradé vertical qui débute par un bleu turquoise pour se terminer par un bleu foncé. Vous pouvez télécharger le fichier d’exemple dans ScrollEffects.com.

Une combinaison de paramètres appliqués dans les onglets Mouvement et Edge Animate crée cet effet animé.

Trois occurrences d’un même fichier OAM sont importées côte à côte, horizontalement, pour créer une ligne de boussoles animées. Lorsque vous affichez le site exemple dans un navigateur, les trois boussoles arrivent sur l’écran par le bas, puis restent en position. Chacune des trois boussoles semble tourner à différentes vitesses, mais cet effet est dû aux paramètres du panneau Effets de défilement, et non à la construction du fichier Edge Animate.

Pour créer un effet similaire avec trois fichiers OAM importés, procédez comme suit :

  1. En mode Conception, sélectionnez Page > Propriétés de la page. Définissez le champ Hauteur min. sur une valeur beaucoup plus élevée. Dans le site exemple, la hauteur minimale de la page est définie sur 7 465 pixels.
  2. Sélectionnez les trois occurrences de boussole sur la page. Dans l’onglet Mouvement du panneau Effets de défilement, vous pouvez voir que les trois fichiers OAM possèdent les mêmes paramètres de mouvement et de position clé, car toutes les valeurs sont affichées.
Positions clés et paramètres de mouvement identiques
Les boussoles se déplacent vers le haut jusqu’à ce que la page atteigne leurs positions clés, puis elles restent en place lorsque le visiteur continue à faire défiler la page vers le bas.

Si vous visionnez le site exemple dans un navigateur, vous verrez les trois éléments OAM apparaître simultanément sur l’écran, puis rester en ligne comme s’ils étaient épinglés.

  1. Cliquez en dehors des boussoles pour les désélectionner toutes les trois, puis sélectionnez uniquement la boussole de gauche. Maintenez la touche Maj enfoncée tout en sélectionnant la boussole sur la droite, de sorte que les deux boussoles soient sélectionnées. Ouvrez l’onglet Edge Animate du panneau Effets de défilement pour vérifier les paramètres.
Passer à l’image suivante tous les 350 pixels
Les boussoles sur les côtés sont définies pour passer à l’image suivante tous les 350 pixels.

Ces deux boussoles sont configurées pour suivre en boucle l’animation de montage et passer à l’image suivante chaque fois que le visiteur fait défiler la page de 350 pixels vers le bas.

  1. Désélectionnez les deux boussoles extérieures. Sélectionnez la boussole centrale et observez à nouveau l’onglet Edge Animate pour vérifier que le champ Changer l’image tous les est défini sur 400 pixels. Ce paramétrage permettra à l’animation centrale de se déplacer plus lentement par rapport aux deux boussoles extérieures.
Passer à l’image suivante tous les 400 pixels
Le fichier OAM central est défini pour passer à l’image suivante tous les 400 pixels.

Vous pouvez créer des effets d’animation intéressants en faisant varier la vitesse de plusieurs animations Edge Animate importées, par rapport à la vitesse de défilement de la page. Par exemple, vous pouvez créer un banc de poissons, un ciel rempli de nuages qui se déplacent ou d’autres effets en ajoutant plusieurs itérations du même fichier OAM avec différents paramètres d’effet de défilement.

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