Ajout de la vidéo à Adobe Muse
L'aspect le plus intéressant d'Adobe Muse est qu'il vous permet de créer des pages Web à l'aide d'un flux de travail similaire à celui utilisé pour la mise en page de publications. Vous n'avez pas besoin d'une connaissance approfondie du code qui construit un site ou une page, mais une familiarité avec HTML5, CSS et JavaScript ne vous fera pas de mal.
Bien que la vidéo Web traditionnelle soit généralement ajoutée via l'utilisation de l'API vidéo HTML5, Adobe Muse accomplit la même chose avec ce qu'elle appelle des «widgets». Les widgets créent le code HTML 5 requis pour des tâches spécifiques, mais utilisent une interface en langage clair dans Muse pour écrire le code lors de la publication de la page.
Dans cet exercice, nous allons utiliser un widget que vous pouvez télécharger gratuitement à partir de Muse Resources. Lorsque le widget est téléchargé, tout ce que vous avez à faire est d'ouvrir le fichier .zip, puis de double-cliquer sur le fichier .mulib dans le dossier Full-Screen Video. Cela l'installera dans votre copie d'Adobe Muse.
Comment préparer une page pour une vidéo d'arrière-plan dans Adobe Muse CC
Avec le widget installé, vous pouvez maintenant créer la page qui utilisera la vidéo.
Avant de commencer, créez un dossier pour votre site Muse. Dans ce dossier, créez un autre dossier - J'utilise “ médias ”- et déplacez vos versions mp4 et webm de la vidéo dans ce dossier.
Lorsque vous lancez Muse select Fichier> Nouveau site. Lorsque la boîte de dialogue Disposition s'ouvre, sélectionnez Bureau comme le Mise en page initiale et changer le Largeur de page et Hauteur de la page valeurs à 1200 et 900. Cliquez sur D'accord.
Double-cliquez sur la page maître dans la vue Plan pour ouvrir la page maître. Lorsque la page maître s'ouvre, déplacez les guides d'en-tête et de pied de page vers le haut et le bas de la page. Vous n'avez vraiment pas besoin d'un en-tête et d'un pied de page pour cet exemple.
03 de 05Comment utiliser le widget vidéo d'arrière-plan plein écran dans Adobe Muse CC
Utiliser le widget est d'une simplicité déconcertante. La première chose à faire est de revenir à la vue en plan en sélectionnant Affichage> Mode Plan. Lorsque la vue en plan s'ouvre, double-cliquez sur le bouton Page d'accueil pour l'ouvrir.
Ouvrez le panneau Bibliothèque. S'il n'est pas ouvert à droite de l'interface, sélectionnez Fenêtre> Bibliothèque - et virevolter le MR Vidéo de fond plein écran dossier. Faites glisser le widget dans le dossier de la page.
Vous remarquerez le Les options vous demander de saisir les noms des versions mp4 et webm des vidéos. Entrez les noms exactement tels qu'ils sont écrits dans le dossier où vous les avez placés. Une petite astuce pour vous assurer de ne pas vous tromper est de copier le nom de la vidéo mp4 et de le coller dans le MP4 et WEBM domaines de la Menu options.
Une autre astuce: tout ce widget fait pour écrire le code HTML 5 pour vous. Vous pouvez le dire parce que vous voyez <> dans le widget. Dans ce cas, vous pouvez placer le widget de la page Web sur le presse-papier et il fonctionnera toujours. De cette façon, cela n’interférera pas avec le contenu que vous placerez sur la page.
04 de 05Comment ajouter une vidéo et tester une page dans Adobe Muse CC
Bien que vous ayez ajouté le code permettant de lire les vidéos, Muse n’a toujours pas la moindre idée de l’emplacement de ces vidéos. Pour résoudre ce problème, sélectionnez Fichier> Ajouter des fichiers à télécharger. Quand le Boîte de dialogue de téléchargement ouvre la navigation vers le dossier contenant vos vidéos, sélectionnez-les et cliquez sur Ouvrir. Pour vous assurer qu'ils ont été téléchargés, ouvrez le Panneau d'actifs et vous devriez voir vos deux vidéos. Il suffit de les laisser dans le panneau. Ils n’ont pas besoin d’être placés sur la page.
Pour tester le projet, sélectionnez Fichier> Aperçu dans le navigateur ou, parce que c'est une seule page, Fichier> Aperçu du site dans le navigateur. Votre navigateur par défaut s'ouvrira et la vidéo - dans mon cas une tempête de pluie tropicale - commencera à jouer.
À ce stade, vous pouvez traiter le fichier Muse comme une page Web normale et ajouter du contenu à la page d'accueil. La vidéo sera lue en dessous.
05 de 05Comment ajouter une image vidéo dans Adobe Muse CC
C’est le Web dont nous parlons ici et, en fonction de la vitesse de connexion, il est fort probable que votre utilisateur ouvre la page et regarde un écran vide pendant le chargement de la vidéo. Ce n'est pas une bonne chose. Voici comment faire face à cette méchanceté.
La «meilleure pratique» consiste à inclure une affiche de la vidéo, qui apparaîtra pendant le chargement de la vidéo. Il s'agit généralement d'une capture d'écran en taille réelle d'une image de la vidéo.
Pour ajouter le poster, cliquez une fois sur Remplissage du navigateur en haut de la page. Clique le Lien de l'image et naviguez vers l'image à utiliser. dans le Raccord zone, sélectionnez Échelle à remplir et cliquez sur le Point central dans le Position surface. Cela garantira que l'image sera toujours redimensionnée à partir du centre de l'image lorsque la taille de la fenêtre de visualisation du navigateur change. Vous verrez également l'image remplir la page.
Une autre astuce consiste à avoir au moins une couleur de remplissage uni et non blanc au cas où le poster prend un certain temps à apparaître. Pour ce faire, cliquez sur la puce Couleur pour ouvrir le sélecteur de couleurs Muse. Sélectionnez l'outil Pipette et cliquez sur une couleur prédominante dans l'image. Lorsque vous avez terminé, cliquez sur la page pour fermer la boîte de dialogue Remplissage du navigateur.
À ce stade, vous pouvez enregistrer le projet ou le publier.
La dernière partie de cette série explique comment écrire le code HTML5 permettant de faire glisser une vidéo dans l'arrière-plan d'une page Web.
