Hinzufügen des Videos zu Adobe Muse
Der wirklich interessante Aspekt von Adobe Muse besteht darin, dass Sie Webseiten mit einem ähnlichen Arbeitsablauf wie beim Layout von Veröffentlichungen erstellen können. Sie benötigen kein tiefes Verständnis für den Code, mit dem eine Website oder Seite erstellt wird, aber die Vertrautheit mit HTML5, CSS und JavaScript wird nicht schaden.
Obwohl herkömmliches Webvideo normalerweise durch die Verwendung der HTML5-Video-API hinzugefügt wird, leistet Adobe Muse dasselbe, was als "Widgets" bezeichnet wird. Widgets erstellen das HTML 5, das für bestimmte Aufgaben erforderlich ist, verwenden jedoch eine einfache Spracheingabe in Muse, um den Code zu schreiben, wenn die Seite veröffentlicht wird.
In dieser Übung verwenden wir ein Widget, das Sie kostenlos von Muse Resources herunterladen können. Wenn das Widget heruntergeladen wird, müssen Sie nur die ZIP-Datei öffnen und die .mulib-Datei im Vollbild-Videoordner doppelklicken. Dadurch wird es in Ihrer Kopie von Adobe Muse installiert.
So bereiten Sie eine Seite für das Hintergrundvideo in Adobe Muse CC vor
Wenn das Widget installiert ist, können Sie jetzt die Seite erstellen, die das Video verwenden soll.
Erstellen Sie vor dem Start einen Ordner für Ihre Muse-Site. In diesem Ordner erstellen Sie einen anderen Ordner - ich verwende " Medien ”- und verschieben Sie Ihre mp4- und webm-Versionen des Videos in diesen Ordner.
Wenn Sie Muse starten, wählen Sie Datei> Neue Site. Wenn das Dialogfeld Layout geöffnet wird, wählen Sie Desktop als die Anfangslayout und ändern Sie die Seitenbreite und Seitenhöhe Werte bis 1200 und 900. Klicken OK.
Doppelklicken Sie in der Planansicht auf die Masterseite, um die Masterseite zu öffnen. Wenn die Masterseite geöffnet wird, verschieben Sie die Kopf- und Fußzeile an den oberen und den unteren Rand der Seite. Für dieses Beispiel benötigen Sie wirklich keine Kopf- und Fußzeile.
03 von 05So verwenden Sie das Fullscreen-Hintergrundvideo-Widget in Adobe Muse CC
Die Verwendung des Widgets ist denkbar einfach. Zuerst müssen Sie durch Auswählen zur Planansicht zurückkehren Ansicht> Planungsmodus. Wenn die Planansicht geöffnet wird, doppelklicken Sie auf Startseite um es zu öffnen.
Öffnen Sie das Bibliotheksfenster - wenn es nicht auf der rechten Seite der Benutzeroberfläche geöffnet ist Fenster> Bibliothek - und wirbeln den hinunter MR Vollbild-Hintergrundvideo Mappe. Ziehen Sie das Widget in den Ordner auf die Seite.
Sie werden das bemerken Optionen Bitte geben Sie die Namen der mp4- und webm-Versionen der Videos an. Geben Sie die Namen genau so ein, wie sie in dem Ordner geschrieben werden, in den Sie sie gestellt haben. Ein kleiner Trick, um sicherzustellen, dass Sie keinen Fehler machen, besteht darin, den Namen des mp4-Videos zu kopieren und in das Video einzufügen MP4 und WEBM Bereiche der Optionsmenü.
Ein weiterer Trick: Alles, was dieses Widget macht, ist, den HTML 5-Code für Sie zu schreiben. Sie können das sagen, weil Sie sehen <> im Widget. In diesem Fall können Sie das Widget außerhalb der Webseite auf dem Pasteboard platzieren, und es funktioniert weiterhin. Auf diese Weise werden Inhalte, die Sie auf der Seite platzieren, nicht beeinträchtigt.
04 von 05Hinzufügen von Videos und Testen einer Seite in Adobe Muse CC
Obwohl Sie den Code zum Abspielen der Videos hinzugefügt haben, hat Muse noch keine Ahnung, wo sich diese Videos befinden. Um dies zu beheben, wählen Sie Datei> Dateien zum Hochladen hinzufügen. Wenn der Dialogfeld "Upload" Öffnet das Verzeichnis, in dem sich Ihre Videos befinden, wählen Sie sie aus und klicken Sie auf Öffnen. Um sicherzustellen, dass sie hochgeladen wurden, öffnen Sie die Assets-Panel und Sie sollten Ihre zwei Videos sehen. Lass sie einfach im Panel. Sie müssen nicht auf der Seite platziert werden.
Um das Projekt zu testen, wählen Sie Datei> Vorschauseite im Browser oder weil dies eine einzelne Seite ist, Datei> Vorschau der Site im Browser. Ihr Standardbrowser wird geöffnet und das Video - in meinem Fall ein tropischer Regensturm - wird abgespielt.
An dieser Stelle können Sie die Muse-Datei als normale Webseite behandeln und der Startseite Inhalt hinzufügen. Das Video wird darunter abgespielt.
05 von 05Hinzufügen eines Video-Posterrahmens in Adobe Muse CC
Dies ist das Web, über das wir hier sprechen. Je nach Verbindungsgeschwindigkeit besteht eine gute Chance, dass der Benutzer die Seite öffnet und auf einen leeren Bildschirm starrt, während das Video geladen wird. Das ist keine gute Sache. So gehst du mit diesem bisschen Boshaftigkeit um
Es ist eine „Best Practice“, ein Poster-Frame des Videos hinzuzufügen, das angezeigt wird, während das Video geladen wird. Hierbei handelt es sich in der Regel um eine Vollbildaufnahme eines Frames aus dem Video.
Klicken Sie einmal auf, um den Posterrahmen hinzuzufügen Browser-Füllung oben auf der Seite. Drücke den Bildlink und navigieren Sie zu dem zu verwendenden Bild. In dem Passend zu Bereich auswählen Zum Füllen skalieren und klicken Sie auf die Mittelpunkt in dem Position Bereich. Dadurch wird sichergestellt, dass das Bild immer von der Bildmitte aus skaliert wird, wenn sich die Größe des Ansichtsfensters des Browsers ändert. Sie sehen auch, dass das Bild die Seite ausfüllt.
Ein weiterer kleiner Trick besteht darin, mindestens eine durchgehende Farbe zu haben, die nicht weiß ist, nur für den Fall, dass der Plakatrahmen eine Weile braucht. Klicken Sie dazu auf den Farbchip, um die Muse-Farbauswahl zu öffnen. Wählen Sie das Pipettenwerkzeug aus und klicken Sie auf eine vorherrschende Farbe im Bild. Wenn Sie fertig sind, klicken Sie auf die Seite, um das Dialogfeld Browser füllen zu schließen.
An dieser Stelle können Sie das Projekt speichern oder veröffentlichen.
Der letzte Teil dieser Serie zeigt, wie Sie den HTML5-Code schreiben, der ein Video in den Hintergrund einer Webseite einfügt.
