Was man wissen sollte
- Mit der Seite Startseite in der Ansicht Plan zu Fenster >wechseln Library > [MR] Fullscreen Background Video Ordner und ziehe das Widget auf die Seite.
- Um ein Video hinzuzufügen, gehen Sie zu Datei > Dateien zum Hochladen hinzufügen > Videoordner > Öffnen.
Mit Adobe Muse können Sie Webseiten mit einem ähnlichen Arbeitsablauf wie Publikationen erstellen; Sie brauchen kein tiefes Verständnis des Codes, der eine Website oder Seite erstellt, obwohl die Vertrautheit mit HTML5, CSS und JavaScript nicht schaden wird. Obwohl herkömmliche Webvideos normalerweise über die HTML5-Video-API hinzugefügt werden, erreicht Adobe Muse dasselbe durch Widgets, die das für bestimmte Aufgaben erforderliche HTML 5 erstellen, aber eine einfache Sprachschnittstelle in Muse verwenden, um den Code zu schreiben, wenn die Seite veröffentlicht wird.
Vorbereiten einer Seite für ein Hintergrundvideo in Adobe Muse CC
Wenn das Widget installiert ist, können Sie jetzt die Seite erstellen, die das Video verwenden wird.
- Bevor Sie beginnen, erstellen Sie einen Ordner für Ihre Muse-Site. Erstellen Sie in diesem Ordner einen weiteren Ordner – wir verwenden „media“– und verschieben Sie Ihre mp4- und webm-Versionen des Videos in diesen Ordner.
- Wenn Sie Muse starten, wählen Sie File > New Site.
- Wenn sich das Layout-Dialogfeld öffnet, wählen Sie Desktop als Anfangslayout und ändern Sie die Seitenbreiteund Seitenhöhe Werte zu 1200 und 900 . Klicken Sie auf OK.
-
Doppelklick Masterseite in der Planungsansicht, um die Masterseite zu öffnen. Wenn die Masterseite geöffnet wird, verschieben Sie die Kopf- und Fußzeilenhilfslinien an den oberen und unteren Rand der Seite. Für dieses Beispiel brauchen Sie wirklich keine Kopf- und Fußzeile.
So verwenden Sie das Vollbild-Hintergrundvideo-Widget in Adobe Muse CC
Die Verwendung des Widgets ist kinderleicht.
- Als Erstes müssen Sie zur Planansicht zurückkehren, indem Sie View > Plan Mode. auswählen
- Wenn sich die Planansicht öffnet, doppelklicken Sie auf die Startseite, um sie zu öffnen.
- Öffnen Sie das Bedienfeld Bibliothek – falls es nicht auf der rechten Seite der Benutzeroberfläche geöffnet ist, wählen Sie Fenster > Bibliothek – und drehe den [MR] Fullscreen Background Video Ordner nach unten.
- Ziehe das Ordner-Widget auf die Seite.
-
Sie werden feststellen, dass die Optionen Sie auffordern, die Namen der mp4- und webm-Versionen der Videos einzugeben. Geben Sie die Namen genau so ein, wie sie in dem Ordner geschrieben sind, in dem Sie sie abgelegt haben. Ein kleiner Trick, um sicherzustellen, dass Sie keinen Fehler machen, besteht darin, den Namen des mp4-Videos zu kopieren und in die Bereiche MP4 und WEBM einzufügen des Optionsmenüs
Noch ein Trick: Dieses Widget schreibt lediglich den HTML 5-Code für Sie. Sie können dies erkennen, weil Sie im Widget sehen. In diesem Fall können Sie das Widget von der Webseite auf die Zwischenablage platzieren, und es funktioniert immer noch. Auf diese Weise werden Inh alte, die Sie auf der Seite platzieren, nicht beeinträchtigt.
Wie man Videos hinzufügt und eine Seite in Adobe Muse CC testet
Obwohl Sie den Code zum Abspielen der Videos hinzugefügt haben, weiß Muse immer noch nicht, wo sich diese Videos befinden.
- Um dies zu beheben, wählen Sie Datei > Dateien zum Hochladen hinzufügen.
- Wenn sich das Dialogfeld zum Hochladen öffnet, navigieren Sie zu dem Ordner mit Ihren Videos, wählen Sie sie aus und klicken Sie auf Öffnen.
-
Um sicherzustellen, dass sie hochgeladen wurden, öffne das Assets-Panel,und du solltest deine beiden Videos sehen. Lassen Sie 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, da es sich um eine einzelne Seite handelt, File > Vorschau der Site im Browser. Ihr Standardbrowser wird geöffnet und das Video wird abgespielt.
- An diesem Punkt können Sie die Muse-Datei wie eine normale Webseite behandeln und Inh alte zur Startseite hinzufügen, und das Video wird darunter abgespielt.
So fügen Sie einen Videoposterrahmen in Adobe Muse CC hinzu
Dies ist das Web, über das wir hier sprechen, und abhängig von der Verbindungsgeschwindigkeit besteht eine gute Chance, dass Ihr Benutzer die Seite öffnet und auf einen leeren Bildschirm starrt, während das Video geladen wird. Das ist nicht gut. So gehen Sie mit dieser Gemeinheit um.
Es ist eine „Best Practice“, ein Poster-Frame des Videos einzufügen, das erscheint, während das Video geladen wird. Dies ist normalerweise ein Screenshot in voller Größe eines Frames aus dem Video.
- Um den Posterrahmen hinzuzufügen, klicken Sie einmal auf Browser Fill oben auf der Seite.
- Klicken Sie auf den Bildlink und navigieren Sie zu dem zu verwendenden Bild.
- Wählen Sie im Bereich Anpassen Ausfüllen skalieren und klicken Sie auf den Mittelpunkt Bereich Position. Dadurch wird sichergestellt, dass das Bild immer von der Bildmitte aus skaliert wird, wenn sich die Größe des Darstellungsbereichs des Browsers ändert. Sie werden auch sehen, wie das Bild die Seite ausfüllt.
- Ein weiterer kleiner Trick besteht darin, eine solide Füllfarbe zu verwenden, falls der Posterrahmen eine Weile braucht, bis er erscheint. Klicken Sie dazu auf den Chip Color, um den Muse-Farbwähler zu öffnen. Wählen Sie das Werkzeug Pipette und klicken Sie auf eine vorherrschende Farbe im Bild. Wenn Sie fertig sind, klicken Sie auf die Seite, um das Dialogfeld „Browser-Füllung“zu schließen.
-
An dieser Stelle können Sie das Projekt speichern oder veröffentlichen.
Der letzte Teil dieser Serie zeigt Ihnen, wie Sie den HTML5-Code schreiben, der ein Video in den Hintergrund einer Webseite einfügt.
