Erfahren Sie, wie Sie verschiedene Bildlaufeffekte hinzufügen und verwenden, beispielsweise Stück-für-Stück-Effekt, Schiebe-Menü-Effekt, Aufrolleffekt und vieles mehr.
Adobe Muse wird nicht mehr um neue Funktionen ergänzt und der Support wird am 26. März 2020 eingestellt. Detaillierte Informationen und Unterstützung erhalten Sie bei den Häufig gestellten Fragen (FAQ) zum Ende der Produktlebensdauer von Adobe Muse.
In diesem Abschnitt werden Ihnen einige der vielen Einsatzbereiche von Bildlaufeffekten vorgestellt, um interaktive Funktionen, eine besondere Site-Navigation und ausdrucksstarke bewegte Grafiken zu Ihren Muse-Sites hinzuzufügen.
Gehen Sie zu Beginn wie folgt vor:
Bei diesem Effekt fliegt ein Satz einzelner Elemente ein und wird auf der Seite wieder zusammengesetzt, während der Besucher einen Seitenbildlauf nach unten durchführt. Grafiken und Textrahmen werden mithilfe von Bildlaufeffekten gesteuert, bei denen eine interaktive Sammlung erstellt wird, als ob die Teile eines Puzzles zusammengesetzt werden würden. Dies ist eine faszinierende Möglichkeit, um Produktdetails auf einer Webseite zu präsentieren.
Für dieses Beispiel wird der Abschnitt „Erste Bewegung“ auf der Registerkarte „Bewegung“ des Bildlaufeffekte-Bedienfelds verwendet, damit die Elemente zu einem konsolidierten Design zusammengefügt werden. Nachdem alle Teile die vorgesehene Position erreicht haben, werden die Einstellungen „Letzte Bewegung“ auf 0 gesetzt, um ein Verschieben der vorhandenen Elemente zu verhindern, während neue Elemente einfliegen.
Führen Sie folgende Schritte aus, um einen ähnlichen Stück-für-Stück-Effekt zu erzielen:
Es sind noch zwei Elemente am unteren Rand übrig: ein einfarbiges Rechteck, das mit derselben homogenen Farbe gefüllt ist wie die Seite (sodass es im Design unsichtbar ist), und dahinter eine Gruppe von Objekten (ein gelbes Rechteck mit einer Glühlampengrafik).
Das einfarbige Rechteck dient dazu, die Gruppe auszublenden, die dahinter angeordnet ist.
Wenn beide Elemente ausgewählt sind, beachten Sie, dass die Werte, die für alle ausgewählten Elemente gleich sind, in diesen Feldern angezeigt werden. In diesem Beispiel wird für das Rechteck und die Gruppe für die vertikale Richtung im Abschnitt „Erste Bewegung“ auf 0 und im Abschnitt „Letzte Bewegung“ auf 0,0 gesetzt. In dem Feld für die horizontale Richtung im Abschnitt „Erste Bewegung“ ist kein Wert angegeben, da die Gruppe so eingerichtet ist, dass sie sich mit derselben (1-fach) Geschwindigkeit wie die Bildlaufgeschwindigkeit nach links bewegt, während das Rechteck auf 0 gesetzt ist.
Wie Sie anhand dieses einfachen Beispiels sehen, können Sie eine Kombination aus einer sehr hohen Seite, einer Reihe von Elementen, die im Ebenenbedienfeld strategisch in Ebenen angeordnet werden, und der Registerkarte „Bewegung“ des Bildlaufeffekte-Bedienfelds verwenden, um den Eindruck zu vermitteln, dass Einzelteile bei einem Seitenbildlauf nach unten in einer Animation zusammengeführt werden.
Der Schiebe-Menü-Effekt verwendet viele derselben Konventionen, die bereits für den Stück-für-Stück-Effekt beschrieben wurden. Mithilfe der Registerkarte „Bewegung“ des Bildlaufeffekte-Bedienfelds scheinen die Elemente einzufliegen und Rechtecke verdecken einige der Elemente, bis sie auf dem Seitendesign eingeblendet werden sollen.
In diesem Beispiel werden strategisch positionierte Rechteckgruppen verwendet, um den Eindruck eines komplexen winkligen Designs zu vermitteln.
Schauen Sie sich die Beispiel-Site in einem Browser an, um das Flugzeug horizontal von rechts nach links über die Seite fliegen zu sehen, gefolgt von einem Satz stilisierter Menüoptionen und von einem Verlaufshintergrund mit Schrägstreifen.
Führen Sie folgende Schritte aus, um einen ähnlichen Schiebe-Effekt zu erzielen:
Gruppen sind gut geeignet, um mehrere Elemente zu kombinieren und um sie als einzelnes Element zu steuern. In diesem Beispiel wurden auf Gruppen mit verschiedenen Rechtecken Bewegungsbildlaufeffekte angewendet, sodass die Gruppe als Einheit verschoben wird.
Dieses Beispiel zeigt auch den kreativen Einsatz von negativem Raum. Wenn als Browser-Füllung eine homogene Hintergrundfarbe angewendet wurde, können Sie viele interessante Ausschnitteffekte kreieren, indem Sie Rechtecke, die mit derselben Farbe gefüllt sind, über anderen Rechtecken in Ebenen anordnen. Anstatt Grafiken in einem Bildbearbeitungsprogramm zu entwerfen und ein einzelnes Bild zu platzieren, können Sie Rechtecke verwenden, um Grafiken im Muse-Arbeitsbereich zu erstellen.
Dieses Beispiel eines animierten Sonnenaufgangs und Sonnenuntergangs wird mithilfe einer Kombination aus zwei Bildlaufeffekten erzielt: Bewegung und Deckkraft. In diesem Beispiel wird ein Seitenhintergrund mit einer Verlaufsfüllung und mit einem einzelnen platzierten PNG-Bild einer Sonne verwendet. Das PNG-Bild enthält transparente Bereiche, sodass die Flächenfarbe des Seitenhintergrunds sichtbar ist.
Überprüfen Sie die Beispiel-Site in einem Browser, um zu sehen, wie die Sonne von anfänglich 100 % Transparenz langsam eingeblendet wird und über die Seite wandert. An der höchsten Stelle ist sie vollständig deckend, wenn Sie jedoch den Bildlauf weiter nach unten fortsetzen, geht die Sonne unter und wird erneut schrittweise transparent, bis sie letztlich vollständig verschwindet.
Führen Sie folgende Schritte aus, um einen ähnlichen Verblasseneffekt zu erzielen:
Durch diese Einstellungen bewegt sich die Sonne entlang eines halbkreisförmigen Pfads von der unteren linken Ecke der Seite bis zur oberen Mitte des Bogens (wo die Ankerposition erreicht ist) und dann zurück nach unten in die untere rechte Ecke der Seite.
Dieses Beispiel zeigt, wie Sie mithilfe von Bildlaufeffekten OAM-Dateien steuern können, die aus Adobe Edge Animate exportiert wurden. In diesem Beispiel ist die Seite mit einem vertikalen Verlauf gefüllt, der mit einer Helltürkis beginnt und dann in Dunkelblau übergeht.
Dieser animierte Effekt wird durch eine Kombination aus Einstellungen erzielt, die auf den Registerkarten „Bewegung“ und „Edge Animate“ angewendet werden.
Drei Instanzen derselben OAM-Datei werden horizontal nebeneinander platziert, um eine Reihe von animierten Kompassen zu erstellen. Wenn Sie die Beispiel-Site in einem Browser anzeigen, werden alle drei Kompasse sichtbar und bleiben an der Position. Jeder der drei Kompasse scheint sich mit einer anderen Geschwindigkeit zu drehen. Es sind jedoch die Einstellungen im Bildlaufeffekte-Bedienfeld, nicht der Aufbau der Edge-Animation-Datei, die dafür sorgen, dass sie sich mit unterschiedlichen Geschwindigkeiten drehen.
Führen Sie folgende Schritte aus, um einen ähnlichen Effekt mit drei platzierten OAM-Dateien zu erzielen:
Wenn Sie eine Vorschau des Beispiels in einem Browser anzeigen, sehen Sie alle drei OAM-Elemente übereinstimmend nach oben springen, um dann in einer Reihe zum Stehen zu kommen, ganz so als wenn sie verankert wären.
Die beiden seitlichen Kompasse wurden so konfiguriert, dass sie die Zeitleistenanimation in einer Schleife durchlaufen und jedes Mal zum nächsten Frame wechseln, wenn ein Seitenbildlauf von 350 Pixel durchgeführt wird.
Sie können interessante Animationseffekte erstellen, indem Sie die Geschwindigkeit von mehreren platzierten Edge Animate-Animationen im Vergleich zur Seitenbildlaufgeschwindigkeit variieren. Sie können beispielsweise einen Fischschwarm, einen Himmel mit sich bewegenden Wolken oder andere Effekte erstellen, indem Sie mehrere Versionen der gleichen OAM-Datei hinzufügen, auf die unterschiedliche Bildlaufeffekteinstellungen angewendet wurden.
Sie können steuern, wie ein Bildersatz in Bezug auf den Seitenbildlauf in einem Diashow-Widget angezeigt wird. Dazu muss ein Diashow-Widget auf einer Seite eingefügt werden, um dann über die Registerkarte „Diashow“ des Bildlaufeffekte-Bedienfelds die Diashow-Optionen zu aktualisieren.
In diesem Beispiel wird die Diashow mit einer Reihe von Bildern gefüllt, die eine 360-Grad-Rundumansicht eines Rucksacks ergeben. Sie können ähnliche Diashowbilder aufnehmen, indem Sie ein Stativ aufstellen und Fotos eines Objekts machen, das auf einer Drehplatte steht. Dieser Effekt ist nützlich, um eine interaktive Produktbeschreibung anzubieten, die es potenziellen Kunden ermöglicht, einen Artikel vor dem Kauf aus allen Richtungen zu betrachten.
Führen Sie folgende Schritte aus, um einen ähnlichen Effekt mit einem Diashow-Widget zu erzielen:
Sie können bei ausgewählter Diashow das Diashow-Widget auswählen und die Verankerungsschnittstelle im Steuerungsbedienfeld verwenden, um die Diashow an der Position zu verankern. Sie können auch etwas experimentieren, indem Sie ein Vollbild-Diashow-Widget hinzufügen und es mit Bildlaufeffekte steuern.
Mithilfe der Bildlaufeffekte können Sie eine sehr lange Seite erstellen, die in mehrere Abschnitte mit extrem unterschiedlichem Erscheinungsbild unterteilt wird. Wenn der Besucher einen Seitenbildlauf nach unten durchführt, scheinen die Seitenabschnitten aufzurollen und weisen animierte Texteffekte und Trennrahmen auf, die mithilfe von Schatteneffekten erstellt wurden.
Sie können Anker-Tags verwenden oder einen Hinweis einfügen, um die Besucher dazu anzuregen, einen Seitenbildlauf nach unten durchzuführen, um die einzelnen Abschnitte anzuzeigen. Wenn Sie am unteren Rand der Beispiel-Site angekommen sind und auf die Schaltfläche „Zurück zum Seitenanfang“ klicken, sehen Sie wie die gesamte Seite vorbeiläuft, während die Ankerverknüpfung zum oberen Rand des Seitendesigns zurückkehrt.
Führen Sie folgende Schritte aus, um einen ähnlichen Aufrolleffekt zu erzielen:
In diesem Beispiel enthält der duplizierte Textrahmen den Text: „Use it to drastically alter the appearance of your website“ (Verwenden Sie dies, um das Erscheinungsbild Ihrer Website maßgeblich zu verändern). Sie können jedoch einen beliebigen Text eingeben, um den dunkelblauen Bereich der Seite zu identifizieren.
Sie können ungewöhnliche typografische Designs durch eine Kombination aus Bewegungsbildlaufeffekten und Adobe Edge Web Fonts erstellen. Mithilfe von Webschriften können Sie Text mit einer breiten Palette von Schriften gestalten, die beim Laden der Seite geladen werden. Anstatt Bilder von Text, die in einem Bildbearbeitungsprogramm erstellt wurden, zu platzieren und zu animieren, können Sie großartig aussehende Seiten erstellen, die sich einfacher mit Edge Web Fonts aktualisieren lassen. Die Bildlaufeffekte erzeugen darüber hinaus einen dramatischen Eindruck einer Animation, wenn ein Seitenbildlauf durchgeführt wird.
Führen Sie folgende Schritte aus, um einen ähnlichen Effekt mit dynamischem Text zu erzielen:
Als optionalen zusätzlichen Schritt können Sie einige der Textrahmen kopieren und dann leicht unterschiedliche Stile anwenden. In diesem Beispiel wurde der Textrahmen mit dem Wort „Create“ (Erstellen) kopiert und dann wurden die beiden Versionen übereinander angeordnet, um einen hellblauen Schlagschatteneffekt zu erzielen.
Wenn Sie einen Textrahmen duplizieren, um den Schlagschatteneffekt zu erstellen, können Sie zwei oder mehr Versionen eines Textrahmens gruppieren und sie beim Anwenden von Bildlaufeffekten als einzelne Gruppe steuern.
Sie können eine ansprechende interaktive Site-Navigation mithilfe von Bildlaufeffekten erstellen, sodass die verschiedenen Schaltflächen in den sichtbaren Bereich auf der Seite einfliegen und sich dann zu einer Menüleiste ausrichten. In diesem Beispiel bewegen sich vier Rollover-Schaltflächen beim Bildlauf vom unteren Rand der Seite nach oben und werden an der Position fixiert, um eine vertikale Menüleiste anzuzeigen.
Sobald die vier Schaltflächen ausgerichtet sind, fliegt der Hintergrundinhalt (in Form einer Glühlampengrafik, von farbigen Hintergrundbereichen, eines Textrahmens und von diagonalen Eckstreifen) von beiden Seiten der Seite ein, um einen Site-Abschnitt zu erstellen.
Obwohl die Schaltflächen in diesem Beispiel nicht verknüpft sind, können Sie, falls gewünscht, Verknüpfungen über das Dropdown-Menü „Hyperlink“ hinzufügen, damit Besucher darauf klicken können, um eine neue Seite zu laden, oder Anker-Tags verwenden, um zu einer anderen Position auf der aktuellen Seite zu springen.
Führen Sie folgende Schritte aus, um einen ähnlichen Effekt eines gestapelten Menüs zu erzielen:
Wenn Sie die erste „Home“-Schaltfläche kopiert haben, haben Sie auch die Formatierung des Textrahmens und dessen Inhalts sowie die Bildlaufeffekteinstellungen kopiert. Wenn Sie eine der kopierten Schaltflächen auswählen und das Bildlaufeffekte-Bedienfeld öffnen, erkennen Sie, dass die Einstellungen in der Registerkarte „Bewegung“ den Einstellungen entsprechen, die auf die „Home“-Schaltfläche angewendet wurden, und dass die Ankerposition für jede Schaltfläche 460 Pixel unter der vorherigen Schaltfläche liegt (d. h. im gleichen Abstand wie zwischen den einzelnen Schaltflächen auf der Seite).
Der grundlegende Abschnitt mit dem gestapelten Menü ist jetzt fertig. Es gibt jedoch ein weiteres Grafikelement, das Sie hinzufügen können. Dazu müssen Sie mehrere gedrehte Rechtecke über der unteren rechten Ecke des großen Rechtecks hinzufügen, genauso wie beim Schiebemenü-Beispiel gedrehte Rechtecke verwendet wurden, um einen Schrägstreifeneffekt hinzuzufügen.
Um den Effekt eines bewegten Hintergrunds zu erstellen, können Sie mehrere große Rechtecke erstellen, die mit gekachelten Hintergrundbildern gefüllt sind, die die Länge einer langen Seite abdecken. In diesem Beispiel wird die Registerkarte „Bildlauf“ des Menüs „Fläche“ (anstelle der Registerkarte „Bewegung“ des Bildlaufeffekte-Bedienfelds) verwendet, um die Bewegungseinstellungen anzuwenden.
Führen Sie folgende Schritte aus, um einen ähnlichen Effekt eines bewegten Hintergrunds zu erzielen:
In diesem Beispiel ist es nicht von Bedeutung, ob Sie eine Farbe für die Browser-Füllung festlegen, da die Seite mit Rechtecken überlagert wird. Setzen Sie die Flächenfarbe der Seite auf „Ohne“.
In der Beispiel-Site ist das dritte Rechteck länger als die ersten beiden. Ziehen Sie die Griffe, um die Höhe des dritten kopierten Rechtecks zu vergrößern, oder erstellen Sie ein viertes Rechteck, um den übrigen Seitenbereich unten zu füllen.
In diesem Beispiel wird ein Balkendiagramm an der vorgegebenen Position animiert. Eine rosafarbene Pfeilgrafik dehnt sich nach oben aus und windet sich um die Balken des Diagramms. Obwohl die Balken im Diagramm vom unteren Rand des Diagramms größer zu werden scheinen, handelt es sich tatsächlich um einfarbige Rechtecke, auf die Bewegungsbildlaufeffekte angewendet wurden, die hinter größeren weißen Rechtecken hervorkommen (die in dem gleichen Weißton wie der Seitenhintergrund gefüllt sind).
In diesem Beispiel werden zusammen mit Bildlaufeffekten mehrere Techniken verwendet. Die Elemente werden mithilfe des Ebenenbedienfelds vor- und hintereinander angeordnet. Weiße Rechtecke werden über den Diagrammelementen gezeichnet. Wenn die weißen Rechtecke das Balkendiagramm abdecken, sind die Balken und der Pfeil nicht mehr sichtbar, so als wären sie maskiert. Für die Bewegungsbildlaufeffekte der weißen Rechtecke und der Diagrammtabelle wird die Einstellung „0“ verwendet, damit sie beim Seitenbildlauf an der vorgegebenen Position bleiben. Auf die Balken und die rosafarbene Pfeilgrafik, die darunter angeordnet sind, wurden Bewegungsbildlaufeffekte angewendet, sodass sie in den Vordergrund rücken und somit sichtbar werden, während das Balkendiagramm aufgebaut wird.
Führen Sie folgende Schritte aus, um einen ähnlichen Maskierungseffekt zu erzielen:
Sehen Sie sich die Demential Lab-Website an, um die Bildlaufeffekte-Funktion in Aktion zu erleben.
Bei Ihrem Konto anmelden